"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { AlertTriangle } from "lucide-react"

interface ConfirmReceiptDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: () => void
  loading?: boolean
}

export function ConfirmReceiptDialog({
  open,
  onOpenChange,
  onConfirm,
  loading,
}: ConfirmReceiptDialogProps) {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2 text-amber-600">
            <AlertTriangle className="h-5 w-5" />
            Confirm Receipt of Your Order
          </AlertDialogTitle>
          <AlertDialogDescription className="space-y-3 text-gray-600">
            <p>
              <strong className="text-amber-600">⚠️ Important:</strong> Only confirm after you have
              <strong> physically received</strong> and <strong>thoroughly inspected</strong> your item.
            </p>
            <p>
              Confirming receipt will <strong className="text-red-600">immediately release payment</strong> to
              the seller. This action <strong className="text-red-600">cannot be undone.</strong>
            </p>
            <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm">
              <p className="font-medium text-amber-800">Before you confirm:</p>
              <ul className="list-disc ml-4 mt-1 text-amber-700 space-y-1">
                <li>You have received the correct item</li>
                <li>The item matches the product description</li>
                <li>The item is not damaged or defective</li>
              </ul>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>Cancel — I haven't received it yet</AlertDialogCancel>
          <AlertDialogAction
            onClick={onConfirm}
            disabled={loading}
            className="bg-green-600 hover:bg-green-700 text-white"
          >
            {loading ? "Confirming..." : "Yes, I've received my item — Release Payment"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}