// src/screen-contacto.jsx — §Contactos. Prospectos / leads: personas que aún
// NO son clientes (sin póliza en el libro). Aquí viven antes de convertirse en
// cliente. Expone window.ContactoScreen y atiende /contactos (lista) y
// /contactos/:id (detalle). Reemplaza el placeholder que vivía en screen-eventos.

// ─── Semilla de prospectos ────────────────────────────────────────────────────
const CONTACTO_ETAPAS = ['Nuevo', 'Contactado', 'Propuesta enviada', 'Por cerrar'];
const CONTACTO_FUENTES = ['Referido', 'Sitio web', 'Evento', 'Cartera existente'];

function buildContactos() {
  const N = (i, fallback) => (AdmixData.CONTRATANTES && AdmixData.CONTRATANTES[i] ? AdmixData.CONTRATANTES[i].nombre : fallback);
  const raw = [
    { i: 4,  etapa: 'Por cerrar',        fuente: 'Referido',          interes: 'Gastos Médicos', creado: '2026-05-22', nota: 'Pidió comparativo de GMM familiar. Lista para firmar esta semana.' },
    { i: 9,  etapa: 'Propuesta enviada', fuente: 'Sitio web',         interes: 'Autos',          creado: '2026-05-28', nota: 'Envié cotización de cobertura amplia. Espera respuesta del esposo.' },
    { i: 14, etapa: 'Contactado',        fuente: 'Evento',            interes: 'Vida',           creado: '2026-06-03', nota: 'La conocí en el evento ASPRO. Interesada en plan de retiro.' },
    { i: 19, etapa: 'Nuevo',             fuente: 'Referido',          interes: 'Daños',          creado: '2026-06-11', nota: 'Referida por la Sra. López. Quiere asegurar su negocio.' },
    { i: 24, etapa: 'Propuesta enviada', fuente: 'Cartera existente', interes: 'Gastos Médicos', creado: '2026-06-08', nota: 'Ya es cliente de Autos; le ofrecí GMM individual.' },
    { i: 29, etapa: 'Contactado',        fuente: 'Sitio web',         interes: 'Autos',          creado: '2026-06-14', nota: 'Llenó el formulario web. Pendiente agendar llamada.' },
    { i: 34, etapa: 'Nuevo',             fuente: 'Evento',            interes: 'Vida',           creado: '2026-06-17', nota: 'Tarjeta del evento. Aún sin primer contacto.' },
  ];
  const fallbacks = ['Sofía Márquez', 'Diego Fuentes', 'Renata Salas', 'Emilio Cárdenas', 'Valeria Ochoa', 'Tomás Bravo', 'Camila Reyes'];
  return raw.map((r, idx) => {
    const cont = AdmixData.CONTRATANTES ? AdmixData.CONTRATANTES[r.i] : null;
    const nombre = N(r.i, fallbacks[idx]);
    const handle = nombre.toLowerCase().split(/\s+/).slice(0, 2).join('.')
      .replace(/á/g, 'a').replace(/é/g, 'e').replace(/í/g, 'i').replace(/ó/g, 'o').replace(/ú/g, 'u').replace(/ñ/g, 'n');
    return {
      id: 'lead-' + String(idx + 1).padStart(3, '0'),
      nombre: nombre,
      email: cont ? cont.email : handle + '@gmail.com',
      telefono: cont ? cont.telefono : '55 ' + (1000 + idx * 137) + ' ' + (2000 + idx * 211),
      etapa: r.etapa,
      fuente: r.fuente,
      interes: r.interes,
      creado: r.creado,
      nota: r.nota,
    };
  });
}

const CONTACTOS_SEED = buildContactos();

// Resolver: lead-id de la semilla, o sintetizar desde un contratante (los eventos
// enlazan "Ver contacto" → /contactos/<contratante-id>).
function contactoById(id) {
  if (!id) return null;
  if (id.indexOf('lead-') === 0) {
    return CONTACTOS_SEED.find((c) => c.id === id) || null;
  }
  const k = AdmixData.contratanteById ? AdmixData.contratanteById(id) : null;
  if (k) {
    return {
      id: id,
      nombre: k.nombre,
      email: k.email,
      telefono: k.telefono,
      etapa: 'Nuevo',
      fuente: 'Cartera existente',
      interes: 'Gastos Médicos',
      creado: '2026-06-18',
      nota: 'Prospecto generado desde un evento del calendario. Aún sin expediente de cliente.',
    };
  }
  return null;
}

const etapaTone = (etapa) => (etapa === 'Por cerrar' ? 'accent' : 'warm');

