"use client"

import { useState } from "react"
import styles from "@/app/admin/statistics/statistics.module.css"
import { getCommissionDisplayNameSync } from "@/lib/commissions-client"

/* ═══════════════════════════════════════════════
   Types
   ═══════════════════════════════════════════════ */

interface EntryRanking {
  entryId: string
  title: string
  subjectName: string
  studentName: string
  studentEmail: string
  county: string
  city: string
  className: string | null
  avgScore: number
  evalCount: number
  criteria: {
    relevance: number
    photoQuality: number
    originality: number
    documentation: number
    gisIntegration: number
    presentation: number
    motivation: number
  }
}

interface EvaluatorStat {
  id: string
  name: string
  email: string
  totalEvals: number
  finalEvals: number
  draftEvals: number
  avgScoreGiven: number
  frozen: boolean
}

interface StudentInfo {
  id: string
  name: string
  email: string
  county: string
  className: string | null
  entryCount: number
  evalCount: number
  bestStatus: "FINAL" | "DRAFT" | "NONE"
}

interface CriteriaAvg {
  relevance: number
  photoQuality: number
  originality: number
  documentation: number
  gisIntegration: number
  presentation: number
  motivation: number
}

interface CountyBreakdown {
  county: string
  totalEntries: number
  totalEvaluations: number
  evaluatedEntries: number
  totalStudents: number
  avgScore: number
  finalEvals: number
  completionRate: number
  topEntry: { title: string; studentName: string; avgScore: number } | null
}

interface CommissionData {
  commission: string
  counties: string[]
  stage: number
  totalEntries: number
  totalEvaluations: number
  avgScore: number
  rankings: EntryRanking[]
  evaluators: EvaluatorStat[]
  students: StudentInfo[]
  criteriaAvg: CriteriaAvg
  countyBreakdown: CountyBreakdown[]
}

interface GlobalStats {
  totalEvaluations: number
  totalEntries: number
  totalEvaluators: number
  avgScore: number
  completionRate: number
}

interface StatisticsDashboardProps {
  globalStats: GlobalStats
  commissions: CommissionData[]
}

/* ═══════════════════════════════════════════════
   Radar Chart (pure SVG)
   ═══════════════════════════════════════════════ */

const CRITERIA_LABELS: { key: keyof CriteriaAvg; label: string; max: number }[] = [
  { key: "relevance", label: "Relevanță", max: 15 },
  { key: "photoQuality", label: "Foto", max: 25 },
  { key: "originality", label: "Originalitate", max: 10 },
  { key: "documentation", label: "Documentare", max: 20 },
  { key: "gisIntegration", label: "GIS", max: 10 },
  { key: "presentation", label: "Prezentare", max: 10 },
  { key: "motivation", label: "Motivație", max: 10 },
]

function RadarChart({ criteria }: { criteria: CriteriaAvg }) {
  const cx = 190, cy = 190, r = 140
  const n = CRITERIA_LABELS.length
  const levels = [0.2, 0.4, 0.6, 0.8, 1.0]

  const getPoint = (index: number, value: number) => {
    const angle = (Math.PI * 2 * index) / n - Math.PI / 2
    const x = cx + r * value * Math.cos(angle)
    const y = cy + r * value * Math.sin(angle)
    return { x, y }
  }

  const dataPoints = CRITERIA_LABELS.map((c, i) => {
    const normalised = c.max > 0 ? criteria[c.key] / c.max : 0
    return getPoint(i, Math.min(normalised, 1))
  })

  const polygonPoints = dataPoints.map(p => `${p.x},${p.y}`).join(" ")

  return (
    <div className={styles.radarContainer}>
      <svg viewBox="0 0 380 380" className={styles.radarSvg}>
        {/* Grid levels */}
        {levels.map((lv, li) => (
          <polygon
            key={li}
            points={Array.from({ length: n }, (_, i) => {
              const p = getPoint(i, lv)
              return `${p.x},${p.y}`
            }).join(" ")}
            fill="none"
            stroke="var(--border-color)"
            strokeWidth={li === levels.length - 1 ? 1.5 : 0.8}
            opacity={0.6}
          />
        ))}

        {/* Axis lines */}
        {CRITERIA_LABELS.map((_, i) => {
          const p = getPoint(i, 1)
          return (
            <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y}
              stroke="var(--border-color)" strokeWidth={0.6} opacity={0.4} />
          )
        })}

        {/* Data polygon */}
        <polygon
          points={polygonPoints}
          fill="rgba(79, 70, 229, 0.15)"
          stroke="#4F46E5"
          strokeWidth={2.5}
        />

        {/* Data points */}
        {dataPoints.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={4}
            fill="#4F46E5" stroke="white" strokeWidth={2} />
        ))}

        {/* Labels */}
        {CRITERIA_LABELS.map((c, i) => {
          const p = getPoint(i, 1.22)
          return (
            <text key={i} x={p.x} y={p.y}
              textAnchor="middle" dominantBaseline="central"
              fontSize="11" fontWeight="600" fill="var(--text-muted)"
              fontFamily="var(--font-body)">
              {c.label}
            </text>
          )
        })}
      </svg>

      <div className={styles.radarLegend}>
        {CRITERIA_LABELS.map(c => (
          <div key={c.key} className={styles.radarLegendItem}>
            <span className={styles.radarLegendDot} style={{ background: "#4F46E5" }} />
            {c.label}: <strong>{criteria[c.key].toFixed(1)}</strong>/{c.max}
          </div>
        ))}
      </div>
    </div>
  )
}

