/* screen-add.jsx — Wizard: alta de inmueble → subir documentos → análisis (OCR) */
const { useState: useAddState } = React;

const ALCALDIAS = ['Benito Juárez', 'Cuauhtémoc', 'Miguel Hidalgo', 'Coyoacán', 'Álvaro Obregón', 'Tlalpan'];

const ADDR_SUGGEST = [
  { address: 'Av. Coyoacán 1435, Del Valle', alcaldia: 'Benito Juárez', x: 48, y: 58 },
  { address: 'Córdoba 88, Roma Norte', alcaldia: 'Cuauhtémoc', x: 40, y: 38 },
  { address: 'Av. Nuevo León 120, Condesa', alcaldia: 'Cuauhtémoc', x: 33, y: 44 },
  { address: 'Patriotismo 600, Nápoles', alcaldia: 'Benito Juárez', x: 38, y: 62 },
  { address: 'Insurgentes Sur 1602, Crédito Constructor', alcaldia: 'Benito Juárez', x: 52, y: 70 },
];

// convierte x,y (%) a coordenadas aproximadas de CDMX
function toCoords(x, y) {
  const lng = -99.205 + (x / 100) * 0.085;
  const lat = 19.425 - (y / 100) * 0.065;
  return { lat: lat.toFixed(4), lng: lng.toFixed(4) };
}

function LocationPicker({ loc, onPick }) {
  const [locating, setLocating] = useAddState(false);
  const place = (x, y) => { const c = toCoords(x, y); onPick({ x, y, ...c }); };
  const onMapClick = (e) => {
    if (locating) return;
    const r = e.currentTarget.getBoundingClientRect();
    const x = Math.max(4, Math.min(96, ((e.clientX - r.left) / r.width) * 100));
    const y = Math.max(6, Math.min(94, ((e.clientY - r.top) / r.height) * 100));
    place(+x.toFixed(1), +y.toFixed(1));
  };
  const useGPS = (e) => {
    e.stopPropagation();
    setLocating(true);
    setTimeout(() => { setLocating(false); place(48, 58); }, 1400);
  };
  return (
    <div className="pf-map" onClick={onMapClick}>
      <div className="pf-map-park" style={{ left: '8%', top: '12%', width: '26%', height: '30%' }} />
      <div className="pf-map-ave" style={{ left: 0, top: '50%', width: '100%', height: 10 }} />
      <div className="pf-map-ave" style={{ left: '46%', top: 0, width: 11, height: '100%' }} />
      <div className="pf-map-ave" style={{ left: '-10%', top: '-20%', width: '150%', height: 9, transform: 'rotate(24deg)', transformOrigin: 'left' }} />
      <div className="pf-map-block" style={{ left: '60%', top: '20%', width: '22%', height: '18%' }} />
      <div className="pf-map-block" style={{ left: '14%', top: '60%', width: '18%', height: '20%' }} />
      <div className="pf-map-block" style={{ left: '66%', top: '64%', width: '20%', height: '22%' }} />

      <button className="pf-gps-btn" onClick={useGPS} disabled={locating}>
        {locating ? <><span className="pf-spin" /> Localizando…</> : <><Icon name="scan" size={15} style={{ color: 'var(--c-blue)' }} /> Usar mi ubicación (GPS)</>}
      </button>

      {loc && !locating && (
        <React.Fragment>
          <div className="pf-ping" style={{ left: loc.x + '%', top: loc.y + '%' }} />
          <div className="pf-pin" style={{ left: loc.x + '%', top: loc.y + '%' }}>
            <div className="pf-pin-dot"><Icon name="home" size={14} style={{ color: '#fff' }} /></div>
            <div className="pf-pin-shadow" />
          </div>
          <div className="pf-coord"><Icon name="pin" size={13} style={{ color: 'var(--yb-yellow)' }} /> {loc.lat}, {loc.lng}</div>
        </React.Fragment>
      )}
      {!loc && !locating && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 8, color: 'var(--muted)', pointerEvents: 'none' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(255,255,255,.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--yb-yellow-deep)' }}><Icon name="pin" size={22} /></div>
          <span style={{ fontSize: 13, fontWeight: 600 }}>Toca el mapa o usa tu GPS para fijar el inmueble</span>
        </div>
      )}
    </div>
  );
}
const DOC_TYPES = [
  { key: 'ine', label: 'INE / identificación', req: true },
  { key: 'fiscal', label: 'Constancia de situación fiscal', req: true },
  { key: 'escritura', label: 'Escritura o título de propiedad', req: true },
  { key: 'predial', label: 'Boleta predial', req: true },
  { key: 'domicilio', label: 'Comprobante de domicilio', req: false },
];

