"use client";

import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge, statutBadgeVariant } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  formatMoney,
  formatDate,
  toInputDate,
  STATUT_RESERVATION_LABELS,
  METHODE_PAIEMENT_LABELS,
  TYPE_CHAMBRE_LABELS,
} from "@/lib/utils";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts";
import { Download, Printer, FileSpreadsheet } from "lucide-react";

interface Props {
  reservations: Array<{
    id: string; client: string; chambre: string; type: string;
    date_arrivee: string; date_depart: string; nb_nuits: number; nb_personnes: number;
    prix_total: number; statut: string; paye: number;
  }>;
  paiements: Array<{
    id: string; date: string; montant: number; methode: string;
    client: string; chambre: string;
  }>;
  chambres: Array<{ id: string; numero: string; type: string; prix_nuit: number }>;
  debut: string;
  fin: string;
  devise: string;
}

const STATUT_COLORS: Record<string, string> = {
  CONFIRMEE: "#2563EB",
  EN_ATTENTE: "#D97706",
  TERMINEE: "#374151",
  ANNULEE: "#FCA5A5",
};

export function RapportsView({ reservations, paiements, chambres, debut, fin, devise }: Props) {
  const router = useRouter();
  const [debutDate, setDebutDate] = useState(toInputDate(debut));
  const [finDate, setFinDate] = useState(toInputDate(fin));

  function applyFilter() {
    const params = new URLSearchParams();
    params.set("debut", debutDate);
    params.set("fin", finDate);
    router.push(`/rapports?${params.toString()}`);
  }

  // Statistiques réservations par statut
  const resaParStatut = useMemo(() => {
    const map = new Map<string, number>();
    for (const r of reservations) map.set(r.statut, (map.get(r.statut) || 0) + 1);
    return Array.from(map.entries()).map(([statut, count]) => ({
      statut: STATUT_RESERVATION_LABELS[statut],
      count,
      color: STATUT_COLORS[statut],
    }));
  }, [reservations]);

  // Revenus par chambre
  const revenusParChambre = useMemo(() => {
    const map = new Map<string, number>();
    for (const r of reservations) {
      if (r.statut === "ANNULEE") continue;
      map.set(r.chambre, (map.get(r.chambre) || 0) + r.prix_total);
    }
    return Array.from(map.entries())
      .map(([chambre, revenus]) => ({ chambre: `N°${chambre}`, revenus }))
      .sort((a, b) => b.revenus - a.revenus)
      .slice(0, 10);
  }, [reservations]);

  // Taux d'occupation par chambre
  const dureeJours =
    Math.max(
      1,
      Math.ceil(
        (new Date(fin).getTime() - new Date(debut).getTime()) / (1000 * 60 * 60 * 24)
      )
    );
  const occupationParChambre = useMemo(() => {
    return chambres
      .map((c) => {
        const totalNuits = reservations
          .filter((r) => r.chambre === c.numero && r.statut !== "ANNULEE")
          .reduce((a, r) => a + r.nb_nuits, 0);
        const tauxOccupation = Math.min(100, Math.round((totalNuits / dureeJours) * 100));
        return {
          chambre: `N°${c.numero}`,
          type: TYPE_CHAMBRE_LABELS[c.type],
          nuits: totalNuits,
          taux: tauxOccupation,
        };
      })
      .sort((a, b) => b.taux - a.taux);
  }, [chambres, reservations, dureeJours]);

  const tauxGlobal = useMemo(() => {
    const totalNuitsPossibles = chambres.length * dureeJours;
    const totalNuits = reservations
      .filter((r) => r.statut !== "ANNULEE")
      .reduce((a, r) => a + r.nb_nuits, 0);
    return totalNuitsPossibles > 0
      ? Math.round((totalNuits / totalNuitsPossibles) * 100)
      : 0;
  }, [chambres, reservations, dureeJours]);

  // Paiements par méthode
  const paiementsParMethode = useMemo(() => {
    const map = new Map<string, { total: number; count: number }>();
    for (const p of paiements) {
      const m = map.get(p.methode) || { total: 0, count: 0 };
      m.total += p.montant;
      m.count++;
      map.set(p.methode, m);
    }
    return Array.from(map.entries()).map(([methode, data]) => ({
      methode: METHODE_PAIEMENT_LABELS[methode],
      total: data.total,
      count: data.count,
    }));
  }, [paiements]);

  const revenusTotal = paiements.reduce((a, p) => a + p.montant, 0);

  function exportExcel() {
    import("xlsx").then((XLSX) => {
      const wb = XLSX.utils.book_new();

      // Sheet Réservations
      const wsResas = XLSX.utils.json_to_sheet(
        reservations.map((r) => ({
          Client: r.client,
          Chambre: r.chambre,
          Arrivée: formatDate(r.date_arrivee),
          Départ: formatDate(r.date_depart),
          Nuits: r.nb_nuits,
          Personnes: r.nb_personnes,
          "Prix total": r.prix_total,
          Payé: r.paye,
          Statut: STATUT_RESERVATION_LABELS[r.statut],
        }))
      );
      XLSX.utils.book_append_sheet(wb, wsResas, "Réservations");

      // Sheet Paiements
      const wsPay = XLSX.utils.json_to_sheet(
        paiements.map((p) => ({
          Date: formatDate(p.date),
          Client: p.client,
          Chambre: p.chambre,
          Méthode: METHODE_PAIEMENT_LABELS[p.methode],
          Montant: p.montant,
        }))
      );
      XLSX.utils.book_append_sheet(wb, wsPay, "Paiements");

      // Sheet Occupation
      const wsOcc = XLSX.utils.json_to_sheet(occupationParChambre);
      XLSX.utils.book_append_sheet(wb, wsOcc, "Occupation");

      XLSX.writeFile(wb, `rapport-${debutDate}-au-${finDate}.xlsx`);
    });
  }

  return (
    <div className="space-y-4">
      {/* Filtres période */}
      <Card className="no-print">
        <CardContent className="p-4">
          <div className="flex items-end gap-3 flex-wrap">
            <div className="space-y-1">
              <Label htmlFor="debut">Date de début</Label>
              <Input
                id="debut"
                type="date"
                value={debutDate}
                onChange={(e) => setDebutDate(e.target.value)}
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="fin">Date de fin</Label>
              <Input
                id="fin"
                type="date"
                value={finDate}
                onChange={(e) => setFinDate(e.target.value)}
              />
            </div>
            <Button onClick={applyFilter} variant="accent">
              Appliquer
            </Button>
            <div className="flex-1" />
            <Button onClick={() => window.print()} variant="outline">
              <Printer className="w-4 h-4" />
              Imprimer / PDF
            </Button>
            <Button onClick={exportExcel} variant="outline">
              <FileSpreadsheet className="w-4 h-4" />
              Export Excel
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Résumé */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground">Total réservations</p>
            <p className="text-2xl font-bold">{reservations.length}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground">Revenus encaissés</p>
            <p className="text-2xl font-bold">{formatMoney(revenusTotal, devise)}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground">Taux d&apos;occupation global</p>
            <p className="text-2xl font-bold">{tauxGlobal}%</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground">Durée analysée</p>
            <p className="text-2xl font-bold">{dureeJours} jours</p>
          </CardContent>
        </Card>
      </div>

      {/* Onglets de rapports */}
      <Tabs defaultValue="reservations">
        <TabsList className="no-print">
          <TabsTrigger value="reservations">Réservations</TabsTrigger>
          <TabsTrigger value="revenus">Revenus</TabsTrigger>
          <TabsTrigger value="occupation">Occupation</TabsTrigger>
          <TabsTrigger value="paiements">Paiements</TabsTrigger>
        </TabsList>

        {/* Onglet Réservations */}
        <TabsContent value="reservations">
          <Card>
            <CardContent className="p-4 space-y-4">
              <h3 className="font-semibold">Répartition par statut</h3>
              <ResponsiveContainer width="100%" height={250}>
                <PieChart>
                  <Pie
                    data={resaParStatut}
                    dataKey="count"
                    nameKey="statut"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {resaParStatut.map((entry, idx) => (
                      <Cell key={idx} fill={entry.color || "#C9A84C"} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Client</TableHead>
                    <TableHead>Chambre</TableHead>
                    <TableHead>Période</TableHead>
                    <TableHead>Nuits</TableHead>
                    <TableHead>Statut</TableHead>
                    <TableHead className="text-right">Total</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {reservations.slice(0, 50).map((r) => (
                    <TableRow key={r.id}>
                      <TableCell>{r.client}</TableCell>
                      <TableCell>N°{r.chambre}</TableCell>
                      <TableCell className="text-xs">
                        {formatDate(r.date_arrivee)} → {formatDate(r.date_depart)}
                      </TableCell>
                      <TableCell>{r.nb_nuits}</TableCell>
                      <TableCell>
                        <Badge variant={statutBadgeVariant(r.statut)}>
                          {STATUT_RESERVATION_LABELS[r.statut]}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        {formatMoney(r.prix_total, devise)}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Onglet Revenus */}
        <TabsContent value="revenus">
          <Card>
            <CardContent className="p-4 space-y-4">
              <h3 className="font-semibold">Top 10 chambres par revenus</h3>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={revenusParChambre}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="chambre" tick={{ fontSize: 11 }} />
                  <YAxis tick={{ fontSize: 11 }} />
                  <Tooltip formatter={(v: number) => formatMoney(v, devise)} />
                  <Bar dataKey="revenus" fill="#C9A84C" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Onglet Occupation */}
        <TabsContent value="occupation">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Chambre</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Nuits occupées</TableHead>
                    <TableHead className="text-right">Taux</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {occupationParChambre.map((o) => (
                    <TableRow key={o.chambre}>
                      <TableCell className="font-semibold">{o.chambre}</TableCell>
                      <TableCell>{o.type}</TableCell>
                      <TableCell>{o.nuits} / {dureeJours}</TableCell>
                      <TableCell className="text-right">
                        <div className="inline-flex items-center gap-2">
                          <div className="w-20 h-2 bg-secondary rounded-full overflow-hidden">
                            <div
                              className="h-full bg-accent"
                              style={{ width: `${o.taux}%` }}
                            />
                          </div>
                          <span className="font-semibold">{o.taux}%</span>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Onglet Paiements */}
        <TabsContent value="paiements">
          <Card>
            <CardContent className="p-4 space-y-4">
              <h3 className="font-semibold">Répartition par méthode de paiement</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                {paiementsParMethode.map((p) => (
                  <Card key={p.methode}>
                    <CardContent className="p-3">
                      <p className="text-xs text-muted-foreground">{p.methode}</p>
                      <p className="text-lg font-bold">{formatMoney(p.total, devise)}</p>
                      <p className="text-xs text-muted-foreground">{p.count} paiement(s)</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={paiementsParMethode}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="methode" tick={{ fontSize: 11 }} />
                  <YAxis tick={{ fontSize: 11 }} />
                  <Tooltip formatter={(v: number) => formatMoney(v, devise)} />
                  <Bar dataKey="total" fill="#2D6A4F" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}