// ─── Pantalla raíz ────────────────────────────────────────────────────────────
function ContactoScreen() {
  const { match } = useHashRoute();
  const detalle = match('/contactos/:id');
  if (detalle) return <ContactoDetalle id={detalle.params.id}/>;
  return <ContactoLista/>;
}

// ─── Lista ────────────────────────────────────────────────────────────────────
function ContactoLista() {
  const { navigate } = useHashRoute();
  const { pushToast } = useAxStore();

  const conteos = useMemo(() => {
    const out = {};
    CONTACTO_ETAPAS.forEach((e) => { out[e] = 0; });
    CONTACTOS_SEED.forEach((c) => { out[c.etapa] = (out[c.etapa] || 0) + 1; });
    return out;
  }, []);

  return (
    <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
      <AxPageHeader
        eyebrow="Prospectos · leads"
        title="Contactos"
        subtitle="Personas interesadas que aún no son clientes. Aquí los cultivas hasta convertirlos."
        actions={
          <AxButton variant="primary" icon="plus" onClick={() => pushToast({ kind: 'info', message: 'Captura de nuevo contacto — próximamente.' })}>
            Nuevo contacto
          </AxButton>
        }
      />

      {/* Pipeline por etapa */}
      <div style={{ padding: '18px 32px 4px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {CONTACTO_ETAPAS.map((e) => {
            const tone = etapaTone(e);
            const color = tone === 'accent' ? 'var(--ax-accent)' : 'var(--ax-warm)';
            return (
              <div key={e} className="ax-card" style={{ padding: '14px 16px' }}>
                <AxEyebrow>{e}</AxEyebrow>
                <div className="ax-mono" style={{ fontSize: 28, fontWeight: 700, color: color, marginTop: 8, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {conteos[e] || 0}
                </div>
                <div style={{ fontSize: 11, color: 'var(--ax-fg-muted)', marginTop: 4 }}>
                  {conteos[e] === 1 ? 'prospecto' : 'prospectos'}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Tabla de prospectos */}
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 0 0' }}>
        <table className="ax-table">
          <thead>
            <tr>
              <th>Contacto</th>
              <th style={{ width: 160 }}>Etapa</th>
              <th style={{ width: 160 }}>Fuente</th>
              <th style={{ width: 150 }}>Interés</th>
              <th style={{ width: 130 }}>Capturado</th>
              <th style={{ width: 40 }}/>
            </tr>
          </thead>
          <tbody>
            {CONTACTOS_SEED.map((c) => (
              <tr key={c.id} onClick={() => navigate('/contactos/' + c.id)}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <AxAvatar name={c.nombre} size={30}/>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500 }}>{c.nombre}</div>
                      <div style={{ fontSize: 11, color: 'var(--ax-fg-muted)' }}>{c.email}</div>
                    </div>
                  </div>
                </td>
                <td><AxPill tone={etapaTone(c.etapa)} dot>{c.etapa}</AxPill></td>
                <td><span style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>{c.fuente}</span></td>
                <td>
                  <span style={{
                    fontSize: 11, color: 'var(--ax-fg-muted)',
                    border: '1px solid var(--ax-border-strong)', borderRadius: 4, padding: '2px 8px',
                  }}>{c.interes}</span>
                </td>
                <td><span className="ax-mono" style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>{AdmixData.formatDateES(c.creado)}</span></td>
                <td><AxIcon name="chevron-right" size={13} style={{ color: 'var(--ax-fg-faint)' }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── Detalle ──────────────────────────────────────────────────────────────────
function ContactoDetalle({ id }) {
  const { navigate } = useHashRoute();
  const { pushToast } = useAxStore();
  const c = contactoById(id);
  const [nota, setNota] = useState(c ? c.nota : '');

  if (!c) {
    return (
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <AxEmpty
          icon="user"
          title="Contacto no encontrado"
          body="Quizá ya se convirtió en cliente o el enlace cambió."
          action={<AxButton variant="secondary" onClick={() => navigate('/contactos')}>Volver a Contactos</AxButton>}
        />
      </div>
    );
  }

  const convertir = () => pushToast({ kind: 'success', message: 'Contacto convertido — se creó su expediente de cliente.' });

  return (
    <div style={{ flex: 1, overflow: 'auto' }}>
      <AxPageHeader
        breadcrumb={<AxCrumb items={[{ label: 'Contactos', to: '/contactos' }, { label: c.nombre }]}/>}
        eyebrow="Contacto · lead"
        title={c.nombre}
        subtitle={<span>Etapa actual: <span style={{ color: 'var(--ax-fg)' }}>{c.etapa}</span></span>}
        actions={
          <>
            <AxButton variant="secondary" icon="mail" onClick={() => pushToast({ kind: 'info', message: 'Redactando correo a ' + c.nombre + '…' })}>Escribir</AxButton>
            <AxButton variant="secondary" icon="phone" onClick={() => pushToast({ kind: 'info', message: 'Marcando a ' + c.telefono + '…' })}>Llamar</AxButton>
          </>
        }
      />

      <div style={{ padding: '24px 32px 48px', maxWidth: 1100, display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 18 }}>
        {/* Perfil */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="ax-card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, paddingBottom: 18, borderBottom: '1px solid var(--ax-border)' }}>
              <AxAvatar name={c.nombre} size={72}/>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 17, color: 'var(--ax-fg-strong)', fontWeight: 600 }}>{c.nombre}</div>
                <div style={{ marginTop: 6 }}><AxPill tone={etapaTone(c.etapa)} dot>{c.etapa}</AxPill></div>
              </div>
            </div>
            <div style={{ paddingTop: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <FilaContacto icon="mail" label="Correo" value={c.email}/>
              <FilaContacto icon="phone" label="Teléfono" value={c.telefono}/>
              <FilaContacto icon="cal" label="Capturado" value={AdmixData.formatDateES(c.creado)}/>
              <FilaContacto icon="tag" label="Interés" value={c.interes}/>
              <FilaContacto icon="map" label="Fuente" value={c.fuente}/>
            </div>
          </div>

          {/* CTA conversión */}
          <div className="ax-card" style={{ padding: 18, background: 'var(--ax-accent-soft)', borderColor: 'var(--ax-accent-line)' }}>
            <AxEyebrow style={{ color: 'var(--ax-accent)', marginBottom: 6 }}>¿Listo para cerrar?</AxEyebrow>
            <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', marginBottom: 12, lineHeight: 1.5 }}>
              Conviértelo en cliente y Piixi le abre su expediente con todo lo que ya capturaste.
            </div>
            <AxButton variant="primary" icon="check" onClick={convertir} style={{ width: '100%' }}>
              Convertir en cliente
            </AxButton>
            <div style={{ marginTop: 8 }}>
              <AxButton variant="secondary" icon="cal" onClick={() => navigate('/eventos')} style={{ width: '100%' }}>
                Agendar cita
              </AxButton>
            </div>
          </div>
        </div>

        {/* Interés y seguimiento */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            <Tile label="Interés" value={c.interes}/>
            <Tile label="Fuente" value={c.fuente}/>
            <Tile label="Etapa" value={c.etapa} tone={etapaTone(c.etapa)}/>
          </div>

          <div className="ax-card" style={{ padding: 20 }}>
            <AxEyebrow style={{ marginBottom: 10 }}>Seguimiento</AxEyebrow>
            <AxField label="Nota privada">
              <AxTextarea
                value={nota}
                onChange={(e) => setNota(e.target.value)}
                placeholder="Próximos pasos, preferencias, contexto de la conversación…"
                style={{ minHeight: 120, resize: 'vertical' }}
              />
            </AxField>
            <div style={{ marginTop: 12, display: 'flex', justifyContent: 'flex-end' }}>
              <AxButton variant="secondary" size="sm" icon="check" onClick={() => pushToast({ kind: 'success', message: 'Nota guardada.' })}>
                Guardar nota
              </AxButton>
            </div>
          </div>

          <div className="ax-card" style={{ padding: 20 }}>
            <AxEyebrow style={{ marginBottom: 10 }}>Aún no es cliente</AxEyebrow>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ color: 'var(--ax-fg-muted)', marginTop: 1 }}><AxIcon name="info" size={15}/></div>
              <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', lineHeight: 1.55 }}>
                Un contacto es un prospecto sin póliza en tu libro. No cuenta para cumplimiento ni cobranza
                hasta que lo conviertas en cliente.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FilaContacto({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <span style={{ color: 'var(--ax-fg-faint)', marginTop: 1 }}><AxIcon name={icon} size={14}/></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 10, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{label}</div>
        <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', marginTop: 2, wordBreak: 'break-word' }}>{value}</div>
      </div>
    </div>
  );
}

function Tile({ label, value, tone }) {
  const color = tone === 'accent' ? 'var(--ax-accent)' : tone === 'warm' ? 'var(--ax-warm)' : 'var(--ax-fg-strong)';
  return (
    <div className="ax-card" style={{ padding: 14 }}>
      <AxEyebrow>{label}</AxEyebrow>
      <div style={{ marginTop: 8, fontSize: 15, fontWeight: 600, color: color }}>{value}</div>
    </div>
  );
}

window.ContactoScreen = ContactoScreen;