import Link from "next/link"
import { auth } from "@/lib/auth"
import { Partners } from "@/components/ui/Partners"
import rezultateDataRaw from "@/data/rezultate.json"

interface Rezultat {
  "Nr.Crt.": number
  "Elev": string
  "Distincție": string
  "Unitate de învățământ": string
  "Județ/Sector": string
}

const rezultateData = rezultateDataRaw as Rezultat[]

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

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      {/* Header NavBar */}
      <header style={{ borderBottom: "1px solid var(--border-color)", background: "var(--surface-color)", position: "sticky", top: 0, zIndex: 50 }}>
        <div className="container" style={{ padding: "1rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Link href="/" style={{ display: "flex", alignItems: "center", gap: "0.75rem", textDecoration: "none" }}>
            <img
              src="/rovibe/SiglaRoVIBE1.png"
              alt="Ro-VIBE Logo"
              style={{ height: "40px", width: "auto" }}
            />
            <span style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--primary)" }}>Ro-VIBE</span>
          </Link>

          <div style={{ display: "flex", gap: "1.5rem", alignItems: "center" }}>
            <Link href="/about" style={{ fontWeight: 500, color: "var(--text-main)", textDecoration: "none" }}>
              Despre
            </Link>
            <Link href="/rezultate" style={{ fontWeight: 600, color: "var(--primary)", textDecoration: "none" }}>
              Rezultate
            </Link>
            {session?.user ? (
              <>
                <Link href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"} style={{ fontWeight: 500, color: "var(--text-main)", textDecoration: "none" }}>
                  Dashboard
                </Link>
                <Link href="/api/auth/signout" style={{ padding: "0.5rem 1rem", background: "var(--surface-hover)", borderRadius: "var(--radius-md)", fontSize: "0.9rem", fontWeight: 500, textDecoration: "none", color: "var(--text-main)" }}>
                  Deconectare
                </Link>
              </>
            ) : (
              <>
                <Link href="/login" style={{ fontWeight: 500, color: "var(--text-main)", textDecoration: "none" }}>Autentificare</Link>
                <Link href="/register" style={{ padding: "0.5rem 1.25rem", background: "var(--primary)", color: "white", borderRadius: "var(--radius-md)", fontWeight: 500, textDecoration: "none" }}>Înregistrare</Link>
              </>
            )}
          </div>
        </div>
      </header>

      <main style={{ flex: 1, padding: "4rem 1rem" }}>
        <div className="container" style={{ maxWidth: "1000px" }}>
          <section className="animate-fade-in" style={{ marginBottom: "2rem" }}>
            <h1 style={{ fontSize: "2.5rem", lineHeight: 1.2, marginBottom: "1rem", color: "var(--text-main)", textAlign: "center" }}>
              Rezultate <span style={{ color: "var(--primary)" }}>Ro-VIBE 2026</span>
            </h1>
            <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: "1.1rem", marginBottom: "3rem" }}>
              Felicitări tuturor participanților la faza județeană/pe municipiul București!
            </p>

            <div style={{ background: "var(--surface-color)", border: "1px solid var(--border-color)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left", minWidth: "600px" }}>
                <thead>
                  <tr style={{ background: "var(--surface-hover)", borderBottom: "2px solid var(--border-color)" }}>
                    <th style={{ padding: "1rem", fontWeight: 600, color: "var(--text-main)", width: "80px" }}>Nr. Crt.</th>
                    <th style={{ padding: "1rem", fontWeight: 600, color: "var(--text-main)" }}>Elev</th>
                    <th style={{ padding: "1rem", fontWeight: 600, color: "var(--text-main)" }}>Distincție</th>
                    <th style={{ padding: "1rem", fontWeight: 600, color: "var(--text-main)" }}>Unitate de învățământ</th>
                    <th style={{ padding: "1rem", fontWeight: 600, color: "var(--text-main)" }}>Județ/Sector</th>
                  </tr>
                </thead>
                <tbody>
                  {rezultateData.map((row, idx) => (
                    <tr key={idx} style={{ borderBottom: "1px solid var(--border-color)", background: idx % 2 === 0 ? "transparent" : "rgba(0,0,0,0.02)" }}>
                      <td style={{ padding: "1rem", color: "var(--text-muted)", fontWeight: 500 }}>{row["Nr.Crt."]}</td>
                      <td style={{ padding: "1rem", color: "var(--text-main)", fontWeight: 600 }}>{row["Elev"]}</td>
                      <td style={{ padding: "1rem" }}>
                        <span style={{ 
                          padding: "0.25rem 0.75rem", 
                          borderRadius: "999px", 
                          fontSize: "0.85rem", 
                          fontWeight: 600,
                          background: row["Distincție"]?.toLowerCase().includes("premiul i ") || row["Distincție"] === "Premiul I" ? "rgba(234, 179, 8, 0.15)" :
                                      row["Distincție"]?.toLowerCase().includes("premiul ii ") || row["Distincție"] === "Premiul II" ? "rgba(148, 163, 184, 0.2)" :
                                      row["Distincție"]?.toLowerCase().includes("premiul iii ") || row["Distincție"] === "Premiul III" ? "rgba(180, 83, 9, 0.15)" :
                                      "rgba(79, 70, 229, 0.1)",
                          color: row["Distincție"]?.toLowerCase().includes("premiul i ") || row["Distincție"] === "Premiul I" ? "#ca8a04" :
                                 row["Distincție"]?.toLowerCase().includes("premiul ii ") || row["Distincție"] === "Premiul II" ? "#475569" :
                                 row["Distincție"]?.toLowerCase().includes("premiul iii ") || row["Distincție"] === "Premiul III" ? "#b45309" :
                                 "var(--primary)"
                        }}>
                          {row["Distincție"]}
                        </span>
                      </td>
                      <td style={{ padding: "1rem", color: "var(--text-main)" }}>{row["Unitate de învățământ"]}</td>
                      <td style={{ padding: "1rem", color: "var(--text-muted)" }}>{row["Județ/Sector"]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        </div>
      </main>

      {/* Footer */}
      <footer style={{ background: "var(--surface-color)", borderTop: "1px solid var(--border-color)", padding: "3rem 1rem", textAlign: "center", color: "var(--text-muted)", marginTop: "auto" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.75rem", marginBottom: "1rem" }}>
            <img
              src="/rovibe/SiglaRoVIBE1.png"
              alt="Ro-VIBE Logo"
              style={{ height: "32px", width: "auto" }}
            />
            <span style={{ fontSize: "1.25rem", fontWeight: 700, color: "var(--text-main)" }}>Ro-VIBE</span>
          </div>
          <p style={{ marginBottom: "1rem" }}>O experiență educațională prin ochii tinerilor.</p>
          <Partners />
          <p style={{ fontSize: "0.85rem" }}>&copy; {new Date().getFullYear()} Ro-VIBE. Toate drepturile rezervate.</p>
        </div>
      </footer>
    </div>
  )
}