import Link from "next/link"
import Map from "@/components/map/Map"
import { Partners } from "@/components/ui/Partners"
import { db } from "@/lib/db"
import { auth } from "@/lib/auth"

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

  const settings = await db.appSettings.findUnique({ where: { id: "GLOBAL_SETTINGS" } })
  const registrationsClosed = settings?.registrationsClosed ?? false

  // Aducem doar intrările aprobate pentru harta publică
  const approvedEntries = await db.entry.findMany({
    where: {
      status: "APPROVED"
    },
    include: {
      user: {
        select: { name: true }
      },
      photos: true
    }
  })

  // Prevent Leaflet Map Component Crash from NaN values
  const validApprovedEntries = approvedEntries.filter(e => 
    e.latitude != null && !Number.isNaN(e.latitude) && 
    e.longitude != null && !Number.isNaN(e.longitude)
  )

  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>
            {session?.user ? (
              <>
                <Link href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"} style={{ fontWeight: 500, color: "var(--text-main)" }}>
                  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 }}>
                  Deconectare
                </Link>
              </>
            ) : (
              <>
                <Link href="/login" style={{ fontWeight: 500, color: "var(--text-main)" }}>Autentificare</Link>
                {!registrationsClosed ? (
                  <Link href="/register" style={{ padding: "0.5rem 1.25rem", background: "var(--primary)", color: "white", borderRadius: "var(--radius-md)", fontWeight: 500 }}>Înregistrare</Link>
                ) : (
                  <span style={{ padding: "0.5rem 1.25rem", background: "var(--surface-color)", color: "var(--text-muted)", border: "1px solid var(--border-color)", borderRadius: "var(--radius-md)", fontWeight: 500, cursor: "not-allowed" }} title="Înregistrările sunt oprite">Înregistrare</span>
                )}
              </>
            )}
          </div>
        </div>
      </header>

      <main style={{ flex: 1 }}>
        {/* Hero Section */}
        <section style={{ padding: "5rem 1rem", textAlign: "center", background: "linear-gradient(to bottom, var(--surface-color), var(--bg-color))" }}>
          <div className="container" style={{ maxWidth: "800px" }}>
            <span style={{ display: "inline-block", padding: "0.5rem 1rem", background: "var(--primary-light)", color: "var(--primary)", borderRadius: "999px", fontSize: "0.85rem", fontWeight: 600, marginBottom: "1.5rem" }}>
              Concurs interjudețean multidisciplinar pentru liceeni
            </span>
            <h1 style={{ fontSize: "clamp(2.5rem, 5vw, 4rem)", marginBottom: "1.5rem", color: "var(--text-main)", lineHeight: 1.1 }}>
              Explorare virtuală a României
            </h1>
            <p style={{ fontSize: "1.25rem", color: "var(--text-muted)", marginBottom: "2.5rem", lineHeight: 1.6 }}>
              Aplicația Ro-VIBE transformă cercetarea elevilor într-o experiență digitală transdisciplinară autentică.
              Prin introducerea datelor descriptive și încărcarea imaginilor realizate pe teren,
              fiecare participant contribuie direct la construirea unei hărți interactive naționale.
            </p>

            {registrationsClosed && (
              <div style={{ marginBottom: "2.5rem", padding: "1rem", background: "var(--surface-color)", border: "1px solid var(--border-color)", borderLeft: "4px solid var(--primary)", borderRadius: "var(--radius-md)", fontWeight: 600, color: "var(--text-main)" }}>
                Ediția 2026 a intrat în faza de evaluare a contribuțiilor.
              </div>
            )}

            {!session?.user && (
              <div style={{ display: "flex", gap: "1rem", justifyContent: "center" }}>
                {!registrationsClosed ? (
                  <Link href="/register" style={{ padding: "1rem 2rem", background: "var(--primary)", color: "white", borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: "1.1rem" }}>
                    Alătură-te Proiectului
                  </Link>
                ) : (
                  <span style={{ padding: "1rem 2rem", background: "var(--surface-color)", color: "var(--text-muted)", border: "1px solid var(--border-color)", borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: "1.1rem", cursor: "not-allowed" }} title="Înregistrările sunt oprite">
                    Alătură-te Proiectului
                  </span>
                )}
                <a href="#harta" style={{ padding: "1rem 2rem", background: "var(--surface-color)", color: "var(--text-main)", border: "1px solid var(--border-color)", borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: "1.1rem" }}>
                  Explorează Harta
                </a>
              </div>
            )}
          </div>
        </section>

        {/* Interactive Map Section */}
        <section id="harta" style={{ padding: "4rem 1rem" }}>
          <div className="container">
            <div style={{ textAlign: "center", marginBottom: "3rem" }}>
              <h2 style={{ fontSize: "2.5rem", marginBottom: "1rem" }}>Descoperă România</h2>
              <p style={{ color: "var(--text-muted)", fontSize: "1.1rem", maxWidth: "600px", margin: "0 auto" }}>
                Explorarea virtuală interactivă a României, fără limite, prin ochii tinerilor
              </p>
              <p style={{ color: "var(--text-muted)", fontSize: "1.1rem", maxWidth: "600px", margin: "0 auto" }}>
                Romanian virtual interactive boundless exploration, by youth
              </p>
            </div>

            <Map entries={validApprovedEntries} />

            <div style={{ marginTop: "2rem", display: "flex", justifyContent: "center", gap: "2rem", color: "var(--text-muted)", fontSize: "0.95rem" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                <div style={{ width: "12px", height: "12px", borderRadius: "50%", background: "var(--primary)" }}></div>
                <span>{validApprovedEntries.length} Obiective Documentate</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                <div style={{ width: "12px", height: "12px", borderRadius: "50%", background: "var(--secondary)" }}></div>
                <span>Actualizată 24/7 de elevi</span>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer style={{ background: "var(--surface-color)", borderTop: "1px solid var(--border-color)", padding: "3rem 1rem", textAlign: "center", color: "var(--text-muted)" }}>
        <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>
  );
}
