import { motion } from 'framer-motion';
import { Bell, X, Info, AlertTriangle, Clock } from 'lucide-react';
import clsx from 'clsx';
import api from '../services/api';

export default function NotificationDropdown({ notifications, onClose, onRefresh }: any) {

  const markAsRead = async (id: number) => {
    await api.put(`/notifications/${id}/read`);
    onRefresh();
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 10, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, y: 10, scale: 0.95 }}
      className="absolute right-0 mt-3 w-80 bg-white rounded-[2rem] shadow-2xl border border-slate-100 overflow-hidden z-[100]"
    >
      <div className="p-5 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
        <h3 className="text-xs font-black uppercase tracking-widest text-slate-900">Notificaciones</h3>
        <button onClick={onClose} className="text-slate-400 hover:text-slate-600"><X size={16} /></button>
      </div>

      <div className="max-h-96 overflow-y-auto custom-scrollbar">
        {notifications.length === 0 ? (
          <div className="p-10 text-center text-slate-300">
            <Bell size={32} className="mx-auto mb-2 opacity-20" />
            <p className="text-[10px] font-bold uppercase tracking-widest">Sin alertas nuevas</p>
          </div>
        ) : (
          notifications.map((n: any) => (
            <div
              key={n.id}
              onClick={() => markAsRead(n.id)}
              className={clsx(
                "p-4 border-b border-slate-50 flex gap-4 cursor-pointer transition-all hover:bg-slate-50 relative",
                !n.isRead && "bg-blue-50/30"
              )}
            >
              {!n.isRead && <div className="absolute left-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-blue-600 rounded-full"></div>}

              <div className={clsx(
                "w-10 h-10 rounded-2xl flex items-center justify-center shrink-0",
                n.type === 'warning' ? "bg-amber-100 text-amber-600" :
                  n.type === 'error' ? "bg-rose-100 text-rose-600" : "bg-blue-100 text-blue-600"
              )}>
                {n.type === 'warning' ? <AlertTriangle size={18} /> : <Info size={18} />}
              </div>

              <div>
                <p className="text-xs font-black text-slate-800 uppercase leading-tight mb-1">{n.title}</p>
                <p className="text-[11px] text-slate-500 font-medium leading-snug">{n.message}</p>
                <p className="text-[8px] text-slate-400 font-bold uppercase mt-2 flex items-center gap-1">
                  <Clock size={10} /> {new Date(n.createdAt).toLocaleTimeString()}
                </p>
              </div>
            </div>
          ))
        )}
      </div>
    </motion.div>
  );
}