fintrack/components/statistics/monthly-chart.tsx

"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp } from "lucide-react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

interface MonthlyChartData {
  month: string;
  revenus: number;
  depenses: number;
  solde: number;
}

interface MonthlyChartProps {
  data: MonthlyChartData[];
  formatCurrency: (amount: number) => string;
  collapsible?: boolean;
  defaultExpanded?: boolean;
  showDots?: boolean;
}

export function MonthlyChart({
  data,
  formatCurrency,
  collapsible = false,
  defaultExpanded = true,
  showDots = true,
}: MonthlyChartProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  // Calculer l'intervalle dynamiquement selon le nombre de données
  const getXAxisInterval = () => {
    if (data.length <= 6) return 0; // Afficher tous les labels pour 6 mois ou moins
    if (data.length <= 12) return 1; // Afficher un label sur deux pour 7-12 mois
    return Math.floor(data.length / 12); // Pour plus de 12 mois, afficher environ 12 labels
  };

  // Formater les labels de manière plus compacte
  const formatMonthLabel = (month: string) => {
    // Format: "janv. 24" -> "janv 24" (enlever le point)
    return month.replace(".", "");
  };

  const chartContent = (
    <>
      {data.length > 0 ? (
        <div className="h-[400px] sm:h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart
              data={data}
              margin={{
                left: 0,
                right: 10,
                top: 10,
                bottom: data.length > 6 ? 80 : 60,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis
                dataKey="month"
                className="text-xs"
                angle={data.length > 6 ? -45 : 0}
                textAnchor={data.length > 6 ? "end" : "middle"}
                height={data.length > 6 ? 80 : 60}
                interval={getXAxisInterval()}
                tickFormatter={formatMonthLabel}
                tick={{ fontSize: 11 }}
              />
              <YAxis
                className="text-xs"
                width={60}
                tickFormatter={(v) => {
                  // Format compact pour les grandes valeurs
                  if (Math.abs(v) >= 1000) {
                    return `${(v / 1000).toFixed(1)}k€`;
                  }
                  return `${v.toFixed(0)}€`;
                }}
                tick={{ fill: "var(--muted-foreground)" }}
              />
              <Tooltip
                formatter={(value: number) => formatCurrency(value)}
                labelFormatter={(label) => label}
                contentStyle={{
                  backgroundColor: "var(--card)",
                  border: "1px solid var(--border)",
                  borderRadius: "8px",
                }}
              />
              <Legend />
              <Line
                type="monotone"
                dataKey="revenus"
                name="Revenus"
                stroke="#22c55e"
                strokeWidth={2}
                dot={showDots ? { fill: "#22c55e", r: 4 } : false}
                activeDot={showDots ? { r: 6 } : false}
              />
              <Line
                type="monotone"
                dataKey="depenses"
                name="Dépenses"
                stroke="#ef4444"
                strokeWidth={2}
                dot={showDots ? { fill: "#ef4444", r: 4 } : false}
                activeDot={showDots ? { r: 6 } : false}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      ) : (
        <div className="h-[400px] sm:h-[300px] flex items-center justify-center text-muted-foreground">
          Pas de données pour cette période
        </div>
      )}
    </>
  );

  if (!collapsible) {
    return (
      <Card className="card-hover">
        <CardHeader>
          <CardTitle>Revenus vs Dépenses par mois</CardTitle>
        </CardHeader>
        <CardContent>{chartContent}</CardContent>
      </Card>
    );
  }

  return (
    <Card className="card-hover">
      <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
          <CardTitle className="text-base font-semibold">
            Revenus vs Dépenses par mois
          </CardTitle>
          <CollapsibleTrigger asChild>
            <Button variant="ghost" size="sm" className="h-8">
              {isExpanded ? (
                <>
                  <ChevronUp className="w-4 h-4 mr-1" />
                  Réduire
                </>
              ) : (
                <>
                  <ChevronDown className="w-4 h-4 mr-1" />
                  Afficher
                </>
              )}
            </Button>
          </CollapsibleTrigger>
        </CardHeader>
        <CollapsibleContent>
          <CardContent className="pt-0">{chartContent}</CardContent>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
}