/* ═══════════════════════════════════════════════
   Score bar helper
   ═══════════════════════════════════════════════ */

function ScoreBar({ score, max = 100 }: { score: number; max?: number }) {
  const pct = max > 0 ? (score / max) * 100 : 0
  const cls = pct >= 70 ? styles.scoreBarFillHigh
    : pct >= 40 ? styles.scoreBarFillMid
    : styles.scoreBarFillLow

  return (
    <div className={styles.scoreBar}>
      <div className={styles.scoreBarTrack}>
        <div className={`${styles.scoreBarFill} ${cls}`} style={{ width: `${pct}%` }} />
      </div>
      <span className={styles.scoreValue}>{score.toFixed(1)}</span>
    </div>
  )
}

/* ═══════════════════════════════════════════════
   Main Dashboard Component
   ═══════════════════════════════════════════════ */

export function StatisticsDashboard({ globalStats, commissions }: StatisticsDashboardProps) {
  const [activeTab, setActiveTab] = useState(commissions[0]?.commission || "A")
  const [expandedEntry, setExpandedEntry] = useState<string | null>(null)

  const activeCommission = commissions.find(c => c.commission === activeTab)

  return (
    <div>
      {/* ── Global KPI Cards ─────────────────── */}
      <div className={styles.kpiGrid}>
        <div className={styles.kpiCard}>
          <div className={styles.kpiLabel}>Total Evaluări</div>
          <div className={styles.kpiValue}>{globalStats.totalEvaluations}</div>
        </div>
        <div className={styles.kpiCard}>
          <div className={styles.kpiLabel}>Contribuții Evaluate</div>
          <div className={styles.kpiValue}>
            {globalStats.totalEntries}
          </div>
        </div>
        <div className={styles.kpiCard}>
          <div className={styles.kpiLabel}>Evaluatori Activi</div>
          <div className={styles.kpiValue}>{globalStats.totalEvaluators}</div>
        </div>
        <div className={styles.kpiCard}>
          <div className={styles.kpiLabel}>Punctaj Mediu</div>
          <div className={styles.kpiValue}>
            {globalStats.avgScore.toFixed(1)}
            <span className={styles.kpiSub}>/100</span>
          </div>
        </div>
        <div className={styles.kpiCard}>
          <div className={styles.kpiLabel}>Completare</div>
          <div className={styles.kpiValue}>
            {globalStats.completionRate.toFixed(0)}
            <span className={styles.kpiSub}>%</span>
          </div>
        </div>
      </div>

      {/* ── Commission Tabs ──────────────────── */}
      <div className={styles.tabBar}>
        {commissions.map(c => (
          <button
            key={c.commission}
            className={`${styles.tab} ${activeTab === c.commission ? styles.tabActive : ""}`}
            onClick={() => setActiveTab(c.commission)}
          >
            Comisia {getCommissionDisplayNameSync(c.commission)}
            <span style={{ fontSize: "0.7rem", opacity: 0.7, marginLeft: "0.25rem" }}>(Et.{c.stage})</span>
            <span className={styles.tabBadge}>{c.totalEntries}</span>
          </button>
        ))}
      </div>

      {/* ── Active Commission Panel ──────────── */}
      {activeCommission && (
        <div className={styles.commissionPanel} key={activeCommission.commission}>
          {/* Commission Header */}
          <div className={styles.commissionHeader}>
            <div className={styles.commissionIcon}>{activeCommission.commission}</div>
            <div className={styles.commissionMeta}>
              <div className={styles.commissionName}>
                Comisia {getCommissionDisplayNameSync(activeCommission.commission)}
                <span style={{
                  display: "inline-block", marginLeft: "0.75rem",
                  padding: "0.15rem 0.5rem", borderRadius: "999px",
                  fontSize: "0.75rem", fontWeight: 600,
                  background: activeCommission.stage === 2 ? "rgba(217, 119, 6, 0.15)" : "rgba(59, 130, 246, 0.15)",
                  color: activeCommission.stage === 2 ? "#d97706" : "#3b82f6",
                }}>Etapa {activeCommission.stage}</span>
              </div>
              <div className={styles.commissionCounties}>
                {activeCommission.counties.length > 0
                  ? activeCommission.counties.join(", ")
                  : "Niciun județ alocat"}
              </div>
            </div>
            <div className={styles.commissionQuickStats}>
              <div className={styles.quickStat}>
                <div className={styles.quickStatValue}>{activeCommission.totalEntries}</div>
                <div className={styles.quickStatLabel}>Contribuții</div>
              </div>
              <div className={styles.quickStat}>
                <div className={styles.quickStatValue}>{activeCommission.totalEvaluations}</div>
                <div className={styles.quickStatLabel}>Evaluări</div>
              </div>
              <div className={styles.quickStat}>
                <div className={styles.quickStatValue}>{activeCommission.avgScore.toFixed(1)}</div>
                <div className={styles.quickStatLabel}>Medie</div>
              </div>
            </div>
          </div>

          {/* Two-column layout: Ranking + Radar */}
          <div className={styles.twoCol}>
            {/* Left: Ranking */}
            <div className={styles.section}>
              <h3 className={styles.sectionTitle}>
                <span className={styles.sectionIcon}>🏆</span>
                Clasament Contribuții
              </h3>
              {activeCommission.rankings.length === 0 ? (
                <div className={styles.emptyState}>
                  <div className={styles.emptyIcon}>📋</div>
                  <p>Nicio evaluare înregistrată încă.</p>
                </div>
              ) : (
                <table className={styles.rankTable}>
                  <thead>
                    <tr>
                      <th style={{ width: "3rem" }}>#</th>
                      <th>Contribuție</th>
                      <th>Elev</th>
                      <th>Județ</th>
                      <th style={{ width: "12rem" }}>Punctaj</th>
                      <th style={{ width: "3rem" }}>Ev.</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {activeCommission.rankings.map((entry, idx) => (
                      <>
                        <tr key={entry.entryId}>
                          <td>
                            <span className={`${styles.rankBadge} ${
                              idx === 0 ? styles.rankGold
                                : idx === 1 ? styles.rankSilver
                                : idx === 2 ? styles.rankBronze
                                : styles.rankDefault
                            }`}>
                              {idx + 1}
                            </span>
                          </td>
                          <td>
                            <div style={{ fontWeight: 600 }}>{entry.title}</div>
                            <div style={{ fontSize: "0.78rem", color: "var(--text-muted)" }}>{entry.subjectName}</div>
                          </td>
                          <td>
                            <div style={{ fontWeight: 500 }}>{entry.studentName}</div>
                            <div style={{ fontSize: "0.78rem", color: "var(--text-muted)" }}>Cls. {entry.className || "—"}</div>
                          </td>
                          <td style={{ fontSize: "0.85rem", color: "var(--text-muted)" }}>
                            {entry.county}
                          </td>
                          <td>
                            <ScoreBar score={entry.avgScore} />
                          </td>
                          <td style={{ textAlign: "center", fontWeight: 600, color: "var(--text-muted)" }}>
                            {entry.evalCount}
                          </td>
                          <td>
                            <button
                              className={styles.detailToggle}
                              onClick={() => setExpandedEntry(
                                expandedEntry === entry.entryId ? null : entry.entryId
                              )}
                            >
                              {expandedEntry === entry.entryId ? "▲" : "▼"}
                            </button>
                          </td>
                        </tr>
                        {expandedEntry === entry.entryId && (
                          <tr key={`${entry.entryId}-detail`} className={styles.detailRow}>
                            <td colSpan={7}>
                              <div className={styles.criteriaGrid}>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Relevanță</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.relevance.toFixed(1)}/15</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Calitate foto</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.photoQuality.toFixed(1)}/25</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Originalitate</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.originality.toFixed(1)}/10</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Documentare</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.documentation.toFixed(1)}/20</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Integrare GIS</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.gisIntegration.toFixed(1)}/10</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Prezentare</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.presentation.toFixed(1)}/10</span>
                                </div>
                                <div className={styles.criteriaItem}>
                                  <span className={styles.criteriaLabel}>Motivație</span>
                                  <span className={styles.criteriaValue}>{entry.criteria.motivation.toFixed(1)}/10</span>
                                </div>
                              </div>
                            </td>
                          </tr>
                        )}
                      </>
                    ))}
                  </tbody>
                </table>
              )}
            </div>

            {/* Right: Radar Chart */}
            <div className={styles.section}>
              <h3 className={styles.sectionTitle}>
                <span className={styles.sectionIcon}>📊</span>
                Distribuție Criterii (medii)
              </h3>
              {activeCommission.totalEvaluations === 0 ? (
                <div className={styles.emptyState}>
                  <div className={styles.emptyIcon}>📊</div>
                  <p>Nicio evaluare disponibilă.</p>
                </div>
              ) : (
                <RadarChart criteria={activeCommission.criteriaAvg} />
              )}
            </div>
          </div>

          {/* Evaluator Performance */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <span className={styles.sectionIcon}>👤</span>
              Performanță Evaluatori
            </h3>
            {activeCommission.evaluators.length === 0 ? (
              <div className={styles.emptyState}>
                <div className={styles.emptyIcon}>👤</div>
                <p>Niciun evaluator în această comisie.</p>
              </div>
            ) : (
              <div className={styles.evaluatorGrid}>
                {activeCommission.evaluators.map(ev => (
                  <div key={ev.id} className={styles.evaluatorCard}>
                    <div className={styles.evaluatorCardHeader}>
                      <div className={styles.evaluatorAvatar}>
                        {(ev.name || "?").charAt(0).toUpperCase()}
                      </div>
                      <div>
                        <div className={styles.evaluatorName}>
                          {ev.name}
                          {ev.frozen && (
                            <span title="Evaluări înghețate" style={{ marginLeft: "0.4rem" }}>🔒</span>
                          )}
                        </div>
                        <div className={styles.evaluatorEmail}>{ev.email}</div>
                      </div>
                    </div>

                    <div className={styles.evaluatorStats}>
                      <div className={styles.evaluatorStat}>
                        <div className={styles.evaluatorStatValue}>{ev.totalEvals}</div>
                        <div className={styles.evaluatorStatLabel}>Evaluări</div>
                      </div>
                      <div className={styles.evaluatorStat}>
                        <div className={styles.evaluatorStatValue} style={{ color: "var(--success)" }}>
                          {ev.finalEvals}
                        </div>
                        <div className={styles.evaluatorStatLabel}>Final</div>
                      </div>
                      <div className={styles.evaluatorStat}>
                        <div className={styles.evaluatorStatValue}>
                          {ev.totalEvals > 0 ? ev.avgScoreGiven.toFixed(1) : "—"}
                        </div>
                        <div className={styles.evaluatorStatLabel}>Medie</div>
                      </div>
                    </div>

                    <div className={styles.evaluatorProgress}>
                      <div className={styles.evaluatorProgressHeader}>
                        <span>Progres evaluare</span>
                        <span>
                          {ev.totalEvals}/{activeCommission.totalEntries}
                        </span>
                      </div>
                      <div className={styles.progressTrack}>
                        <div
                          className={styles.progressFill}
                          style={{
                            width: `${activeCommission.totalEntries > 0
                              ? Math.min((ev.totalEvals / activeCommission.totalEntries) * 100, 100)
                              : 0}%`
                          }}
                        />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* County / Sector Breakdown */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <span className={styles.sectionIcon}>📍</span>
              Detaliere pe Județ / Sector
            </h3>
            {activeCommission.countyBreakdown.length === 0 ? (
              <div className={styles.emptyState}>
                <div className={styles.emptyIcon}>📍</div>
                <p>Niciun județ alocat acestei comisii.</p>
              </div>
            ) : (
              <div className={styles.countyGrid}>
                {activeCommission.countyBreakdown.map(cb => (
                  <div key={cb.county} className={styles.countyCard}>
                    <div className={styles.countyCardHeader}>
                      <div className={styles.countyName}>{cb.county}</div>
                      <div className={styles.countyCompletion}>
                        <span className={`${styles.badge} ${
                          cb.completionRate >= 100 ? styles.badgeFinal
                            : cb.completionRate > 0 ? styles.badgeDraft
                            : styles.badgeNone
                        }`}>
                          {cb.completionRate.toFixed(0)}% evaluat
                        </span>
                      </div>
                    </div>

                    <div className={styles.countyStatsRow}>
                      <div className={styles.countyStat}>
                        <div className={styles.countyStatValue}>{cb.totalStudents}</div>
                        <div className={styles.countyStatLabel}>Elevi</div>
                      </div>
                      <div className={styles.countyStat}>
                        <div className={styles.countyStatValue}>{cb.totalEntries}</div>
                        <div className={styles.countyStatLabel}>Contribuții</div>
                      </div>
                      <div className={styles.countyStat}>
                        <div className={styles.countyStatValue}>{cb.totalEvaluations}</div>
                        <div className={styles.countyStatLabel}>Evaluări</div>
                      </div>
                      <div className={styles.countyStat}>
                        <div className={styles.countyStatValue} style={{ color: "var(--success)" }}>
                          {cb.finalEvals}
                        </div>
                        <div className={styles.countyStatLabel}>Finale</div>
                      </div>
                    </div>

                    {cb.avgScore > 0 && (
                      <div className={styles.countyAvgRow}>
                        <span className={styles.countyAvgLabel}>Punctaj mediu</span>
                        <div style={{ flex: 1 }}>
                          <ScoreBar score={cb.avgScore} />
                        </div>
                      </div>
                    )}

                    {cb.topEntry && (
                      <div className={styles.countyTopEntry}>
                        <span className={styles.countyTopIcon}>🏅</span>
                        <div>
                          <div className={styles.countyTopTitle}>{cb.topEntry.title}</div>
                          <div className={styles.countyTopMeta}>
                            {cb.topEntry.studentName} — {cb.topEntry.avgScore.toFixed(1)} pct.
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Students in zone */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <span className={styles.sectionIcon}>📋</span>
              Elevi Participanți
            </h3>
            {activeCommission.students.length === 0 ? (
              <div className={styles.emptyState}>
                <div className={styles.emptyIcon}>🎓</div>
                <p>Niciun elev înscris în zona acestei comisii.</p>
              </div>
            ) : (
              <table className={styles.studentTable}>
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Elev</th>
                    <th>Județ</th>
                    <th>Clasă</th>
                    <th>Contribuții</th>
                    <th>Evaluări</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {activeCommission.students.map((st, idx) => (
                    <tr key={st.id}>
                      <td style={{ fontWeight: 600, color: "var(--text-muted)" }}>{idx + 1}</td>
                      <td>
                        <div style={{ fontWeight: 500 }}>{st.name}</div>
                        <div style={{ fontSize: "0.78rem", color: "var(--text-muted)" }}>{st.email}</div>
                      </td>
                      <td style={{ color: "var(--text-muted)", fontSize: "0.88rem" }}>{st.county}</td>
                      <td style={{ textAlign: "center" }}>{st.className || "—"}</td>
                      <td style={{ textAlign: "center", fontWeight: 600 }}>{st.entryCount}</td>
                      <td style={{ textAlign: "center", fontWeight: 600 }}>{st.evalCount}</td>
                      <td>
                        <span className={`${styles.badge} ${
                          st.bestStatus === "FINAL" ? styles.badgeFinal
                            : st.bestStatus === "DRAFT" ? styles.badgeDraft
                            : styles.badgeNone
                        }`}>
                          {st.bestStatus === "FINAL" ? "Evaluat"
                            : st.bestStatus === "DRAFT" ? "Draft"
                            : "Neevaluat"}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      )}
    </div>
  )
}