/* screens-main.jsx — Dashboard (multi-inmueble) + Detalle de inmueble */
const { useState: useMainState } = React;

/* ============ DASHBOARD ============ */
function Dashboard({ store }) {
  const { properties, nav } = store;
  const avg = Math.round(properties.reduce((a, p) => a + p.score, 0) / (properties.length || 1));
  const compliant = properties.filter(p => p.status === 'compliant').length;
  const risks = properties.reduce((a, p) => a + Object.values(p.reqs || {}).filter(v => v === 'expired' || v === 'missing').length, 0);

  if (properties.length === 0) {
    return (
      <div className="pf-page">
        <div className="pf-empty">
          <div className="ico"><Icon name="building" size={32} /></div>
          <h1 style={{ fontSize: 24 }}>Agrega tu primer inmueble</h1>
          <p className="pf-muted" style={{ fontSize: 15, marginTop: 10, lineHeight: 1.55 }}>Empieza con un análisis de zona y regulación. En minutos sabrás si tu propiedad puede operar y qué le falta.</p>
          <button className="pf-btn pf-btn-yellow pf-btn-lg" style={{ marginTop: 24 }} onClick={() => nav('add')}><Icon name="plus" size={18} /> Agregar inmueble</button>
        </div>
      </div>
    );
  }

  return (
    <div className="pf-page">
      <div className="pf-page-head">
        <div style={{ flex: 1 }}>
          <h1>Hola, {(store.user?.name || 'Mariana').split(' ')[0]} 👋</h1>
          <p className="pf-muted" style={{ fontSize: 14.5, marginTop: 4 }}>Esto es lo que necesita tu atención hoy.</p>
        </div>
        <button className="pf-btn pf-btn-yellow" onClick={() => nav('add')}><Icon name="plus" size={17} /> Agregar inmueble</button>
      </div>

      <div className="pf-stat-row" style={{ marginBottom: 24 }}>
        {[
          ['building', properties.length, 'Inmuebles', 'var(--ink)'],
          ['shieldcheck', compliant, 'En cumplimiento', 'var(--c-emerald)'],
          ['alert', risks, 'Pendientes críticos', 'var(--c-red)'],
          ['arrowup', avg, 'Score promedio', scoreColor(avg)],
        ].map(([ic, v, l, col]) => (
          <div key={l} className="pf-stat">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <span style={{ color: col }}><Icon name={ic} size={18} /></span>
            </div>
            <div className="v pf-num" style={{ color: col }}>{v}</div>
            <div className="l">{l}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <h2 style={{ fontSize: 18 }}>Mis inmuebles</h2>
        <span className="pf-muted" style={{ fontSize: 13.5 }}>{properties.length} {properties.length === 1 ? 'propiedad' : 'propiedades'}</span>
      </div>
      <div className="pf-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
        {properties.map(p => <PropertyCard key={p.id} p={p} onClick={() => nav('property', p.id)} />)}
        <div className="pf-prop-card" onClick={() => nav('add')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', borderStyle: 'dashed', minHeight: 240, color: 'var(--muted)', gap: 12 }}>
          <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--yb-yellow-deep)' }}><Icon name="plus" size={24} /></div>
          <div style={{ fontWeight: 600, fontSize: 14.5 }}>Agregar otro inmueble</div>
        </div>
      </div>
    </div>
  );
}

function PropertyCard({ p, onClick }) {
  const pending = Object.values(p.reqs || {}).filter(v => v !== 'ok').length;
  const stageLabel = p.stage === 'done' ? 'En regla' : p.stage === 'inscripcion' ? 'Inscripción en curso' : p.stage === 'analisis' ? 'Análisis listo' : 'Sin analizar';
  return (
    <div className="pf-prop-card" onClick={onClick}>
      <div className="pf-thumb" style={{ background: p.thumb, marginBottom: 16 }}>
        <span className="badge" style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,.92)', color: 'var(--ink)' }}><Icon name="building" size={12} /> {p.use.split('·')[0]}</span>
        <div style={{ position: 'absolute', bottom: 12, right: 12, width: 56, height: 56, borderRadius: '50%', background: 'rgba(28,26,23,.78)', backdropFilter: 'blur(4px)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
          <span className="pf-num" style={{ fontSize: 19, fontWeight: 800, lineHeight: 1 }}>{p.score}</span>
          <span style={{ fontSize: 8.5, opacity: .7 }}>SCORE</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
            <h3 style={{ fontSize: 16, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: '0 1 auto' }}>{p.name}</h3>
            <StatusBadge kind={statusBadgeKind(p.status)}>{stageLabel}</StatusBadge>
          </div>
          <div className="pf-muted" style={{ fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}><Icon name="pin" size={13} style={{ flex: '0 0 auto' }} /> {p.address} · {p.alcaldia}</div>
        </div>
      </div>
      <div className="pf-bar" style={{ marginTop: 16 }}><div style={{ width: p.score + '%', background: scoreColor(p.score) }} /></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 12.5 }}>
        <span className="pf-muted">{pending === 0 ? 'Sin pendientes' : `${pending} requisito${pending > 1 ? 's' : ''} por resolver`}</span>
        <span style={{ color: 'var(--yb-yellow-deep)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 3 }}>Ver expediente <Icon name="chevright" size={13} /></span>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, PropertyCard });