'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { PeriodFilter, type PeriodKey } from '@/components/panel/period-filter';
import { moneyLabel } from '@/features/finance/format';

export type ChartPoint = {
  key: string;
  revenue: string;
  grossProfit: string;
  netProfit: string;
};

export function SalesProfitOverview({ series = [] }: { series?: ChartPoint[] }) {
  const [period, setPeriod] = useState<PeriodKey>('7d');
  const max = Math.max(1, ...series.map(s => Number(s.revenue)));

  const totalRevenue = series.reduce((s, p) => s + Number(p.revenue), 0);
  const totalGross = series.reduce((s, p) => s + Number(p.grossProfit), 0);

  return (
    <Card>
      <CardHeader className="gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <CardTitle>Sales &amp; Profit Overview</CardTitle>
          <CardDescription>Based on recorded sales snapshots — not live supplier prices.</CardDescription>
        </div>
        <PeriodFilter value={period} onChange={setPeriod} className="w-full sm:w-auto" />
      </CardHeader>
      <CardContent>
        {series.length === 0 ? (
          <div className="relative h-44 overflow-hidden rounded-[var(--radius-md)] bg-gradient-to-b from-muted/80 to-card sm:h-52">
            <div className="absolute inset-0 flex flex-col items-center justify-center px-4 text-center">
              <p className="text-sm font-semibold text-navy">No sales data for this period yet</p>
              <p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
                Charts populate when orders are completed into sales ({period === 'custom' ? 'custom range' : period}).
              </p>
            </div>
          </div>
        ) : (
          <ul className="space-y-2.5" aria-label="Sales trend">
            {series.slice(-7).map(point => (
              <li key={point.key} className="space-y-1">
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>{point.key.slice(5)}</span>
                  <span>{moneyLabel(point.revenue)}</span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-muted">
                  <div
                    className="h-full rounded-full bg-primary motion-reduce:transition-none"
                    style={{ width: `${Math.max(6, (Number(point.revenue) / max) * 100)}%` }}
                  />
                </div>
              </li>
            ))}
          </ul>
        )}
        <div className="mt-4 flex flex-wrap gap-4 text-sm">
          <div className="flex items-center gap-2">
            <span className="size-2.5 rounded-full bg-primary" aria-hidden="true" />
            <span className="text-muted-foreground">Revenue</span>
            <strong className="text-navy">{series.length ? moneyLabel(totalRevenue) : '—'}</strong>
          </div>
          <div className="flex items-center gap-2">
            <span className="size-2.5 rounded-full bg-teal" aria-hidden="true" />
            <span className="text-muted-foreground">Gross Profit</span>
            <strong className="text-navy">{series.length ? moneyLabel(totalGross) : '—'}</strong>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}