import { Download, Send } from "lucide-react";
import { BillingPlanningBoard } from "@/components/billing-planning-board";
import { Metric } from "@/components/metric";
import { SosShell } from "@/components/sos-shell";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { invoices } from "@/lib/demo-data";

export default function BillingPage() {
  return (
    <SosShell
      title="Facturation"
      subtitle="Suivi des montants a facturer, echeances, statuts et exports PDF prevus pour la direction et l'administration."
      actions={
        <>
          <Button variant="secondary">
            <Download className="h-4 w-4" />
            Export PDF
          </Button>
          <Button>
            <Send className="h-4 w-4" />
            Marquer pret
          </Button>
        </>
      }
    >
      <section className="grid w-full gap-3 px-3 py-4 md:grid-cols-3 lg:px-5">
        <Metric icon={Send} label="A facturer" value="126 kEUR" helper="3 lignes ouvertes" />
        <Metric icon={Download} label="Pret export" value="18 kEUR" helper="1 PDF a produire" />
        <Metric icon={Send} label="Retard" value="18 kEUR" helper="Alerte direction" />
      </section>

      <section className="w-full px-3 pb-6 lg:px-5">
        <BillingPlanningBoard invoices={invoices} />
      </section>

      <section className="w-full px-3 pb-6 lg:px-5">
        <Card>
          <CardHeader>
            <h2 className="text-base font-semibold">Echeancier</h2>
          </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">Client</th>
                  <th className="px-4 py-3 font-medium">Projet</th>
                  <th className="px-4 py-3 font-medium">Libelle</th>
                  <th className="px-4 py-3 font-medium">Montant</th>
                  <th className="px-4 py-3 font-medium">Echeance</th>
                  <th className="px-4 py-3 font-medium">Statut</th>
                </tr>
              </thead>
              <tbody>
                {invoices.map((invoice) => (
                  <tr key={`${invoice.project}-${invoice.label}`} className="border-t border-border">
                    <td className="px-4 py-3">{invoice.client}</td>
                    <td className="px-4 py-3">{invoice.project}</td>
                    <td className="px-4 py-3">{invoice.label}</td>
                    <td className="px-4 py-3 font-semibold">{invoice.amount}</td>
                    <td className="px-4 py-3">{invoice.dueDate}</td>
                    <td className="px-4 py-3">
                      <Badge tone={invoice.tone}>{invoice.status}</Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </CardContent>
        </Card>
      </section>
    </SosShell>
  );
}