"use client";

import { useMemo, useState } from "react";
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
import { Lock } from "lucide-react";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/shared/empty-state";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatMoney } from "@/lib/utils";
import { cn } from "@/lib/utils";
import { PLANS, type PlanId } from "@/lib/pricing";
import type { Currency } from "@/types/database";

type Range = "7d" | "30d" | "3m" | "6m" | "12m";
const RANGE_DAYS: Record<Range, number> = { "7d": 7, "30d": 30, "3m": 90, "6m": 180, "12m": 365 };

interface ExpenseRow {
  amount: number;
  category: string;
  occurred_on: string;
}
interface IncomeRow {
  amount: number;
  received_on: string;
}

export function ReportsView({
  expenses,
  income,
  currency,
  monthlyIncome,
  plan
}: {
  expenses: ExpenseRow[];
  income: IncomeRow[];
  currency: Currency;
  monthlyIncome: number;
  plan: PlanId;
}) {
  const t = useTranslations();
  const locale = useLocale();
  const [range, setRange] = useState<Range>("30d");
  const hasAdvanced = PLANS[plan].limits.advancedReports;

  const cutoff = useMemo(() => {
    const d = new Date();
    d.setDate(d.getDate() - RANGE_DAYS[range]);
    return d.toISOString().slice(0, 10);
  }, [range]);

  const filteredExpenses = useMemo(() => expenses.filter((e) => e.occurred_on >= cutoff), [expenses, cutoff]);
  const filteredIncome = useMemo(() => income.filter((i) => i.received_on >= cutoff), [income, cutoff]);

  const byDay = useMemo(() => {
    const map = new Map<string, number>();
    for (const e of filteredExpenses) {
      map.set(e.occurred_on, (map.get(e.occurred_on) ?? 0) + Number(e.amount));
    }
    return [...map.entries()]
      .sort(([a], [b]) => a.localeCompare(b))
      .map(([date, amount]) => ({ date: date.slice(5), amount }));
  }, [filteredExpenses]);

  const byCategory = useMemo(() => {
    const map = new Map<string, number>();
    for (const e of filteredExpenses) {
      map.set(e.category, (map.get(e.category) ?? 0) + Number(e.amount));
    }
    return [...map.entries()]
      .sort(([, a], [, b]) => b - a)
      .map(([category, amount]) => ({ category, amount }));
  }, [filteredExpenses]);

  const totalExpenses = filteredExpenses.reduce((s, e) => s + Number(e.amount), 0);
  const totalIncome = filteredIncome.reduce((s, i) => s + Number(i.amount), 0) || monthlyIncome;
  const savingsRate = totalIncome > 0 ? Math.max(0, ((totalIncome - totalExpenses) / totalIncome) * 100) : 0;

  const ranges: Range[] = ["7d", "30d", "3m", "6m", "12m"];

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-2">
        {ranges.map((r) => (
          <button
            key={r}
            onClick={() => setRange(r)}
            className={cn(
              "rounded-full px-3 py-1.5 text-xs font-medium",
              range === r ? "bg-brand-600 text-white" : "bg-ink-100 text-ink-600 hover:bg-ink-200"
            )}
          >
            {t(`reports.range.${r}`)}
          </button>
        ))}
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <p className="text-xs text-ink-400">{t("reports.monthlySpending")}</p>
          <p className="mt-1 text-2xl font-semibold text-ink-950">{formatMoney(totalExpenses, currency, locale)}</p>
        </Card>
        <Card>
          <p className="text-xs text-ink-400">{t("reports.incomeVsExpenses")}</p>
          <p className="mt-1 text-2xl font-semibold text-ink-950">{formatMoney(totalIncome - totalExpenses, currency, locale)}</p>
        </Card>
        <Card>
          <p className="text-xs text-ink-400">{t("reports.savingsRate")}</p>
          <p className="mt-1 text-2xl font-semibold text-ink-950">{savingsRate.toFixed(0)}%</p>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>{t("reports.monthlySpending")}</CardTitle>
        </CardHeader>
        {byDay.length === 0 ? (
          <EmptyState title={t("dashboard.empty")} />
        ) : (
          <div className="h-64">
            <ResponsiveContainer>
              <AreaChart data={byDay}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#eeeef0" />
                <XAxis dataKey="date" tick={{ fontSize: 11 }} axisLine={false} tickLine={false} />
                <YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} />
                <Tooltip formatter={(v: number) => formatMoney(v, currency, locale)} />
                <Area type="monotone" dataKey="amount" stroke="#3f8570" fill="#dcece5" strokeWidth={2} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        )}
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>{t("reports.topCategories")}</CardTitle>
        </CardHeader>
        {!hasAdvanced ? (
          <div className="flex items-center gap-3 rounded-xl bg-ink-50 px-4 py-6 text-sm text-ink-500">
            <Lock className="h-4 w-4 shrink-0" />
            Advanced category breakdowns are available on the Plus and Pro plans.
          </div>
        ) : byCategory.length === 0 ? (
          <EmptyState title={t("dashboard.empty")} />
        ) : (
          <div className="h-64">
            <ResponsiveContainer>
              <BarChart data={byCategory} layout="vertical" margin={{ left: 24 }}>
                <XAxis type="number" tick={{ fontSize: 11 }} axisLine={false} tickLine={false} />
                <YAxis
                  type="category"
                  dataKey="category"
                  tickFormatter={(v: string) => t(`expenses.categories.${v}`)}
                  tick={{ fontSize: 11 }}
                  axisLine={false}
                  tickLine={false}
                  width={90}
                />
                <Tooltip formatter={(v: number) => formatMoney(v, currency, locale)} />
                <Bar dataKey="amount" fill="#3f8570" radius={[0, 6, 6, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        )}
      </Card>
    </div>
  );
}