"use client";

import {
  Bar,
  BarChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { getEffectiveInvoiceStatus } from "~/lib/invoice-status";
import type { StoredInvoiceStatus } from "~/types/invoice";
import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";

interface Invoice {
  id: string;
  totalAmount: number;
  issueDate: Date | string;
  status: string;
  dueDate: Date | string;
}

interface MonthlyMetricsChartProps {
  invoices: Invoice[];
}

function MonthlyMetricsTooltip({
  active,
  payload,
  label,
}: {
  active?: boolean;
  payload?: Array<{
    payload: {
      paidInvoices: number;
      pendingInvoices: number;
      overdueInvoices: number;
      draftInvoices: number;
      totalInvoices: number;
    };
  }>;
  label?: string;
}) {
  if (active && payload?.length) {
    const data = payload[0]!.payload;
    return (
      <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
        <p className="font-medium">{label}</p>
        <div className="space-y-1 text-sm">
          <p className="text-primary font-medium">Paid: {data.paidInvoices}</p>
          <p className="text-primary/80">Pending: {data.pendingInvoices}</p>
          <p className="text-destructive">Overdue: {data.overdueInvoices}</p>
          <p className="text-muted-foreground">Draft: {data.draftInvoices}</p>
          <p className="text-foreground border-t pt-1 font-medium">
            Total: {data.totalInvoices}
          </p>
        </div>
      </div>
    );
  }
  return null;
}

export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
  // Process invoice data to create monthly metrics
  const monthlyData = invoices.reduce(
    (acc, invoice) => {
      const date = new Date(invoice.issueDate);
      const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
      const effectiveStatus = getEffectiveInvoiceStatus(
        invoice.status as StoredInvoiceStatus,
        invoice.dueDate,
      );

      acc[monthKey] ??= {
        month: monthKey,
        totalInvoices: 0,
        paidInvoices: 0,
        pendingInvoices: 0,
        overdueInvoices: 0,
        draftInvoices: 0,
      };

      acc[monthKey].totalInvoices += 1;

      switch (effectiveStatus) {
        case "paid":
          acc[monthKey].paidInvoices += 1;
          break;
        case "sent":
          acc[monthKey].pendingInvoices += 1;
          break;
        case "overdue":
          acc[monthKey].overdueInvoices += 1;
          break;
        case "draft":
          acc[monthKey].draftInvoices += 1;
          break;
      }

      return acc;
    },
    {} as Record<
      string,
      {
        month: string;
        totalInvoices: number;
        paidInvoices: number;
        pendingInvoices: number;
        overdueInvoices: number;
        draftInvoices: number;
      }
    >,
  );

  // Convert to array and sort by month
  const chartData = Object.values(monthlyData)
    .sort((a, b) => a.month.localeCompare(b.month))
    .slice(-6) // Show last 6 months
    .map((item) => ({
      ...item,
      monthLabel: new Date(item.month + "-01").toLocaleDateString("en-US", {
        month: "short",
        year: "2-digit",
      }),
    }));

  // Animation / motion preferences
  const { prefersReducedMotion, animationSpeedMultiplier } =
    useAnimationPreferences();
  const barAnimationDuration = Math.round(
    500 / (animationSpeedMultiplier || 1),
  );

  if (chartData.length === 0) {
    return (
      <div className="flex h-64 items-center justify-center">
        <div className="text-center">
          <p className="text-muted-foreground text-sm">
            No metrics data available
          </p>
          <p className="text-muted-foreground text-xs">
            Monthly metrics will appear here once you create invoices
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="h-48 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={chartData}>
            <XAxis
              dataKey="monthLabel"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
            />
            <Tooltip content={<MonthlyMetricsTooltip />} />
            <Bar
              dataKey="draftInvoices"
              stackId="a"
              fill="hsl(0, 0%, 60%)"
              radius={[0, 0, 0, 0]}
              isAnimationActive={!prefersReducedMotion}
              animationDuration={barAnimationDuration}
              animationEasing="ease-out"
            />
            <Bar
              dataKey="paidInvoices"
              stackId="a"
              fill="hsl(142, 71%, 45%)"
              radius={[0, 0, 0, 0]}
              isAnimationActive={!prefersReducedMotion}
              animationDuration={barAnimationDuration}
              animationEasing="ease-out"
            />
            <Bar
              dataKey="pendingInvoices"
              stackId="a"
              fill="hsl(217, 91%, 60%)"
              fillOpacity={0.6}
              radius={[0, 0, 0, 0]}
              isAnimationActive={!prefersReducedMotion}
              animationDuration={barAnimationDuration}
              animationEasing="ease-out"
            />
            <Bar
              dataKey="overdueInvoices"
              stackId="a"
              fill="hsl(var(--destructive))"
              radius={[2, 2, 0, 0]}
              isAnimationActive={!prefersReducedMotion}
              animationDuration={barAnimationDuration}
              animationEasing="ease-out"
            />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Legend */}
      <div className="flex flex-wrap justify-center gap-x-4 gap-y-2">
        <div className="flex items-center space-x-2">
          <div
            className="h-3 w-3 rounded-full"
            style={{ backgroundColor: "hsl(0, 0%, 60%)" }}
          />
          <span className="text-xs">Draft</span>
        </div>
        <div className="flex items-center space-x-2">
          <div
            className="h-3 w-3 rounded-full"
            style={{ backgroundColor: "hsl(142, 71%, 45%)" }}
          />
          <span className="text-xs">Paid</span>
        </div>
        <div className="flex items-center space-x-2">
          <div
            className="h-3 w-3 rounded-full"
            style={{ backgroundColor: "hsl(217, 91%, 60%)", opacity: 0.6 }}
          />
          <span className="text-xs">Pending</span>
        </div>
        <div className="flex items-center space-x-2">
          <div className="bg-destructive h-3 w-3 rounded-full" />
          <span className="text-xs">Overdue</span>
        </div>
      </div>
    </div>
  );
}