import { useEffect, useState } from "react"
import { Activity, ArrowUpRight, Blocks, Database, Moon, RefreshCw, Server, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function App() {
  const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "light")
  const [api, setApi] = useState({ loading: true, ok: false, message: "Connexion en cours..." })

  useEffect(() => {
    document.documentElement.classList.toggle("dark", theme === "dark")
    localStorage.setItem("theme", theme)
  }, [theme])

  async function checkApi() {
    setApi({ loading: true, ok: false, message: "Vérification..." })
    try {
      const res = await fetch("/api/health/", { cache: "no-store" })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const body = await res.json()
      setApi({ loading: false, ok: body.status === "ok", message: body.message })
    } catch (error) {
      setApi({ loading: false, ok: false, message: error.message })
    }
  }

  useEffect(() => { checkApi() }, [])

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="border-b border-border bg-card/80">
        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-5">
          <div className="flex items-center gap-3">
            <div className="grid size-9 place-items-center rounded-xl bg-primary text-primary-foreground"><Blocks className="size-5" /></div>
            <span className="font-semibold tracking-tight">Mon Projet</span>
            <span className="hidden rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground sm:inline">Template</span>
          </div>
          <div className="flex items-center gap-2">
            <Button aria-label="Changer de thème" variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
              {theme === "dark" ? <Sun className="size-4" /> : <Moon className="size-4" />}
            </Button>
            <Button variant="outline" asChild><a href="/admin/">Administration <ArrowUpRight className="size-4" /></a></Button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl px-5 py-14">
        <div className="mb-10 max-w-2xl">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground">
            <span className="size-2 rounded-full bg-emerald-500"/> Django · React · MySQL
          </div>
          <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Ton nouveau projet commence ici.</h1>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">Une base propre avec Docker, API Django, React + Vite, composants shadcn et thème clair/sombre. Tu peux remplacer cette page par ton application.</p>
        </div>

        <div className="grid gap-5 md:grid-cols-3">
          <Card>
            <CardHeader><div className="mb-2 text-primary"><Server className="size-6"/></div><CardTitle>API Django</CardTitle><CardDescription>Endpoint de vérification : /api/health/</CardDescription></CardHeader>
            <CardContent>
              <div className="mb-4 flex items-center gap-2 text-sm"><span className={`size-2.5 rounded-full ${api.loading ? "bg-amber-500" : api.ok ? "bg-emerald-500" : "bg-red-500"}`}/>{api.loading ? "Connexion..." : api.ok ? "Connectée" : "Indisponible"}</div>
              <p className="mb-4 min-h-12 break-words text-sm text-muted-foreground">{api.message}</p>
              <Button variant="outline" onClick={checkApi}><RefreshCw className="size-4"/> Réessayer</Button>
            </CardContent>
          </Card>
          <Card>
            <CardHeader><div className="mb-2 text-primary"><Database className="size-6"/></div><CardTitle>MySQL</CardTitle><CardDescription>MySQL 8, volume persistant et Django ORM</CardDescription></CardHeader>
            <CardContent><p className="text-sm leading-relaxed text-muted-foreground">La connexion est définie dans <code>backend/core/settings.py</code> à partir des variables <code>MYSQL_*</code>.</p></CardContent>
          </Card>
          <Card>
            <CardHeader><div className="mb-2 text-primary"><Activity className="size-6"/></div><CardTitle>Frontend</CardTitle><CardDescription>React, Vite, Tailwind CSS v4 et shadcn/ui</CardDescription></CardHeader>
            <CardContent><p className="text-sm leading-relaxed text-muted-foreground">Composants de départ prêts à personnaliser dans <code>frontend/src/components/ui/</code>.</p></CardContent>
          </Card>
        </div>

        <div className="mt-10 rounded-xl border border-dashed border-border bg-card/60 p-6 text-sm text-muted-foreground">
          <strong className="text-foreground">Prochaine étape :</strong> crée ton application Django dans <code>backend/</code> et tes pages React dans <code>frontend/src/</code>.
        </div>
      </main>
    </div>
  )
}