import { Cloud, DatabaseZap, Download } from "lucide-react";
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 { imports } from "@/lib/demo-data";

export default function ImportsExportsPage() {
  return (
    <SosShell
      title="Imports / Exports"
      subtitle="Preparation locale des synchronisations Google Sheets, exports PDF et branchement SensiServer2 apres validation du MVP."
      actions={
        <>
          <Button variant="secondary">
            <Download className="h-4 w-4" />
            Tester export
          </Button>
          <Button>
            <Cloud className="h-4 w-4" />
            Synchroniser
          </Button>
        </>
      }
    >
      <section className="grid w-full gap-5 px-3 py-4 lg:grid-cols-[1fr_0.8fr] lg:px-5">
        <Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <DatabaseZap className="h-4 w-4 text-primary" />
              <h2 className="text-base font-semibold">Flux</h2>
            </div>
          </CardHeader>
          <CardContent className="space-y-3">
            {imports.map((item) => (
              <div key={item.source} className="rounded-md border border-border p-4">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <h3 className="font-semibold">{item.source}</h3>
                    <p className="mt-1 text-sm text-muted-foreground">{item.scope}</p>
                  </div>
                  <Badge tone={item.tone}>{item.status}</Badge>
                </div>
                <div className="mt-3 text-sm text-muted-foreground">Derniere operation : {item.lastSync}</div>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <h2 className="text-base font-semibold">Normalisation conges</h2>
          </CardHeader>
          <CardContent className="space-y-3">
            <StatusLine label="P / D" value="PRESENT" tone="green" />
            <StatusLine label="T" value="REMOTE" tone="blue" />
            <StatusLine label="CP, RTT, RH, MAT..." value="OFF" tone="yellow" />
            <StatusLine label="Source de verite" value="Google Sheets" tone="neutral" />
          </CardContent>
        </Card>
      </section>
    </SosShell>
  );
}