BillTracker/client/components/tracker/OverdueCommandCenter.jsx

import React, { useState } from 'react';
import { AlertCircle, ChevronDown, BellOff, SkipForward, CreditCard } from 'lucide-react';
import { toast } from 'sonner';
import { api } from '@/api.js';
import { cn, fmt } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/ui/dropdown-menu';

function snoozeUntil(days) {
  const d = new Date();
  d.setDate(d.getDate() + days);
  return d.toISOString().slice(0, 10);
}

function daysOverdueLabel(dueDate) {
  if (!dueDate) return 'overdue';
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const due = new Date(`${dueDate}T00:00:00`);
  const days = Math.floor((today - due) / 86_400_000);
  if (days <= 0) return 'due today';
  return `${days} ${days === 1 ? 'day' : 'days'} overdue`;
}

function OverdueRow({ row, year, month, onPayNow, onRefresh }) {
  const [loading, setLoading] = useState(false);
  const threshold = row.actual_amount ?? row.expected_amount;

  async function handleSkip() {
    setLoading(true);
    try {
      await api.saveBillMonthlyState(row.id, {
        year,
        month,
        is_skipped: true,
        actual_amount: row.actual_amount,
        notes: row.monthly_notes,
      });
      onRefresh();
    } catch {
      toast.error('Failed to skip bill');
    } finally {
      setLoading(false);
    }
  }

  async function handleSnooze(days) {
    setLoading(true);
    try {
      await api.snoozeOverdue(row.id, {
        year,
        month,
        snoozed_until: snoozeUntil(days),
        actual_amount: row.actual_amount,
        notes: row.monthly_notes,
        is_skipped: false,
      });
      toast.success(`Snoozed for ${days} ${days === 1 ? 'day' : 'days'}`);
      onRefresh();
    } catch {
      toast.error('Failed to snooze bill');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 py-2.5 sm:flex-nowrap">
      {/* Bill info */}
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="truncate text-sm font-medium text-foreground">{row.name}</span>
          {row.category_name && (
            <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
              {row.category_name}
            </Badge>
          )}
        </div>
        <span className="text-xs text-rose-400 dark:text-rose-300">
          {daysOverdueLabel(row.due_date)}
        </span>
      </div>

      {/* Amount */}
      <span className="shrink-0 font-mono text-sm font-semibold text-rose-400 dark:text-rose-300">
        {fmt(threshold)}
      </span>

      {/* Actions */}
      <div className="flex shrink-0 items-center gap-1">
        <Button
          size="sm"
          variant="outline"
          className="h-7 gap-1.5 border-rose-400/40 px-2.5 text-xs text-rose-500 hover:border-rose-400/70 hover:bg-rose-500/[0.08] hover:text-rose-400"
          disabled={loading}
          onClick={() => onPayNow(row)}
        >
          <CreditCard className="h-3 w-3" />
          Pay Now
        </Button>

        <Button
          size="sm"
          variant="ghost"
          className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
          disabled={loading}
          onClick={handleSkip}
        >
          <SkipForward className="h-3 w-3 mr-1" />
          Skip
        </Button>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              size="sm"
              variant="ghost"
              className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
              disabled={loading}
            >
              <BellOff className="h-3 w-3 mr-1" />
              Snooze
              <ChevronDown className="ml-0.5 h-2.5 w-2.5 opacity-60" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-[120px]">
            <DropdownMenuItem onClick={() => handleSnooze(1)}>1 day</DropdownMenuItem>
            <DropdownMenuItem onClick={() => handleSnooze(3)}>3 days</DropdownMenuItem>
            <DropdownMenuItem onClick={() => handleSnooze(7)}>7 days</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}

export default function OverdueCommandCenter({ rows, year, month, refresh, onPayNow }) {
  const todayStr = new Date().toISOString().slice(0, 10);
  const [isOpen, setIsOpen] = useState(true);

  const overdueRows = rows.filter(r =>
    (r.status === 'late' || r.status === 'missed') &&
    !r.is_skipped &&
    (!r.snoozed_until || r.snoozed_until <= todayStr)
  );

  const snoozedRows = rows.filter(r =>
    (r.status === 'late' || r.status === 'missed') &&
    !r.is_skipped &&
    r.snoozed_until && r.snoozed_until > todayStr
  );

  if (overdueRows.length === 0 && snoozedRows.length === 0) return null;

  const totalOverdue = overdueRows.reduce((sum, r) => {
    const threshold = r.actual_amount ?? r.expected_amount;
    const paid = r.total_paid ?? 0;
    return sum + Math.max(0, threshold - paid);
  }, 0);

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <div className="rounded-xl border border-rose-400/30 bg-rose-500/[0.06] shadow-sm overflow-hidden dark:bg-rose-400/[0.05]">

        {/* Header */}
        <CollapsibleTrigger asChild>
          <button className="flex w-full items-center justify-between px-4 py-3 transition-colors hover:bg-rose-500/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40 focus-visible:ring-inset">
            <div className="flex items-center gap-2.5">
              <AlertCircle className="h-4 w-4 shrink-0 text-rose-400" />
              <span className="text-sm font-semibold text-foreground">
                {overdueRows.length === 0
                  ? 'No active overdue bills'
                  : `${overdueRows.length} overdue ${overdueRows.length === 1 ? 'bill' : 'bills'}`}
              </span>
              {overdueRows.length > 0 && (
                <span className="font-mono text-sm text-rose-400 dark:text-rose-300">
                  {fmt(totalOverdue)}
                </span>
              )}
            </div>
            <div className="flex items-center gap-3">
              {snoozedRows.length > 0 && (
                <span className="text-xs text-muted-foreground">
                  ({snoozedRows.length} snoozed)
                </span>
              )}
              <ChevronDown
                className={cn(
                  'h-4 w-4 text-muted-foreground transition-transform duration-200',
                  isOpen && 'rotate-180'
                )}
              />
            </div>
          </button>
        </CollapsibleTrigger>

        {/* Bill rows */}
        <CollapsibleContent>
          {overdueRows.length > 0 ? (
            <div className="divide-y divide-border/40 px-4 pb-2">
              {overdueRows.map(row => (
                <OverdueRow
                  key={row.id}
                  row={row}
                  year={year}
                  month={month}
                  onPayNow={onPayNow}
                  onRefresh={refresh}
                />
              ))}
            </div>
          ) : (
            <p className="px-4 pb-3 text-xs text-muted-foreground">
              All overdue bills are snoozed.
            </p>
          )}
        </CollapsibleContent>
      </div>
    </Collapsible>
  );
}