import React from 'react';
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { ScrollArea } from "@/components/ui/scroll-area";

export function ExportConfirmationDialog({ open, onOpenChange, totalCount, excludedOwners, onConfirm }) {
  const includedCount = totalCount - excludedOwners.length;

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <AlertDialogTitle>Confirm Sign-in Sheet Export</AlertDialogTitle>
          <AlertDialogDescription>
            Review the roster details before generating the PDF.
          </AlertDialogDescription>
        </AlertDialogHeader>

        <div className="py-4 space-y-4">
          <div className="grid grid-cols-3 gap-3 text-center">
            <div className="bg-muted p-3 rounded-lg border">
              <div className="text-2xl font-bold">{totalCount}</div>
              <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Total</div>
            </div>
            <div className="bg-destructive/10 p-3 rounded-lg border border-destructive/20">
              <div className="text-2xl font-bold text-destructive">{excludedOwners.length}</div>
              <div className="text-xs font-semibold text-destructive/70 uppercase tracking-wider">Excluded</div>
            </div>
            <div className="bg-green-50 p-3 rounded-lg border border-green-100">
              <div className="text-2xl font-bold text-green-700">{includedCount}</div>
              <div className="text-xs font-semibold text-green-600 uppercase tracking-wider">Included</div>
            </div>
          </div>

          {excludedOwners.length > 0 ? (
            <div className="border rounded-md">
              <div className="bg-muted px-3 py-2 border-b text-xs font-medium text-muted-foreground flex justify-between items-center">
                <span>Excluded Owners ({excludedOwners.length})</span>
              </div>
              <ScrollArea className="h-[140px] p-2">
                <ul className="space-y-1">
                  {excludedOwners.map(owner => (
                    <li key={owner.id} className="flex justify-between items-start text-sm p-1.5 hover:bg-muted/50 rounded">
                      <span className="font-medium">{owner.owner_name}</span>
                      <span className="text-xs text-muted-foreground max-w-[120px] truncate ml-2">{owner.property_address}</span>
                    </li>
                  ))}
                </ul>
              </ScrollArea>
            </div>
          ) : (
            <div className="text-center p-4 text-sm text-muted-foreground bg-muted/50 rounded-md border border-dashed">
              No owners excluded. All {totalCount} owners will be listed.
            </div>
          )}
        </div>

        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction 
            onClick={onConfirm} 
            disabled={includedCount === 0}
          >
            {includedCount === 0 ? "No Owners to Export" : "Confirm Export"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
