import React, { useEffect, useState } from 'react';
import { HiCheckCircle, HiXCircle, HiX } from 'react-icons/hi';

// 1. Interface untuk Props Alert
interface AlertProps {
  title?: string;
  desc?: string;
  duration?: number;
  onClose?: () => void;
}

// --- SUCCESS ALERT COMPONENT ---
export default function SuccessAlert({
  title, desc, duration, onClose,
}: AlertProps) {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    const timerShow = setTimeout(() => setIsVisible(true), 50);

    const timerClose = setTimeout(() => {
      handleClose();
    }, duration);

    return () => {
      clearTimeout(timerShow);
      clearTimeout(timerClose);
    };
  }, [duration]);

  const handleClose = () => {
    setIsVisible(false);
    setTimeout(() => {
      if (onClose) onClose();
    }, 300);
  };

  return (
    <div
      className={`fixed top-5 right-5 z-100 flex items-start gap-3 w-full max-w-sm p-4 bg-slate-900/95 border border-emerald-500/80 rounded-2xl shadow-2xl backdrop-blur-md transition-all duration-300 ease-out ${
        isVisible
          ? 'opacity-100 translate-y-0 pointer-events-auto scale-100'
          : 'opacity-0 -translate-y-3 pointer-events-none scale-95'
      }`}
      role="alert"
    >
      <div className="shrink-0 mt-0.5 text-emerald-400">
        <HiCheckCircle className="w-6 h-6" />
      </div>

      <div className="flex-1 min-w-0 pr-2">
        <h4 className="text-sm font-semibold text-slate-100 leading-snug">
          {title}
        </h4>
        <p className="text-xs text-slate-200 mt-1 leading-relaxed wrap-break-word">
          {desc}
        </p>
      </div>

      <button
        onClick={handleClose}
        type="button"
        className="shrink-0 text-slate-500 hover:text-slate-300 hover:bg-slate-800 p-1 rounded-lg transition-colors focus:outline-none"
        aria-label="Close"
      >
        <HiX className="w-4 h-4" />
      </button>
    </div>
  );
}

// FAILED ALERT
export function FailedAlert({
  title, desc, duration, onClose,
}: AlertProps) {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    const timerShow = setTimeout(() => setIsVisible(true), 50);

    const timerClose = setTimeout(() => {
      handleClose();
    }, duration);

    return () => {
      clearTimeout(timerShow);
      clearTimeout(timerClose);
    };
  }, [duration]);

  const handleClose = () => {
    setIsVisible(false);
    setTimeout(() => {
      if (onClose) onClose();
    }, 300);
  };

  return (
    <div
      className={`fixed top-5 right-5 z-100 flex items-start gap-3 w-full max-w-sm p-4 bg-slate-900/95 border border-rose-500/80 rounded-2xl shadow-2xl backdrop-blur-md transition-all duration-300 ease-out ${
        isVisible
          ? 'opacity-100 translate-y-0 pointer-events-auto scale-100'
          : 'opacity-0 -translate-y-3 pointer-events-none scale-95'
      }`}
      role="alert"
    >
      <div className="shrink-0 mt-0.5 text-rose-400">
        <HiXCircle className="w-6 h-6" />
      </div>

      <div className="flex-1 min-w-0 pr-2">
        <h4 className="text-sm font-semibold text-slate-100 leading-snug">
          {title}
        </h4>
        <p className="text-xs text-slate-200 mt-1 leading-relaxed wrap-break-word">
          {desc}
        </p>
      </div>

      <button
        onClick={handleClose}
        type="button"
        className="shrink-0 text-slate-500 hover:text-slate-300 hover:bg-slate-800 p-1 rounded-lg transition-colors focus:outline-none"
        aria-label="Close"
      >
        <HiX className="w-4 h-4" />
      </button>
    </div>
  );
}