'use client';

import { useEffect } from 'react';
import { CheckCircle, X, RotateCcw } from 'lucide-react';

interface SuccessModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  description?: string;
  onUndo?: () => void;
  undoLabel?: string;
  autoCloseMs?: number;
}

export default function SuccessModal({
  isOpen,
  onClose,
  title,
  description,
  onUndo,
  undoLabel = 'Undo',
  autoCloseMs = 4000,
}: SuccessModalProps) {
  useEffect(() => {
    if (!isOpen) return;
    const timer = setTimeout(onClose, autoCloseMs);
    return () => clearTimeout(timer);
  }, [isOpen, autoCloseMs, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center p-4" style={{ pointerEvents: 'none' }}>
      <div
        className="relative w-full max-w-sm rounded-2xl p-5 shadow-2xl slide-up"
        style={{
          backgroundColor: 'hsl(var(--surface))',
          border: '1px solid hsl(var(--border))',
          boxShadow: '0 20px 60px -10px rgba(0,0,0,0.18)',
          pointerEvents: 'all',
        }}
      >
        {/* Close */}
        <button
          onClick={onClose}
          className="absolute top-3 right-3 btn-ghost p-1.5 rounded-lg"
          style={{ color: 'hsl(var(--muted-foreground))' }}
        >
          <X size={14} />
        </button>

        {/* Icon + content */}
        <div className="flex items-start gap-4">
          <div
            className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
            style={{ backgroundColor: 'hsl(var(--success-bg))' }}
          >
            <CheckCircle size={20} style={{ color: 'hsl(var(--success))' }} />
          </div>
          <div className="flex-1 min-w-0 pt-0.5">
            <p className="font-semibold text-sm" style={{ color: 'hsl(var(--foreground))' }}>{title}</p>
            {description && (
              <p className="text-xs mt-0.5" style={{ color: 'hsl(var(--muted-foreground))' }}>{description}</p>
            )}
          </div>
        </div>

        {/* Undo action */}
        {onUndo && (
          <div className="mt-4 flex items-center justify-end gap-2">
            <button
              onClick={() => { onUndo(); onClose(); }}
              className="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors"
              style={{
                backgroundColor: 'hsl(var(--muted))',
                color: 'hsl(var(--foreground))',
              }}
            >
              <RotateCcw size={12} />
              {undoLabel}
            </button>
            <button
              onClick={onClose}
              className="text-xs font-semibold px-3 py-1.5 rounded-lg text-white transition-colors"
              style={{ backgroundColor: 'hsl(var(--success))' }}
            >
              Done
            </button>
          </div>
        )}

        {/* Auto-close progress bar */}
        <div
          className="absolute bottom-0 left-0 right-0 h-0.5 rounded-b-2xl overflow-hidden"
          style={{ backgroundColor: 'hsl(var(--border))' }}
        >
          <div
            className="h-full rounded-b-2xl"
            style={{
              backgroundColor: 'hsl(var(--success))',
              animation: `shrink ${autoCloseMs}ms linear forwards`,
            }}
          />
        </div>
      </div>

      <style jsx>{`
        @keyframes shrink {
          from { width: 100%; }
          to { width: 0%; }
        }
      `}</style>
    </div>
  );
}