'use client';

import { useEffect } from 'react';
import { useEditor } from '@/store/editor';
import { Info, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';

export function Toast() {
  const toast = useEditor((s) => s.toast);
  const setToast = useEditor((s) => s.setToast);

  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 4000);
    return () => clearTimeout(t);
  }, [toast, setToast]);

  if (!toast) return null;

  const levelConfig = {
    error: {
      icon: XCircle,
      bg: 'bg-gradient-to-b from-capcut-red/15 to-capcut-red/5',
      border: 'border-capcut-red/40',
      text: 'text-capcut-red',
      iconBg: 'bg-capcut-red/20',
      shadow: 'shadow-glow-red',
    },
    success: {
      icon: CheckCircle2,
      bg: 'bg-gradient-to-b from-capcut-green/15 to-capcut-green/5',
      border: 'border-capcut-green/40',
      text: 'text-capcut-green',
      iconBg: 'bg-capcut-green/20',
      shadow: 'shadow-[0_0_0_1px_rgba(61,255,163,0.3),0_8px_24px_rgba(61,255,163,0.2)]',
    },
    warning: {
      icon: AlertTriangle,
      bg: 'bg-gradient-to-b from-capcut-yellow/15 to-capcut-yellow/5',
      border: 'border-capcut-yellow/40',
      text: 'text-capcut-yellow',
      iconBg: 'bg-capcut-yellow/20',
      shadow: 'shadow-[0_0_0_1px_rgba(255,210,61,0.3),0_8px_24px_rgba(255,210,61,0.2)]',
    },
    info: {
      icon: Info,
      bg: 'bg-gradient-to-b from-capcut-blue/15 to-capcut-blue/5',
      border: 'border-capcut-blue/40',
      text: 'text-capcut-blue',
      iconBg: 'bg-capcut-blue/20',
      shadow: 'shadow-glow-blue',
    },
  } as const;

  const cfg = levelConfig[toast.level] ?? levelConfig.info;
  const Icon = cfg.icon;

  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up pointer-events-none">
      <div
        className={`pointer-events-auto flex items-center gap-3 ${cfg.bg} border ${cfg.border} backdrop-blur-md rounded-xl px-4 py-3 ${cfg.shadow} max-w-md`}
      >
        <div className={`w-8 h-8 rounded-lg ${cfg.iconBg} ${cfg.text} flex items-center justify-center shrink-0`}>
          <Icon size={16} />
        </div>
        <span className={`text-sm font-medium ${cfg.text}`}>{toast.message}</span>
      </div>
    </div>
  );
}