/* ============================================================
   Dashboard: Editar "Sobre mí" — María Paula Muriel
   ============================================================ */

function AboutEditor({ go, about, onSave }) {
  const [draft, setDraft] = React.useState(about);
  const [saved, setSaved] = React.useState(false);
  const set = (k, v) => { setDraft(d => ({ ...d, [k]: v })); setSaved(false); };
  const setWork = (i, k, v) => {
    setDraft(d => ({ ...d, work: d.work.map((w, j) => j === i ? { ...w, [k]: v } : w) }));
    setSaved(false);
  };
  const tones = [['rose', 'Rosa'], ['sky', 'Celeste'], ['green', 'Verde'], ['sand', 'Arena']];
  const blockTones = ['rose', 'sky', 'green'];
  const coverPhoto = { tone: draft.photoTone, o: 'v', cat: 'retratos', title: '' };

  const save = () => { onSave(draft); setSaved(true); };

  return (
    <DashLayout go={go} route="about-edit" title="Sobre mí" sub="Edita la página pública de presentación"
      action={<button className="btn btn-ghost btn-sm" onClick={() => go('about')}><Icon name="eye" size={15} /> Ver página pública</button>}>

      <div className="card" style={{ padding: '14px 18px', marginBottom: 22, display: 'flex', alignItems: 'center', gap: 12, background: 'var(--green-tint)', borderColor: 'var(--green-soft)' }}>
        <Icon name="info" size={20} style={{ color: 'var(--green-deep)', flexShrink: 0 }} />
        <p style={{ margin: 0, fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          Todo lo que cambies aquí se reflejará en la página <strong style={{ color: 'var(--green-deep)' }}>Sobre mí</strong>. La imagen y los textos son contenido temporal, listos para reemplazar.
        </p>
      </div>

      <div className="about-edit-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'start' }}>
        {/* Columna izquierda: textos */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Textos */}
          <div className="card" style={{ padding: 24 }}>
            <h3 style={{ margin: '0 0 16px', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>Presentación</h3>
            <div className="about-edit-inner-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
              <div>
                <label className="field-label">Antetítulo</label>
                <input className="input" value={draft.intro} onChange={e => set('intro', e.target.value)} />
              </div>
              <div>
                <label className="field-label">Título (línea 1)</label>
                <input className="input" value={draft.title1} onChange={e => set('title1', e.target.value)} />
              </div>
            </div>
            <div style={{ marginBottom: 16 }}>
              <label className="field-label">Título (línea 2, destacada)</label>
              <input className="input" value={draft.title2} onChange={e => set('title2', e.target.value)} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label className="field-label">Texto principal</label>
              <textarea className="textarea" value={draft.bioLead} onChange={e => set('bioLead', e.target.value)} />
            </div>
            <div>
              <label className="field-label">Texto secundario</label>
              <textarea className="textarea" value={draft.bio2} onChange={e => set('bio2', e.target.value)} />
            </div>
          </div>

          {/* Cómo trabajo */}
          <div className="card" style={{ padding: 24 }}>
            <h3 style={{ margin: '0 0 4px', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>Cómo trabajo</h3>
            <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--ink-3)' }}>Los tres principios que se muestran en la página.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {draft.work.map((w, i) => {
                const t = blockTones[i % 3];
                return (
                  <div key={i} style={{ display: 'flex', gap: 14, padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r-md)' }}>
                    <div style={{ width: 40, height: 40, borderRadius: 'var(--r-sm)', background: `var(--${t}-tint)`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Icon name={w.icon} size={19} style={{ color: toneDeep(t) }} />
                    </div>
                    <div style={{ flex: 1, display: 'grid', gap: 8 }}>
                      <input className="input" style={{ padding: '9px 12px', fontWeight: 600 }} value={w.t} onChange={e => setWork(i, 't', e.target.value)} placeholder="Título" />
                      <textarea className="textarea" style={{ minHeight: 56, fontSize: 13.5 }} value={w.d} onChange={e => setWork(i, 'd', e.target.value)} placeholder="Descripción" />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Columna derecha: imagen + guardar */}
        <div style={{ position: 'sticky', top: 92, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card" style={{ padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700, color: 'var(--ink)' }}>Imagen de portada</h3>
              <span className="badge badge-temp">temporal</span>
            </div>
            <PhotoFrame photo={coverPhoto} ratio="4/5" label temp={false} wmStyle="white" rounded="var(--r-md)" />
            <button className="btn btn-soft btn-block btn-sm" style={{ marginTop: 12 }}><Icon name="replace" size={15} /> Reemplazar imagen</button>
            <label className="field-label" style={{ marginTop: 16 }}>Tono de la imagen (demo)</label>
            <div style={{ display: 'flex', gap: 8 }}>
              {tones.map(([id, l]) => (
                <button key={id} onClick={() => set('photoTone', id)} title={l} style={{
                  width: 36, height: 36, borderRadius: '50%', cursor: 'pointer',
                  background: toneVar(id), border: `2.5px solid ${draft.photoTone === id ? 'var(--ink)' : 'transparent'}`,
                  boxShadow: '0 1px 4px rgba(0,0,0,.08)', transition: 'all .18s' }} />
              ))}
            </div>
          </div>

          <button className="btn btn-primary btn-block btn-lg" onClick={save}>
            {saved ? <React.Fragment><Icon name="check" size={17} stroke={2.4} /> Guardado</React.Fragment> : 'Guardar cambios'}
          </button>
          {saved && <p style={{ margin: 0, textAlign: 'center', fontSize: 12.5, color: 'var(--green-deep)' }}>Cambios aplicados a la página pública</p>}
        </div>
      </div>
    </DashLayout>
  );
}

Object.assign(window, { AboutEditor });