/* screen-property.jsx — Detalle de inmueble: score, requisitos, documentos, etapas */
const { useState: usePropState } = React;

const REQ_STATE = {
  ok:      ['compliant', 'Cumplido', 'var(--c-emerald)'],
  review:  ['review', 'En revisión', 'var(--c-blue)'],
  missing: ['missing', 'Falta', 'var(--c-amber)'],
  expired: ['expired', 'Vencido', 'var(--c-red)'],
};

function PropertyDetail({ store }) {
  const p = store.properties.find(x => x.id === store.activeProp) || store.properties[0];
  const [tab, setTab] = usePropState('resumen');
  if (!p) return null;

  const breakdown = [
    { label: 'Documentación', value: Math.min(100, p.score + 14) },
    { label: 'Licencias y permisos', value: Math.max(40, p.score - 8) },
    { label: 'Obligaciones fiscales', value: Math.max(35, p.score - 14) },
    { label: 'Protección civil', value: Math.min(100, p.score + 10) },
  ];
  const nextStage = !p.owned.inscripcion ? 'inscripcion' : !p.owned.gestion ? 'gestion' : null;

  return (
    <div className="pf-page">
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--muted)', marginBottom: 14, cursor: 'pointer' }} onClick={() => store.nav('dashboard')}>
        <Icon name="chevright" size={14} style={{ transform: 'rotate(180deg)' }} /> Mis inmuebles
      </div>
      <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start', marginBottom: 24 }}>
        <div style={{ width: 92, height: 92, borderRadius: 18, background: p.thumb, flex: '0 0 auto' }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <h1 style={{ fontSize: 26 }}>{p.name}</h1>
            <StatusBadge kind={statusBadgeKind(p.status)}>{p.status === 'compliant' ? 'En regla' : 'En proceso'}</StatusBadge>
          </div>
          <div className="pf-muted" style={{ fontSize: 14, marginTop: 6, display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="pin" size={15} /> {p.address}, {p.alcaldia} · {p.use}</div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="pf-btn pf-btn-ghost" onClick={() => store.nav('assistant')}><Icon name="sparkle" size={16} /> Preguntar a la IA</button>
          {nextStage && <button className="pf-btn pf-btn-yellow" onClick={() => { store.setCheckout({ propId: p.id, service: nextStage }); store.nav('checkout'); }}><Icon name="arrowup" size={16} /> {nextStage === 'inscripcion' ? 'Inscribir inmueble' : 'Solicitar gestión'}</button>}
        </div>
      </div>

      {/* tabs */}
      <div style={{ display: 'flex', gap: 6, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
        {[['resumen', 'Resumen'], ['requisitos', 'Requisitos'], ['docs', 'Documentos'], ['etapas', 'Etapas y servicios']].map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{ border: 'none', background: 'none', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 600, fontSize: 14, padding: '10px 14px', color: tab === k ? 'var(--ink)' : 'var(--muted)', borderBottom: tab === k ? '2px solid var(--yb-yellow-deep)' : '2px solid transparent', marginBottom: -1 }}>{l}</button>
        ))}
      </div>

      {tab === 'resumen' && (
        <div style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 18 }}>
          <div className="pf-card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span className="pf-eyebrow" style={{ color: 'var(--faint)' }}>Compliance Score</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 14px' }}>
              <Ring value={p.score} size={150} thick={13} track="var(--surface-2)" color={scoreColor(p.score)}>
                <span className="pf-num" style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800 }}>{p.score}</span>
                <span style={{ fontSize: 11, color: 'var(--muted)' }}>de 100</span>
              </Ring>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {breakdown.map(b => (
                <div key={b.label}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 12.5, marginBottom: 6 }}>
                    <span className="pf-muted" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{b.label}</span><span className="pf-num" style={{ fontWeight: 700, flex: '0 0 auto' }}>{b.value}%</span>
                  </div>
                  <div className="pf-bar" style={{ height: 5 }}><div style={{ width: b.value + '%', background: scoreColor(b.value) }} /></div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="pf-card" style={{ padding: 20 }}>
              <h3 style={{ fontSize: 16, marginBottom: 14 }}>Lo que necesita tu atención</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {PF_REQS.filter(r => p.reqs[r.id] !== 'ok').map(r => {
                  const st = REQ_STATE[p.reqs[r.id]] || REQ_STATE.missing;
                  return (
                    <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 13, background: 'var(--surface-2)' }}>
                      <span style={{ width: 9, height: 9, borderRadius: 5, background: st[2], flex: '0 0 auto', boxShadow: `0 0 0 4px ${st[2]}22` }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.label}</div>
                        <div className="pf-muted" style={{ fontSize: 12 }}>{r.detail}</div>
                      </div>
                      <StatusBadge kind={st[0]}>{st[1]}</StatusBadge>
                    </div>
                  );
                })}
                {PF_REQS.filter(r => p.reqs[r.id] !== 'ok').length === 0 && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 14, borderRadius: 13, background: 'var(--c-emerald-bg)', color: 'var(--c-emerald-d)', fontWeight: 600, fontSize: 14 }}>
                    <Icon name="shieldcheck" size={20} /> Este inmueble está en regla. Mantendremos vivo su cumplimiento.
                  </div>
                )}
              </div>
            </div>

            <div className="pf-card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, background: 'linear-gradient(180deg,#FFFCF3,var(--surface))' }}>
              <div style={{ width: 40, height: 40, borderRadius: 11, background: '#1C1A17', color: 'var(--yb-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name="sparkle" size={20} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>Recomendación del asistente</div>
                <div className="pf-muted" style={{ fontSize: 13, marginTop: 2 }}>{p.status === 'compliant' ? 'Todo en orden. Próxima renovación en 41 días.' : 'Resolver el Padrón de Anfitriones suma +9 puntos a tu score.'}</div>
              </div>
              <button className="pf-btn pf-btn-dark pf-btn-sm" onClick={() => store.nav('assistant')}>Ver</button>
            </div>
          </div>
        </div>
      )}

      {tab === 'requisitos' && (
        <div className="pf-card" style={{ overflow: 'hidden' }}>
          {PF_REQS.map((r, i) => {
            const st = REQ_STATE[p.reqs[r.id]] || REQ_STATE.missing;
            return (
              <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderBottom: i < PF_REQS.length - 1 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: st[2] + '18', color: st[2], display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name={p.reqs[r.id] === 'ok' ? 'check' : 'alert'} size={18} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600 }}>{r.label}</div>
                  <div className="pf-muted" style={{ fontSize: 13 }}>{r.detail}</div>
                </div>
                <StatusBadge kind={st[0]}>{st[1]}</StatusBadge>
                {p.reqs[r.id] !== 'ok' && <button className="pf-btn pf-btn-soft pf-btn-sm">Resolver</button>}
              </div>
            );
          })}
        </div>
      )}

      {tab === 'docs' && <PropertyDocs store={store} p={p} />}

      {tab === 'etapas' && <PropertyStages store={store} p={p} />}
    </div>
  );
}

