/* screen-assistant.jsx — Asistente IA + screen-tramites.jsx (kanban) + screen-docs.jsx */
const { useState: useAsstState, useRef: useAsstRef, useEffect: useAsstEffect } = React;

const QA = [
  { q: '¿Por qué bajó mi score esta semana?', a: 'Tu Registro en el Padrón de Anfitriones caducó hace 12 días. Esto afecta tu cumplimiento de hospedaje temporal y puede bloquear tus anuncios en plataformas. Si quieres, inicio la re-alta ahora — recuperas +9 puntos.' },
  { q: '¿Qué me falta para inscribir el Depto. 402?', a: 'Faltan 3 requisitos: (1) re-alta en el Padrón de Anfitriones, (2) declaración del Impuesto sobre Hospedaje 3% del Q2, y (3) la firma del administrador en el reglamento de condominio. Con la etapa de Inscripción ($5,000) nos encargamos de los tres.' },
  { q: '¿El sellado NOM-151 tiene validez legal?', a: 'Sí. Aplicamos sellado de tiempo conforme a la NOM-151 y firma electrónica avanzada vía JAAK, generando una constancia de conservación con validez para trámites y auditorías.' },
  { q: '¿Cuánto tarda la inscripción?', a: 'Una vez completo el expediente, el alta ante la autoridad suele tomar de 3 a 5 días hábiles. Si el trámite requiere gestión presencial, te ofrecemos la etapa de Gestión asistida.' },
];

