import { useCallback, useEffect, useState, type FormEvent } from 'react'
import KpiCard from '../components/KpiCard'
import BannerModoLocal from '../components/BannerModoLocal'
import DarkModeToggle from '../components/DarkModeToggle'
import { SkeletonList } from "../components/Skeleton"
import toast from "react-hot-toast"
import ChipPendienteSync from '../components/ChipPendienteSync'
import type { AccionesSesion } from '../components/AuthGate'
import {
  esActividadVencida,
  esRolConEquipo,
  formatoFechaCorta,
  hoyLocal,
  DESARROLLOS_LEAD,
  ETIQUETA_FASE_APARTADO,
  ETIQUETA_FASE_OPORTUNIDAD,
  FASES_APARTADO,
  MOTIVOS_NO_COMPRA,
  ORIGENES_LEAD,
  SLOTS_DOCS_APARTADO,
  SUBCATEGORIAS_NO_COMPRA,
  componerTelefono,
  LADAS,
  textoDiasRestantes,
  urlAfluenciaParaOportunidad,
  urlCotizadorParaOportunidad,
  type ApartadoMiDia,
  type ClaveLada,
  type FaseApartado,
  type LeadMiDia,
  type MotivoNoCompra,
  type OportunidadMiDia,
  type ResumenMiDia,
  type SlotDocApartado,
} from '../lib/mi-dia'
import {
  cambiarEstadoApartado,
  cambiarEstadoLead,
  cambiarEtapaOportunidad,
  convertirLead,
  crearLead,
  descartarLead,
  fetchResumenMiDia,
  listarDocumentosApartado,
  subirDocumentoApartado,
  type DocumentoApartado,
} from '../services/mi-dia'
import { guardarResumen, cargarResumenLocal } from '../services/offline-db'
import { suscribirPush } from '../services/push'
import { exportarLeads, exportarOportunidades, exportarApartados } from '../services/exportar'
import { NotasApartado } from '../components/NotasApartado'
import { FiltrosAvanzados, aplicarFiltros, type FiltrosCRM } from '../components/FiltrosAvanzados'
import { getSesion } from '../services/auth'
import DashboardVendedor from '../components/DashboardVendedor'
import ScoreBadge, { calcularScore } from '../components/ScoreBadge'
import KanbanView from '../components/KanbanView'
import TimelineLead, { type EventoLead } from '../components/TimelineLead'

function TituloSeccion({ children }: { children: string }) {
  return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{children}</h2>
}

/** Banner de resumen matutino: saludo + KPIs del día */
function ResumenMatutino({
  nombre,
  leadsNuevos,
  oportunidadesActivas,
  apartadosPorVencer,
}: {
  nombre: string
  leadsNuevos: number
  oportunidadesActivas: number
  apartadosPorVencer: number
}) {
  const hora = new Date().getHours()
  const esManana = hora < 12
  const saludo = esManana ? 'Buenos días' : 'Buenas tardes'
  const icono = esManana ? '☀️' : '🌙'
  return (
    <div className="mb-6 rounded-xl bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-950/40 dark:to-blue-900/30 border border-blue-200 dark:border-blue-800/40 p-4 shadow-sm">
      <div className="flex items-center gap-3">
        <span className="text-2xl">{icono}</span>
        <div>
          <p className="text-base font-semibold text-[#111827] dark:text-[#E2E8F0]">
            {saludo}, {nombre}
          </p>
          <p className="mt-0.5 text-sm text-[#64748B] dark:text-[#94A3B8]">
            Tienes {leadsNuevos} lead{leadsNuevos !== 1 ? 's' : ''} nuevos hoy,{' '}
            {oportunidadesActivas} oportunidade{oportunidadesActivas !== 1 ? 's' : ''} activa{oportunidadesActivas !== 1 ? 's' : ''},{' '}
            {apartadosPorVencer} apartado{apartadosPorVencer !== 1 ? 's' : ''} por vencer
          </p>
        </div>
      </div>
    </div>
  )
}

function EstadoVacio({ mensaje }: { mensaje: string }) {
  return (
    <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white dark:border-[#334155] dark:bg-[#1E293B]">
      <p className="text-xs font-semibold uppercase tracking-wider text-[#94A3B8]">{mensaje}</p>
    </div>
  )
}

const CLASE_BOTON_ACCION =
  'rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50'

const CLASE_INPUT =
  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'

const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1]'

