import { Activity, AlertTriangle, ChevronRight, CircleDollarSign, Cloud, Download, Gauge, Users } from "lucide-react";
import { Metric } from "@/components/metric";
import { SosShell } from "@/components/sos-shell";
import { StatusLine } from "@/components/status-line";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { PoleBadge } from "@/components/pole-badge";
import { people, poles, projects } from "@/lib/demo-data";

export default function Home() {
  return (
    <SosShell
      title="Vue Agence"
      subtitle="Console de pilotage pour suivre la charge, la capacite, les risques projet et les ecarts entre objectif, prevu et realise."
      actions={
        <>
          <Button variant="secondary">
            <Cloud className="h-4 w-4" />
            Sync Google Sheets
          </Button>
          <Button variant="secondary">
            <Download className="h-4 w-4" />
            Export PDF
          </Button>
          <Button>
            <ChevronRight className="h-4 w-4" />
            Revue hebdo
          </Button>
        </>
      }
    >
      <section className="grid w-full gap-3 px-3 py-4 md:grid-cols-2 xl:grid-cols-4 lg:px-5">
        <Metric icon={Gauge} label="Charge planifiee" value="78%" helper="+6 j vs capacite" />
        <Metric icon={Users} label="Capacite disponible" value="111 j" helper="Semaine 42" />
        <Metric icon={CircleDollarSign} label="A facturer" value="126 kEUR" helper="18 kEUR en retard" />
        <Metric icon={AlertTriangle} label="Projets a risque" value="4" helper="Charge, budget, planning" />
      </section>

      <section className="grid w-full gap-5 px-3 pb-6 lg:grid-cols-[1.4fr_0.9fr] lg:px-5">
        <div className="space-y-5">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h2 className="text-base font-semibold">Charge par pole</h2>
                  <p className="mt-1 text-sm text-muted-foreground">Previsionnel consolide sur la semaine active</p>
                </div>
                <Badge tone="blue">Zoom semaine</Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              {poles.map((pole) => (
                <div key={pole.name} className="grid gap-2 sm:grid-cols-[1fr_150px_130px_72px] sm:items-center">
                  <div>
                    <div className="flex items-center justify-between gap-3">
                      <span className="text-sm font-medium">{pole.name}</span>
                      <span className="text-sm text-muted-foreground sm:hidden">{pole.load}%</span>
                    </div>
                    <div className="mt-2 h-2 rounded-sm bg-muted">
                      <div className="h-2 rounded-sm bg-primary" style={{ width: `${Math.min(pole.load, 100)}%` }} />
                    </div>
                  </div>
                  <div className="hidden sm:block">
                    <PoleBadge pole={pole.name} />
                  </div>
                  <div className="text-sm text-muted-foreground">{pole.capacity} disponibles</div>
                  <Badge tone={pole.delta.startsWith("+") ? "orange" : "green"}>{pole.delta}</Badge>
                </div>
              ))}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <div className="flex items-center gap-2">
                <Activity className="h-4 w-4 text-primary" />
                <h2 className="text-base font-semibold">Portefeuille projets</h2>
              </div>
            </CardHeader>
            <CardContent className="overflow-x-auto p-0">
              <table className="w-full min-w-[760px] border-collapse text-sm">
                <thead className="bg-muted text-left text-xs uppercase text-muted-foreground">
                  <tr>
                    <th className="px-4 py-3 font-medium">Projet</th>
                    <th className="px-4 py-3 font-medium">Chef de projet</th>
                    <th className="px-4 py-3 font-medium">Budget</th>
                    <th className="px-4 py-3 font-medium">Avancement</th>
                    <th className="px-4 py-3 font-medium">Risque projet</th>
                  </tr>
                </thead>
                <tbody>
                  {projects.slice(0, 3).map((project) => (
                    <tr key={project.id} className="border-t border-border">
                      <td className="px-4 py-3">
                        <div className="font-medium">{project.name}</div>
                        <div className="text-muted-foreground">{project.client}</div>
                      </td>
                      <td className="px-4 py-3">{project.manager}</td>
                      <td className="px-4 py-3">{project.budget}</td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-2">
                          <div className="h-2 w-24 rounded-sm bg-muted">
                            <div className="h-2 rounded-sm bg-primary" style={{ width: `${project.progress}%` }} />
                          </div>
                          {project.progress}%
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <Badge tone={project.riskTone ?? project.tone}>{project.riskLabel ?? project.temperature}</Badge>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-5">
          <Card>
            <CardHeader>
              <h2 className="text-base font-semibold">Presence & conges</h2>
            </CardHeader>
            <CardContent className="space-y-3">
              <StatusLine label="Source Google Sheets" value="Synchronisee" tone="green" />
              <StatusLine label="Codes normalises" value="PRESENT / REMOTE / OFF" tone="blue" />
              <StatusLine label="Absences semaine" value="8,5 j" tone="yellow" />
              <StatusLine label="Jours non travailles" value="Temps partiels actifs" tone="neutral" />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <h2 className="text-base font-semibold">Objectifs temps</h2>
            </CardHeader>
            <CardContent className="space-y-3">
              {people.map((person) => (
                <div key={person.id} className="rounded-md border border-border p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div className="font-medium">{person.name}</div>
                    <Badge tone={person.gap.startsWith("-") ? "orange" : "green"}>{person.gap}</Badge>
                  </div>
                  <div className="mt-3 grid grid-cols-3 gap-2 text-sm">
                    <MiniStat label="Objectif" value={person.target} />
                    <MiniStat label="Prev." value={person.planned} />
                    <MiniStat label="Real." value={person.done} />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </section>
    </SosShell>
  );
}

function MiniStat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-sm bg-muted p-2">
      <div className="text-xs text-muted-foreground">{label}</div>
      <div className="mt-1 text-sm font-semibold">{value}</div>
    </div>
  );
}