function Assistant({ store }) {
  const p = store.properties.find(x => x.id === store.activeProp) || store.properties[0];
  const [msgs, setMsgs] = useAsstState([
    { from: 'ai', text: `Hola ${(store.user?.name || 'Mariana').split(' ')[0]}. Soy tu asistente de cumplimiento. Puedo explicarte tu score, decirte qué te falta o iniciar un trámite. ¿En qué te ayudo con ${p ? p.name : 'tu inmueble'}?` },
  ]);
  const [typing, setTyping] = useAsstState(false);
  const [input, setInput] = useAsstState('');
  const endRef = useAsstRef(null);
  useAsstEffect(() => { const el = endRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, typing]);

  const ask = (q, a) => {
    setMsgs(m => [...m, { from: 'me', text: q }]);
    setInput(''); setTyping(true);
    setTimeout(() => {
      setTyping(false);
      setMsgs(m => [...m, { from: 'ai', text: a || 'Buena pregunta. Según el expediente de tu inmueble, te recomiendo completar la etapa de Inscripción para resolver los requisitos pendientes y subir tu score por encima de 90.' }]);
    }, 1200);
  };
  const remaining = QA.filter(item => !msgs.some(m => m.text === item.q));

  return (
    <div className="pf-page" style={{ maxWidth: 760, height: '100%', display: 'flex', flexDirection: 'column', paddingBottom: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <div style={{ width: 44, height: 44, borderRadius: 12, background: '#1C1A17', color: 'var(--yb-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="sparkle" size={22} /></div>
        <div>
          <h1 style={{ fontSize: 22 }}>Asistente de cumplimiento</h1>
          <p className="pf-muted" style={{ fontSize: 13.5 }}>Contexto: {p ? p.name : 'todos tus inmuebles'}</p>
        </div>
      </div>

      <div ref={endRef} className="pf-card pf-chat" style={{ flex: 1, padding: 22, overflowY: 'auto', minHeight: 0 }}>
        {msgs.map((m, i) => (
          <div key={i} className={'pf-msg ' + (m.from === 'ai' ? 'ai' : 'me')}>
            {m.from === 'ai' && <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 700, color: 'var(--yb-yellow-deep)', marginBottom: 6 }}><Icon name="sparkle" size={13} /> Asistente</div>}
            {m.text}
          </div>
        ))}
        {typing && <div className="pf-msg ai"><span className="pf-typing"><span /><span /><span /></span></div>}
      </div>

      {remaining.length > 0 && (
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
          {remaining.slice(0, 3).map(item => (
            <button key={item.q} className="pf-suggest" onClick={() => ask(item.q, item.a)}>{item.q}</button>
          ))}
        </div>
      )}

      <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
        <input className="pf-input" style={{ flex: 1 }} value={input} onChange={e => setInput(e.target.value)} placeholder="Escribe tu pregunta…" onKeyDown={e => { if (e.key === 'Enter' && input.trim()) ask(input.trim()); }} />
        <button className="pf-btn pf-btn-dark" style={{ padding: '0 16px' }} disabled={!input.trim()} onClick={() => input.trim() && ask(input.trim())}><Icon name="chevright" size={18} /></button>
      </div>
    </div>
  );
}

/* ===== Trámites (kanban) ===== */
function Tramites({ store }) {
  const cols = [
    { key: 'pending', title: 'Por iniciar', tone: 'var(--faint)' },
    { key: 'progress', title: 'En trámite', tone: '#7C3AED' },
    { key: 'review', title: 'En revisión', tone: 'var(--c-blue)' },
    { key: 'done', title: 'Cumplido', tone: 'var(--c-emerald)' },
  ];
  const cards = [
    { t: 'Re-alta en Padrón de Anfitriones', who: 'SECTUR CDMX', prop: 'Depto. 402', col: 'progress', eta: '3–5 días' },
    { t: 'Declaración Impuesto Hospedaje Q2', who: 'Despacho Vega', prop: 'Depto. 402', col: 'review', eta: 'Hoy' },
    { t: 'Firma reglamento de condominio', who: 'Administrador', prop: 'Depto. 402', col: 'pending', eta: '—' },
    { t: 'Renovación uso de suelo', who: 'Alcaldía BJ', prop: 'Depto. 402', col: 'pending', eta: '15 días' },
    { t: 'Alta en Padrón', who: 'SECTUR CDMX', prop: 'Casa Roma 88', col: 'done', eta: 'Completado' },
    { t: 'Visto bueno Protección Civil', who: 'PC Cuauhtémoc', prop: 'Casa Roma 88', col: 'done', eta: 'Completado' },
  ];
  return (
    <div className="pf-page" style={{ maxWidth: 1180 }}>
      <div className="pf-page-head"><div style={{ flex: 1 }}><h1>Trámites</h1><p className="pf-muted" style={{ fontSize: 14.5, marginTop: 4 }}>Seguimiento de cada gestión, por inmueble.</p></div></div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {cols.map(c => {
          const items = cards.filter(x => x.col === c.key);
          return (
            <div key={c.key} style={{ background: 'var(--surface-2)', borderRadius: 16, padding: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 8px 12px' }}>
                <span style={{ width: 8, height: 8, borderRadius: 4, background: c.tone }} />
                <span style={{ fontSize: 13, fontWeight: 700 }}>{c.title}</span>
                <span className="pf-muted pf-num" style={{ fontSize: 12, marginLeft: 'auto' }}>{items.length}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map((x, i) => (
                  <div key={i} className="pf-card" style={{ padding: 13 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3 }}>{x.t}</div>
                    <div className="pf-muted" style={{ fontSize: 12, marginTop: 6 }}>{x.who}</div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 11 }}>
                      <span className="badge badge-neutral" style={{ fontSize: 10.5 }}>{x.prop}</span>
                      <span className="pf-muted pf-num" style={{ fontSize: 11.5 }}>{x.eta}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ===== Documentos (todos los inmuebles) ===== */
function DocsCenter({ store }) {
  const all = store.properties.flatMap(p => (p.docs || []).map(d => ({ ...d, prop: p.name })));
  return (
    <div className="pf-page">
      <div className="pf-page-head"><div style={{ flex: 1 }}><h1>Documentos</h1><p className="pf-muted" style={{ fontSize: 14.5, marginTop: 4 }}>Todo el expediente, sellado y versionado.</p></div>
        <button className="pf-btn pf-btn-yellow" onClick={() => store.nav('add')}><Icon name="upload" size={17} /> Subir documento</button></div>
      <div className="pf-card" style={{ overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2.4fr 1.2fr 1.4fr 1fr 1fr', padding: '12px 20px', fontSize: 10.5, fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--faint)', borderBottom: '1px solid var(--line)' }}>
          <span>Documento</span><span>Inmueble</span><span>Tipo</span><span>Evidencia</span><span>Estado</span>
        </div>
        {all.map((d, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '2.4fr 1.2fr 1.4fr 1fr 1fr', alignItems: 'center', padding: '13px 20px', borderBottom: i < all.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><Icon name="doc" size={16} style={{ color: 'var(--c-blue)', flex: '0 0 auto' }} /><span style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</span></span>
            <span className="pf-muted" style={{ fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.prop}</span>
            <span className="pf-muted" style={{ fontSize: 12.5 }}>{d.type}</span>
            <span style={{ fontSize: 12 }}>{d.sig === 'NOM-151' ? <span style={{ color: 'var(--c-emerald-d)', display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600 }}><Icon name="shieldcheck" size={13} /> NOM-151</span> : <span className="pf-muted">{d.sig}</span>}</span>
            <StatusBadge kind={d.kind} />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Assistant, Tramites, DocsCenter });