BillTracker/client/components/bill-modal/UnmatchDialogs.jsx

import { Link2Off, Layers } from 'lucide-react';
import { cn, fmtDate } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog';
import {
  AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
  AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
} from '@/components/ui/alert-dialog';
import { transactionTitle, transactionDate, fmtTransactionAmount } from '@/components/bill-modal/transactionDisplay';

// The three unmatch flows for a linked bank transaction: the choice dialog
// (single vs. review-similar), the single-unmatch confirm, and the bulk review
// dialog (with optional merchant-rule removal). Presentational — the parent owns
// the unmatch state and the confirm/bulk handlers.
export default function UnmatchDialogs({
  unmatchTarget,
  bulkUnmatch, setBulkUnmatch,
  unmatchConfirmOpen, setUnmatchConfirmOpen,
  transactionBusyId,
  bulkBusy,
  closeUnmatch,
  onSingleUnmatch,
  onOpenBulkUnmatch,
  onBulkConfirm,
}) {
  return (
    <>
      {/* ── Unmatch choice dialog ─────────────────────────────────── */}
      <Dialog
        open={!!unmatchTarget && !bulkUnmatch}
        onOpenChange={open => { if (!open) closeUnmatch(); }}
      >
        <DialogContent className="sm:max-w-md border-border/60 bg-card/95 backdrop-blur-xl">
          <DialogHeader>
            <DialogTitle className="text-base font-semibold">Unmatch transaction</DialogTitle>
            <DialogDescription className="text-sm text-muted-foreground">
              How would you like to proceed?
            </DialogDescription>
          </DialogHeader>

          {unmatchTarget && (
            <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5">
              <p className="text-sm font-medium text-foreground">{transactionTitle(unmatchTarget)}</p>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {transactionDate(unmatchTarget) ? fmtDate(transactionDate(unmatchTarget)) : 'No date'}
                {' · '}
                <span className="font-mono">{fmtTransactionAmount(unmatchTarget.amount, unmatchTarget.currency)}</span>
              </p>
            </div>
          )}

          <div className="grid gap-2.5">
            <button
              type="button"
              onClick={() => setUnmatchConfirmOpen(true)}
              className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <Link2Off className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
              <div>
                <p className="text-sm font-medium">Unmatch this payment only</p>
                <p className="mt-0.5 text-xs text-muted-foreground">Remove just this one transaction from the bill.</p>
              </div>
            </button>
            <button
              type="button"
              onClick={onOpenBulkUnmatch}
              className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <Layers className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
              <div>
                <p className="text-sm font-medium">Review all similar matches</p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  See all transactions with a similar payee name and manage them together. Optionally remove a merchant rule too.
                </p>
              </div>
            </button>
          </div>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
              Cancel
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Single unmatch confirm ────────────────────────────────── */}
      <AlertDialog
        open={!!unmatchTarget && unmatchConfirmOpen}
        onOpenChange={open => { if (!open) setUnmatchConfirmOpen(false); }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Unmatch this transaction?</AlertDialogTitle>
            <AlertDialogDescription>
              {unmatchTarget && (
                <>
                  <span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>
                  {' '}will be unlinked from this bill.
                  {unmatchTarget.linked_payment?.payment_source === 'provider_sync'
                    ? ' The payment record will be removed and the balance restored.'
                    : ' The payment record will be removed.'}
                </>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={!!transactionBusyId} onClick={() => setUnmatchConfirmOpen(false)}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction
              disabled={!!transactionBusyId}
              onClick={onSingleUnmatch}
            >
              {transactionBusyId ? 'Unmatching…' : 'Confirm Unmatch'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* ── Bulk unmatch dialog ───────────────────────────────────── */}
      <Dialog
        open={!!unmatchTarget && !!bulkUnmatch}
        onOpenChange={open => { if (!open) closeUnmatch(); }}
      >
        <DialogContent className="sm:max-w-lg border-border/60 bg-card/95 backdrop-blur-xl">
          <DialogHeader>
            <DialogTitle className="text-base font-semibold">Review similar matches</DialogTitle>
            {unmatchTarget && (
              <DialogDescription className="text-sm text-muted-foreground">
                Transactions similar to <span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>.
                Uncheck any you want to keep matched.
              </DialogDescription>
            )}
          </DialogHeader>

          {bulkUnmatch && (
            <>
              <div className="flex items-center gap-2">
                <span className="text-xs text-muted-foreground">Quick select:</span>
                <Button
                  type="button"
                  size="sm"
                  variant="outline"
                  className="h-6 px-2 text-xs"
                  onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set(p.similar.map(t => t.id)) }))}
                >
                  All
                </Button>
                <Button
                  type="button"
                  size="sm"
                  variant="outline"
                  className="h-6 px-2 text-xs"
                  onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set() }))}
                >
                  None
                </Button>
                <span className="ml-auto text-xs text-muted-foreground">
                  {bulkUnmatch.checkedIds.size} of {bulkUnmatch.similar.length} selected
                </span>
              </div>

              <div className="max-h-60 space-y-2 overflow-y-auto pr-1">
                {bulkUnmatch.similar.map(tx => (
                  <label
                    key={tx.id}
                    className={cn(
                      'flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 transition-colors',
                      bulkUnmatch.checkedIds.has(tx.id)
                        ? 'border-primary/30 bg-primary/5'
                        : 'border-border/60 bg-background/35 opacity-60',
                    )}
                  >
                    <Checkbox
                      checked={bulkUnmatch.checkedIds.has(tx.id)}
                      onCheckedChange={checked => {
                        setBulkUnmatch(p => {
                          const next = new Set(p.checkedIds);
                          checked ? next.add(tx.id) : next.delete(tx.id);
                          return { ...p, checkedIds: next };
                        });
                      }}
                    />
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-medium text-foreground">{transactionTitle(tx)}</p>
                      <p className="text-xs text-muted-foreground">
                        {transactionDate(tx) ? fmtDate(transactionDate(tx)) : 'No date'}
                        {tx.account_name && ` · ${tx.account_name}`}
                      </p>
                    </div>
                    <p className={cn(
                      'shrink-0 font-mono text-sm font-semibold tabular-nums',
                      Number(tx.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
                    )}>
                      {fmtTransactionAmount(tx.amount, tx.currency)}
                    </p>
                  </label>
                ))}
              </div>

              {bulkUnmatch.rules.length > 0 && (
                <div className="rounded-lg border border-amber-500/25 bg-amber-500/5 px-3 py-2.5">
                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
                    Merchant rules
                  </p>
                  {bulkUnmatch.rules.map(rule => (
                    <label key={rule.id} className="flex cursor-pointer items-start gap-2.5">
                      <Checkbox
                        className="mt-0.5"
                        checked={bulkUnmatch.removeRuleId === rule.id}
                        onCheckedChange={checked =>
                          setBulkUnmatch(p => ({ ...p, removeRuleId: checked ? rule.id : null }))
                        }
                      />
                      <div>
                        <p className="text-sm">
                          Remove rule <span className="font-mono font-semibold">"{rule.merchant}"</span>
                        </p>
                        <p className="mt-0.5 text-xs text-muted-foreground">
                          Future syncs won't auto-match this pattern to this bill.
                        </p>
                      </div>
                    </label>
                  ))}
                </div>
              )}
            </>
          )}

          <DialogFooter className="gap-2">
            <Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
              Cancel
            </Button>
            <Button
              type="button"
              variant="outline"
              onClick={() => setBulkUnmatch(null)}
              className="text-xs"
            >
              Back
            </Button>
            <Button
              type="button"
              disabled={bulkBusy || !bulkUnmatch || bulkUnmatch.checkedIds.size === 0}
              onClick={onBulkConfirm}
              className="text-xs"
            >
              {bulkBusy
                ? 'Unmatching…'
                : `Unmatch ${bulkUnmatch?.checkedIds?.size ?? 0} transaction${bulkUnmatch?.checkedIds?.size !== 1 ? 's' : ''}`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}