/** Modal de descarte: motivo + subcategoría (catálogo Monday) + comentario opcional */
function ModalDescartar({
  lead,
  onCancelar,
  onConfirmar,
  enviando,
}: {
  lead: { id: string; nombre: string }
  onCancelar: () => void
  onConfirmar: (motivo: MotivoNoCompra, subcategoria: string | undefined, comentario: string) => void
  enviando: boolean
}) {
  const [motivo, setMotivo] = useState<MotivoNoCompra>(MOTIVOS_NO_COMPRA[0])
  const [subcategoria, setSubcategoria] = useState('')
  const [comentario, setComentario] = useState('')
  const subcategorias = SUBCATEGORIAS_NO_COMPRA[motivo]
  return (
    <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 px-4" role="dialog" aria-modal="true">
      <div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-xl">
        <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Descartar lead</p>
        <p className="mt-2 text-lg font-medium text-[#111827] dark:text-[#E2E8F0]">{lead.nombre}</p>
        <form
          className="mt-6 space-y-4"
          onSubmit={(e) => {
            e.preventDefault()
            onConfirmar(motivo, subcategoria === '' ? undefined : subcategoria, comentario.trim())
          }}
        >
          <div>
            <label htmlFor="motivo-descarte" className={CLASE_LABEL}>
              Motivo
            </label>
            <select
              id="motivo-descarte"
              value={motivo}
              onChange={(e) => {
                setMotivo(e.target.value as MotivoNoCompra)
                setSubcategoria('') // las subcategorías dependen de la categoría
              }}
              className={CLASE_INPUT}
            >
              {MOTIVOS_NO_COMPRA.map((m) => (
                <option key={m} value={m}>
                  {m}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label htmlFor="subcategoria-descarte" className={CLASE_LABEL}>
              Subcategoría
            </label>
            <select
              id="subcategoria-descarte"
              value={subcategoria}
              onChange={(e) => setSubcategoria(e.target.value)}
              className={CLASE_INPUT}
            >
              <option value="">— Selecciona —</option>
              {subcategorias.map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label htmlFor="comentario-descarte" className={CLASE_LABEL}>
              Comentario (opcional)
            </label>
            <textarea
              id="comentario-descarte"
              value={comentario}
              onChange={(e) => setComentario(e.target.value)}
              rows={3}
              className={CLASE_INPUT}
            />
          </div>
          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={onCancelar}
              disabled={enviando}
              className="rounded-lg border border-[#D1D5DB] bg-white px-5 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={enviando}
              className="rounded-lg bg-red-600 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-red-700 disabled:opacity-50"
            >
              {enviando ? 'Descartando…' : 'Descartar'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

/** Fila de oportunidad con botones de fase del funnel (Agendo Cita lleva fecha) */
function FilaOportunidad({
  op,
  onEtapa,
  onCotizar,
  onAfluencia,
  onDescartar,
  enviando,
  acciones,
}: {
  op: OportunidadMiDia
  onEtapa: (etapa: string, fecha?: string) => void
  onCotizar: () => void
  onAfluencia: () => void
  onDescartar: () => void
  enviando: boolean
  acciones?: string[]
}) {
  const [conCita, setConCita] = useState(false)
  const [fechaCita, setFechaCita] = useState('')
  // Sin 'No Asistio' ni 'Abandono': son redundantes con Descartar
  const fases = ['Agendo Cita', 'Aparto'] as const
  return (
    <li className="rounded-xl border border-[#E5E7EB] bg-white p-4 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="flex items-center gap-2 text-sm font-medium">
            {op.nombre}
            {op.pendienteSync === true && <ChipPendienteSync />}
          </p>
          <p className="mt-1 text-xs text-[#64748B] dark:text-[#94A3B8]">
            {op.telefono || 'Sin teléfono'}
            {op.desarrollo ? ` · ${op.desarrollo}` : ''}
            {op.modeloInteres ? ` · ${op.modeloInteres}` : ''}
            {op.unidadCodigo ? ` · ${op.unidadCodigo}` : ''}
          </p>
          {op.ultimoCambio && (
            <p className="mt-0.5 text-[11px] text-[#9CA3AF] dark:text-[#64748B]">
              Último cambio: {op.ultimoCambio.detalle} · {op.ultimoCambio.usuario ?? '—'} ·{' '}
              {formatoFechaCorta(op.ultimoCambio.fechaISO.slice(0, 10))}
            </p>
          )}
        </div>
        <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
          {op.etapa || 'Sin etapa'}
        </span>
      </div>
      <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
        {/* Cotizar: cambia la etapa y abre el cotizador con los datos prellenados */}
        <button
          type="button"
          disabled={enviando}
          onClick={onCotizar}
          className="rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
        >
          Cotizar →
        </button>
        {/* Afluencia: abre el formulario de alta afluencia prellenado */}
        <button
          type="button"
          disabled={enviando}
          onClick={onAfluencia}
          className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
        >
          Afluencia →
        </button>
        {fases.map((f) =>
          f === 'Agendo Cita' ? (
            <span key={f} className="contents">
              <button
                type="button"
                disabled={enviando}
                onClick={() => (conCita ? onEtapa(f, fechaCita || undefined) : setConCita(true))}
                className={CLASE_BOTON_ACCION}
              >
                {conCita ? 'Confirmar cita' : ETIQUETA_FASE_OPORTUNIDAD[f]}
              </button>
              {conCita && (
                <input
                  type="date"
                  aria-label="Fecha de la cita"
                  value={fechaCita}
                  onChange={(e) => setFechaCita(e.target.value)}
                  className="rounded-lg border border-[#D1D5DB] bg-white px-2 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-1.5 text-xs transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
                />
              )}
            </span>
          ) : (
            <button
              key={f}
              type="button"
              disabled={enviando}
              onClick={() => onEtapa(f)}
              className={f === 'Aparto'
                ? 'rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-green-700 disabled:opacity-50'
                : CLASE_BOTON_ACCION}
            >
              {ETIQUETA_FASE_OPORTUNIDAD[f]}
            </button>
          ),
        )}
        <button
          type="button"
          disabled={enviando || (acciones !== undefined && !acciones.includes('descartar_lead'))}
          onClick={onDescartar}
          className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
        >
          Descartar
        </button>
      </div>
    </li>
  )
}

/** Fila de apartado con botones de fase del pipeline Enkontrol */
function FilaApartado({
  apartado,
  onFase,
  enviando,
}: {
  apartado: ApartadoMiDia
  onFase: (fase: FaseApartado) => void
  enviando: boolean
}) {
  const [docsAbiertos, setDocsAbiertos] = useState(false)
  return (
    <li className="rounded-xl border border-[#E5E7EB] bg-white p-4 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="flex items-center gap-2 text-sm font-medium">
            {apartado.nombre}
            {apartado.pendienteSync === true && <ChipPendienteSync />}
            {apartado.unidadCodigo ? (
              <span className="text-xs font-normal text-[#94A3B8]">{apartado.unidadCodigo}</span>
            ) : null}
          </p>
          <p className="mt-1 text-xs text-[#64748B] dark:text-[#94A3B8]">
            {apartado.fechaLimite !== '' ? `Fecha límite: ${formatoFechaCorta(apartado.fechaLimite)}` : 'Sin fecha límite'}
          </p>
          {apartado.ultimoCambio && (
            <p className="mt-0.5 text-[11px] text-[#9CA3AF] dark:text-[#64748B]">
              Último cambio: {apartado.ultimoCambio.detalle} · {apartado.ultimoCambio.usuario ?? '—'} ·{' '}
              {formatoFechaCorta(apartado.ultimoCambio.fechaISO.slice(0, 10))}
            </p>
          )}
        </div>
        <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
          {apartado.estado || 'Sin estado'}
        </span>
      </div>
      <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
        {FASES_APARTADO.map((fase) => (
          <button
            key={fase}
            type="button"
            disabled={enviando}
            onClick={() => {
              // Alta Enkontrol: abre el alta de cliente prellenada con
              // todo lo recolectado del apartado (ligada, sin duplicar)
              if (fase === 'Alta Enkontrol') {
                window.location.href = `/client/?apartado=${apartado.id}`
                return
              }
              onFase(fase)
            }}
            className={
              fase === 'Cancelacion Apartado'
                ? 'rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400'
                : fase === 'Firma Cliente'
                  ? 'rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-green-700 disabled:opacity-50'
                  : fase === 'Alta Enkontrol'
                    ? 'rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50'
                    : fase === apartado.estado
                      ? 'rounded-lg border border-accent bg-accent/5 px-3 py-1.5 text-xs font-medium text-accent shadow-sm disabled:opacity-50'
                      : CLASE_BOTON_ACCION
            }
          >
            {fase === 'Alta Enkontrol' ? 'Alta Enkontrol →' : ETIQUETA_FASE_APARTADO[fase]}
          </button>
        ))}
        <button
          type="button"
          onClick={() => setDocsAbiertos((v) => !v)}
          aria-expanded={docsAbiertos}
          className="rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-1.5 text-xs font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
        >
          {docsAbiertos ? 'Cerrar documentos' : 'Documentos'}
        </button>
      </div>
      {docsAbiertos && <PanelDocumentosApartado itemId={apartado.id} />}
    </li>
  )
}

/**
 * Precarga de documentos del expediente desde "Mis apartados": captura del
 * cotizador, captura de pago apartado (ambos obligatorios) y documentos
 * generales. Los archivos se guardan en el cliente ligado al apartado.
 */
function PanelDocumentosApartado({ itemId }: { itemId: string }) {
  const [documentos, setDocumentos] = useState<DocumentoApartado[] | null>(null)
  const [error, setError] = useState('')
  const [subiendo, setSubiendo] = useState<SlotDocApartado | null>(null)

  const cargar = useCallback(async () => {
    try {
      setDocumentos(await listarDocumentosApartado(itemId))
      setError('')
    } catch {
      setError('No se pudieron cargar los documentos.')
    }
  }, [itemId])

  useEffect(() => {
    void cargar()
  }, [cargar])

  const subir = async (tipo: SlotDocApartado, archivo: File | undefined) => {
    if (!archivo) return
    setSubiendo(tipo)
    setError('')
    try {
      await subirDocumentoApartado(itemId, tipo, archivo)
      await cargar()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo subir el archivo.')
    } finally {
      setSubiendo(null)
    }
  }

  return (
    <div className="mt-3 rounded-lg border border-dashed border-[#D1D5DB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] p-4">
      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
        Expediente del cliente
      </p>
      {error && (
        <p role="alert" className="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
          {error}
        </p>
      )}
      <ul className="mt-3 space-y-3">
        {SLOTS_DOCS_APARTADO.map((slot) => {
          const delSlot = (documentos ?? []).filter((d) => d.tipo === slot.tipo)
          return (
            <li key={slot.tipo}>
              <div className="flex flex-wrap items-center justify-between gap-2">
                <p className="text-xs font-medium text-[#374151] dark:text-[#CBD5E1]">
                  {slot.etiqueta}
                  {slot.obligatorio && <span className="ml-1 text-red-600">*</span>}
                </p>
                <label
                  className={`cursor-pointer rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white dark:bg-[#0F172A] dark:border-accent dark:text-accent ${
                    subiendo !== null ? 'pointer-events-none opacity-50' : ''
                  }`}
                >
                  {subiendo === slot.tipo ? 'Subiendo…' : 'Subir archivo'}
                  <input
                    type="file"
                    accept=".pdf,.jpg,.jpeg,.png"
                    className="sr-only"
                    disabled={subiendo !== null}
                    onChange={(e) => {
                      void subir(slot.tipo, e.target.files?.[0])
                      e.target.value = ''
                    }}
                  />
                </label>
              </div>
              {documentos === null ? (
                <p className="mt-1 text-[11px] text-[#94A3B8]">Cargando…</p>
              ) : delSlot.length === 0 ? (
                <p className="mt-1 text-[11px] text-[#94A3B8]">Sin archivos</p>
              ) : (
                <ul className="mt-1 space-y-0.5">
                  {delSlot.map((d) => (
                    <li key={d.id} className="text-[11px] text-[#64748B] dark:text-[#94A3B8]">
                      {d.nombreArchivo} · {formatoFechaCorta(d.createdAt.slice(0, 10))}
                    </li>
                  ))}
                </ul>
              )}
            </li>
          )
        })}
      </ul>
      <p className="mt-3 text-[11px] text-[#94A3B8]">
        * Obligatorios para el proceso de venta. PDF, JPG o PNG, máximo 10 MB.
      </p>
    </div>
  )
}

/** Tabs del CRM personal: Mis leads / Mis oportunidades / Mis apartados / Mi tablero */
type TabCrm = 'leads' | 'oportunidades' | 'apartados' | 'escrituracion' | 'tablero'

function TabsCrm({
  activa,
  conteos,
  onCambiar,
  vistaKanban,
  onToggleKanban,
}: {
  activa: TabCrm
  conteos: Record<TabCrm, number>
  onCambiar: (tab: TabCrm) => void
  vistaKanban: boolean
  onToggleKanban: () => void
}) {
  const tabs: { id: TabCrm; titulo: string }[] = [
    { id: 'leads', titulo: 'Leads' },
    { id: 'oportunidades', titulo: 'Oportunidades' },
    { id: 'apartados', titulo: 'Apartados' },
    { id: 'escrituracion', titulo: 'Escrituración' },
    { id: 'tablero', titulo: 'Tablero' },
  ]
  return (
    <div className="mb-4 flex items-center gap-1 overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white p-1 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm" role="tablist">
      {tabs.map((tab) => {
        const activo = tab.id === activa
        return (
          <button
            key={tab.id}
            type="button"
            role="tab"
            aria-selected={activo}
            onClick={() => onCambiar(tab.id)}
            className={`rounded-lg px-3 py-1.5 text-xs font-semibold uppercase tracking-wider transition-colors duration-100 md:px-4 md:py-2 ${
              activo ? 'bg-accent text-white' : 'text-[#64748B] dark:text-[#94A3B8] hover:bg-[#F9FAFB] hover:text-accent'
            }`}
          >
            {tab.titulo}
            {conteos[tab.id] != null && (
              <span className={`ml-1.5 font-normal ${activo ? 'text-blue-100' : 'text-[#94A3B8]'}`}>
                {conteos[tab.id]}
              </span>
            )}
          </button>
        )
      })}
      {activa !== 'tablero' && (
        <div className="ml-auto flex gap-1">
          <button
            type="button"
            onClick={onToggleKanban}
            className="shrink-0 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1 text-[11px] font-medium text-[#374151] shadow-sm transition-all hover:bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#1E293B]"
          >
            {vistaKanban ? 'Lista' : 'Kanban'}
          </button>
        </div>
      )}
    </div>
  )
}

/** Fila de lead con acciones rápidas (contactado / intento / interesado / descartar).
 *  Agendar cita ya no está aquí: la cita se agenda desde Mis oportunidades. */
function FilaLead({
  lead,
  onAccion,
  onConvertir,
  onDescartar,
  onTimeline,
  enviando,
  acciones,
}: {
  lead: LeadMiDia
  onAccion: (estado: string, fecha?: string) => void
  onConvertir: () => void
  onDescartar: () => void
  onTimeline?: () => void
  enviando: boolean
  acciones?: string[]
}) {
  return (
    <li className="rounded-xl border border-[#E5E7EB] bg-white p-4 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="flex items-center gap-2 text-sm font-medium">
            {lead.nombre}
            <ScoreBadge score={calcularScore(lead)} />
            {lead.pendienteSync === true && <ChipPendienteSync />}
            {/* Insignia de procedencia: gris = tablero Leads, azul = Oportunidades */}
            <span
              className={
                lead.fuente === 'oportunidad'
                  ? 'rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-800'
                  : 'rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600'
              }
            >
              {lead.fuente === 'oportunidad' ? 'Oportunidad' : 'Lead'}
            </span>
          </p>
          <p className="mt-1 text-xs text-[#64748B] dark:text-[#94A3B8]">
            {lead.telefono || 'Sin teléfono'}
            {lead.origen ? ` · ${lead.origen}` : ''}
          </p>
          {lead.ultimoCambio && (
            <p className="mt-0.5 text-[11px] text-[#9CA3AF] dark:text-[#64748B]">
              Último cambio: {lead.ultimoCambio.detalle} · {lead.ultimoCambio.usuario ?? '—'} ·{' '}
              {formatoFechaCorta(lead.ultimoCambio.fechaISO.slice(0, 10))}
            </p>
          )}
        </div>
        <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
          {lead.estado || 'Sin estado'}
        </span>
      </div>
      <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
        <button type="button" disabled={enviando} onClick={() => onAccion('CONTACTADO')} className={CLASE_BOTON_ACCION}>
          Contactado
        </button>
        <button type="button" disabled={enviando} onClick={() => onAccion('Intento de contacto')} className={CLASE_BOTON_ACCION}>
          Intento
        </button>
        <button type="button" disabled={enviando} onClick={() => onAccion('INTERESADO')} className={CLASE_BOTON_ACCION}>
          Interesado
        </button>
        {/* Agendo: convierte el lead en oportunidad (etapa Agendo Cita) */}
        <button
          type="button"
          disabled={enviando}
          onClick={onConvertir}
          className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-green-700 disabled:opacity-50"
        >
          Agendo →
        </button>
        <button
          type="button"
          disabled={enviando || (acciones !== undefined && !acciones.includes("descartar_lead"))}
          onClick={onDescartar}
          className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
        >
          Descartar
        </button>
        {onTimeline && (
          <button
            type="button"
            onClick={onTimeline}
            className={CLASE_BOTON_ACCION}
          >
            Historial
          </button>
        )}
      </div>
    </li>
  )
}

export default function MiDiaPage({ accionesSesion }: { accionesSesion: AccionesSesion }) {
  const nombreVendedor = getSesion()?.usuario.nombre ?? ''
  const rol = getSesion()?.usuario.rol ?? 'vendedor'
  const acciones = getSesion()?.usuario.acciones ?? []
  const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [cargando, setCargando] = useState(true)
  const [enviando, setEnviando] = useState(false)
  const [aviso, setAviso] = useState<string | null>(null)
  const [descartando, setDescartando] = useState<{
    id: string
    nombre: string
    fuente: 'lead' | 'oportunidad'
  } | null>(null)
  const [tabCrm, setTabCrm] = useState<TabCrm>('leads')
  const [nota, setNota] = useState<string | null>(null)
  const [apartadoSeleccionado, setApartadoSeleccionado] = useState<ApartadoMiDia | null>(null)
  const [filtros, setFiltros] = useState<FiltrosCRM>({ texto: '', desarrollo: '', origen: '', fechaDesde: '', fechaHasta: '' })
  const [offline, setOffline] = useState(!navigator.onLine)
  const [offlineFecha, setOfflineFecha] = useState<string | null>(null)

  // Kanban toggle
  const [vistaKanban, setVistaKanban] = useState(false)
  // Configuración de columnas por pestaña
  const columnasLeads = [
    { id: 'NUEVO', titulo: 'Nuevo', color: 'border-t-gray-400' },
    { id: 'CONTACTADO', titulo: 'Contactado', color: 'border-t-blue-500' },
    { id: 'INTERESADO', titulo: 'Interesado', color: 'border-t-yellow-500' },
    { id: 'AGENDO', titulo: 'Agendo', color: 'border-t-green-500' },
    { id: 'DESCARTADO', titulo: 'Descartado', color: 'border-t-red-500' },
  ]
  const columnasOportunidades = [
    { id: 'AFLUENCIA', titulo: 'Afluencia', color: 'border-t-purple-500' },
    { id: 'COTIZADOR', titulo: 'Cotizador', color: 'border-t-blue-500' },
    { id: 'AGENDO CITA', titulo: 'Agendó Cita', color: 'border-t-green-500' },
    { id: 'APARTO', titulo: 'Apartó', color: 'border-t-emerald-600' },
    { id: 'PERDIDO', titulo: 'Perdido', color: 'border-t-red-500' },
  ]
  const columnasApartados = [
    { id: 'PAGO APARTADO', titulo: 'Pago Apartado', color: 'border-t-blue-500' },
    { id: 'ALTA ENKONTROL', titulo: 'Alta Enkontrol', color: 'border-t-yellow-500' },
    { id: 'ENTREGO DOCUMENTACION', titulo: 'Entregó Docs', color: 'border-t-orange-500' },
    { id: 'CITA CLIENTES', titulo: 'Cita Clientes', color: 'border-t-green-500' },
    { id: 'CONTRATO ENKONTROL', titulo: 'Contrato Enkontrol', color: 'border-t-emerald-600' },
    { id: 'FIRMA CLIENTE', titulo: 'Firma Cliente', color: 'border-t-accent' },
    { id: 'CANCELACION APARTADO', titulo: 'Cancelación', color: 'border-t-red-500' },
  ]
  const columnasEscrituracion = [
    { id: 'SEGUIMIENTO', titulo: 'Seguimiento', color: 'border-t-gray-400' },
    { id: 'LLAMADA ESCRITURAS', titulo: 'Llamada Escrituras', color: 'border-t-blue-500' },
    { id: 'X ESCRITURAR', titulo: 'X Escriturar', color: 'border-t-yellow-500' },
    { id: 'BANCO/INFONAVIT', titulo: 'Banco/Infonavit', color: 'border-t-orange-500' },
    { id: 'X AUTORIZAR', titulo: 'X Autorizar', color: 'border-t-green-500' },
    { id: 'ESCRITURADO', titulo: 'Escriturado', color: 'border-t-emerald-600' },
    { id: 'CANCELO', titulo: 'Canceló', color: 'border-t-red-500' },
  ]
  const obtenerColumnaLead = (lead: LeadMiDia) => {
    const e = (lead.estado ?? '').toUpperCase()
    if (e.includes('DESCART')) return 'DESCARTADO'
    if (e.includes('AGENDO') || e.includes('CITA')) return 'AGENDO'
    if (e.includes('INTERES')) return 'INTERESADO'
    if (e.includes('CONTACT')) return 'CONTACTADO'
    return 'NUEVO'
  }
  const obtenerColumnaOp = (op: OportunidadMiDia) => {
    const e = (op.etapa ?? '').toUpperCase()
    if (e.includes('APARTO')) return 'APARTO'
    if (e.includes('PERDIDO') || e.includes('PERDI')) return 'PERDIDO'
    if (e.includes('COTIZ')) return 'COTIZADOR'
    if (e.includes('AGENDO') || e.includes('CITA')) return 'AGENDO CITA'
    return 'AFLUENCIA'
  }
  const obtenerColumnaApartado = (a: ApartadoMiDia) => {
    const e = (a.estado ?? '').toUpperCase()
    if (e.includes('PAGO')) return 'PAGO APARTADO'
    if (e.includes('ALTA') && e.includes('ENKONTROL')) return 'ALTA ENKONTROL'
    if (e.includes('ENTREG') || e.includes('DOC')) return 'ENTREGO DOCUMENTACION'
    if (e.includes('CITA')) return 'CITA CLIENTES'
    if (e.includes('CONTRATO')) return 'CONTRATO ENKONTROL'
    if (e.includes('FIRMA')) return 'FIRMA CLIENTE'
    if (e.includes('CANCEL')) return 'CANCELACION APARTADO'
    return 'PAGO APARTADO'
  }
  const obtenerColumnaEscrituracion = (a: ApartadoMiDia) => {
    const e = (a.estado ?? '').toUpperCase()
    if (e.includes('SEGUIMIENTO')) return 'SEGUIMIENTO'
    if (e.includes('LLAMADA')) return 'LLAMADA ESCRITURAS'
    if (e.includes('X ESCRIT') || e.includes('ESCRIT')) return 'X ESCRITURAR'
    if (e.includes('BANCO') || e.includes('INFONAVIT')) return 'BANCO/INFONAVIT'
    if (e.includes('X AUTORIZAR')) return 'X AUTORIZAR'
    if (e.includes('ESCRITURADO')) return 'ESCRITURADO'
    if (e.includes('CANCEL')) return 'CANCELO'
    return 'SEGUIMIENTO'
  }


  // Timeline modal
  const [leadTimeline, setLeadTimeline] = useState<{ nombre: string; eventos: EventoLead[] } | null>(null)

  // Captura rápida
  const [capNombre, setCapNombre] = useState('')
  const [capLada, setCapLada] = useState<ClaveLada>('MX')
  const [capTelefono, setCapTelefono] = useState('')
  const [capEmail, setCapEmail] = useState('')
  const [capOrigen, setCapOrigen] = useState<string>(ORIGENES_LEAD[0])
  const [capDesarrollo, setCapDesarrollo] = useState<string>('')
  const [capNotas, setCapNotas] = useState('')
  const [capEnviando, setCapEnviando] = useState(false)
  const [capMensaje, setCapMensaje] = useState<{ tipo: 'ok' | 'error'; texto: string } | null>(null)

  const cargar = useCallback(async () => {
    setCargando(true)
    try {
      const datos = await fetchResumenMiDia()
      setResumen(datos)
      setError(null)
      setOfflineFecha(null)
      // Fire-and-forget: guardar en IDB para uso offline
      void guardarResumen(datos)
    } catch (err) {
      // Si falla el fetch, intentar datos cacheados
      const cached = await cargarResumenLocal()
      if (cached) {
        setResumen(cached)
        setOfflineFecha(new Date().toLocaleDateString('es-MX'))
        setError(null)
      } else {
        setError(err instanceof Error ? err.message : 'No se pudo cargar tu día')
      }
    } finally {
      setCargando(false)
    }
  }, [])

  useEffect(() => {
    void cargar()
  }, [cargar])

  // Detectar online/offline
  useEffect(() => {
    const onOnline = () => { setOffline(false); void cargar() }
    const onOffline = () => setOffline(true)
    window.addEventListener('online', onOnline)
    window.addEventListener('offline', onOffline)
    return () => {
      window.removeEventListener('online', onOnline)
      window.removeEventListener('offline', onOffline)
    }
  }, [cargar])

  // Suscribir a push notifications (fire-and-forget)
  useEffect(() => {
    if ('Notification' in window && Notification.permission === 'default') {
      Notification.requestPermission().then((perm) => {
        if (perm === 'granted') void suscribirPush()
      })
    } else if ('Notification' in window && Notification.permission === 'granted') {
      void suscribirPush()
    }
  }, [])

  /** Ejecuta una acción sobre un lead y refresca el resumen */
  async function ejecutar(accion: () => Promise<unknown>, mensajeError: string) {
    setEnviando(true)
    setAviso(null)
    try {
      await accion()
      await cargar()
    } catch (err) {
      toast.error(mensajeError); setAviso(err instanceof Error ? err.message : mensajeError)
    } finally {
      setEnviando(false)
    }
  }

  /**
   * Botón "Agendo" de Mis leads: convierte el lead en oportunidad (etapa
   * Agendo Cita); el lead sale de la lista y aparece en Mis oportunidades.
   */
  async function convertir(lead: LeadMiDia) {
    setEnviando(true)
    setAviso(null)
    setNota(null)
    try {
      await convertirLead(lead.id)
      await cargar()
      setNota(`${lead.nombre} pasó a Mis oportunidades (Agendo Cita).`)
    } catch (err) {
      setAviso(err instanceof Error ? err.message : 'No se pudo convertir el lead')
    } finally {
      setEnviando(false)
    }
  }

  /**
   * Botón "Cotizar": pasa la oportunidad a etapa Cotizador y abre el cotizador
   * con los datos del cliente prellenados y la oportunidad vinculada (al
   * guardar, la cotización actualiza ESE item en Monday). Si el cambio de etapa
   * falla, el cotizador se abre igual: el guardado reintenta la actualización.
   */
  async function cotizarOportunidad(op: OportunidadMiDia) {
    setEnviando(true)
    setAviso(null)
    try {
      await cambiarEtapaOportunidad(op.id, 'Cotizador')
    } catch {
      setAviso('No se pudo actualizar la etapa en Monday; el cotizador se abrirá de todos modos.')
    }
    window.location.href = urlCotizadorParaOportunidad(op)
  }

  async function enviarCaptura(e: FormEvent) {
    e.preventDefault()
    setCapEnviando(true)
    setCapMensaje(null)
    try {
      const telefono = componerTelefono(capLada, capTelefono)
      const creado = await crearLead({
        nombre: capNombre.trim(),
        ...(telefono !== '' ? { telefono } : {}),
        ...(capEmail.trim() !== '' ? { email: capEmail.trim() } : {}),
        ...(capOrigen !== '' ? { origen: capOrigen } : {}),
        ...(capDesarrollo !== '' ? { desarrollo: capDesarrollo } : {}),
        ...(capNotas.trim() !== '' ? { notas: capNotas.trim() } : {}),
      })
      setCapMensaje({
        tipo: 'ok',
        texto:
          creado.asignacion === 'capturista'
            ? 'Lead registrado y asignado a ti'
            : 'Lead registrado, se asignará por round-robin',
      })
      toast.success('Lead registrado correctamente')
      setCapNombre('')
      setCapTelefono('')
      setCapEmail('')
      setCapDesarrollo('')
      setCapNotas('')
      // Refresca el resumen para que la captura aparezca al momento en "Mis capturas"
      await cargar()
    } catch (err) {
      setCapMensaje({ tipo: 'error', texto: err instanceof Error ? err.message : 'No se pudo registrar el lead' })
    } finally {
      setCapEnviando(false)
    }
  }

  const hoy = hoyLocal()
  const iniciales = nombreVendedor
    .split(' ')
    .filter((p) => p !== '')
    .map((p) => p.charAt(0))
    .slice(0, 2)
    .join('')
    .toUpperCase()

  return (
    <>
      <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
        <div className="flex h-14 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <div className="flex min-w-0 items-center gap-3">
            <a
              href="/"
              className="shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F9FAFB] hover:text-accent"
            >
              ← Menú
            </a>
            <p className="shrink-0 text-xs font-semibold uppercase tracking-wider text-accent">
              FRASA <span aria-hidden="true" className="text-[#F97316]">·</span> Mi día
            </p>
            <span aria-hidden="true" className="hidden h-4 w-px bg-[#E5E7EB] sm:block" />
            <div className="flex min-w-0 items-center gap-2">
              <span
                aria-hidden="true"
                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent"
              >
                {iniciales}
              </span>
              <span className="hidden truncate text-sm font-medium text-[#111827] dark:text-[#E2E8F0] sm:block">{nombreVendedor}</span>
            </div>
          </div>
          <div className="flex shrink-0 items-center gap-1 sm:gap-2">
            <DarkModeToggle />
            <button
              type="button"
              onClick={accionesSesion.onCambiarPassword}
              className="hidden rounded-md px-2 py-1.5 text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1] transition-all duration-100 ease-out hover:text-[#111827] dark:text-[#E2E8F0] md:inline-block"
            >
              Contraseña
            </button>
            <button
              type="button"
              onClick={accionesSesion.onLogout}
              className="rounded-md px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:text-accent-hover"
            >
              Salir
            </button>
            <button
              type="button"
              onClick={() => void cargar()}
              disabled={cargando}
              className="rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50 md:px-4 md:py-2 md:text-sm"
            >
              {cargando ? 'Actualizando…' : 'Actualizar'}
            </button>
          </div>
        </div>
      </header>

      <BannerModoLocal />

      {offline && (
        <div className="px-4 pt-4 sm:px-6 lg:px-8">
          <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
            Modo offline{offlineFecha ? ` — datos de ${offlineFecha}` : ''}
          </div>
        </div>
      )}

      <main className={`px-4 py-6 sm:px-6 lg:px-8 ${vistaKanban ? 'w-full' : 'mx-auto max-w-[1280px]'}`}>
        <div className="mb-6">
          <h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">{nombreVendedor}</h1>
          <p className="mt-1 text-sm text-[#64748B] dark:text-[#94A3B8]">{formatoFechaCorta(hoy)}</p>
        </div>

        {error && (
          <p role="alert" className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
            Sin datos del API — {error}
          </p>
        )}
        {aviso && (
          <p role="alert" className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
            {aviso}
          </p>
        )}
        {nota && (
          <p role="status" className="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
            {nota}
          </p>
        )}
        {resumen?.sinMapeoMonday && (
          <p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] dark:text-[#94A3B8] shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]">
            Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
          </p>
        )}

        {!resumen && cargando && <SkeletonList count={4} />}

        {resumen && (
          <>
            <ResumenMatutino
              nombre={nombreVendedor}
              leadsNuevos={resumen.misLeads.filter((l) => l.fuente === 'lead').length}
              oportunidadesActivas={resumen.misOportunidades.items.length}
              apartadosPorVencer={resumen.apartadosPorVencer.length}
            />

            <section aria-label="Indicadores del día" className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              <KpiCard titulo="Leads asignados" valor={resumen.misLeads.length} />
              <KpiCard
                titulo="Actividades de hoy"
                valor={resumen.misActividadesHoy.length}
                detalle={`${resumen.conteos.actividadesAbiertas} abiertas en total`}
              />
              <KpiCard titulo="Apartados por vencer" valor={resumen.apartadosPorVencer.length} detalle="próximos 7 días" />
              <KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
            </section>

            <div className={`mt-6 flex flex-col gap-6 ${vistaKanban ? '' : 'md:grid md:grid-cols-2 md:gap-6 lg:grid-cols-3'}`}>
              <div className={`order-2 flex flex-col gap-6 ${vistaKanban ? '' : 'md:order-1 md:col-span-2 lg:col-span-2'}`}>
                <section aria-label="CRM personal">
                  <TabsCrm
                    activa={tabCrm}
                    conteos={{
                      leads: resumen.misLeads.filter((l) => l.fuente === 'lead').length,
                      oportunidades: resumen.misOportunidades.items.length,
                      apartados: resumen.misApartados.length, escrituracion: resumen.misApartados.length, tablero: 0,
                    }}
                    onCambiar={setTabCrm}
                    vistaKanban={vistaKanban}
                    onToggleKanban={() => setVistaKanban(!vistaKanban)}

                  />

                  {tabCrm !== 'tablero' && (
                    <div className="flex items-center gap-2">
                      <div className="flex-1">
                        <FiltrosAvanzados valor={filtros} onChange={setFiltros} />
                      </div>
                      <button
                        type="button"
                        onClick={() => {
                          if (tabCrm === 'leads') exportarLeads(resumen.misLeads.filter((l) => l.fuente === 'lead'))
                          else if (tabCrm === 'oportunidades') exportarOportunidades(resumen.misOportunidades.items)
                          else if (tabCrm === 'apartados') exportarApartados(resumen.misApartados)
                        }}
                        className="shrink-0 rounded-lg border border-[#D1D5DB] bg-white px-3 py-2 text-xs font-medium text-[#374151] shadow-sm transition-all hover:bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#1E293B]"
                      >
                        📥 Exportar
                      </button>
                    </div>
                  )}

                  {tabCrm === 'leads' && (() => {
                    const leadsFiltrados = aplicarFiltros(
                      resumen.misLeads.filter((l) => l.fuente === 'lead'),
                      filtros,
                      {
                        texto: (l) => `${l.nombre} ${l.telefono} ${l.email}`,
                        origen: (l) => l.origen,
                        fecha: (l) => l.updatedAt.slice(0, 10),
                      },
                    )
                    return (
                      <>

                        {leadsFiltrados.length === 0 ? (
                          <EstadoVacio mensaje="Sin leads asignados" />
                        ) : vistaKanban ? (
                          <KanbanView
                            items={leadsFiltrados}
                            columnas={columnasLeads}
                            obtenerColumna={obtenerColumnaLead}
                            onCambiarEstado={(id, estado) => void ejecutar(() => cambiarEstadoLead(id, estado, 'lead'), 'No se pudo actualizar')}
                          />
                        ) : (
                          <ul className="space-y-2">
                            {leadsFiltrados.map((lead) => (
                              <FilaLead
                                key={`${lead.fuente}-${lead.id}`}
                                lead={lead}
                                enviando={enviando}
                                onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha, lead.fuente), 'No se pudo actualizar el lead')}
                                onConvertir={() => void convertir(lead)}
                                onDescartar={() => setDescartando(lead)}
                                onTimeline={() => setLeadTimeline({
                                  nombre: lead.nombre,
                                  eventos: lead.ultimoCambio ? [{
                                    fechaISO: lead.ultimoCambio.fechaISO,
                                    usuario: lead.ultimoCambio.usuario,
                                    detalle: lead.ultimoCambio.detalle,
                                    fuente: lead.fuente,
                                  }] : [],
                                })}
                                acciones={acciones}
                              />
                            ))}
                          </ul>
                        )}
                      </>
                    )
                  })()}

                  {tabCrm === 'oportunidades' && (() => {
                    const opsFiltradas = aplicarFiltros(
                      resumen.misOportunidades.items,
                      filtros,
                      {
                        texto: (o) => `${o.nombre} ${o.telefono} ${o.email}`,
                        desarrollo: (o) => o.desarrollo,
                        fecha: (o) => o.updatedAt.slice(0, 10),
                      },
                    )
                    return (
                      <>

                        {opsFiltradas.length === 0 ? (
                          <EstadoVacio mensaje="Sin oportunidades asignadas" />
                        ) : vistaKanban ? (
                          <KanbanView
                            items={opsFiltradas}
                            columnas={columnasOportunidades}
                            obtenerColumna={obtenerColumnaOp}
                            onCambiarEstado={(id, estado) => void ejecutar(() => cambiarEtapaOportunidad(id, estado), 'No se pudo actualizar')}
                          />
                        ) : (
                          <ul className="space-y-2">
                            {opsFiltradas.map((op) => (
                              <FilaOportunidad
                              key={op.id}
                              op={op}
                              enviando={enviando}
                              onEtapa={(etapa, fecha) =>
                                void ejecutar(() => cambiarEtapaOportunidad(op.id, etapa, fecha), 'No se pudo actualizar la oportunidad')
                              }
                              onCotizar={() => void cotizarOportunidad(op)}
                              onAfluencia={() => {
                                window.location.href = urlAfluenciaParaOportunidad(op)
                              }}
                              onDescartar={() => setDescartando({ id: op.id, nombre: op.nombre, fuente: 'oportunidad' })}
                              acciones={acciones}
                            />
                          ))}
                        </ul>
                      )}
                      </>
                    )
                  })()}

                  {tabCrm === 'apartados' && (() => {
                    const apartadosFiltrados = aplicarFiltros(
                      resumen.misApartados,
                      filtros,
                      {
                        texto: (a) => a.nombre,
                        fecha: (a) => a.fechaLimite,
                      },
                    )
                    return (
                      <>

                        {apartadosFiltrados.length === 0 ? (
                          <EstadoVacio mensaje="Sin apartados asignados" />
                        ) : vistaKanban ? (
                          <KanbanView
                            items={apartadosFiltrados}
                            columnas={columnasApartados}
                            obtenerColumna={obtenerColumnaApartado}
                            onCambiarEstado={(id, estado) => void ejecutar(() => cambiarEstadoApartado(id, estado), 'No se pudo actualizar')}
                          />
                        ) : (
                          <ul className="space-y-2">
                            {apartadosFiltrados.map((a) => (
                              <li
                                key={a.id}
                                className="cursor-pointer"
                                onClick={() => setApartadoSeleccionado(a)}
                                role="button"
                                tabIndex={0}
                                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setApartadoSeleccionado(a) }}
                              >
                                <FilaApartado
                                  apartado={a}
                                  enviando={enviando}
                                  onFase={(fase) => {
                                    if (fase === 'Firma Cliente') {
                                      // Cambiar etapa AÚNQUE luego cambie a pestaña Escrituración
                                      void ejecutar(() => cambiarEstadoApartado(a.id, fase).then(() => setTabCrm('escrituracion')), 'No se pudo actualizar el apartado')
                                      return
                                    }
                                    void ejecutar(() => cambiarEstadoApartado(a.id, fase), 'No se pudo actualizar el apartado')
                                  }}
                                />
                              </li>
                            ))}
                          </ul>
                        )}
                      </>
                    )
                  })()}

                  {tabCrm === 'escrituracion' && (
                    <section aria-label="Escrituración">
                      <TituloSeccion>Escrituración</TituloSeccion>
                      <p className="text-sm text-[#64748B] dark:text-[#94A3B8] mb-4">
                        Seguimiento de escrituración de apartados.
                      </p>
                      {(() => {
                        // Filtrar: solo apartados en fases de escrituración o Firma Cliente
                        // Solo fases activas (Cancelo y Escriturado son terminales)
                        const apartadosEscrituracion = (resumen.todosApartados || resumen.misApartados || []).filter((a) => {
                          const e = (a.estado ?? '').toUpperCase()
                          return e.includes('FIRMA') || e.includes('SEGUIMIENTO') || e.includes('LLAMADA') || e.includes('X ESCRITURAR') || e.includes('BANCO') || e.includes('INFONAVIT') || e.includes('X AUTORIZAR')
                        })
                        return apartadosEscrituracion.length === 0 ? (
                        <EstadoVacio mensaje="No hay apartados en escrituración" />
                      ) : vistaKanban ? (
                        <KanbanView
                          items={resumen.misApartados}
                          columnas={columnasEscrituracion}
                          obtenerColumna={obtenerColumnaEscrituracion}
                          onCambiarEstado={(id, estado) => void ejecutar(() => cambiarEstadoApartado(id, estado), 'No se pudo actualizar')}
                        />
                      ) : (
                        <ul className="space-y-3">
                          {apartadosEscrituracion.map((apartado) => (
                            <li key={apartado.id} className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
                              <div className="flex flex-wrap items-center justify-between gap-3">
                                <div>
                                  <p className="font-medium text-[#111827] dark:text-[#E2E8F0]">{apartado.nombre}</p>
                                  <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">{apartado.unidadCodigo || 'Sin unidad'} · {apartado.estado}</p>
                                </div>
                              </div>
                              <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                                {['Seguimiento', 'Llamada Escrituras', 'X Escriturar', 'Banco/Infonavit', 'X Autorizar', 'Escriturado', 'Cancelo'].map((fase) => (
                                  <button
                                    key={fase}
                                    type="button"
                                    disabled={enviando}
                                    onClick={() => void ejecutar(() => cambiarEstadoApartado(apartado.id, fase), 'No se pudo actualizar')}
                                    className={fase === apartado.estado
                                      ? 'rounded-lg border border-accent bg-accent/5 px-3 py-1.5 text-xs font-medium text-accent shadow-sm disabled:opacity-50'
                                      : CLASE_BOTON_ACCION}
                                  >
                                    {fase}
                                  </button>
                                ))}
                              </div>
                            </li>
                          ))}
                        </ul>
                      )})()}
                    </section>
                  )}

                  {tabCrm === 'tablero' && (
                    <DashboardVendedor />
                  )}
                </section>

                <section aria-label="Mis capturas de afluencia">
                  <TituloSeccion>Mis capturas de afluencia</TituloSeccion>
                  {resumen.misCapturas.length === 0 ? (
                    <EstadoVacio mensaje="Aún no registras afluencias" />
                  ) : (
                    <ul className="space-y-2">
                      {resumen.misCapturas.map((c) => (
                        <li
                          key={c.leadId}
                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                        >
                          <div>
                            <p className="flex items-center gap-2 text-sm font-medium">
                              {c.nombre}
                              {c.pendienteSync === true && <ChipPendienteSync />}
                            </p>
                            <p className="mt-1 text-xs text-[#64748B] dark:text-[#94A3B8]">
                              {c.telefono || 'Sin teléfono'}
                              {c.origen ? ` · ${c.origen}` : ''}
                            </p>
                          </div>
                          <div className="flex items-center gap-3">
                            <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
                              {c.estado || '—'}
                            </span>
                            <span className="text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
                              {formatoFechaCorta(c.capturadoEn.slice(0, 10))}
                            </span>
                          </div>
                        </li>
                      ))}
                    </ul>
                  )}
                </section>

                <section aria-label="Mis clientes">
                  <TituloSeccion>Mis clientes</TituloSeccion>
                  {resumen.misClientes.length === 0 ? (
                    <EstadoVacio mensaje="Aún no registras clientes" />
                  ) : (
                    <ul className="space-y-2">
                      {resumen.misClientes.map((c) => (
                        <li
                          key={c.id}
                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                        >
                          <div>
                            <p className="text-sm font-medium">{c.nombre}</p>
                            <p className="mt-1 text-xs text-[#64748B] dark:text-[#94A3B8]">
                              {[c.proyecto, c.unidadCodigo].filter((p) => p !== '').join(' · ') || 'Alta sin proyecto'}
                            </p>
                          </div>
                          <div className="flex items-center gap-3">
                            {/* Estado del apartado en Monday (bidireccional); solo si hay apartado ligado */}
                            {c.estadoApartado !== null && (
                              <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
                                {c.estadoApartado}
                              </span>
                            )}
                            <span
                              className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                                c.completado
                                  ? 'bg-gray-100 text-gray-600'
                                  : 'bg-amber-50 text-amber-700'
                              }`}
                            >
                              {c.completado ? 'Cliente' : 'En captura'}
                            </span>
                            <span className="text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
                              {formatoFechaCorta(c.capturadoEn.slice(0, 10))}
                            </span>
                          </div>
                        </li>
                      ))}
                    </ul>
                  )}
                </section>
              </div>

              <aside className={`order-1 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? 'hidden' : 'md:order-2 lg:sticky lg:top-20 lg:self-start'}`}>
                <section aria-label="Mis actividades">
                  <TituloSeccion>Mis actividades</TituloSeccion>
                  {resumen.misActividadesHoy.length === 0 ? (
                    <EstadoVacio mensaje="Sin actividades para hoy" />
                  ) : (
                    <ul className="space-y-2">
                      {resumen.misActividadesHoy.map((a) => (
                        <li
                          key={a.id}
                          className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                        >
                          <p className="text-sm">
                            {a.nombre}
                            {a.tipo ? <span className="ml-2 text-xs uppercase tracking-wider text-[#94A3B8]">{a.tipo}</span> : null}
                          </p>
                          <span
                            className={`text-xs font-medium ${
                              esActividadVencida(a.fecha, hoy) ? 'text-red-600' : 'text-[#64748B] dark:text-[#94A3B8]'
                            }`}
                          >
                            {formatoFechaCorta(a.fecha)}
                          </span>
                        </li>
                      ))}
                    </ul>
                  )}
                </section>

                {resumen.apartadosPorVencer.length > 0 && (
                  <section aria-label="Apartados por vencer">
                    <TituloSeccion>Apartados por vencer</TituloSeccion>
                    <ul className="space-y-2">
                      {resumen.apartadosPorVencer.map((a) => (
                        <li
                          key={a.id}
                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                        >
                          <p className="text-sm">
                            {a.nombre}
                            {a.unidadCodigo ? <span className="ml-2 text-xs text-[#94A3B8]">{a.unidadCodigo}</span> : null}
                          </p>
                          <span
                            className={`text-xs font-medium ${
                              a.diasRestantes <= 1 ? 'text-red-600' : 'text-amber-600'
                            }`}
                          >
                            {textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </section>
                )}

                <section aria-label="Captura rápida de lead">
                  <TituloSeccion>Captura rápida de lead</TituloSeccion>
                  <form
                    onSubmit={enviarCaptura}
                    className="grid gap-4 rounded-xl border border-[#E5E7EB] bg-white p-5 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm"
                  >
                    <div>
                      <label htmlFor="cap-nombre" className={CLASE_LABEL}>
                        Nombre
                      </label>
                      <input
                        id="cap-nombre"
                        type="text"
                        value={capNombre}
                        onChange={(e) => setCapNombre(e.target.value)}
                        required
                        className={CLASE_INPUT}
                      />
                    </div>
                    <div>
                      <label htmlFor="cap-telefono" className={CLASE_LABEL}>
                        Teléfono
                      </label>
                      <div className="flex gap-2">
                        <select
                          aria-label="Lada"
                          value={capLada}
                          onChange={(e) => setCapLada(e.target.value as ClaveLada)}
                          className="w-28 shrink-0 rounded-lg border border-[#D1D5DB] bg-white px-2 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
                        >
                          {LADAS.map((l) => (
                            <option key={l.clave} value={l.clave}>
                              {l.etiqueta}
                            </option>
                          ))}
                        </select>
                        <input
                          id="cap-telefono"
                          type="tel"
                          placeholder="664 123 4567"
                          value={capTelefono}
                          onChange={(e) => setCapTelefono(e.target.value)}
                          className={CLASE_INPUT}
                        />
                      </div>
                    </div>
                    <div>
                      <label htmlFor="cap-email" className={CLASE_LABEL}>
                        Email
                      </label>
                      <input
                        id="cap-email"
                        type="email"
                        value={capEmail}
                        onChange={(e) => setCapEmail(e.target.value)}
                        className={CLASE_INPUT}
                      />
                    </div>
                    <div>
                      <label htmlFor="cap-origen" className={CLASE_LABEL}>
                        Origen
                      </label>
                      <select
                        id="cap-origen"
                        value={capOrigen}
                        onChange={(e) => setCapOrigen(e.target.value)}
                        className={CLASE_INPUT}
                      >
                        {ORIGENES_LEAD.map((o) => (
                          <option key={o} value={o}>
                            {o}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label htmlFor="cap-desarrollo" className={CLASE_LABEL}>
                        Desarrollo de interés
                      </label>
                      <select
                        id="cap-desarrollo"
                        value={capDesarrollo}
                        onChange={(e) => setCapDesarrollo(e.target.value)}
                        className={CLASE_INPUT}
                      >
                        <option value="">Sin especificar</option>
                        {DESARROLLOS_LEAD.map((d) => (
                          <option key={d} value={d}>
                            {d}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label htmlFor="cap-notas" className={CLASE_LABEL}>
                        Notas
                      </label>
                      <input
                        id="cap-notas"
                        type="text"
                        value={capNotas}
                        onChange={(e) => setCapNotas(e.target.value)}
                        className={CLASE_INPUT}
                      />
                    </div>
                    {capMensaje && (
                      <p
                        role="status"
                        className={`rounded-lg border px-4 py-3 text-sm font-medium ${
                          capMensaje.tipo === 'ok'
                            ? 'border-green-200 bg-green-50 text-green-700'
                            : 'border-red-200 bg-red-50 text-red-700'
                        }`}
                      >
                        {capMensaje.texto}
                      </p>
                    )}
                    <div>
                      <button
                        type="submit"
                        disabled={capEnviando}
                        className="w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
                      >
                        {capEnviando ? 'Registrando…' : 'Registrar lead'}
                      </button>
                    </div>
                  </form>
                </section>
              </aside>
            </div>

            {esRolConEquipo(rol) && resumen.equipo && (
              <section aria-label="Equipo" className="mt-6">
                <TituloSeccion>Equipo</TituloSeccion>
                <p className="mb-4 text-sm text-[#64748B] dark:text-[#94A3B8]">
                  Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
                </p>
                {resumen.equipo.porVendedor.length === 0 ? (
                  <EstadoVacio mensaje="Sin leads asignados en el equipo" />
                ) : (
                  <ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                    {resumen.equipo.porVendedor.map((v) => (
                      <li
                        key={v.mondayUserId}
                        className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                      >
                        <p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
                        <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
                          {v.leadsAsignados} lead(s)
                        </span>
                      </li>
                    ))}
                  </ul>
                )}
              </section>
            )}
          </>
        )}
      </main>

      {descartando && (
        <ModalDescartar
          lead={descartando}
          enviando={enviando}
          onCancelar={() => setDescartando(null)}
          onConfirmar={(motivo, subcategoria, comentario) => {
            const lead = descartando
            setDescartando(null)
            void ejecutar(
              () => descartarLead(lead.id, motivo, comentario === '' ? undefined : comentario, lead.fuente, subcategoria),
              'No se pudo descartar el lead',
            )
          }}
        />
      )}

      {apartadoSeleccionado && (
        <NotasApartado
          apartado={apartadoSeleccionado}
          onCerrar={() => setApartadoSeleccionado(null)}
        />
      )}

      {/* Modal de historial/timeline del lead */}
      {leadTimeline && (
        <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 px-4" role="dialog" aria-modal="true">
          <div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-xl max-h-[80vh] overflow-y-auto">
            <div className="flex items-center justify-between">
              <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Historial</p>
              <button
                type="button"
                onClick={() => setLeadTimeline(null)}
                className="rounded-lg px-2 py-1 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
              >
                Cerrar
              </button>
            </div>
            <p className="mt-2 text-lg font-medium text-[#111827] dark:text-[#E2E8F0]">{leadTimeline.nombre}</p>
            <div className="mt-4">
              <TimelineLead eventos={leadTimeline.eventos} />
            </div>
          </div>
        </div>
      )}
    </>
  )
}