"use client";

import { useState } from "react";
import { AlertTriangle, Loader2 } from "lucide-react";
import { useTranslation } from "@/i18n";

interface DeleteConfirmModalProps {
  title: string;
  description: string;
  confirmLabel?: string;
  onConfirm: () => Promise<void>;
  onCancel: () => void;
  danger?: boolean;
}

export function DeleteConfirmModal({
  title,
  description,
  confirmLabel = "Delete",
  onConfirm,
  onCancel,
  danger = true,
}: DeleteConfirmModalProps) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    try { await onConfirm(); }
    finally { setLoading(false); }
  };

  const accentColor = danger ? "#f43f5e" : "var(--accent)";
  const accentBg    = danger ? "rgba(244,63,94,0.1)" : "rgba(var(--accent-rgb),0.1)";

  return (
    <>
      <div
        className="fixed inset-0 z-[300]"
        style={{ background: "rgba(0,0,0,0.78)", backdropFilter: "blur(12px)", animation: "dcm-fade 0.18s ease both" }}
        onClick={onCancel}
      />
      <div
        className="fixed z-[301] left-1/2 top-1/2 flex flex-col gap-5 px-6 py-6 w-[min(360px,90vw)]"
        style={{
          transform: "translate(-50%,-50%)",
          background: "#0e0e0e",
          borderRadius: 20,
          border: `1px solid ${danger ? "rgba(244,63,94,0.2)" : "rgba(var(--accent-rgb),0.2)"}`,
          boxShadow: `0 0 0 1px rgba(255,255,255,0.04) inset, 0 24px 64px rgba(0,0,0,0.7)`,
          animation: "dcm-pop 0.3s cubic-bezier(0.34,1.5,0.64,1) both",
        }}
      >
        {/* Icon */}
        <div className="flex items-center justify-center">
          <div className="w-14 h-14 rounded-full flex items-center justify-center"
            style={{ background: accentBg, border: `1.5px solid ${accentColor}40` }}>
            <AlertTriangle size={26} color={accentColor} strokeWidth={1.8} />
          </div>
        </div>

        {/* Text */}
        <div className="text-center">
          <p className="text-base font-black text-[#ffffff] tracking-tight mb-1.5">{title}</p>
          <p className="text-[12px] leading-relaxed" style={{ color: "#888" }}>{description}</p>
        </div>

        {/* Buttons */}
        <div className="flex gap-3">
          <button
            onClick={onCancel}
            disabled={loading}
            className="flex-1 h-11 rounded-xl text-[13px] font-bold transition-all active:scale-95 disabled:opacity-40"
            style={{ background: "rgba(255,255,255,0.07)", color: "#aaa" }}
          >
            {t("common_cancel")}
          </button>
          <button
            onClick={handleConfirm}
            disabled={loading}
            className="flex-1 h-11 rounded-xl text-[13px] font-black text-[#ffffff] transition-all active:scale-[0.97] disabled:opacity-50 flex items-center justify-center gap-2"
            style={{ background: `linear-gradient(135deg,${accentColor},${accentColor}cc)`, boxShadow: `0 4px 18px ${accentColor}40` }}
          >
            {loading ? <Loader2 size={15} className="animate-spin" /> : confirmLabel}
          </button>
        </div>
      </div>

      <style>{`
        @keyframes dcm-fade { from{opacity:0} to{opacity:1} }
        @keyframes dcm-pop  { from{opacity:0;transform:translate(-50%,-50%) scale(0.85)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
      `}</style>
    </>
  );
}