import { auth } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import Link from "next/link"
import { revalidatePath } from "next/cache"
import { invalidateCommissionCache } from "@/lib/commissions"

export default async function AdminCommissionsPage() {
  const session = await auth()
  if (!session?.user || session.user.role !== "ADMIN") redirect("/")

  // Fetch all commissions
  const commissions = await db.commission.findMany({
    orderBy: { code: "asc" },
  })

  // Fetch all evaluators
  const evaluators = await db.user.findMany({
    where: { role: "EVALUATOR", deletedAt: null },
    select: { id: true, name: true, email: true, commission: true },
    orderBy: { name: "asc" },
  })

  // Group evaluators by commission code
  const evaluatorsByCommission: Record<string, typeof evaluators> = {}
  for (const ev of evaluators) {
    const key = ev.commission || "__unassigned__"
    if (!evaluatorsByCommission[key]) evaluatorsByCommission[key] = []
    evaluatorsByCommission[key].push(ev)
  }
  const unassignedEvaluators = evaluatorsByCommission["__unassigned__"] || []

  // ── Server Actions ──

  const createCommission = async (formData: FormData) => {
    "use server"
    const code = (formData.get("code") as string || "").trim().toUpperCase()
    const displayName = (formData.get("displayName") as string || "").trim()
    const countiesRaw = formData.get("counties") as string || ""
    const counties = countiesRaw.split(",").map(c => c.trim()).filter(Boolean)

    const stage = parseInt(formData.get("stage") as string || "1", 10)

    if (!code || !displayName) return

    const existing = await db.commission.findUnique({ where: { code } })
    if (existing) return

    await db.commission.create({
      data: { code, displayName, counties, stage },
    })

    invalidateCommissionCache()
    revalidatePath("/admin/commissions")
  }

  const updateCommission = async (formData: FormData) => {
    "use server"
    const id = formData.get("id") as string
    const displayName = (formData.get("displayName") as string || "").trim()
    const countiesRaw = formData.get("counties") as string || ""
    const counties = countiesRaw.split(",").map(c => c.trim()).filter(Boolean)

    const stage = parseInt(formData.get("stage") as string || "1", 10)

    if (!id || !displayName) return

    await db.commission.update({
      where: { id },
      data: { displayName, counties, stage },
    })

    invalidateCommissionCache()
    revalidatePath("/admin/commissions")
  }

  const deleteCommission = async (formData: FormData) => {
    "use server"
    const id = formData.get("id") as string
    if (!id) return

    // Unassign evaluators from this commission
    const comm = await db.commission.findUnique({ where: { id } })
    if (comm) {
      await db.user.updateMany({
        where: { commission: comm.code },
        data: { commission: null },
      })
    }

    await db.commission.delete({ where: { id } })

    invalidateCommissionCache()
    revalidatePath("/admin/commissions")
    revalidatePath("/admin/users")
  }

  const assignEvaluator = async (formData: FormData) => {
    "use server"
    const userId = formData.get("userId") as string
    const commissionCode = formData.get("commissionCode") as string
    if (!userId || !commissionCode) return

    await db.user.update({
      where: { id: userId },
      data: { commission: commissionCode },
    })

    invalidateCommissionCache()
    revalidatePath("/admin/commissions")
    revalidatePath("/admin/users")
  }

  const removeEvaluator = async (formData: FormData) => {
    "use server"
    const userId = formData.get("userId") as string
    if (!userId) return

    await db.user.update({
      where: { id: userId },
      data: { commission: null },
    })

    invalidateCommissionCache()
    revalidatePath("/admin/commissions")
    revalidatePath("/admin/users")
  }

  const cardStyle = {
    background: "var(--surface-color)",
    borderRadius: "var(--radius-lg)",
    border: "1px solid var(--border-color)",
    overflow: "hidden" as const,
    marginBottom: "1.5rem",
  }

  const headerStyle = {
    padding: "1.25rem 1.5rem",
    borderBottom: "1px solid var(--border-color)",
    display: "flex" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
    flexWrap: "wrap" as const,
    gap: "0.75rem",
  }

  const inputStyle = {
    padding: "0.5rem 0.75rem",
    borderRadius: "var(--radius-sm)",
    border: "1px solid var(--border-color)",
    background: "var(--surface-hover)",
    color: "var(--text-main)",
    fontSize: "0.85rem",
  }

  const btnPrimary = {
    padding: "0.5rem 1rem",
    background: "var(--primary)",
    color: "white",
    border: "none",
    borderRadius: "var(--radius-sm)",
    fontWeight: 600 as const,
    cursor: "pointer" as const,
    fontSize: "0.85rem",
  }

  const btnDanger = {
    ...btnPrimary,
    background: "var(--danger)",
    fontSize: "0.78rem",
    padding: "0.35rem 0.65rem",
  }

  const btnSuccess = {
    ...btnPrimary,
    background: "var(--success)",
    fontSize: "0.78rem",
    padding: "0.35rem 0.65rem",
  }

  return (
    <main className="container" style={{ padding: "3rem 1rem", minHeight: "100vh", maxWidth: "1000px" }}>
      {/* Breadcrumb */}
      <div style={{ marginBottom: "2rem", display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
        <Link href="/admin" style={{ color: "var(--text-muted)", textDecoration: "none" }}>Dashboard Admin</Link>
        <span style={{ color: "var(--text-muted)" }}>/</span>
        <span style={{ fontWeight: 600 }}>Comisii de evaluare</span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }}>
        <div>
          <h1 style={{ fontSize: "1.75rem", marginBottom: "0.25rem" }}>📋 Comisii de evaluare</h1>
          <p style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>
            Gestionează comisiile, județele alocate și evaluatorii asignați.
          </p>
        </div>
      </div>

      {/* ═══ Create New Commission ═══ */}
      <div style={cardStyle}>
        <div style={headerStyle}>
          <h2 style={{ fontSize: "1.1rem", fontWeight: 600, margin: 0 }}>➕ Adaugă comisie nouă</h2>
        </div>
        <form action={createCommission} style={{ padding: "1.25rem 1.5rem", display: "flex", gap: "0.75rem", flexWrap: "wrap", alignItems: "flex-end" }}>
          <div>
            <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Cod *</label>
            <input name="code" required placeholder="Ex: G" maxLength={10} style={{ ...inputStyle, width: "80px" }} />
          </div>
          <div>
            <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Nume afișat *</label>
            <input name="displayName" required placeholder="Ex: Finală" maxLength={50} style={{ ...inputStyle, width: "160px" }} />
          </div>
          <div style={{ flex: 1, minWidth: "250px" }}>
            <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>
              Județe (separate prin virgulă)
            </label>
            <input name="counties" placeholder="Ex: Alba, Brașov, Mureș" style={{ ...inputStyle, width: "100%" }} />
          </div>
          <div>
            <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Etapă</label>
            <select name="stage" style={{ ...inputStyle, width: "100px" }}>
              <option value="1">Etapa 1</option>
              <option value="2">Etapa 2</option>
            </select>
          </div>
          <button type="submit" style={btnPrimary}>Creează</button>
        </form>
      </div>

      {/* ═══ Existing Commissions ═══ */}
      {commissions.map((comm) => {
        const commEvaluators = evaluatorsByCommission[comm.code] || []

        return (
          <div key={comm.id} style={cardStyle}>
            {/* Commission header */}
            <div style={headerStyle}>
              <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: "36px", height: "36px", borderRadius: "50%",
                  background: "var(--primary-light)", color: "var(--primary)",
                  fontWeight: 700, fontSize: "1rem",
                }}>
                  {comm.code}
                </span>
                <div>
                  <h2 style={{ fontSize: "1.1rem", fontWeight: 600, margin: 0 }}>
                    Comisia {comm.displayName}
                  </h2>
                  <p style={{ fontSize: "0.78rem", color: "var(--text-muted)", margin: 0 }}>
                    {comm.counties.length} județe · {commEvaluators.length} evaluator{commEvaluators.length !== 1 ? "i" : ""} · <span style={{ fontWeight: 600, color: comm.stage === 2 ? "#d97706" : "var(--primary)" }}>Etapa {comm.stage}</span>
                  </p>
                </div>
              </div>
            </div>

            <div style={{ padding: "1.25rem 1.5rem" }}>
              {/* Edit form */}
              <details style={{ marginBottom: "1.25rem" }}>
                <summary style={{ cursor: "pointer", fontSize: "0.85rem", fontWeight: 600, color: "var(--primary)", marginBottom: "0.75rem" }}>
                  ✏️ Editează comisia
                </summary>
                <form action={updateCommission} style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap", alignItems: "flex-end", marginTop: "0.5rem", marginBottom: "0.75rem" }}>
                  <input type="hidden" name="id" value={comm.id} />
                  <div>
                    <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Nume afișat</label>
                    <input name="displayName" defaultValue={comm.displayName} required style={{ ...inputStyle, width: "160px" }} />
                  </div>
                  <div style={{ flex: 1, minWidth: "250px" }}>
                    <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Județe</label>
                    <input name="counties" defaultValue={comm.counties.join(", ")} style={{ ...inputStyle, width: "100%" }} />
                  </div>
                  <div>
                    <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Etapă</label>
                    <select name="stage" defaultValue={String(comm.stage)} style={{ ...inputStyle, width: "100px" }}>
                      <option value="1">Etapa 1</option>
                      <option value="2">Etapa 2</option>
                    </select>
                  </div>
                  <button type="submit" style={btnPrimary}>Salvează</button>
                </form>
                <form action={deleteCommission}>
                  <input type="hidden" name="id" value={comm.id} />
                  <button type="submit" style={btnDanger}>
                    🗑 Șterge comisia
                  </button>
                </form>
              </details>

              {/* Counties display */}
              <div style={{ marginBottom: "1.25rem" }}>
                <h3 style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--text-muted)", marginBottom: "0.5rem" }}>Județe alocate:</h3>
                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}>
                  {comm.counties.length > 0 ? comm.counties.map((county) => (
                    <span key={county} style={{
                      padding: "0.2rem 0.55rem", borderRadius: "999px", fontSize: "0.78rem",
                      background: "rgba(59, 130, 246, 0.1)", color: "#3b82f6", fontWeight: 500,
                    }}>
                      {county}
                    </span>
                  )) : (
                    <span style={{ color: "var(--text-muted)", fontSize: "0.85rem", fontStyle: "italic" }}>Niciun județ alocat</span>
                  )}
                </div>
              </div>

              {/* Evaluators assigned */}
              <div>
                <h3 style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--text-muted)", marginBottom: "0.5rem" }}>
                  Evaluatori asignați ({commEvaluators.length}):
                </h3>

                {commEvaluators.length > 0 ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "0.75rem" }}>
                    {commEvaluators.map((ev) => (
                      <div key={ev.id} style={{
                        display: "flex", alignItems: "center", justifyContent: "space-between",
                        padding: "0.5rem 0.75rem", background: "var(--surface-hover)",
                        borderRadius: "var(--radius-sm)", gap: "0.5rem",
                      }}>
                        <div>
                          <span style={{ fontWeight: 500, fontSize: "0.9rem" }}>{ev.name || "—"}</span>
                          <span style={{ color: "var(--text-muted)", fontSize: "0.8rem", marginLeft: "0.5rem" }}>{ev.email}</span>
                        </div>
                        <form action={removeEvaluator}>
                          <input type="hidden" name="userId" value={ev.id} />
                          <button type="submit" style={{
                            padding: "0.25rem 0.5rem", background: "rgba(239,68,68,0.1)",
                            color: "var(--danger)", border: "none", borderRadius: "var(--radius-sm)",
                            fontSize: "0.75rem", fontWeight: 600, cursor: "pointer",
                          }}>
                            ✕ Elimină
                          </button>
                        </form>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p style={{ color: "var(--text-muted)", fontSize: "0.85rem", fontStyle: "italic", marginBottom: "0.75rem" }}>
                    Niciun evaluator asignat încă.
                  </p>
                )}

                {/* Add evaluator */}
                {unassignedEvaluators.length > 0 && (
                  <form action={assignEvaluator} style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
                    <input type="hidden" name="commissionCode" value={comm.code} />
                    <select name="userId" required style={{ ...inputStyle, flex: 1 }}>
                      <option value="">— Selectează evaluator —</option>
                      {unassignedEvaluators.map((ev) => (
                        <option key={ev.id} value={ev.id}>
                          {ev.name || ev.email} ({ev.email})
                        </option>
                      ))}
                    </select>
                    <button type="submit" style={btnSuccess}>+ Adaugă</button>
                  </form>
                )}
              </div>
            </div>
          </div>
        )
      })}

      {commissions.length === 0 && (
        <div style={{
          textAlign: "center", padding: "3rem", color: "var(--text-muted)",
          background: "var(--surface-color)", borderRadius: "var(--radius-lg)",
          border: "1px solid var(--border-color)",
        }}>
          <p style={{ fontSize: "1.1rem", marginBottom: "0.5rem" }}>Nu există comisii încă.</p>
          <p style={{ fontSize: "0.9rem" }}>Folosiți formularul de mai sus pentru a crea prima comisie.</p>
        </div>
      )}
    </main>
  )
}