"use client";

import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { TrendChart, DonutChart, HBarChart, CHART_COLORS } from "@/components/ui/charts";
import { fmtMoney, fmtPercent } from "@/lib/format";
import { cn } from "@/lib/utils";

export function FinancialCharts({ daily, monthly, bySource, byCategory, showProfit, currency, mom, yoy }: { daily: { label: string; revenue: number; expenses: number; profit: number }[]; monthly: { label: string; revenue: number; expenses: number; profit: number; lastYear: number }[]; bySource: { key: string; name: string; color: string; count: number; revenue: number; adr: number }[]; byCategory: { name: string; value: number }[]; showProfit: boolean; currency: string; mom: number | null; yoy: number | null }) {
  return (
    <>
      <div className="grid gap-4 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader title="Revenue vs expenses" description="Selected period, by day" />
          <CardContent>
            <TrendChart data={daily} type={daily.length > 40 ? "area" : "bar"} series={[{ key: "revenue", name: "Revenue", color: CHART_COLORS.primary }, { key: "expenses", name: "Expenses", color: CHART_COLORS.gold }, ...(showProfit ? [{ key: "profit", name: "Profit", color: CHART_COLORS.positive }] : [])]} height={260} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader title="Revenue by source" description="Selected period" />
          <CardContent>
            <DonutChart data={bySource.map((s) => ({ name: s.name, value: s.revenue, color: s.color }))} money height={180} centerValue={fmtMoney(bySource.reduce((a, s) => a + s.revenue, 0), currency, { compact: true })} centerLabel="revenue" />
            <table className="mt-3 w-full text-xs">
              <thead className="text-2xs uppercase tracking-wider text-fg-subtle">
                <tr>
                  <th className="py-1 text-left font-semibold">Source</th>
                  <th className="py-1 text-right font-semibold">Bookings</th>
                  <th className="py-1 text-right font-semibold">ADR</th>
                </tr>
              </thead>
              <tbody>
                {bySource.map((s) => (
                  <tr key={s.key} className="border-t border-border">
                    <td className="py-1">{s.name}</td>
                    <td className="py-1 text-right tabular">{s.count}</td>
                    <td className="py-1 text-right tabular">{fmtMoney(s.adr, currency, { compact: true })}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </CardContent>
        </Card>
      </div>
      <div className="grid gap-4 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader
            title="12-month trend"
            description="Revenue this year vs last year"
            action={
              <div className="flex gap-3 text-xs">
                <Growth label="MoM" v={mom} />
                <Growth label="YoY" v={yoy} />
              </div>
            }
          />
          <CardContent>
            <TrendChart data={monthly} type="line" series={[{ key: "revenue", name: "This year", color: CHART_COLORS.primary }, { key: "lastYear", name: "Last year", color: CHART_COLORS.muted }, ...(showProfit ? [{ key: "profit", name: "Profit", color: CHART_COLORS.positive }] : [])]} height={240} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader title="Expenses by category" description="Selected period" />
          <CardContent>{byCategory.length ? <HBarChart data={byCategory.slice(0, 8)} money color={CHART_COLORS.gold} /> : <p className="py-8 text-center text-sm text-fg-muted">No expenses in this period.</p>}</CardContent>
        </Card>
      </div>
    </>
  );
}

function Growth({ label, v }: { label: string; v: number | null }) {
  return (
    <span className="flex items-center gap-1">
      <span className="text-fg-subtle">{label}</span>
      <span className={cn("font-semibold tabular", v == null ? "text-fg-muted" : v >= 0 ? "text-positive-600" : "text-negative-600")}>{v == null ? "—" : `${v >= 0 ? "+" : ""}${fmtPercent(v, 1)}`}</span>
    </span>
  );
}