import { useCallback, useEffect, useState, type FormEvent } from 'react'
import KpiCard from '../components/KpiCard'
import {
  esActividadVencida,
  esRolConEquipo,
  formatoFechaCorta,
  hoyLocal,
  MOTIVOS_NO_COMPRA,
  ORIGENES_LEAD,
  textoDiasRestantes,
  type LeadMiDia,
  type MotivoNoCompra,
  type ResumenMiDia,
} from '../lib/mi-dia'
import { cambiarEstadoLead, crearLead, descartarLead, fetchResumenMiDia } from '../services/mi-dia'
import { getSesion } from '../services/auth'

function TituloSeccion({ children }: { children: string }) {
  return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
}

function EstadoVacio({ mensaje }: { mensaje: string }) {
  return (
    <div className="flex h-24 items-center justify-center border border-dashed border-neutral-300">
      <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
    </div>
  )
}

const CLASE_BOTON_ACCION =
  'border border-accent px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50'

/** Modal de descarte: motivo (dropdown CRM) + comentario opcional */
function ModalDescartar({
  lead,
  onCancelar,
  onConfirmar,
  enviando,
}: {
  lead: LeadMiDia
  onCancelar: () => void
  onConfirmar: (motivo: MotivoNoCompra, comentario: string) => void
  enviando: boolean
}) {
  const [motivo, setMotivo] = useState<MotivoNoCompra>(MOTIVOS_NO_COMPRA[0])
  const [comentario, setComentario] = useState('')
  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 border border-neutral-300 bg-white p-6">
        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">Descartar lead</p>
        <p className="mt-2 text-lg font-light">{lead.nombre}</p>
        <form
          className="mt-6 space-y-4"
          onSubmit={(e) => {
            e.preventDefault()
            onConfirmar(motivo, comentario.trim())
          }}
        >
          <div>
            <label htmlFor="motivo-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
              Motivo
            </label>
            <select
              id="motivo-descarte"
              value={motivo}
              onChange={(e) => setMotivo(e.target.value as MotivoNoCompra)}
              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
            >
              {MOTIVOS_NO_COMPRA.map((m) => (
                <option key={m} value={m}>
                  {m}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label htmlFor="comentario-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
              Comentario (opcional)
            </label>
            <textarea
              id="comentario-descarte"
              value={comentario}
              onChange={(e) => setComentario(e.target.value)}
              rows={3}
              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
            />
          </div>
          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={onCancelar}
              disabled={enviando}
              className="border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500 disabled:opacity-50"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={enviando}
              className="bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
            >
              {enviando ? 'Descartando…' : 'Descartar'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

/** Fila de lead con acciones rápidas (contactado / intento / cita / descartar) */
function FilaLead({
  lead,
  onAccion,
  onDescartar,
  enviando,
}: {
  lead: LeadMiDia
  onAccion: (estado: string, fecha?: string) => void
  onDescartar: () => void
  enviando: boolean
}) {
  const [conCita, setConCita] = useState(false)
  const [fechaCita, setFechaCita] = useState('')
  return (
    <li className="border border-neutral-200 p-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="text-sm font-medium">{lead.nombre}</p>
          <p className="mt-1 text-xs text-neutral-500">
            {lead.telefono || 'Sin teléfono'}
            {lead.origen ? ` · ${lead.origen}` : ''}
          </p>
        </div>
        <span className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
          {lead.estado || 'Sin estado'}
        </span>
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <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={() => (conCita ? onAccion('AGENDA CITA', fechaCita || undefined) : setConCita(true))}
          className={CLASE_BOTON_ACCION}
        >
          {conCita ? 'Confirmar cita' : 'Agenda cita'}
        </button>
        {conCita && (
          <input
            type="date"
            aria-label="Fecha de la cita"
            value={fechaCita}
            onChange={(e) => setFechaCita(e.target.value)}
            className="border border-neutral-300 px-2 py-1.5 text-xs focus:border-accent focus:outline-none"
          />
        )}
        <button
          type="button"
          disabled={enviando}
          onClick={onDescartar}
          className="border border-red-700 px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-700 hover:text-white disabled:opacity-50"
        >
          Descartar
        </button>
      </div>
    </li>
  )
}

export default function MiDiaPage() {
  const nombreVendedor = getSesion()?.usuario.nombre ?? ''
  const rol = getSesion()?.usuario.rol ?? 'vendedor'
  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<LeadMiDia | null>(null)

  // Captura rápida
  const [capNombre, setCapNombre] = useState('')
  const [capTelefono, setCapTelefono] = useState('')
  const [capOrigen, setCapOrigen] = useState<string>(ORIGENES_LEAD[0])
  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 {
      setResumen(await fetchResumenMiDia())
      setError(null)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo cargar tu día')
    } finally {
      setCargando(false)
    }
  }, [])

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

  /** 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) {
      setAviso(err instanceof Error ? err.message : mensajeError)
    } finally {
      setEnviando(false)
    }
  }

  async function enviarCaptura(e: FormEvent) {
    e.preventDefault()
    setCapEnviando(true)
    setCapMensaje(null)
    try {
      await crearLead({
        nombre: capNombre.trim(),
        ...(capTelefono.trim() !== '' ? { telefono: capTelefono.trim() } : {}),
        ...(capOrigen !== '' ? { origen: capOrigen } : {}),
        ...(capNotas.trim() !== '' ? { notas: capNotas.trim() } : {}),
      })
      setCapMensaje({ tipo: 'ok', texto: 'Lead registrado, se asignará por round-robin' })
      setCapNombre('')
      setCapTelefono('')
      setCapNotas('')
    } catch (err) {
      setCapMensaje({ tipo: 'error', texto: err instanceof Error ? err.message : 'No se pudo registrar el lead' })
    } finally {
      setCapEnviando(false)
    }
  }

  const hoy = hoyLocal()

  return (
    <main className="mx-auto max-w-6xl px-4 py-8">
      <div className="mb-8 flex items-end justify-between">
        <div>
          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA · Mi día</p>
          <h1 className="mt-2 text-3xl font-light text-neutral-900">{nombreVendedor}</h1>
        </div>
        <button
          type="button"
          onClick={() => void cargar()}
          disabled={cargando}
          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
        >
          {cargando ? 'Actualizando…' : 'Actualizar'}
        </button>
      </div>

      {error && (
        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
          Sin datos del API — {error}
        </p>
      )}
      {aviso && (
        <p role="alert" className="mb-8 border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700">
          {aviso}
        </p>
      )}
      {resumen?.sinMapeoMonday && (
        <p className="mb-8 border border-neutral-300 px-4 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500">
          Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
        </p>
      )}

      {!resumen && cargando && <EstadoVacio mensaje="Cargando…" />}

      {resumen && (
        <>
          <section aria-label="Indicadores del día" className="grid gap-4 sm: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>

          <section aria-label="Mis actividades" className="mt-12">
            <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 border border-neutral-200 px-4 py-3">
                    <p className="text-sm">
                      {a.nombre}
                      {a.tipo ? <span className="ml-2 text-xs uppercase tracking-widest text-neutral-400">{a.tipo}</span> : null}
                    </p>
                    <span
                      className={`text-xs font-bold uppercase tracking-widest ${
                        esActividadVencida(a.fecha, hoy) ? 'text-red-700' : 'text-neutral-500'
                      }`}
                    >
                      {formatoFechaCorta(a.fecha)}
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </section>

          {resumen.apartadosPorVencer.length > 0 && (
            <section aria-label="Apartados por vencer" className="mt-12">
              <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 border border-neutral-200 px-4 py-3">
                    <p className="text-sm">
                      {a.nombre}
                      {a.unidadCodigo ? <span className="ml-2 text-xs text-neutral-400">{a.unidadCodigo}</span> : null}
                    </p>
                    <span
                      className={`text-xs font-bold uppercase tracking-widest ${
                        a.diasRestantes <= 1 ? 'text-red-700' : 'text-amber-700'
                      }`}
                    >
                      {textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
                    </span>
                  </li>
                ))}
              </ul>
            </section>
          )}

          <section aria-label="Mis leads" className="mt-12">
            <TituloSeccion>Mis leads</TituloSeccion>
            {resumen.misLeads.length === 0 ? (
              <EstadoVacio mensaje="Sin leads asignados" />
            ) : (
              <ul className="space-y-2">
                {resumen.misLeads.map((lead) => (
                  <FilaLead
                    key={lead.id}
                    lead={lead}
                    enviando={enviando}
                    onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha), 'No se pudo actualizar el lead')}
                    onDescartar={() => setDescartando(lead)}
                  />
                ))}
              </ul>
            )}
          </section>

          <section aria-label="Captura rápida de lead" className="mt-12">
            <TituloSeccion>Captura rápida de lead</TituloSeccion>
            <form onSubmit={enviarCaptura} className="grid gap-4 border border-neutral-200 p-6 sm:grid-cols-2">
              <div>
                <label htmlFor="cap-nombre" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
                  Nombre
                </label>
                <input
                  id="cap-nombre"
                  type="text"
                  value={capNombre}
                  onChange={(e) => setCapNombre(e.target.value)}
                  required
                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
                />
              </div>
              <div>
                <label htmlFor="cap-telefono" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
                  Teléfono
                </label>
                <input
                  id="cap-telefono"
                  type="tel"
                  value={capTelefono}
                  onChange={(e) => setCapTelefono(e.target.value)}
                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
                />
              </div>
              <div>
                <label htmlFor="cap-origen" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
                  Origen
                </label>
                <select
                  id="cap-origen"
                  value={capOrigen}
                  onChange={(e) => setCapOrigen(e.target.value)}
                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
                >
                  {ORIGENES_LEAD.map((o) => (
                    <option key={o} value={o}>
                      {o}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label htmlFor="cap-notas" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
                  Notas
                </label>
                <input
                  id="cap-notas"
                  type="text"
                  value={capNotas}
                  onChange={(e) => setCapNotas(e.target.value)}
                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
                />
              </div>
              {capMensaje && (
                <p
                  role="status"
                  className={`border px-4 py-3 text-xs font-bold uppercase tracking-widest sm:col-span-2 ${
                    capMensaje.tipo === 'ok' ? 'border-accent text-accent' : 'border-red-700 text-red-700'
                  }`}
                >
                  {capMensaje.texto}
                </p>
              )}
              <div className="sm:col-span-2">
                <button
                  type="submit"
                  disabled={capEnviando}
                  className="bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
                >
                  {capEnviando ? 'Registrando…' : 'Registrar lead'}
                </button>
              </div>
            </form>
          </section>

          {esRolConEquipo(rol) && resumen.equipo && (
            <section aria-label="Equipo" className="mt-12">
              <TituloSeccion>Equipo</TituloSeccion>
              <p className="mb-4 text-sm text-neutral-500">
                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="space-y-2">
                  {resumen.equipo.porVendedor.map((v) => (
                    <li key={v.mondayUserId} className="flex items-center justify-between border border-neutral-200 px-4 py-3">
                      <p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
                      <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
                        {v.leadsAsignados} lead(s)
                      </span>
                    </li>
                  ))}
                </ul>
              )}
            </section>
          )}
        </>
      )}

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