function PropertyDocs({ store, p }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <span className="pf-muted" style={{ fontSize: 14 }}>{p.docs.length} documentos en el expediente</span>
        <button className="pf-btn pf-btn-ghost pf-btn-sm" onClick={() => store.nav('add')}><Icon name="upload" size={15} /> Subir documento</button>
      </div>
      <div className="pf-card" style={{ overflow: 'hidden' }}>
        {p.docs.length === 0 && <div style={{ padding: 40, textAlign: 'center', color: 'var(--muted)', fontSize: 14 }}>Aún no hay documentos. Súbelos para que la IA arme el expediente.</div>}
        {p.docs.map((d, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 18px', borderBottom: i < p.docs.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--c-blue-bg)', color: 'var(--c-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name="doc" size={18} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
              <div className="pf-muted" style={{ fontSize: 12.5 }}>{d.type}</div>
            </div>
            {d.sig === 'NOM-151' ? <span style={{ fontSize: 12, color: 'var(--c-emerald-d)', display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600 }}><Icon name="shieldcheck" size={14} /> NOM-151</span> : <span className="pf-muted" style={{ fontSize: 12.5 }}>{d.sig}</span>}
            <StatusBadge kind={d.kind} />
          </div>
        ))}
      </div>
    </div>
  );
}

function PropertyStages({ store, p }) {
  const stages = ['analisis', 'inscripcion', 'gestion'];
  const stageDesc = {
    analisis: 'Dictamen de zona, requisitos y score inicial.',
    inscripcion: 'Expediente completo, firmas y alta ante la autoridad.',
    gestion: 'Gestión manual o presencial del trámite, de principio a fin.',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {stages.map(key => {
        const s = PF_SERVICES[key];
        const owned = p.owned[key];
        return (
          <div key={key} className="pf-card" style={{ padding: 20, display: 'flex', alignItems: 'center', gap: 16, opacity: 1 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: owned ? 'var(--c-emerald-bg)' : 'var(--surface-2)', color: owned ? 'var(--c-emerald-d)' : 'var(--faint)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
              <Icon name={owned ? 'check' : 'receipt'} size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ fontWeight: 700, fontSize: 15.5, fontFamily: 'var(--font-display)' }}>Etapa {s.stage} · {s.name}</span>
                {owned && <StatusBadge kind="compliant">Adquirido</StatusBadge>}
              </div>
              <div className="pf-muted" style={{ fontSize: 13.5, marginTop: 3 }}>{stageDesc[key]}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="pf-num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20 }}>{s.range ? `$${s.range[0].toLocaleString('es-MX')}–${s.range[1].toLocaleString('es-MX')}` : `$${s.price.toLocaleString('es-MX')}`}</div>
              <div style={{ fontSize: 11.5, color: 'var(--faint)' }}>MXN · {s.unit}</div>
            </div>
            {!owned && <button className="pf-btn pf-btn-yellow" onClick={() => { store.setCheckout({ propId: p.id, service: key }); store.nav('checkout'); }}>Contratar</button>}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { PropertyDetail });