"use client";

import { useMemo, useState } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import type { IncomePeriodPoint, IncomeSummary } from "@/lib/admin/income-stats";
import { formatIncomeAmount } from "@/lib/admin/income-stats";

type ViewMode = "daily" | "monthly";

type ChartTooltipProps = {
  active?: boolean;
  payload?: Array<{ payload: IncomePeriodPoint }>;
};

function IncomeTooltip({ active, payload }: ChartTooltipProps) {
  if (!active || !payload?.length) return null;

  const point = payload[0].payload;
  return (
    <div className="rounded-lg border bg-card px-3 py-2 text-sm shadow-md">
      <p className="font-medium">{point.label}</p>
      <p className="text-muted-foreground">{formatIncomeAmount(point.amount)}</p>
      <p className="text-xs text-muted-foreground">
        {point.count.toLocaleString("fa-IR")} پرداخت
      </p>
    </div>
  );
}

function SummaryTile({
  title,
  amount,
  count,
}: {
  title: string;
  amount: number;
  count: number;
}) {
  return (
    <div className="rounded-xl border bg-muted/30 p-4">
      <p className="text-sm text-muted-foreground">{title}</p>
      <p className="mt-1 text-xl font-bold">{amount.toLocaleString("fa-IR")}</p>
      <p className="text-xs text-muted-foreground">
        {count.toLocaleString("fa-IR")} پرداخت · ریال
      </p>
    </div>
  );
}

export function IncomeChart({
  daily,
  monthly,
  summary,
}: {
  daily: IncomePeriodPoint[];
  monthly: IncomePeriodPoint[];
  summary: IncomeSummary;
}) {
  const [view, setView] = useState<ViewMode>("daily");

  const data = view === "daily" ? daily : monthly;
  const totalInView = useMemo(
    () => data.reduce((sum, point) => sum + point.amount, 0),
    [data]
  );
  const paymentsInView = useMemo(
    () => data.reduce((sum, point) => sum + point.count, 0),
    [data]
  );

  return (
    <Card className="mt-6">
      <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <CardTitle className="text-base">نمودار درآمد</CardTitle>
          <p className="mt-1 text-sm text-muted-foreground">
            {view === "daily" ? "۳۰ روز اخیر" : "۱۲ ماه اخیر"} ·{" "}
            {totalInView.toLocaleString("fa-IR")} ریال ·{" "}
            {paymentsInView.toLocaleString("fa-IR")} پرداخت
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            type="button"
            size="sm"
            variant={view === "daily" ? "default" : "outline"}
            onClick={() => setView("daily")}
          >
            روزانه
          </Button>
          <Button
            type="button"
            size="sm"
            variant={view === "monthly" ? "default" : "outline"}
            onClick={() => setView("monthly")}
          >
            ماهانه
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <SummaryTile title="امروز" amount={summary.today} count={summary.todayCount} />
          <SummaryTile title="۷ روز اخیر" amount={summary.week} count={summary.weekCount} />
          <SummaryTile title="ماه جاری" amount={summary.month} count={summary.monthCount} />
          <SummaryTile title="کل" amount={summary.allTime} count={summary.allTimeCount} />
        </div>

        <div className="h-72 w-full" dir="ltr">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
              <XAxis
                dataKey="label"
                tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                interval={view === "daily" ? 4 : 0}
                angle={view === "monthly" ? -25 : 0}
                textAnchor={view === "monthly" ? "end" : "middle"}
                height={view === "monthly" ? 56 : 32}
              />
              <YAxis
                tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                tickFormatter={(value: number) => value.toLocaleString("fa-IR")}
                width={72}
              />
              <Tooltip content={<IncomeTooltip />} cursor={{ fill: "hsl(var(--muted) / 0.35)" }} />
              <Bar
                dataKey="amount"
                fill="hsl(var(--primary))"
                radius={[6, 6, 0, 0]}
                maxBarSize={view === "daily" ? 18 : 36}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}