'use client';

import { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Plus, Search, LayoutGrid, List, AlertTriangle, Phone, MessageCircle, Mail,
  Clock, User, Filter, RefreshCw, ChevronRight, X, Flag
} from 'lucide-react';
import {
  ESTADOS_AVISO, ESTADO_LABELS, ESTADO_COLORS, URGENCIA_LABELS, URGENCIA_COLORS,
  CANAL_LABELS, CANALES, URGENCIAS
} from '@/lib/avisos/constants';
import NuevoAvisoModal from './nuevo-aviso-modal';
import AvisoDetailModal from './aviso-detail-modal';

interface AvisoListItem {
  id: string;
  numero: number;
  estado: string;
  cliente: string;
  contacto: string | null;
  telefono: string | null;
  canal: string;
  urgencia: string;
  descripcion: string;
  presupuestoPendiente: boolean;
  fechaEntrada: string;
  reabierto: boolean;
  vecesReabierto: number;
  asignadoA: { id: string; name: string; email: string } | null;
  creadoPor: { id: string; name: string } | null;
  partes: { id: string; estado: string }[];
  _count: { notas: number; partes: number };
}

interface Stats {
  pendientes: number;
  asignados: number;
  enProceso: number;
  cerrados: number;
  cancelados: number;
  urgentes: number;
  total: number;
}

const CANAL_ICONS: Record<string, React.ReactNode> = {
  TELEFONO: <Phone className="w-3.5 h-3.5" />,
  WHATSAPP: <MessageCircle className="w-3.5 h-3.5" />,
  EMAIL: <Mail className="w-3.5 h-3.5" />,
};

