import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { formatMoney, formatDate, METHODE_PAIEMENT_LABELS } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/ui/page-header";
import { EmptyState } from "@/components/ui/empty-state";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Plus, CreditCard } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function PaiementsPage() {
  const [paiements, hotel, stats] = await Promise.all([
    prisma.paiement.findMany({
      include: { reservation: { include: { client: true, chambre: true } } },
      orderBy: { date_paiement: "desc" },
      take: 200,
    }),
    prisma.hotel.findFirst(),
    prisma.paiement.groupBy({
      by: ["methode"],
      _sum: { montant: true },
      _count: true,
    }),
  ]);
  const devise = hotel?.devise || "MAD";
  const total = paiements.reduce((a, p) => a + p.montant, 0);

  return (
    <div className="space-y-4">
      <PageHeader
        title="Paiements"
        description={`${paiements.length} paiement${paiements.length > 1 ? "s" : ""} · Total : ${formatMoney(total, devise)}`}
        action={
          <Button asChild variant="accent">
            <Link href="/paiements/nouveau">
              <Plus className="w-4 h-4" />
              Nouveau paiement
            </Link>
          </Button>
        }
      />

      {/* Stats par méthode */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {stats.map((s) => (
          <Card key={s.methode}>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground mb-1">
                {METHODE_PAIEMENT_LABELS[s.methode]}
              </p>
              <p className="text-lg font-bold">
                {formatMoney(s._sum.montant || 0, devise)}
              </p>
              <p className="text-xs text-muted-foreground">{s._count} paiement(s)</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {paiements.length === 0 ? (
        <EmptyState
          icon={<CreditCard className="w-8 h-8" />}
          title="Aucun paiement enregistré"
          actionLabel="Enregistrer un paiement"
          actionHref="/paiements/nouveau"
        />
      ) : (
        <Card>
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Date</TableHead>
                  <TableHead>Client</TableHead>
                  <TableHead>Chambre</TableHead>
                  <TableHead>Méthode</TableHead>
                  <TableHead className="text-right">Montant</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paiements.map((p) => (
                  <TableRow key={p.id}>
                    <TableCell>{formatDate(p.date_paiement)}</TableCell>
                    <TableCell>
                      <Link
                        href={`/reservations/${p.reservation_id}`}
                        className="hover:underline"
                      >
                        {p.reservation.client.nom_complet}
                      </Link>
                    </TableCell>
                    <TableCell>N°{p.reservation.chambre.numero}</TableCell>
                    <TableCell>
                      <Badge variant="info">{METHODE_PAIEMENT_LABELS[p.methode]}</Badge>
                    </TableCell>
                    <TableCell className="text-right font-semibold">
                      {formatMoney(p.montant, devise)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  );
}