import { Users } from "lucide-react";
import { createTeam, deleteTeam } from "@/actions/admin-teams";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type TeamRow = {
  id: bigint;
  rankName: string;
  badge: string | null;
  jobDescription: string | null;
  staffColor: string;
  hiddenRank: boolean;
};

export default async function AdminTeams() {
  let teams: TeamRow[] = [];
  try {
    teams = await prisma.websiteTeams.findMany({
      select: {
        id: true,
        rankName: true,
        badge: true,
        jobDescription: true,
        staffColor: true,
        hiddenRank: true,
      },
      orderBy: { id: "asc" },
    });
  } catch {
    teams = [];
  }

  const hidden = teams.filter((t) => t.hiddenRank).length;

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Users size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Teams</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Staff rank definitions shown on the public team page.</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Team ranks" value={teams.length} icon="🛡️" />
        <StatusCard
          label="Visible"
          value={teams.length - hidden}
          state={teams.length - hidden > 0 ? "ok" : "neutral"}
          icon="👁️"
        />
        <StatusCard label="Hidden" value={hidden} icon="🙈" />
      </div>

      <div className="admin-card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>New team rank</h3>
        <form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
          <div className="grid cols-2">
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm text-gray-500 dark:text-gray-400">Rank name</span>
              <input name="rankName" placeholder="e.g. Moderator" required />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm text-gray-500 dark:text-gray-400">Badge code</span>
              <input name="badge" placeholder="e.g. ADM" />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm text-gray-500 dark:text-gray-400">Job description</span>
              <input name="jobDescription" placeholder="Short description" />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm text-gray-500 dark:text-gray-400">Staff color</span>
              <input name="staffColor" defaultValue="#327fa8" placeholder="#327fa8" />
            </label>
          </div>
          <label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
            <input type="checkbox" name="hiddenRank" style={{ width: "auto" }} />
            <span className="text-sm text-gray-500 dark:text-gray-400">Hidden rank</span>
          </label>
          <div>
            <button type="submit" className="btn btn-primary">
              Create team
            </button>
          </div>
        </form>
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">Ranks ({teams.length})</h2>
        {teams.length === 0 ? (
          <div className="admin-empty">No teams yet.</div>
        ) : (
          <div className="overflow-x-auto">
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Rank name</th>
                  <th>Badge</th>
                  <th>Job description</th>
                  <th>Color</th>
                  <th>Visibility</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {teams.map((t) => (
                  <tr key={String(t.id)}>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(t.id)}</td>
                    <td>{t.rankName}</td>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.badge ?? "—"}</td>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.jobDescription ?? "—"}</td>
                    <td>
                      <span
                        style={{
                          display: "inline-flex",
                          alignItems: "center",
                          gap: "0.4rem",
                        }}
                      >
                        <span
                          aria-hidden
                          style={{
                            width: 14,
                            height: 14,
                            borderRadius: 4,
                            border: "1px solid var(--border-color)",
                            background: t.staffColor,
                          }}
                        />
                        {t.staffColor}
                      </span>
                    </td>
                    <td>
                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
                        {t.hiddenRank ? "hidden" : "visible"}
                      </span>
                    </td>
                    <td>
                      <form action={deleteTeam}>
                        <input type="hidden" name="id" value={String(t.id)} />
                        <button type="submit" className="btn btn-danger">
                          Delete
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}