
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 default function OwnerUpdateConfirmDialog({ open, onOpenChange, diffs, onConfirm }) {
  const fields = Object.entries(diffs);

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <AlertDialogTitle>Confirm Updates</AlertDialogTitle>
          <AlertDialogDescription>
            You are about to update the following fields for this owner. This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>

        <div className="py-2">
          <div className="bg-muted p-3 rounded-md border text-sm">
            <h4 className="font-semibold mb-2">Changes Summary:</h4>
            <ScrollArea className="h-[150px] pr-2">
              <div className="space-y-2">
                {fields.length > 0 ? (
                  fields.map(([field, value]) => (
                    <div key={field} className="grid grid-cols-3 gap-2 border-b border-border pb-1 last:border-0">
                      <span className="font-medium text-muted-foreground capitalize col-span-1">
                        {field.replace(/_/g, ' ')}:
                      </span>
                      <span className="truncate col-span-2 font-mono text-xs pt-0.5">
                        {value === true ? 'Yes' : value === false ? 'No' : value || '(empty)'}
                      </span>
                    </div>
                  ))
                ) : (
                  <p className="text-muted-foreground italic">No changes detected.</p>
                )}
              </div>
            </ScrollArea>
          </div>
        </div>

        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm} disabled={fields.length === 0}>
            Confirm Update
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