function AddProperty({ store }) {
  const [step, setStep] = useAddState(0); // 0 datos, 1 docs, 2 análisis, 3 listo
  const [form, setForm] = useAddState({ name: '', address: '', alcaldia: 'Benito Juárez', use: 'Airbnb · Renta temporal', loc: null });
  const [uploaded, setUploaded] = useAddState([]);
  const [scanning, setScanning] = useAddState(false);
  const [newId, setNewId] = useAddState(null);
  const [showSug, setShowSug] = useAddState(false);

  const steps = ['Datos del inmueble', 'Documentos', 'Análisis', 'Resultado'];
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const reqDone = DOC_TYPES.filter(d => d.req).every(d => uploaded.includes(d.key));

  const upload = (key) => setUploaded(u => u.includes(key) ? u : [...u, key]);
  const uploadAll = () => setUploaded(DOC_TYPES.map(d => d.key));

  const runAnalysis = () => {
    setStep(2); setScanning(true);
    setTimeout(() => setScanning(false), 2600);
  };

  const finish = () => {
    const docs = uploaded.map(k => {
      const t = DOC_TYPES.find(d => d.key === k);
      return { name: t.label.split('/')[0].trim().replace(/ /g, '_') + '.pdf', type: t.label, kind: 'compliant', sig: 'OCR' };
    });
    const id = store.addProperty({
      name: form.name || 'Inmueble sin nombre', address: form.address || 'Dirección pendiente',
      alcaldia: form.alcaldia, use: form.use, loc: form.loc, score: 52, stage: 'analisis', status: 'progress',
      docs, reqs: { uso: 'ok', padron: 'missing', hosp: 'missing', condo: 'review', pc: 'missing' },
      owned: { analisis: true, inscripcion: false, gestion: false },
    });
    setNewId(id);
    store.setCheckout({ propId: id, service: 'inscripcion' });
    store.nav('property', id);
  };

  return (
    <div className="pf-page" style={{ maxWidth: 760 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--muted)', marginBottom: 18, cursor: 'pointer' }} onClick={() => store.nav('dashboard')}>
        <Icon name="chevright" size={14} style={{ transform: 'rotate(180deg)' }} /> Cancelar
      </div>
      <h1 style={{ fontSize: 26, marginBottom: 6 }}>Agregar inmueble</h1>
      <p className="pf-muted" style={{ fontSize: 14.5, marginBottom: 26 }}>Cada inmueble se analiza por separado. Empezamos con el análisis de zona y regulación ($499 MXN).</p>

      <div className="pf-steps">
        {steps.map((s, i) => (
          <React.Fragment key={s}>
            <div className={'pf-step' + (i === step ? ' on' : i < step ? ' done' : '')}>
              <span className="n">{i < step ? <Icon name="check" size={15} /> : i + 1}</span>
              <span className="t">{s}</span>
            </div>
            {i < steps.length - 1 && <span className={'pf-step-bar' + (i < step ? ' done' : '')} />}
          </React.Fragment>
        ))}
      </div>

      {step === 0 && (
        <div className="pf-card" style={{ padding: 26 }}>
          <div className="pf-field">
            <label>Ubicación del inmueble</label>
            <LocationPicker loc={form.loc} onPick={(loc) => set('loc', loc)} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9, fontSize: 12.5, color: form.loc ? 'var(--c-emerald-d)' : 'var(--faint)' }}>
              <Icon name={form.loc ? 'shieldcheck' : 'pin'} size={14} />
              {form.loc ? `Ubicación fijada · ${form.loc.lat}, ${form.loc.lng}` : 'Fija el punto exacto del inmueble para determinar su zona y requisitos.'}
            </div>
          </div>
          <div className="pf-field">
            <label>Nombre o alias del inmueble</label>
            <input className="pf-input" value={form.name} onChange={e => set('name', e.target.value)} placeholder="Ej. Depto. 402 · Torre Insignia" />
          </div>
          <div className="pf-field" style={{ position: 'relative' }}>
            <label>Dirección</label>
            <input className="pf-input" value={form.address} onChange={e => { set('address', e.target.value); setShowSug(true); }} onFocus={() => setShowSug(true)} onBlur={() => setTimeout(() => setShowSug(false), 150)} placeholder="Empieza a escribir o elige una sugerencia" autoComplete="off" />
            {showSug && (() => {
              const q = form.address.toLowerCase();
              const list = ADDR_SUGGEST.filter(s => !q || s.address.toLowerCase().includes(q) || s.alcaldia.toLowerCase().includes(q)).slice(0, 4);
              if (!list.length) return null;
              return (
                <div className="pf-suggest-list">
                  {list.map(s => (
                    <div key={s.address} className="pf-suggest-item" onMouseDown={() => { setForm(f => ({ ...f, address: s.address, alcaldia: s.alcaldia, loc: { x: s.x, y: s.y, ...toCoords(s.x, s.y) } })); setShowSug(false); }}>
                      <Icon name="pin" size={16} style={{ color: 'var(--yb-yellow-deep)', flex: '0 0 auto' }} />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.address}</div>
                        <div className="pf-muted" style={{ fontSize: 12 }}>{s.alcaldia}, CDMX</div>
                      </div>
                    </div>
                  ))}
                </div>
              );
            })()}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div className="pf-field">
              <label>Alcaldía</label>
              <select className="pf-input" value={form.alcaldia} onChange={e => set('alcaldia', e.target.value)}>
                {ALCALDIAS.map(a => <option key={a}>{a}</option>)}
              </select>
            </div>
            <div className="pf-field">
              <label>Uso previsto</label>
              <select className="pf-input" value={form.use} onChange={e => set('use', e.target.value)}>
                <option>Airbnb · Renta temporal</option>
                <option>Hotel / hospedaje</option>
                <option>Renta tradicional</option>
              </select>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
            <button className="pf-btn pf-btn-yellow pf-btn-lg" disabled={!form.name || !form.address} onClick={() => setStep(1)}>Continuar <Icon name="chevright" size={16} /></button>
          </div>
        </div>
      )}

      {step === 1 && (
        <div>
          <div className="pf-drop" onClick={uploadAll} style={{ marginBottom: 16 }}>
            <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--surface)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--yb-yellow-deep)', margin: '0 auto 14px' }}><Icon name="upload" size={24} /></div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Arrastra tus documentos o haz clic para subir</div>
            <div className="pf-muted" style={{ fontSize: 13, marginTop: 5 }}>PDF, JPG o PNG · La IA leerá y clasificará cada archivo (clic = subir demo)</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
            {DOC_TYPES.map(d => {
              const done = uploaded.includes(d.key);
              return (
                <div key={d.key} className="pf-doc-row">
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: done ? 'var(--c-emerald-bg)' : 'var(--surface-2)', color: done ? 'var(--c-emerald-d)' : 'var(--faint)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name={done ? 'check' : 'doc'} size={17} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{d.label} {d.req && <span style={{ color: 'var(--c-red)' }}>*</span>}</div>
                    <div className="pf-muted" style={{ fontSize: 12.5 }}>{done ? 'Subido · OCR completado' : d.req ? 'Requerido' : 'Opcional'}</div>
                  </div>
                  {done ? <StatusBadge kind="compliant">Listo</StatusBadge> : <button className="pf-btn pf-btn-soft pf-btn-sm" onClick={() => upload(d.key)}><Icon name="upload" size={14} /> Subir</button>}
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <button className="pf-btn pf-btn-ghost" onClick={() => setStep(0)}>Atrás</button>
            <button className="pf-btn pf-btn-yellow pf-btn-lg" disabled={!reqDone} onClick={runAnalysis}>{reqDone ? 'Analizar inmueble' : 'Sube los documentos requeridos'} <Icon name="chevright" size={16} /></button>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="pf-card" style={{ padding: 40, textAlign: 'center' }}>
          {scanning ? (
            <div>
              <div style={{ width: 72, height: 72, borderRadius: 20, background: '#1C1A17', color: 'var(--yb-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px', animation: 'pfPulse 1.4s ease-in-out infinite' }}><Icon name="scan" size={32} /></div>
              <h2 style={{ fontSize: 22 }}>Analizando tu inmueble…</h2>
              <p className="pf-muted" style={{ fontSize: 14.5, marginTop: 10 }}>Leyendo documentos, cruzando datos y determinando los requisitos de {form.alcaldia}.</p>
              <div style={{ maxWidth: 320, margin: '24px auto 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Extrayendo datos con OCR', 'Verificando uso de suelo', 'Cruzando RFC y predial', 'Calculando Compliance Score'].map((t, i) => (
                  <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'var(--muted)', opacity: 0, animation: `pfReveal .5s ease forwards ${i * 0.55}s` }}>
                    <Icon name="check" size={15} style={{ color: 'var(--c-emerald)' }} /> {t}
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
                <Ring value={52} size={140} thick={13} track="var(--surface-2)" color="var(--c-red)">
                  <span className="pf-num" style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 800 }}>52</span>
                  <span style={{ fontSize: 11, color: 'var(--muted)' }}>score inicial</span>
                </Ring>
              </div>
              <h2 style={{ fontSize: 23 }}>Análisis listo</h2>
              <p className="pf-muted" style={{ fontSize: 14.5, marginTop: 10, maxWidth: 440, marginLeft: 'auto', marginRight: 'auto' }}>
                Tu inmueble <strong style={{ color: 'var(--ink)' }}>puede operar</strong>, pero faltan 3 requisitos clave. Te mostramos el dictamen completo y los siguientes pasos para inscribirlo.
              </p>
              <button className="pf-btn pf-btn-yellow pf-btn-lg" style={{ marginTop: 24 }} onClick={finish}>Ver dictamen completo <Icon name="chevright" size={16} /></button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AddProperty });