export default function AvisosContent({ userRole = 'admin', userId = '' }: { userRole?: string; userId?: string }) {
  const [avisos, setAvisos] = useState<AvisoListItem[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [loading, setLoading] = useState(true);
  const [viewMode, setViewMode] = useState<'kanban' | 'lista'>('kanban');
  const [filtroEstado, setFiltroEstado] = useState<string>('');
  const [filtroUrgencia, setFiltroUrgencia] = useState<string>('');
  const [busqueda, setBusqueda] = useState('');

  // Initialize with last 30 days
  const [fechaDesde, setFechaDesde] = useState<string>(() => {
    const d = new Date();
    d.setDate(d.getDate() - 30);
    return d.toISOString().split('T')[0];
  });
  const [fechaHasta, setFechaHasta] = useState<string>('');

  const [showNuevoModal, setShowNuevoModal] = useState(false);
  const [selectedAvisoId, setSelectedAvisoId] = useState<string | null>(null);

  const fetchAvisos = useCallback(async () => {
    try {
      const params = new URLSearchParams();
      if (filtroEstado) params.set('estado', filtroEstado);
      if (filtroUrgencia) params.set('urgencia', filtroUrgencia);
      if (busqueda) params.set('q', busqueda);
      if (fechaDesde) params.set('fechaDesde', fechaDesde);
      if (fechaHasta) params.set('fechaHasta', fechaHasta);
      params.set('limit', '200');

      const res = await fetch(`/api/avisos?${params}`);
      const data = await res.json();
      if (data.avisos) setAvisos(data.avisos);
    } catch (err) {
      console.error('Error fetching avisos:', err);
    } finally {
      setLoading(false);
    }
  }, [filtroEstado, filtroUrgencia, busqueda, fechaDesde, fechaHasta]);

  const fetchStats = useCallback(async () => {
    try {
      const res = await fetch('/api/avisos/stats');
      const data = await res.json();
      setStats(data);
    } catch (err) {
      console.error('Error fetching stats:', err);
    }
  }, []);

  useEffect(() => {
    fetchAvisos();
    fetchStats();
  }, [fetchAvisos, fetchStats]);

  const handleCreated = () => {
    setShowNuevoModal(false);
    fetchAvisos();
    fetchStats();
  };

  const handleDetailClose = () => {
    setSelectedAvisoId(null);
    fetchAvisos();
    fetchStats();
  };

  const kanbanColumns = [
    { key: ESTADOS_AVISO.PENDIENTE, label: ESTADO_LABELS.PENDIENTE, color: 'border-yellow-400' },
    { key: ESTADOS_AVISO.ASIGNADO, label: ESTADO_LABELS.ASIGNADO, color: 'border-blue-400' },
    { key: ESTADOS_AVISO.EN_PROCESO, label: ESTADO_LABELS.EN_PROCESO, color: 'border-purple-400' },
    { key: ESTADOS_AVISO.CERRADO, label: ESTADO_LABELS.CERRADO, color: 'border-green-400' },
  ];

  const formatDate = (d: string) => {
    return new Date(d).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
  };

  const AvisoCard = ({ aviso }: { aviso: AvisoListItem }) => (
    <motion.div
      layout
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white rounded-lg border border-gray-200 p-3 cursor-pointer hover:shadow-md transition-shadow"
      onClick={() => setSelectedAvisoId(aviso.id)}
    >
      <div className="flex items-start justify-between mb-2">
        <span className="text-xs font-mono text-gray-500">#{aviso.numero}</span>
        <div className="flex items-center gap-1">
          {aviso.reabierto && (
            <span className="text-xs bg-orange-100 text-orange-700 px-1.5 py-0.5 rounded" title={`Reabierto ${aviso.vecesReabierto}x`}>
              <RefreshCw className="w-3 h-3 inline" /> {aviso.vecesReabierto}
            </span>
          )}
          {aviso.presupuestoPendiente && (
            <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded" title="Presupuesto pendiente">
              <Flag className="w-3 h-3 inline" /> €
            </span>
          )}
          <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${URGENCIA_COLORS[aviso.urgencia]}`}>
            {URGENCIA_LABELS[aviso.urgencia]}
          </span>
        </div>
      </div>

      <h4 className="font-semibold text-sm text-gray-900 mb-1 line-clamp-1">{aviso.cliente}</h4>
      <p className="text-xs text-gray-600 line-clamp-2 mb-2">{aviso.descripcion}</p>

      <div className="flex items-center justify-between text-xs text-gray-500">
        <div className="flex items-center gap-1.5">
          {CANAL_ICONS[aviso.canal]}
          <span>{CANAL_LABELS[aviso.canal]}</span>
        </div>
        <div className="flex items-center gap-1">
          <Clock className="w-3 h-3" />
          <span>{formatDate(aviso.fechaEntrada)}</span>
        </div>
      </div>

      {(aviso.asignadoA || aviso._count.partes > 0) && (
        <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100 text-xs text-gray-500">
          {aviso.asignadoA ? (
            <div className="flex items-center gap-1">
              <User className="w-3 h-3" />
              <span>{aviso.asignadoA.name}</span>
            </div>
          ) : <span />}
          {aviso._count.partes > 0 && (
            <span>{aviso.partes.filter(p => p.estado === 'FINALIZADO').length}/{aviso._count.partes} partes</span>
          )}
        </div>
      )}
    </motion.div>
  );

  return (
    <div className="p-4 md:p-6">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Avisos</h1>
          <p className="text-sm text-gray-500 mt-1">Gestión de avisos y tickets de servicio</p>
        </div>
        <button
          onClick={() => setShowNuevoModal(true)}
          className="flex items-center gap-2 bg-[#1a365d] hover:bg-[#2c5282] text-white px-4 py-2.5 rounded-lg font-medium transition-colors"
        >
          <Plus className="w-4 h-4" />
          Nuevo Aviso
        </button>
      </div>

      {/* Stats */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3 mb-6">
          {[
            { label: 'Pendientes', value: stats.pendientes, color: 'text-yellow-600 bg-yellow-50' },
            { label: 'Asignados', value: stats.asignados, color: 'text-blue-600 bg-blue-50' },
            { label: 'En Proceso', value: stats.enProceso, color: 'text-purple-600 bg-purple-50' },
            { label: 'Cerrados', value: stats.cerrados, color: 'text-green-600 bg-green-50' },
            { label: 'Cancelados', value: stats.cancelados, color: 'text-gray-600 bg-gray-50' },
            { label: 'Urgentes', value: stats.urgentes, color: 'text-red-600 bg-red-50' },
            { label: 'Total', value: stats.total, color: 'text-indigo-600 bg-indigo-50' },
          ].map((s) => (
            <div key={s.label} className={`${s.color} rounded-lg p-3 text-center`}>
              <div className="text-2xl font-bold">{s.value}</div>
              <div className="text-xs font-medium mt-0.5">{s.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Toolbar */}
      <div className="flex flex-col xl:flex-row gap-3 mb-6">
        <div className="relative flex-1 min-w-[250px]">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="Buscar por cliente, descripción, contacto..."
            value={busqueda}
            onChange={(e) => setBusqueda(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#3182ce] focus:border-transparent outline-none text-gray-900"
          />
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <div className="relative">
            <Filter className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
            <select
              value={filtroEstado}
              onChange={(e) => setFiltroEstado(e.target.value)}
              className="pl-8 pr-8 py-2 border border-gray-300 rounded-lg text-sm bg-white appearance-none cursor-pointer text-gray-700 h-[38px]"
            >
              <option value="">Todos los estados</option>
              {Object.entries(ESTADO_LABELS).map(([k, v]) => (
                <option key={k} value={k}>{v}</option>
              ))}
            </select>
          </div>

          <select
            value={filtroUrgencia}
            onChange={(e) => setFiltroUrgencia(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white text-gray-700 w-32 h-[38px] cursor-pointer"
          >
            <option value="">Urgencia</option>
            {Object.entries(URGENCIA_LABELS).map(([k, v]) => (
              <option key={k} value={k}>{v}</option>
            ))}
          </select>

          <div className="flex items-center gap-2 border border-gray-300 rounded-lg bg-white px-3 py-1.5 shadow-sm h-[38px]">
            <div className="flex items-center gap-1.5">
              <span className="text-[11px] text-gray-500 font-medium uppercase tracking-wider">Desde</span>
              <input
                type="date"
                value={fechaDesde}
                onChange={(e) => setFechaDesde(e.target.value)}
                className="text-sm border-none bg-transparent focus:ring-0 p-0 text-gray-700 outline-none w-[110px] cursor-pointer"
              />
            </div>
            <span className="text-gray-300">|</span>
            <div className="flex items-center gap-1.5">
              <span className="text-[11px] text-gray-500 font-medium uppercase tracking-wider">Hasta</span>
              <input
                type="date"
                value={fechaHasta}
                onChange={(e) => setFechaHasta(e.target.value)}
                className="text-sm border-none bg-transparent focus:ring-0 p-0 text-gray-700 outline-none w-[110px] cursor-pointer"
              />
            </div>
          </div>

          <div className="flex bg-gray-100 rounded-lg p-0.5 ml-auto">
            <button
              onClick={() => setViewMode('kanban')}
              className={`p-2 rounded-md transition-colors ${viewMode === 'kanban' ? 'bg-white shadow-sm text-[#1a365d]' : 'text-gray-500 hover:text-gray-700'}`}
              title="Vista Kanban"
            >
              <LayoutGrid className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode('lista')}
              className={`p-2 rounded-md transition-colors ${viewMode === 'lista' ? 'bg-white shadow-sm text-[#1a365d]' : 'text-gray-500 hover:text-gray-700'}`}
              title="Vista Lista"
            >
              <List className="w-4 h-4" />
            </button>
          </div>

          <button
            onClick={() => { fetchAvisos(); fetchStats(); }}
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors border border-transparent hover:border-gray-200"
            title="Refrescar"
          >
            <RefreshCw className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Content */}
      {loading ? (
        <div className="flex items-center justify-center py-20">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#1a365d]"></div>
        </div>
      ) : viewMode === 'kanban' ? (
        /* KANBAN VIEW */
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {kanbanColumns.map((col) => {
            const colAvisos = avisos.filter((a) => a.estado === col.key);
            return (
              <div key={col.key} className={`bg-gray-50 rounded-xl border-t-4 ${col.color} min-h-[200px]`}>
                <div className="px-4 py-3 flex items-center justify-between">
                  <h3 className="font-semibold text-sm text-gray-700">{col.label}</h3>
                  <span className="text-xs bg-white text-gray-600 px-2 py-0.5 rounded-full font-medium shadow-sm">
                    {colAvisos.length}
                  </span>
                </div>
                <div className="px-3 pb-3 space-y-2 max-h-[600px] overflow-y-auto">
                  {colAvisos.length === 0 ? (
                    <p className="text-xs text-gray-400 text-center py-8">Sin avisos</p>
                  ) : (
                    colAvisos.map((aviso) => <AvisoCard key={aviso.id} aviso={aviso} />)
                  )}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        /* LIST VIEW */
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <th className="px-4 py-3">#</th>
                  <th className="px-4 py-3">Estado</th>
                  <th className="px-4 py-3">Urgencia</th>
                  <th className="px-4 py-3">Cliente</th>
                  <th className="px-4 py-3">Descripción</th>
                  <th className="px-4 py-3">Canal</th>
                  <th className="px-4 py-3">Asignado</th>
                  <th className="px-4 py-3">Partes</th>
                  <th className="px-4 py-3">Entrada</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {avisos.length === 0 ? (
                  <tr><td colSpan={10} className="px-4 py-12 text-center text-gray-400">No se encontraron avisos</td></tr>
                ) : (
                  avisos.map((aviso) => (
                    <tr
                      key={aviso.id}
                      className="hover:bg-gray-50 cursor-pointer transition-colors"
                      onClick={() => setSelectedAvisoId(aviso.id)}
                    >
                      <td className="px-4 py-3 text-sm font-mono text-gray-500">
                        {aviso.numero}
                        {aviso.reabierto && <RefreshCw className="w-3 h-3 inline ml-1 text-orange-500" />}
                      </td>
                      <td className="px-4 py-3">
                        <span className={`text-xs px-2 py-1 rounded-full font-medium ${ESTADO_COLORS[aviso.estado]}`}>
                          {ESTADO_LABELS[aviso.estado]}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`text-xs px-2 py-1 rounded font-medium ${URGENCIA_COLORS[aviso.urgencia]}`}>
                          {URGENCIA_LABELS[aviso.urgencia]}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-sm font-medium text-gray-900">{aviso.cliente}</td>
                      <td className="px-4 py-3 text-sm text-gray-600 max-w-[200px] truncate">{aviso.descripcion}</td>
                      <td className="px-4 py-3 text-sm text-gray-500">
                        <span className="flex items-center gap-1">{CANAL_ICONS[aviso.canal]} {CANAL_LABELS[aviso.canal]}</span>
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-600">{aviso.asignadoA?.name || '-'}</td>
                      <td className="px-4 py-3 text-sm text-gray-600">
                        {aviso._count.partes > 0 ? `${aviso.partes.filter(p => p.estado === 'FINALIZADO').length}/${aviso._count.partes}` : '-'}
                      </td>
                      <td className="px-4 py-3 text-xs text-gray-500">{formatDate(aviso.fechaEntrada)}</td>
                      <td className="px-4 py-3">
                        <ChevronRight className="w-4 h-4 text-gray-400" />
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Modals */}
      <AnimatePresence>
        {showNuevoModal && (
          <NuevoAvisoModal onClose={() => setShowNuevoModal(false)} onCreated={handleCreated} />
        )}
        {selectedAvisoId && (
          <AvisoDetailModal avisoId={selectedAvisoId} userRole={userRole} userId={userId} onClose={handleDetailClose} />
        )}
      </AnimatePresence>
    </div>
  );
}