import { useState } from 'react';
import { RotateCcw, Trash2, Loader2 } from 'lucide-react';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { formatUSD } from '@/lib/money';

function daysLeftLabel(days) {
  if (days == null) return null;
  if (days <= 0) return 'purges today';
  if (days === 1) return '1 day left';
  return `${days} days left`;
}

/**
 * Lists bills that were soft-deleted within the 30-day recovery window and lets
 * the user restore them — a durable path beyond the transient "Undo" toast.
 *
 * Presentational: the parent owns the list (`bills`) and the async `onRestore`,
 * so restoring refreshes the page's active bills too.
 */
export default function RecentlyDeletedBillsDialog({ open, onOpenChange, bills = [], onRestore }) {
  const [busyId, setBusyId] = useState(null);

  async function handleRestore(bill) {
    setBusyId(bill.id);
    try {
      await onRestore(bill);
    } finally {
      setBusyId(null);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Recently deleted</DialogTitle>
          <DialogDescription>
            Deleted bills are kept for 30 days before they’re permanently removed. Restore one to bring it back.
          </DialogDescription>
        </DialogHeader>

        {bills.length === 0 ? (
          <div className="flex flex-col items-center gap-2 py-8 text-center">
            <Trash2 className="h-8 w-8 text-muted-foreground/40" />
            <p className="text-sm text-muted-foreground">Nothing to recover</p>
            <p className="text-xs text-muted-foreground/70">Bills you delete will appear here for 30 days.</p>
          </div>
        ) : (
          <ul className="-mx-2 max-h-[55vh] divide-y divide-border/60 overflow-y-auto">
            {bills.map(bill => {
              const left = daysLeftLabel(bill.days_left);
              const busy = busyId === bill.id;
              return (
                <li key={bill.id} className="flex items-center gap-3 px-2 py-2.5">
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">{bill.name}</p>
                    <p className="truncate text-xs text-muted-foreground">
                      {formatUSD(bill.expected_amount)}
                      {bill.category_name ? ` · ${bill.category_name}` : ''}
                      {left ? <span className="text-muted-foreground/60"> · {left}</span> : null}
                    </p>
                  </div>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    className="h-8 shrink-0 gap-1.5"
                    disabled={busy}
                    onClick={() => handleRestore(bill)}
                  >
                    {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RotateCcw className="h-3.5 w-3.5" />}
                    Restore
                  </Button>
                </li>
              );
            })}
          </ul>
        )}
      </DialogContent>
    </Dialog>
  );
}