import { memo, useMemo } from "react";

interface DeleteConfirmModalProps {
  record: { ticker?: string; isin?: string; uid?: string; id?: string };
  recordName?: string;
  onCancel: () => void;
  onConfirm: () => void;
  deleteLoading: boolean;
}

const DeleteConfirmModalComponent = ({
  record,
  recordName,
  onCancel,
  onConfirm,
  deleteLoading,
}: DeleteConfirmModalProps) => {
  const displayName = useMemo(() => {
    if (recordName) return recordName;
    return record.ticker || record.isin || record.uid || record.id || "this record";
  }, [record, recordName]);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4 py-6 backdrop-blur-sm">
      <div className="w-full max-w-md rounded-lg border border-white/40 bg-white p-6 shadow-2xl">
        <div className="mb-4 text-center">
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
            Delete Confirmation
          </p>
          <h3 className="text-lg font-semibold text-slate-800">
            Remove "{displayName}"?
          </h3>
          <p className="mt-2 text-sm text-slate-500">
            This action cannot be undone. Are you sure you want to delete this record?
          </p>
        </div>
        <div className="flex justify-center gap-3">
          <button
            type="button"
            onClick={onCancel}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-slate-300"
            disabled={deleteLoading}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={deleteLoading}
            className="rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-red-600 disabled:opacity-70"
          >
            {deleteLoading ? "Deleting..." : "Delete"}
          </button>
        </div>
      </div>
    </div>
  );
};

export const DeleteConfirmModal = memo(DeleteConfirmModalComponent);

DeleteConfirmModal.displayName = "DeleteConfirmModal";