BillTracker/client/pages/SummaryPage.jsx

import { useCallback, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import {
  CalendarDays,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Edit3,
  Loader2,
  Minus,
  Printer,
  RotateCcw,
  Save,
} from 'lucide-react';
import { api } from '@/api.js';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { cn, fmt } from '@/lib/utils';

const MONTHS = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

function selectedFromToday() {
  const now = new Date();
  return { year: now.getFullYear(), month: now.getMonth() + 1 };
}

function shiftMonth(year, month, delta) {
  const next = new Date(year, month - 1 + delta, 1);
  return { year: next.getFullYear(), month: next.getMonth() + 1 };
}

function monthLabel(year, month) {
  return `${MONTHS[month - 1]} ${year}`;
}

function moneyClass(value) {
  return value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive';
}

function StatusMark({ expense }) {
  if (expense.is_skipped) {
    return (
      <span className="inline-flex min-w-16 items-center justify-center rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
        Skipped
      </span>
    );
  }

  if (expense.is_paid) {
    return (
      <span className="inline-flex min-w-16 items-center justify-center gap-1 rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-semibold text-emerald-700 dark:text-emerald-300">
        <CheckCircle2 className="h-3.5 w-3.5" />
        Paid
      </span>
    );
  }

  return (
    <span className="inline-flex min-w-16 items-center justify-center gap-1 rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
      <Minus className="h-3.5 w-3.5" />
      Open
    </span>
  );
}

function SummaryChart({ rows = [] }) {
  const max = Math.max(1, ...rows.map(row => Math.abs(Number(row.amount) || 0)));
  const chartRows = rows.map((row, index) => ({
    ...row,
    label: row.type === 'Remaining'
      ? Number(row.amount) >= 0 ? 'Remaining' : 'Shortfall'
      : row.type,
    color: index === 0
      ? 'hsl(var(--chart-1))'
      : index === 1
        ? 'hsl(var(--chart-3))'
        : Number(row.amount) >= 0
          ? 'hsl(var(--chart-2))'
          : 'hsl(var(--destructive))',
    width: Math.max(2, (Math.abs(Number(row.amount) || 0) / max) * 100),
  }));

  return (
    <div className="space-y-3">
      {chartRows.map(row => (
        <div key={row.type} className="grid gap-2 sm:grid-cols-[5.75rem_minmax(0,1fr)_7rem] sm:items-center">
          <div className="text-sm font-medium text-foreground">{row.label}</div>
          <div className="h-7 rounded-full bg-muted/70 p-1">
            <div
              className="h-full rounded-full transition-[width]"
              style={{ width: `${Math.min(row.width, 100)}%`, backgroundColor: row.color }}
              title={`${row.label}: ${fmt(row.amount)}`}
            />
          </div>
          <div className={cn('text-sm font-semibold sm:text-right', row.type === 'Remaining' ? moneyClass(row.amount) : 'text-foreground')}>
            {fmt(row.amount)}
          </div>
        </div>
      ))}
    </div>
  );
}

function ExpenseRow({ expense }) {
  return (
    <div className="grid gap-2 border-b border-border/60 px-1 py-3 last:border-0 sm:grid-cols-[minmax(0,1fr)_7.5rem_5.5rem] sm:items-center">
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold text-foreground">{expense.name}</div>
        <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
          {expense.category_name && <span>{expense.category_name}</span>}
          <span>Due day {expense.due_day}</span>
          {expense.actual_amount !== null && <span>Monthly amount</span>}
        </div>
      </div>
      <div className="text-sm font-semibold text-foreground sm:text-right">{fmt(expense.display_amount)}</div>
      <div className="sm:justify-self-end" aria-label={expense.is_paid ? 'Paid' : expense.is_skipped ? 'Skipped' : 'Open'}>
        <StatusMark expense={expense} />
      </div>
    </div>
  );
}

export default function SummaryPage() {
  const [selected, setSelected] = useState(selectedFromToday);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [startingFirst, setStartingFirst] = useState('0');
  const [startingFifteenth, setStartingFifteenth] = useState('0');
  const [startingOther, setStartingOther] = useState('0');
  const [editingStarting, setEditingStarting] = useState(false);

  const loadSummary = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const result = await api.summary(selected.year, selected.month);
      setData(result);
      setStartingFirst(String(result.starting_amounts?.first_amount ?? 0));
      setStartingFifteenth(String(result.starting_amounts?.fifteenth_amount ?? 0));
      setStartingOther(String(result.starting_amounts?.other_amount ?? 0));
      setEditingStarting(false);
    } catch (err) {
      setError(err.message || 'Summary could not be loaded.');
      toast.error(err.message || 'Summary could not be loaded.');
    } finally {
      setLoading(false);
    }
  }, [selected.month, selected.year]);

  useEffect(() => {
    loadSummary();
  }, [loadSummary]);

  const summary = data?.summary || {};
  const expenses = data?.expenses || [];
  const starting = data?.starting_amounts || {};

  const generatedLabel = useMemo(() => {
    if (!data?.generated_at) return '';
    return new Date(data.generated_at).toLocaleString();
  }, [data?.generated_at]);

  async function saveStartingAmounts() {
    const first = Number(startingFirst);
    const fifteenth = Number(startingFifteenth);
    const other = Number(startingOther);
    if (![first, fifteenth, other].every(value => Number.isFinite(value) && value >= 0)) {
      toast.error('Enter non-negative starting amounts.');
      return;
    }

    setSaving(true);
    try {
      await api.updateMonthlyStartingAmounts({
        year: selected.year,
        month: selected.month,
        first_amount: first,
        fifteenth_amount: fifteenth,
        other_amount: other,
      });
      toast.success('Starting amounts saved.');
      await loadSummary();
    } catch (err) {
      toast.error(err.message || 'Starting amounts could not be saved.');
    } finally {
      setSaving(false);
    }
  }

  function moveMonth(delta) {
    setSelected(current => shiftMonth(current.year, current.month, delta));
  }

  function resetToday() {
    setSelected(selectedFromToday());
  }

  return (
    <div className="summary-page mx-auto max-w-3xl space-y-5">
      <div className="summary-print-meta hidden">
        <h1>BillTracker Summary</h1>
        <p>{monthLabel(selected.year, selected.month)}</p>
        {generatedLabel && <p>Generated {generatedLabel}</p>}
      </div>

      <div className="summary-screen-header flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground">Summary</h1>
          <p className="mt-1 text-sm text-muted-foreground">Plan starting balance, expenses, and monthly result.</p>
        </div>
        <div className="summary-actions flex gap-2">
          <Button variant="outline" onClick={resetToday} className="sm:w-auto">
            <RotateCcw className="h-4 w-4" />
            Today
          </Button>
          <Button onClick={() => window.print()} className="sm:w-auto">
            <Printer className="h-4 w-4" />
            Print / PDF
          </Button>
        </div>
      </div>

      <div className="summary-controls mx-auto flex w-full max-w-md items-center justify-between gap-2 rounded-full border border-border/70 bg-card/95 p-1.5 shadow-sm">
        <Button variant="ghost" size="icon" onClick={() => moveMonth(-1)} aria-label="Previous month">
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <div className="flex min-w-0 flex-1 items-center justify-center gap-2 px-2 text-center">
          <CalendarDays className="hidden h-4 w-4 text-muted-foreground sm:block" />
          <div className="truncate text-base font-semibold text-foreground">{monthLabel(selected.year, selected.month)}</div>
        </div>
        <Button variant="ghost" size="icon" onClick={() => moveMonth(1)} aria-label="Next month">
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      {loading && (
        <Card>
          <CardContent className="flex min-h-72 items-center justify-center p-8 text-sm text-muted-foreground">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Loading summary...
          </CardContent>
        </Card>
      )}

      {!loading && error && (
        <Card className="border-destructive/40">
          <CardContent className="space-y-3 p-6">
            <p className="text-sm font-medium text-destructive">{error}</p>
            <Button variant="outline" onClick={loadSummary}>Retry</Button>
          </CardContent>
        </Card>
      )}

      {!loading && !error && data && (
        <>
          <Card className="summary-card">
            <CardHeader className="pb-3">
              <CardTitle className="text-xl">Monthly Plan</CardTitle>
              <CardDescription>{monthLabel(data.year, data.month)}</CardDescription>
            </CardHeader>

            <CardContent className="space-y-5">
              <section className="space-y-3">
                <div className="flex items-center justify-between gap-3">
                  <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Starting Balance</h2>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="summary-edit-actions h-7 px-2"
                    onClick={() => setEditingStarting(value => !value)}
                  >
                    <Edit3 className="h-3.5 w-3.5" />
                    {editingStarting ? 'Close' : 'Edit'}
                  </Button>
                </div>

                <div className="grid gap-3 rounded-2xl bg-muted/45 p-4 sm:grid-cols-3">
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">1st</div>
                    <div className="mt-1 font-mono text-base font-bold text-foreground">{fmt(starting.first_amount)}</div>
                  </div>
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">15th</div>
                    <div className="mt-1 font-mono text-base font-bold text-foreground">{fmt(starting.fifteenth_amount)}</div>
                  </div>
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">Other</div>
                    <div className="mt-1 font-mono text-base font-bold text-foreground">{fmt(starting.other_amount)}</div>
                  </div>
                  <div className="border-t border-border/60 pt-3 sm:col-span-3">
                    <div className="grid gap-3 sm:grid-cols-3">
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Total starting</div>
                        <div className="mt-1 font-mono text-lg font-bold text-foreground">{fmt(starting.combined_amount)}</div>
                      </div>
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Paid</div>
                        <div className="mt-1 font-mono text-lg font-bold text-emerald-600 dark:text-emerald-400">{fmt(starting.paid_total)}</div>
                      </div>
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Total remaining</div>
                        <div className={cn('mt-1 font-mono text-lg font-bold', moneyClass(starting.combined_remaining || 0))}>
                          {fmt(starting.combined_remaining)}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {data.previous_month && (
                  <div className="rounded-xl border border-border/60 bg-background/70 px-3 py-2 text-xs text-muted-foreground">
                    Previous month remaining: {fmt(data.previous_month.combined_remaining)}
                  </div>
                )}

                {editingStarting && (
                  <div className="summary-income-form grid gap-3 rounded-2xl border border-border/60 bg-background/80 p-3 md:grid-cols-[1fr_1fr_1fr_auto] md:items-end">
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">1st</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingFirst}
                        onChange={event => setStartingFirst(event.target.value)}
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">15th</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingFifteenth}
                        onChange={event => setStartingFifteenth(event.target.value)}
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">Other</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingOther}
                        onChange={event => setStartingOther(event.target.value)}
                      />
                    </label>
                    <Button onClick={saveStartingAmounts} disabled={saving} className="summary-edit-actions w-full md:w-auto">
                      {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                      Save
                    </Button>
                  </div>
                )}
              </section>

              <section className="space-y-3">
                <div className="flex items-end justify-between gap-3">
                  <div>
                    <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Expenses</h2>
                    <p className="mt-1 text-xs text-muted-foreground">Skipped bills are shown but not counted.</p>
                  </div>
                  <div className="hidden text-xs font-semibold uppercase tracking-wide text-muted-foreground sm:block">
                    Paid
                  </div>
                </div>

                {expenses.length === 0 ? (
                  <div className="rounded-xl border border-dashed border-border p-6 text-sm text-muted-foreground">
                    No bills found for this month.
                  </div>
                ) : (
                  <div className="rounded-2xl border border-border/60 bg-background/70 px-3">
                    {expenses.map(expense => (
                      <ExpenseRow key={expense.bill_id} expense={expense} />
                    ))}
                  </div>
                )}
              </section>

              <section className="space-y-3 rounded-2xl border border-border/60 bg-muted/40 p-4">
                <div className="flex items-center justify-between gap-4">
                  <div className="text-sm font-medium text-muted-foreground">Fully Paid Expenses</div>
                  <div className="text-base font-bold text-foreground">{summary.paid_expense_count || 0} / {summary.expense_count || 0}</div>
                </div>
                <div className="flex items-center justify-between gap-4">
                  <div className="text-sm font-medium text-muted-foreground">Expenses</div>
                  <div className="text-base font-semibold text-foreground">{fmt(summary.expense_total)}</div>
                </div>
                <div className="flex items-center justify-between gap-4 border-t border-border/60 pt-3">
                  <div className="text-base font-semibold text-foreground">Result</div>
                  <div className={cn('text-2xl font-bold', moneyClass(summary.result || 0))}>{fmt(summary.result)}</div>
                </div>
              </section>

              <Button onClick={() => window.print()} className="summary-actions w-full">
                <Printer className="h-4 w-4" />
                Print / PDF
              </Button>
            </CardContent>
          </Card>

          <Card className="summary-chart-card">
            <CardHeader className="pb-3">
              <CardTitle className="text-xl">Total amount per type</CardTitle>
              <CardDescription>
                Starting balance, planned expenses, and {Number(summary.result || 0) >= 0 ? 'remaining' : 'shortfall'} for {monthLabel(data.year, data.month)}.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <SummaryChart rows={data.chart || []} />
            </CardContent>
          </Card>

          <div className="summary-print-footer hidden text-xs text-muted-foreground">
            Generated {generatedLabel || 'now'}
          </div>
        </>
      )}
    </div>
  );
}