import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { BarChart3 } from "lucide-react";

type CommuneUsageEntry = {
  commune: string;
  quantite: number;
};

type MonthlyChartEntry = {
  month: string;
  total: number;
  validated: number;
  rejected: number;
};

type TypeChartEntry = {
  name: string;
  value: number;
};

type AdminDashboardChartsProps = {
  usageByCommuneData: CommuneUsageEntry[];
  monthlyChartData: MonthlyChartEntry[];
  typeChartData: TypeChartEntry[];
  isFullAdminView: boolean;
};

const COLORS = ["#000091", "#6a6af4", "#009081", "#e1000f", "#c9191e", "#b34000"];

export default function AdminDashboardCharts({
  usageByCommuneData,
  monthlyChartData,
  typeChartData,
  isFullAdminView,
}: AdminDashboardChartsProps) {
  return (
    <>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5 text-primary" />
            Sollicitations du stock par commune
          </CardTitle>
          <CardDescription>
            Lecture simple du matériel mobilisé ce mois-ci, pour repérer les communes les plus consommatrices.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[280px]">
            {usageByCommuneData.length > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={usageByCommuneData} layout="vertical" margin={{ top: 8, right: 8, left: 16, bottom: 8 }}>
                  <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                  <XAxis type="number" fontSize={12} />
                  <YAxis dataKey="commune" type="category" width={90} fontSize={12} />
                  <Tooltip
                    formatter={(value: number, name: string) => [
                      value,
                      name === "quantite" ? "Quantité mobilisée" : "Dossiers",
                    ]}
                  />
                  <Bar dataKey="quantite" fill="#000091" radius={[0, 6, 6, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
                Pas encore assez de prêts matériels validés pour ce mois-ci.
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {isFullAdminView ? (
        <div className="grid gap-6 lg:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Évolution des demandes</CardTitle>
              <CardDescription>Demandes par mois sur les 12 derniers mois</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px]">
                {monthlyChartData.length > 0 ? (
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={monthlyChartData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" fontSize={12} />
                      <YAxis fontSize={12} />
                      <Tooltip />
                      <Legend />
                      <Line type="monotone" dataKey="total" name="Total" stroke="#000091" strokeWidth={2} />
                      <Line type="monotone" dataKey="validated" name="Validées" stroke="#009081" strokeWidth={2} />
                      <Line type="monotone" dataKey="rejected" name="Refusées" stroke="#e1000f" strokeWidth={2} />
                    </LineChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex h-full items-center justify-center text-muted-foreground">
                    Pas de données disponibles
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Répartition par type</CardTitle>
              <CardDescription>Distribution des demandes par catégorie</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px]">
                {typeChartData.length > 0 ? (
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={typeChartData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={100}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {typeChartData.map((entry, index) => (
                          <Cell key={`${entry.name}-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex h-full items-center justify-center text-muted-foreground">
                    Pas de données disponibles
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      ) : null}
    </>
  );
}
