import { auth } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import Link from "next/link"
import { DashboardNav } from "@/components/ui/DashboardNav"
import { getCountiesForCommission, getCommissionDisplayName, getStageForCommission } from "@/lib/commissions"
import { EvaluatorEntryList } from "@/components/evaluator/EvaluatorEntryList"

export default async function EvaluatorDashboardPage() {
  const session = await auth()

  if (!session?.user) {
    redirect("/login")
  }

  if (session.user.role !== "EVALUATOR") {
    redirect("/dashboard")
  }

  const commission = session.user.commission
  const counties = await getCountiesForCommission(commission)
  const commissionStage = await getStageForCommission(commission)

  // Check if this evaluator is frozen
  const currentUser = await db.user.findUnique({
    where: { id: session.user.id },
    select: { evaluationsFrozen: true },
  })
  const isFrozen = currentUser?.evaluationsFrozen ?? false

  // Fetch all non-deleted entries matching commission's counties AND stage
  const allEntries = await db.entry.findMany({
    where: {
      deletedAt: null,
      stage: commissionStage,
      ...(counties.length > 0 ? { user: { county: { in: counties } } } : { id: "__none__" }),
    },
    include: {
      user: {
        select: {
          name: true,
          email: true,
          class: true,
          county: true,
        }
      },
      photos: true,
      evaluations: {
        where: { evaluatorId: session.user.id },
        select: {
          relevance: true,
          photoQuality: true,
          originality: true,
          documentation: true,
          gisIntegration: true,
          presentation: true,
          motivation: true,
          status: true,
        },
      },
    },
    orderBy: {
      createdAt: "desc",
    },
  })

  // Serialize dates for client component
  const serializedEntries = allEntries.map(e => ({
    ...e,
    createdAt: e.createdAt.toISOString(),
    updatedAt: e.updatedAt.toISOString(),
    photos: e.photos.map(p => ({ id: p.id, url: p.url, filename: p.filename })),
  }))

  const commissionDisplayName = await getCommissionDisplayName(commission)

  return (
    <main className="container" style={{ padding: "3rem 1rem", minHeight: "100vh" }}>
      {/* Header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "2rem", flexWrap: "wrap", gap: "1rem" }}>
        <div>
          <h1 style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>
            Panou Evaluator — Comisia {commissionDisplayName}
          </h1>
          <p style={{ color: "var(--text-muted)" }}>
            Bine ai venit, {session.user.name}. Aici poți vizualiza și evalua lucrările alocate comisiei tale.
          </p>
        </div>

        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
          <Link
            href="/"
            title="Pagina Principală"
            style={{
              padding: "0.65rem 0.85rem",
              borderRadius: "var(--radius-md)",
              background: "var(--surface-color)",
              border: "1px solid var(--border-color)",
              color: "var(--text-main)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              <polyline points="9 22 9 12 15 12 15 22" />
            </svg>
          </Link>
          <DashboardNav userName={session.user.name} userEmail={session.user.email} />
        </div>
      </div>

      {/* Commission Info */}
      <div style={{ marginBottom: "2rem", padding: "1rem 1.5rem", background: "var(--surface-color)", border: "1px solid var(--border-color)", borderLeft: "4px solid var(--primary)", borderRadius: "var(--radius-md)" }}>
        <p style={{ fontSize: "0.95rem", color: "var(--text-main)", margin: 0 }}>
          <strong>Județe alocate Comisiei {getCommissionDisplayName(commission)}:</strong>{" "}
          <span style={{ color: "var(--text-muted)" }}>
            {counties.length > 0 ? counties.join(", ") : "Niciun județ alocat"}
          </span>
        </p>
      </div>

      {/* Frozen Banner */}
      {isFrozen && (
        <div style={{
          padding: "1.25rem 1.5rem",
          borderRadius: "var(--radius-lg)",
          marginBottom: "1.5rem",
          background: "rgba(239, 68, 68, 0.08)",
          border: "1px solid var(--danger)",
          display: "flex",
          alignItems: "center",
          gap: "1rem",
        }}>
          <span style={{ fontSize: "2rem" }}>🔒</span>
          <div>
            <div style={{ fontWeight: 700, color: "var(--danger)" }}>
              Evaluările tale au fost înghețate
            </div>
            <div style={{ fontSize: "0.9rem", color: "var(--text-muted)", marginTop: "0.2rem" }}>
              Administratorul a blocat temporar posibilitatea de a crea sau modifica evaluări. Poți în continuare vizualiza lucrările.
            </div>
          </div>
        </div>
      )}

      {/* Client-side filterable entry list */}
      <EvaluatorEntryList entries={serializedEntries as any} frozen={isFrozen} />
    </main>
  )
}