"use client";

import React, { useState } from "react";
import { FiX, FiAlertTriangle, FiCheck } from "react-icons/fi";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => Promise<void>;
  title: string;
  message: string;
  confirmLabel: string;
  confirmColor: string; // gradient start
  icon: React.ReactNode;
  variant?: "danger" | "success" | "warning";
}

const VARIANT_STYLES = {
  danger: {
    headerBg: "linear-gradient(135deg, #991b1b, #dc2626)",
    infoBg: "#fef2f2",
    infoBorder: "#fecaca",
    infoColor: "#991b1b",
    btnBg: "linear-gradient(135deg, #dc2626, #ef4444)",
  },
  success: {
    headerBg: "linear-gradient(135deg, #166534, #22c55e)",
    infoBg: "#f0fdf4",
    infoBorder: "#bbf7d0",
    infoColor: "#166534",
    btnBg: "linear-gradient(135deg, #166534, #22c55e)",
  },
  warning: {
    headerBg: "linear-gradient(135deg, #92400e, #f59e0b)",
    infoBg: "#fffbeb",
    infoBorder: "#fde68a",
    infoColor: "#92400e",
    btnBg: "linear-gradient(135deg, #d97706, #f59e0b)",
  },
};

export default function ConfirmActionModal({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmLabel,
  icon,
  variant = "warning",
}: Props) {
  const [submitting, setSubmitting] = useState(false);
  const vs = VARIANT_STYLES[variant];

  if (!isOpen) return null;

  const handleConfirm = async () => {
    setSubmitting(true);
    try {
      await onConfirm();
      onClose();
    } catch {
      // error handled by caller (toast)
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <div
        onClick={onClose}
        style={{
          position: "fixed",
          inset: 0,
          background: "rgba(0,0,0,0.5)",
          zIndex: 9998,
        }}
      />
      <div
        style={{
          position: "fixed",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          zIndex: 9999,
          background: "#fff",
          borderRadius: 16,
          boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
          width: "min(420px, 90vw)",
        }}
      >
        {/* Header */}
        <div
          style={{
            padding: "20px 24px",
            background: vs.headerBg,
            borderRadius: "16px 16px 0 0",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <h2
            style={{
              margin: 0,
              fontSize: 18,
              fontWeight: 800,
              color: "#fff",
              display: "flex",
              alignItems: "center",
              gap: 8,
            }}
          >
            {icon} {title}
          </h2>
          <button
            onClick={onClose}
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "none",
              borderRadius: 8,
              padding: 8,
              cursor: "pointer",
              color: "#fff",
            }}
          >
            <FiX size={18} />
          </button>
        </div>

        {/* Body */}
        <div style={{ padding: 24 }}>
          <div
            style={{
              padding: "14px",
              background: vs.infoBg,
              border: `1px solid ${vs.infoBorder}`,
              borderRadius: 10,
              fontSize: 13,
              color: vs.infoColor,
              lineHeight: 1.6,
              marginBottom: 20,
            }}
          >
            {message}
          </div>

          <div
            style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}
          >
            <button
              onClick={onClose}
              disabled={submitting}
              style={{
                padding: "10px 20px",
                borderRadius: 10,
                border: "1px solid #d1d5db",
                background: "#fff",
                color: "#374151",
                fontSize: 14,
                fontWeight: 600,
                cursor: "pointer",
              }}
            >
              Cancel
            </button>
            <button
              onClick={handleConfirm}
              disabled={submitting}
              style={{
                padding: "10px 24px",
                borderRadius: 10,
                border: "none",
                background: submitting ? "#9ca3af" : vs.btnBg,
                color: "#fff",
                fontSize: 14,
                fontWeight: 700,
                cursor: submitting ? "not-allowed" : "pointer",
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              <FiCheck size={14} />
              {submitting ? "Processing..." : confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}