'use client';

import { useState, useEffect } from 'react';
import {
  X, Loader2, Building2, Phone, Mail, Globe, MapPin,
  User as UserIcon, Plus, Trash2, Edit3, Save, AlertCircle,
  ClipboardList, FileText, MessageSquare, Clock, CheckCircle2,
  Star, ChevronDown, ChevronUp, FileSignature
} from 'lucide-react';
import { motion } from 'framer-motion';
import { TIPO_LABELS, TIPO_COLORS, TIPO_DIRECCION_LABELS, FORMAS_PAGO_LABELS } from '@/lib/clientes/constants';
import { ESTADO_LABELS, ESTADO_COLORS, URGENCIA_LABELS, URGENCIA_COLORS } from '@/lib/avisos/constants';
import ContratosMantenimientoTab from './contratos-mantenimiento-tab';

interface Props {
  clienteId: string;
  canEdit: boolean;
  onClose: () => void;
  onUpdated: () => void;
}

type Tab = 'resumen' | 'contactos' | 'direcciones' | 'avisos' | 'notas' | 'contratos';

export default function ClienteDetailModal({ clienteId, canEdit, onClose, onUpdated }: Props) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>(null);
  const [tab, setTab] = useState<Tab>('resumen');
  const [error, setError] = useState('');

  // Edit mode for general info
  const [editing, setEditing] = useState(false);
  const [editForm, setEditForm] = useState<any>({});
  const [saving, setSaving] = useState(false);

  // Add contact form
  const [showAddContacto, setShowAddContacto] = useState(false);
  const [newContacto, setNewContacto] = useState({ nombre: '', cargo: '', telefono: '', email: '', esPrincipal: false });

  // Add address form
  const [showAddDireccion, setShowAddDireccion] = useState(false);
  const [newDireccion, setNewDireccion] = useState({ tipo: 'PRINCIPAL', calle: '', numero: '', piso: '', codigoPostal: '', ciudad: '', provincia: '', esPrincipal: false });

  // Add note form
  const [newNota, setNewNota] = useState('');

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/clientes/${clienteId}`);
      if (!res.ok) throw new Error('Error');
      const d = await res.json();
      setData(d);
      setEditForm({
        nombre: d.cliente.nombre,
        cif: d.cliente.cif || '',
        tipo: d.cliente.tipo,
        email: d.cliente.email || '',
        telefono: d.cliente.telefono || '',
        web: d.cliente.web || '',
        observaciones: d.cliente.observaciones || '',
        formaPago: d.cliente.formaPago || 'TRANSFERENCIA_BANCARIA',
        activo: d.cliente.activo,
      });
    } catch (e) {
      setError('Error cargando datos del cliente');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchData(); }, [clienteId]);

  const handleSaveGeneral = async () => {
    setSaving(true);
    try {
      const res = await fetch(`/api/clientes/${clienteId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(editForm),
      });
      if (!res.ok) {
        const d = await res.json();
        setError(d.error || 'Error guardando');
        return;
      }
      setEditing(false);
      fetchData();
      onUpdated();
    } catch (e) {
      setError('Error de conexión');
    } finally {
      setSaving(false);
    }
  };

  const handleAddContacto = async () => {
    if (!newContacto.nombre.trim()) return;
    try {
      const res = await fetch(`/api/clientes/${clienteId}/contactos`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newContacto),
      });
      if (res.ok) {
        setShowAddContacto(false);
        setNewContacto({ nombre: '', cargo: '', telefono: '', email: '', esPrincipal: false });
        fetchData();
      }
    } catch (e) { console.error(e); }
  };

  const handleDeleteContacto = async (id: string) => {
    if (!confirm('¿Eliminar este contacto?')) return;
    try {
      await fetch(`/api/contactos/${id}`, { method: 'DELETE' });
      fetchData();
    } catch (e) { console.error(e); }
  };

  const handleAddDireccion = async () => {
    if (!newDireccion.calle.trim()) return;
    try {
      const res = await fetch(`/api/clientes/${clienteId}/direcciones`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newDireccion),
      });
      if (res.ok) {
        setShowAddDireccion(false);
        setNewDireccion({ tipo: 'PRINCIPAL', calle: '', numero: '', piso: '', codigoPostal: '', ciudad: '', provincia: '', esPrincipal: false });
        fetchData();
      }
    } catch (e) { console.error(e); }
  };

  const handleDeleteDireccion = async (id: string) => {
    if (!confirm('¿Eliminar esta dirección?')) return;
    try {
      await fetch(`/api/direcciones/${id}`, { method: 'DELETE' });
      fetchData();
    } catch (e) { console.error(e); }
  };

  const handleAddNota = async () => {
    if (!newNota.trim()) return;
    try {
      const res = await fetch(`/api/clientes/${clienteId}/notas`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ contenido: newNota }),
      });
      if (res.ok) { setNewNota(''); fetchData(); }
    } catch (e) { console.error(e); }
  };

  const cliente = data?.cliente;
  const avisos = data?.avisos || [];
  const avisosAbiertos = data?.avisosAbiertos || [];
  const resumen = data?.resumen;

  const tabs: { key: Tab; label: string; icon: any }[] = [
    { key: 'resumen', label: 'Resumen', icon: Building2 },
    { key: 'contactos', label: `Contactos (${cliente?.contactos?.length || 0})`, icon: UserIcon },
    { key: 'direcciones', label: `Direcciones (${cliente?.direcciones?.length || 0})`, icon: MapPin },
    { key: 'avisos', label: `Avisos (${avisos.length})`, icon: ClipboardList },
    { key: 'notas', label: `Notas (${cliente?.notas?.length || 0})`, icon: MessageSquare },
  ];

  if (cliente?.tipo === 'EMPRESA') {
    tabs.splice(4, 0, { key: 'contratos', label: 'Contratos', icon: FileSignature });
  }

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.95, opacity: 0 }}
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-xl w-full max-w-4xl max-h-[92vh] overflow-hidden flex flex-col"
      >
        {loading ? (
          <div className="p-12 text-center"><Loader2 className="w-6 h-6 animate-spin mx-auto" /></div>
        ) : error && !cliente ? (
          <div className="p-12 text-center text-red-500">{error}</div>
        ) : cliente ? (
          <>
            {/* Header */}
            <div className="flex items-start justify-between px-6 py-4 border-b bg-gradient-to-r from-[#1a365d]/5 to-transparent">
              <div className="flex items-start gap-4">
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold ${!cliente.activo ? 'bg-gray-200 text-gray-500' : 'bg-[#1a365d]/10 text-[#1a365d]'}`}>
                  {cliente.nombre?.charAt(0)?.toUpperCase()}
                </div>
                <div>
                  <h2 className={`text-lg font-bold ${!cliente.activo ? 'text-gray-400 line-through' : 'text-gray-900'}`}>{cliente.nombre}</h2>
                  <div className="flex items-center gap-3 mt-1 flex-wrap">
                    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${TIPO_COLORS[cliente.tipo]}`}>
                      {TIPO_LABELS[cliente.tipo]}
                    </span>
                    {cliente.cif && <span className="text-xs text-gray-500">CIF: {cliente.cif}</span>}
                    {!cliente.activo && <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700">Inactivo</span>}
                  </div>
                  {resumen && (
                    <div className="flex gap-4 mt-2 text-xs text-gray-500">
                      <span>{resumen.totalAvisos} aviso{resumen.totalAvisos !== 1 ? 's' : ''}</span>
                      <span>{resumen.avisosAbiertos} abierto{resumen.avisosAbiertos !== 1 ? 's' : ''}</span>
                      <span>{resumen.totalPartes} parte{resumen.totalPartes !== 1 ? 's' : ''}</span>
                    </div>
                  )}
                </div>
              </div>
              <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Tabs */}
            <div className="flex border-b px-6 overflow-x-auto">
              {tabs.map(t => (
                <button
                  key={t.key}
                  onClick={() => setTab(t.key)}
                  className={`flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition whitespace-nowrap ${tab === t.key ? 'border-[#1a365d] text-[#1a365d]' : 'border-transparent text-gray-500 hover:text-gray-700'
                    }`}
                >
                  <t.icon className="w-3.5 h-3.5" />
                  {t.label}
                </button>
              ))}
            </div>

            {/* Body */}
            <div className="flex-1 overflow-y-auto p-6">
              {error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm mb-4">{error}</div>}

              {/* TAB: Resumen */}
              {tab === 'resumen' && (
                <div className="space-y-6">
                  {/* Edit / View toggle */}
                  {canEdit && !editing && (
                    <button onClick={() => setEditing(true)} className="text-sm text-[#1a365d] hover:underline flex items-center gap-1">
                      <Edit3 className="w-3.5 h-3.5" /> Editar datos generales
                    </button>
                  )}

                  {editing ? (
                    <div className="space-y-4">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div className="sm:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
                          <input value={editForm.nombre} onChange={e => setEditForm({ ...editForm, nombre: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none focus:ring-2 focus:ring-[#1a365d]/20" />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">CIF</label>
                          <input value={editForm.cif} onChange={e => setEditForm({ ...editForm, cif: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none" />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
                          <select value={editForm.tipo} onChange={e => setEditForm({ ...editForm, tipo: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none bg-white">
                            {Object.entries(TIPO_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                          </select>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                          <input value={editForm.email} onChange={e => setEditForm({ ...editForm, email: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none" />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Teléfono</label>
                          <input value={editForm.telefono} onChange={e => setEditForm({ ...editForm, telefono: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none" />
                        </div>
                        <div className="sm:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Web</label>
                          <input value={editForm.web} onChange={e => setEditForm({ ...editForm, web: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none" />
                        </div>
                        <div className="sm:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Forma de Pago Habitual</label>
                          <select value={editForm.formaPago} onChange={e => setEditForm({ ...editForm, formaPago: e.target.value })} className="w-full px-3 py-2 text-sm border rounded-lg outline-none bg-white">
                            {Object.entries(FORMAS_PAGO_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                          </select>
                        </div>
                        <div className="sm:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
                          <textarea value={editForm.observaciones} onChange={e => setEditForm({ ...editForm, observaciones: e.target.value })} rows={3} className="w-full px-3 py-2 text-sm border rounded-lg outline-none resize-none" />
                        </div>
                        <div>
                          <label className="flex items-center gap-2 text-sm cursor-pointer">
                            <input type="checkbox" checked={editForm.activo} onChange={e => setEditForm({ ...editForm, activo: e.target.checked })} className="rounded" />
                            Cliente activo
                          </label>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <button onClick={handleSaveGeneral} disabled={saving} className="px-4 py-2 text-sm bg-[#1a365d] text-white rounded-lg hover:bg-[#2d4a7c] flex items-center gap-2 disabled:opacity-50">
                          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} Guardar
                        </button>
                        <button onClick={() => setEditing(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Cancelar</button>
                      </div>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                      <InfoItem icon={Phone} label="Teléfono" value={cliente.telefono} />
                      <InfoItem icon={Mail} label="Email" value={cliente.email} />
                      <InfoItem icon={Globe} label="Web" value={cliente.web} />
                      <InfoItem icon={FileText} label="CIF" value={cliente.cif} />

                      <div className="sm:col-span-2 flex items-center gap-3 bg-gray-50 border border-gray-100 rounded-lg p-3">
                        <FileSignature className="w-5 h-5 text-gray-400" />
                        <div>
                          <p className="text-xs text-gray-500">Forma de Pago Habitual</p>
                          <p className="text-sm font-medium text-[#1a365d]">{FORMAS_PAGO_LABELS[cliente.formaPago] || cliente.formaPago || 'No definida'}</p>
                        </div>
                      </div>

                      {cliente.observaciones && (
                        <div className="sm:col-span-2">
                          <p className="text-xs text-gray-500 mb-1">Observaciones</p>
                          <p className="text-sm text-gray-700 bg-amber-50 border border-amber-100 rounded-lg p-3">{cliente.observaciones}</p>
                        </div>
                      )}
                    </div>
                  )}

                  {/* Avisos abiertos quick view */}
                  {avisosAbiertos.length > 0 && (
                    <div>
                      <h4 className="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <AlertCircle className="w-4 h-4 text-orange-500" />
                        Avisos abiertos ({avisosAbiertos.length})
                      </h4>
                      <div className="space-y-2">
                        {avisosAbiertos.slice(0, 5).map((a: any) => (
                          <div key={a.id} className="flex items-center gap-3 p-3 bg-orange-50 border border-orange-100 rounded-lg">
                            <span className={`text-xs px-2 py-0.5 rounded-full font-medium border ${ESTADO_COLORS[a.estado] || ''}`}>{ESTADO_LABELS[a.estado]}</span>
                            <span className={`text-xs px-1.5 py-0.5 rounded ${URGENCIA_COLORS[a.urgencia] || ''}`}>{URGENCIA_LABELS[a.urgencia]}</span>
                            <span className="text-sm text-gray-700 flex-1 truncate">#{a.numero} — {a.descripcion}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* TAB: Contactos */}
              {tab === 'contactos' && (
                <div className="space-y-4">
                  {canEdit && (
                    <button onClick={() => setShowAddContacto(!showAddContacto)} className="text-sm text-[#1a365d] hover:underline flex items-center gap-1">
                      <Plus className="w-4 h-4" /> Añadir contacto
                    </button>
                  )}

                  {showAddContacto && (
                    <div className="border rounded-lg p-4 bg-blue-50 space-y-3">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <input value={newContacto.nombre} onChange={e => setNewContacto({ ...newContacto, nombre: e.target.value })} placeholder="Nombre *" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newContacto.cargo} onChange={e => setNewContacto({ ...newContacto, cargo: e.target.value })} placeholder="Cargo" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newContacto.telefono} onChange={e => setNewContacto({ ...newContacto, telefono: e.target.value })} placeholder="Teléfono" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newContacto.email} onChange={e => setNewContacto({ ...newContacto, email: e.target.value })} placeholder="Email" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                      </div>
                      <div className="flex gap-2">
                        <button onClick={handleAddContacto} className="px-3 py-1.5 text-xs bg-[#1a365d] text-white rounded-lg">Guardar</button>
                        <button onClick={() => setShowAddContacto(false)} className="px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-200 rounded-lg">Cancelar</button>
                      </div>
                    </div>
                  )}

                  {cliente.contactos?.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-8">No hay contactos registrados</p>
                  ) : (
                    <div className="space-y-3">
                      {cliente.contactos.map((c: any) => (
                        <div key={c.id} className="border rounded-lg p-4 flex items-start justify-between bg-white">
                          <div className="space-y-1">
                            <div className="flex items-center gap-2">
                              <span className="font-medium text-sm text-gray-900">{c.nombre}</span>
                              {c.esPrincipal && <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />}
                              {c.cargo && <span className="text-xs text-gray-400">— {c.cargo}</span>}
                            </div>
                            <div className="flex gap-4 text-xs text-gray-500">
                              {c.telefono && <span className="flex items-center gap-1"><Phone className="w-3 h-3" /> {c.telefono}</span>}
                              {c.email && <span className="flex items-center gap-1"><Mail className="w-3 h-3" /> {c.email}</span>}
                            </div>
                          </div>
                          {canEdit && (
                            <button onClick={() => handleDeleteContacto(c.id)} className="p-1 hover:bg-red-50 text-red-400 hover:text-red-600 rounded">
                              <Trash2 className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB: Direcciones */}
              {tab === 'direcciones' && (
                <div className="space-y-4">
                  {canEdit && (
                    <button onClick={() => setShowAddDireccion(!showAddDireccion)} className="text-sm text-[#1a365d] hover:underline flex items-center gap-1">
                      <Plus className="w-4 h-4" /> Añadir dirección
                    </button>
                  )}

                  {showAddDireccion && (
                    <div className="border rounded-lg p-4 bg-blue-50 space-y-3">
                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <select value={newDireccion.tipo} onChange={e => setNewDireccion({ ...newDireccion, tipo: e.target.value })} className="px-3 py-2 text-sm border rounded-lg outline-none bg-white">
                          {Object.entries(TIPO_DIRECCION_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                        </select>
                        <input value={newDireccion.calle} onChange={e => setNewDireccion({ ...newDireccion, calle: e.target.value })} placeholder="Calle *" className="sm:col-span-2 px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newDireccion.numero} onChange={e => setNewDireccion({ ...newDireccion, numero: e.target.value })} placeholder="Número" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newDireccion.piso} onChange={e => setNewDireccion({ ...newDireccion, piso: e.target.value })} placeholder="Piso" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newDireccion.codigoPostal} onChange={e => setNewDireccion({ ...newDireccion, codigoPostal: e.target.value })} placeholder="C.P." className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newDireccion.ciudad} onChange={e => setNewDireccion({ ...newDireccion, ciudad: e.target.value })} placeholder="Ciudad" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                        <input value={newDireccion.provincia} onChange={e => setNewDireccion({ ...newDireccion, provincia: e.target.value })} placeholder="Provincia" className="px-3 py-2 text-sm border rounded-lg outline-none" />
                      </div>
                      <div className="flex gap-2">
                        <button onClick={handleAddDireccion} className="px-3 py-1.5 text-xs bg-[#1a365d] text-white rounded-lg">Guardar</button>
                        <button onClick={() => setShowAddDireccion(false)} className="px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-200 rounded-lg">Cancelar</button>
                      </div>
                    </div>
                  )}

                  {cliente.direcciones?.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-8">No hay direcciones registradas</p>
                  ) : (
                    <div className="space-y-3">
                      {cliente.direcciones.map((d: any) => (
                        <div key={d.id} className="border rounded-lg p-4 flex items-start justify-between bg-white">
                          <div className="space-y-1">
                            <div className="flex items-center gap-2">
                              <span className="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-medium">{TIPO_DIRECCION_LABELS[d.tipo] || d.tipo}</span>
                              {d.esPrincipal && <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />}
                            </div>
                            <p className="text-sm text-gray-900">
                              {d.calle}{d.numero ? ` ${d.numero}` : ''}{d.piso ? `, ${d.piso}` : ''}
                            </p>
                            <p className="text-xs text-gray-500">
                              {[d.codigoPostal, d.ciudad, d.provincia].filter(Boolean).join(', ')}{d.pais && d.pais !== 'España' ? ` - ${d.pais}` : ''}
                            </p>
                          </div>
                          {canEdit && (
                            <button onClick={() => handleDeleteDireccion(d.id)} className="p-1 hover:bg-red-50 text-red-400 hover:text-red-600 rounded">
                              <Trash2 className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB: Avisos (Histórico) */}
              {tab === 'avisos' && (
                <div className="space-y-4">
                  {avisos.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-8">No hay avisos para este cliente</p>
                  ) : (
                    <div className="space-y-3">
                      {avisos.map((a: any) => (
                        <div key={a.id} className="border rounded-lg p-4 bg-white">
                          <div className="flex items-start justify-between">
                            <div className="space-y-1">
                              <div className="flex items-center gap-2 flex-wrap">
                                <span className="font-medium text-sm text-gray-900">#{a.numero}</span>
                                <span className={`text-xs px-2 py-0.5 rounded-full font-medium border ${ESTADO_COLORS[a.estado] || ''}`}>{ESTADO_LABELS[a.estado]}</span>
                                <span className={`text-xs px-1.5 py-0.5 rounded ${URGENCIA_COLORS[a.urgencia] || ''}`}>{URGENCIA_LABELS[a.urgencia]}</span>
                              </div>
                              <p className="text-sm text-gray-600">{a.descripcion}</p>
                              <div className="flex gap-4 text-xs text-gray-400">
                                <span className="flex items-center gap-1">
                                  <Clock className="w-3 h-3" />
                                  {new Date(a.fechaEntrada).toLocaleDateString('es-ES')}
                                </span>
                                {a.asignadoA && <span>Técnico: {a.asignadoA.name}</span>}
                                <span>{a.partes?.length || 0} parte{(a.partes?.length || 0) !== 1 ? 's' : ''}</span>
                              </div>
                            </div>
                          </div>
                          {/* Partes del aviso */}
                          {a.partes?.length > 0 && (
                            <div className="mt-3 ml-4 border-l-2 border-gray-200 pl-4 space-y-2">
                              {a.partes.map((p: any) => (
                                <div key={p.id} className="flex items-center gap-2 text-xs">
                                  <span className={`w-2 h-2 rounded-full ${p.estado === 'FINALIZADO' ? 'bg-green-500' :
                                    p.estado === 'EN_PROCESO' ? 'bg-blue-500' :
                                      p.estado === 'CANCELADO' ? 'bg-gray-400' :
                                        'bg-yellow-500'
                                    }`} />
                                  <span className="text-gray-600">{p.descripcion}</span>
                                  {p.tecnico && <span className="text-gray-400">({p.tecnico.name})</span>}
                                  {p.fechaProgramada && (
                                    <span className="text-gray-400">{new Date(p.fechaProgramada).toLocaleDateString('es-ES')}</span>
                                  )}
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB: Notas */}
              {tab === 'notas' && (
                <div className="space-y-4">
                  {/* Add note */}
                  <div className="flex gap-2">
                    <input
                      value={newNota}
                      onChange={e => setNewNota(e.target.value)}
                      onKeyDown={e => e.key === 'Enter' && handleAddNota()}
                      placeholder="Escribe una nota interna..."
                      className="flex-1 px-3 py-2 text-sm border rounded-lg outline-none focus:ring-2 focus:ring-[#1a365d]/20"
                    />
                    <button onClick={handleAddNota} disabled={!newNota.trim()} className="px-4 py-2 text-sm bg-[#1a365d] text-white rounded-lg hover:bg-[#2d4a7c] disabled:opacity-50">
                      Añadir
                    </button>
                  </div>

                  {cliente.notas?.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-8">No hay notas</p>
                  ) : (
                    <div className="space-y-3">
                      {cliente.notas.map((n: any) => (
                        <div key={n.id} className="border rounded-lg p-3 bg-amber-50/50">
                          <p className="text-sm text-gray-800">{n.contenido}</p>
                          <p className="text-xs text-gray-400 mt-2">
                            {n.autor?.name || 'Sistema'} — {new Date(n.createdAt).toLocaleString('es-ES')}
                          </p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB: Contratos */}
              {tab === 'contratos' && cliente?.tipo === 'EMPRESA' && (
                <div className="space-y-4">
                  <ContratosMantenimientoTab clienteId={clienteId} canEdit={canEdit} />
                </div>
              )}
            </div>
          </>
        ) : null}
      </motion.div>
    </motion.div>
  );
}

function InfoItem({ icon: Icon, label, value }: { icon: any; label: string; value?: string | null }) {
  return (
    <div className="flex items-start gap-3">
      <Icon className="w-4 h-4 text-gray-400 mt-0.5" />
      <div>
        <p className="text-xs text-gray-500">{label}</p>
        <p className="text-sm text-gray-800">{value || '—'}</p>
      </div>
    </div>
  );
}