import { Trash2, Save, RotateCcw, AlertTriangle, X } from 'lucide-react'

const CONFIG = {
  hapus: {
    Icon: Trash2,
    iconBg: 'bg-red-100', iconColor: 'text-red-600',
    btnClass: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
    labelDefault: 'Ya, Hapus',
    judulDefault: 'Hapus Data',
  },
  simpan: {
    Icon: Save,
    iconBg: 'bg-emerald-100', iconColor: 'text-emerald-600',
    btnClass: 'bg-gradient-to-br from-emerald-500 to-emerald-700 text-white border-transparent hover:opacity-90',
    labelDefault: 'Ya, Simpan',
    judulDefault: 'Konfirmasi Simpan',
  },
  reset: {
    Icon: RotateCcw,
    iconBg: 'bg-amber-100', iconColor: 'text-amber-600',
    btnClass: 'bg-amber-500 hover:bg-amber-600 text-white border-transparent',
    labelDefault: 'Ya, Reset',
    judulDefault: 'Reset Form',
  },
  custom: {
    Icon: AlertTriangle,
    iconBg: 'bg-sky-100', iconColor: 'text-sky-600',
    btnClass: 'bg-gradient-to-br from-sky-500 to-sky-700 text-white border-transparent hover:opacity-90',
    labelDefault: 'Konfirmasi',
    judulDefault: 'Konfirmasi',
  },
}

export default function ConfirmDialog({
  isOpen, onClose, onConfirm,
  tipe = 'custom',
  judul, pesan, detail = [], extra,
  labelBatal = 'Batal', labelKonfirmasi,
}) {
  if (!isOpen) return null

  const cfg = CONFIG[tipe] || CONFIG.custom
  const { Icon } = cfg

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
      style={{ background: 'rgba(15,23,42,0.55)', backdropFilter: 'blur(4px)' }}
      onClick={e => { if (e.target === e.currentTarget) onClose() }}
    >
      <div
        className="w-full max-w-[400px] rounded-2xl bg-white shadow-2xl"
        style={{ animation: 'popIn 0.2s cubic-bezier(0.34,1.56,0.64,1)' }}
      >
        {/* Header */}
        <div className="flex items-start gap-4 p-6 pb-4">
          <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${cfg.iconBg}`}>
            <Icon size={22} className={cfg.iconColor} />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-[15px] font-bold text-slate-900 leading-tight">
              {judul || cfg.judulDefault}
            </h3>
            {pesan && (
              <p className="mt-1.5 text-[13px] text-slate-500 leading-relaxed">
                {pesan}
              </p>
            )}
          </div>
          <button
            onClick={onClose}
            className="shrink-0 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 border-none cursor-pointer bg-transparent"
          >
            <X size={16} />
          </button>
        </div>

        {/* Ringkasan data */}
        {detail.length > 0 && (
          <div className="mx-6 mb-5 rounded-xl bg-slate-50 border border-slate-100 overflow-hidden">
            <div className="px-4 py-2 border-b border-slate-100">
              <span className="text-[10.5px] font-bold uppercase tracking-widest text-slate-400">
                Ringkasan Data
              </span>
            </div>
            {detail.filter(d => d.value).map((d, i) => (
              <div
                key={i}
                className="flex items-start justify-between gap-3 px-4 py-2.5 border-b border-slate-100 last:border-0"
              >
                <span className="text-[12.5px] text-slate-500">{d.label}</span>
                <span className="text-[12.5px] font-semibold text-slate-800 text-right max-w-[55%]">{d.value}</span>
              </div>
            ))}
          </div>
        )}

        {/* Extra content (e.g., input alasan) */}
        {extra && (
          <div className="mx-6 mb-4">{extra}</div>
        )}

        {/* Tombol */}
        <div className="flex gap-2.5 px-6 pb-6">
          <button
            onClick={onClose}
            className="flex-1 h-10 rounded-lg border border-slate-200 bg-white text-[13.5px] font-semibold text-slate-600 hover:bg-slate-50 cursor-pointer transition-colors"
          >
            {labelBatal}
          </button>
          <button
            onClick={() => { onConfirm(); onClose() }}
            className={`flex-1 h-10 rounded-lg border text-[13.5px] font-bold cursor-pointer transition-all flex items-center justify-center gap-2 ${cfg.btnClass}`}
          >
            <Icon size={15} />
            {labelKonfirmasi || cfg.labelDefault}
          </button>
        </div>
      </div>

      <style>{`
        @keyframes popIn {
          from { opacity: 0; transform: scale(0.92) translateY(8px); }
          to   { opacity: 1; transform: scale(1) translateY(0); }
        }
      `}</style>
    </div>
  )
}