"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { toggleEvaluatorFreeze } from "@/app/admin/actions"
import { getCommissionDisplayNameSync } from "@/lib/commissions-client"

type EvaluatorInfo = {
  id: string
  name: string | null
  email: string | null
  commission: string | null
  evaluationsFrozen: boolean
  _count: { evaluations: number }
}

export function EvaluatorFreezePanel({ evaluators }: { evaluators: EvaluatorInfo[] }) {
  const router = useRouter()
  const [loadingId, setLoadingId] = useState<string | null>(null)

  const handleToggle = async (evaluatorId: string) => {
    setLoadingId(evaluatorId)
    try {
      await toggleEvaluatorFreeze(evaluatorId)
      router.refresh()
    } catch (err) {
      alert("Eroare: " + (err instanceof Error ? err.message : "Eroare necunoscută"))
    } finally {
      setLoadingId(null)
    }
  }

  if (evaluators.length === 0) return null

  const frozenCount = evaluators.filter(e => e.evaluationsFrozen).length

  return (
    <div style={{
      background: "var(--surface-color)",
      borderRadius: "var(--radius-lg)",
      border: "1px solid var(--border-color)",
      overflow: "hidden",
      marginBottom: "2rem",
    }}>
      {/* Header */}
      <div style={{
        padding: "1.25rem 1.5rem",
        borderBottom: "1px solid var(--border-color)",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        flexWrap: "wrap",
        gap: "0.75rem",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
          <h2 style={{ fontSize: "1.15rem", fontWeight: 600, margin: 0 }}>
            🧊 Înghețare Evaluatori
          </h2>
          {frozenCount > 0 && (
            <span style={{
              fontSize: "0.78rem",
              padding: "0.2rem 0.6rem",
              borderRadius: "999px",
              background: "rgba(239, 68, 68, 0.1)",
              color: "var(--danger)",
              fontWeight: 600,
            }}>
              {frozenCount} înghețat{frozenCount !== 1 ? "ți" : ""}
            </span>
          )}
        </div>
        <p style={{ fontSize: "0.85rem", color: "var(--text-muted)", margin: 0 }}>
          Blochează/deblochează posibilitatea evaluatorilor de a crea sau modifica evaluări.
        </p>
      </div>

      {/* Evaluator rows */}
      <div style={{ overflowX: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
          <thead>
            <tr style={{ background: "var(--surface-hover)" }}>
              <th style={{ padding: "0.75rem 1.5rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>Evaluator</th>
              <th style={{ padding: "0.75rem 1rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", textAlign: "center" }}>Comisie</th>
              <th style={{ padding: "0.75rem 1rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", textAlign: "center" }}>Evaluări</th>
              <th style={{ padding: "0.75rem 1rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", textAlign: "center" }}>Status</th>
              <th style={{ padding: "0.75rem 1.5rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", textAlign: "right" }}>Acțiune</th>
            </tr>
          </thead>
          <tbody>
            {evaluators.map(ev => {
              const isLoading = loadingId === ev.id
              return (
                <tr key={ev.id} style={{
                  borderBottom: "1px solid var(--border-color)",
                  background: ev.evaluationsFrozen ? "rgba(239, 68, 68, 0.03)" : "transparent",
                }}>
                  <td style={{ padding: "0.85rem 1.5rem" }}>
                    <div style={{ fontWeight: 500, color: "var(--text-main)" }}>{ev.name || "—"}</div>
                    <div style={{ fontSize: "0.78rem", color: "var(--text-muted)" }}>{ev.email}</div>
                  </td>
                  <td style={{ padding: "0.85rem 1rem", textAlign: "center" }}>
                    <span style={{
                      fontSize: "0.82rem",
                      padding: "0.2rem 0.6rem",
                      borderRadius: "999px",
                      background: "rgba(79, 70, 229, 0.08)",
                      color: "var(--primary)",
                      fontWeight: 700,
                    }}>
                      {getCommissionDisplayNameSync(ev.commission)}
                    </span>
                  </td>
                  <td style={{ padding: "0.85rem 1rem", textAlign: "center", fontWeight: 600, color: "var(--text-main)" }}>
                    {ev._count.evaluations}
                  </td>
                  <td style={{ padding: "0.85rem 1rem", textAlign: "center" }}>
                    <span style={{
                      fontSize: "0.78rem",
                      padding: "0.25rem 0.65rem",
                      borderRadius: "999px",
                      background: ev.evaluationsFrozen ? "rgba(239, 68, 68, 0.1)" : "rgba(16, 185, 129, 0.1)",
                      color: ev.evaluationsFrozen ? "var(--danger)" : "var(--success)",
                      fontWeight: 600,
                    }}>
                      {ev.evaluationsFrozen ? "🔒 Înghețat" : "✓ Activ"}
                    </span>
                  </td>
                  <td style={{ padding: "0.85rem 1.5rem", textAlign: "right" }}>
                    <button
                      onClick={() => handleToggle(ev.id)}
                      disabled={isLoading}
                      style={{
                        padding: "0.45rem 1rem",
                        borderRadius: "var(--radius-md)",
                        border: "none",
                        background: ev.evaluationsFrozen ? "var(--success)" : "var(--danger)",
                        color: "white",
                        fontSize: "0.82rem",
                        fontWeight: 600,
                        cursor: isLoading ? "wait" : "pointer",
                        opacity: isLoading ? 0.6 : 1,
                        transition: "opacity 0.15s",
                      }}
                    >
                      {isLoading
                        ? "Se procesează…"
                        : ev.evaluationsFrozen
                          ? "🔓 Deblochează"
                          : "🔒 Înghează"}
                    </button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}