'use client';

import { useState, useEffect, useCallback } from 'react';
import { Search, AlertTriangle, Phone, GripVertical } from 'lucide-react';

interface AvisoItem {
  id: string;
  numero: number;
  cliente: string;
  descripcion: string;
  urgencia: string;
  estado: string;
  telefono?: string | null;
  partes?: { id: string; estado: string }[];
}

const URGENCIA_COLORS: Record<string, string> = {
  BAJA: 'border-l-gray-300',
  NORMAL: 'border-l-blue-400',
  ALTA: 'border-l-orange-400',
  URGENTE: 'border-l-red-500',
};

const URGENCIA_DOT: Record<string, string> = {
  BAJA: 'bg-gray-400',
  NORMAL: 'bg-blue-400',
  ALTA: 'bg-orange-400',
  URGENTE: 'bg-red-500',
};

export default function AvisosSidebar({ refreshKey }: { refreshKey?: number }) {
  const [avisos, setAvisos] = useState<AvisoItem[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  const fetchAvisos = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ estado: 'PENDIENTE,ASIGNADO', limit: '50', excludeAgendados: 'true' });
      if (search) params.set('q', search);
      const res = await fetch(`/api/avisos?${params}`);
      if (res.ok) {
        const data = await res.json();
        setAvisos(data.avisos || []);
      }
    } catch { /* ignore */ }
    setLoading(false);
  }, [search]);

  useEffect(() => {
    const timer = setTimeout(fetchAvisos, 300);
    return () => clearTimeout(timer);
  }, [fetchAvisos, refreshKey]);

  const handleDragStart = (e: React.DragEvent, aviso: AvisoItem) => {
    e.dataTransfer.setData('text/plain', `aviso:${aviso.id}`);
    e.dataTransfer.setData('application/aviso-id', aviso.id);
    e.dataTransfer.setData('application/aviso-data', JSON.stringify(aviso));
    e.dataTransfer.effectAllowed = 'copyMove';
  };

  return (
    <div className="bg-white rounded-xl border h-[calc(100vh-240px)] flex flex-col">
      <div className="px-3 py-2.5 border-b">
        <h3 className="text-sm font-semibold text-gray-900 mb-2">Avisos pendientes</h3>
        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
          <input
            type="text"
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Buscar..."
            className="w-full pl-8 pr-3 py-1.5 border rounded-lg text-xs text-gray-900 outline-none focus:ring-1 focus:ring-[#3182ce]"
          />
        </div>
      </div>
      <div className="flex-1 overflow-y-auto p-2 space-y-1.5">
        {loading ? (
          <div className="text-center py-4">
            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-[#1a365d] mx-auto" />
          </div>
        ) : avisos.length === 0 ? (
          <p className="text-xs text-gray-400 text-center py-4">Sin avisos pendientes</p>
        ) : (
          avisos.map(aviso => (
            <div
              key={aviso.id}
              draggable
              onDragStart={(e) => handleDragStart(e, aviso)}
              className={`border-l-[3px] ${URGENCIA_COLORS[aviso.urgencia] || 'border-l-gray-300'} bg-gray-50 rounded-r-lg p-2 cursor-grab active:cursor-grabbing hover:bg-gray-100 transition-colors group`}
            >
              <div className="flex items-start gap-1.5">
                <GripVertical className="w-3 h-3 text-gray-300 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-1.5">
                    <span className="text-[10px] font-mono text-gray-400">#{aviso.numero}</span>
                    <span className={`w-1.5 h-1.5 rounded-full ${URGENCIA_DOT[aviso.urgencia] || 'bg-gray-400'}`} />
                    {aviso.partes?.some(p => p.estado === 'REABIERTO') && (
                      <span className="text-[9px] font-semibold bg-red-100 text-red-700 px-1.5 py-0.5 rounded">REABIERTO</span>
                    )}
                  </div>
                  <p className="text-xs font-medium text-gray-800 truncate">{aviso.cliente}</p>
                  <p className="text-[10px] text-gray-500 truncate">{aviso.descripcion}</p>
                  {aviso.telefono && (
                    <div className="flex items-center gap-1 text-[10px] text-gray-400 mt-0.5">
                      <Phone className="w-2.5 h-2.5" /> {aviso.telefono}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>
      <div className="px-3 py-2 border-t">
        <p className="text-[10px] text-gray-400 text-center">
          <AlertTriangle className="w-3 h-3 inline mr-1" />
          Arrastra un aviso al calendario
        </p>
      </div>
    </div>
  );
}