/* ============================================================
   PRIVACIDAD Y MIS DATOS — perfil inteligente + RGPD
   ============================================================ */

const CONSENT_LOG_LABEL = {
  activado: 'Consentimiento activado',
  desactivado: 'Consentimiento retirado',
  'datos eliminados': 'Datos eliminados',
  'todos los datos eliminados': 'Todos los datos eliminados',
};

function PrivacyData({ onBack }) {
  const profile = useProfile();
  const [viewing, setViewing] = useState(false);
  const [confirmAll, setConfirmAll] = useState(false);

  const activeCount = Object.values(profile.consent).filter(Boolean).length;

  const download = () => {
    const blob = new Blob([lxProfileExport()], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'lexly-mis-datos.json';
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };

  const fmtDate = (ts) => new Date(ts).toLocaleString('es-ES', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });

  return (
    <div className="section-pad fade-up priv">
      <button className="priv-back" onClick={onBack}><Icon name="arrowRight" size={15} className="flip" /> Volver a Configuración</button>

      <div className="priv-hero">
        <div className="priv-hero-ic"><Icon name="lockKey" size={26} /></div>
        <div>
          <div className="eyebrow">Privacidad</div>
          <h1 className="h-title">Tú decides qué recordamos.</h1>
          <p className="h-sub">Puedes cambiarlo cuando quieras. Todos estos datos se guardan <b>únicamente en tu dispositivo</b>, nunca salen de tu navegador. Lexly funciona con todo desactivado: la información solo sirve para personalizar tus respuestas si tú lo permites.</p>
        </div>
      </div>

      <div className="priv-status">
        <Icon name="shield" size={15} />
        {activeCount === 0
          ? <span>Ahora mismo <b>no recordamos ningún dato</b>. Activa solo lo que quieras compartir.</span>
          : <span>Tienes <b>{activeCount} {activeCount === 1 ? 'categoría activa' : 'categorías activas'}</b>. Puedes desactivarlas en cualquier momento; al hacerlo se borran sus datos.</span>}
      </div>

      {/* Categorías */}
      <div className="priv-section-label">Qué puede recordar Lexly</div>
      <div className="priv-cats">
        {PROFILE_CATEGORIES.map(cat => (
          <PrivCategory key={cat.id} cat={cat} profile={profile} fmtDate={fmtDate} />
        ))}
      </div>

      {/* Derechos RGPD */}
      <div className="priv-section-label">Tus derechos sobre tus datos</div>
      <div className="priv-rights">
        <button className="right-btn" onClick={() => setViewing(v => !v)}>
          <span className="rb-ic"><Icon name="eye" size={17} /></span>
          <span className="rb-text"><strong>Ver todos mis datos</strong><span>Consulta en lenguaje claro todo lo guardado</span></span>
          <Icon name="arrowRight" size={15} className={'rb-arr' + (viewing ? ' open' : '')} />
        </button>
        <button className="right-btn" onClick={download}>
          <span className="rb-ic"><Icon name="download" size={17} /></span>
          <span className="rb-text"><strong>Descargar mis datos</strong><span>Exporta todo en un archivo JSON</span></span>
        </button>
      </div>

      {viewing && <DataViewer profile={profile} />}

      {/* Eliminar todo */}
      <div className="priv-danger">
        <div className="pd-text">
          <strong>Eliminar todos mis datos</strong>
          <span>Borra de forma permanente tu perfil y el registro de consentimiento de este dispositivo.</span>
        </div>
        {confirmAll ? (
          <div className="pd-confirm">
            <span>¿Seguro?</span>
            <button className="btn btn-danger" onClick={() => { lxProfileDeleteAll(); setConfirmAll(false); setViewing(false); }}>Sí, eliminar todo</button>
            <button className="btn btn-ghost" onClick={() => setConfirmAll(false)}>Cancelar</button>
          </div>
        ) : (
          <button className="btn btn-danger-ghost" onClick={() => setConfirmAll(true)}><Icon name="trash" size={15} /> Eliminar todo</button>
        )}
      </div>

      {/* Transparencia */}
      <div className="priv-section-label">Transparencia</div>
      <div className="priv-transparency">
        <TransparencyItem icon="lock" title="Qué datos se guardan" text="Solo las categorías que actives, con la información que tú introduzcas. Por defecto está todo desactivado." />
        <TransparencyItem icon="sparkle" title="Para qué se usan" text="Únicamente para personalizar las respuestas de Lexly, destacar tus modelos fiscales relevantes y adaptar los recordatorios. No se comparten con nadie." />
        <TransparencyItem icon="clock" title="Cuánto tiempo se conservan" text="Mientras la categoría esté activada. Al desactivarla, sus datos se borran inmediatamente de tu navegador." />
        <TransparencyItem icon="edit" title="Cómo modificarlos" text="Edita cualquier campo directamente en esta pantalla; los cambios se guardan al instante." />
        <TransparencyItem icon="download" title="Cómo descargarlos" text="Con «Descargar mis datos» obtienes un archivo JSON con todo lo guardado." />
        <TransparencyItem icon="trash" title="Cómo eliminarlos" text="Borra una categoría con su botón, o todo a la vez con «Eliminar todos mis datos»." />
      </div>

      {/* Registro de consentimiento */}
      {profile.log.length > 0 && (
        <>
          <div className="priv-section-label">Registro de consentimiento</div>
          <p className="priv-log-intro">Guardamos la fecha y hora de cada cambio para acreditar cuándo diste o retiraste tu consentimiento (requisito del RGPD).</p>
          <div className="priv-log">
            {profile.log.slice(0, 12).map((e, i) => {
              const cat = PROFILE_CATEGORIES.find(c => c.id === e.category);
              const isOn = e.action === 'activado';
              return (
                <div key={i} className="log-row">
                  <span className={'log-dot ' + (isOn ? 'on' : 'off')}></span>
                  <span className="log-action">{CONSENT_LOG_LABEL[e.action] || e.action}</span>
                  <span className="log-cat">{e.category === 'todo' ? 'Todo el perfil' : (cat ? cat.label : e.category)}</span>
                  <span className="log-date">{fmtDate(e.at)}</span>
                </div>
              );
            })}
          </div>
        </>
      )}

      <PrivacyStyles />
    </div>
  );
}

function PrivCategory({ cat, profile, fmtDate }) {
  const on = !!profile.consent[cat.id];
  const data = profile.data[cat.id] || {};
  const hasData = Object.values(data).some(v => v && String(v).trim());

  return (
    <div className={'priv-cat' + (on ? ' on' : '')}>
      <div className="pc-main">
        <div className="pc-text">
          <strong>{cat.label}</strong>
          <span>{cat.use}</span>
        </div>
        <Toggle on={on} onClick={() => lxSetConsent(cat.id, !on)} />
      </div>

      {on && cat.fields.length > 0 && (
        <div className="pc-fields">
          {cat.fields.map(f => (
            <div className="pc-field" key={f.key}>
              <label>{f.label}</label>
              {f.type === 'select' ? (
                <select className="select" value={data[f.key] || ''} onChange={e => lxSetProfileData(cat.id, f.key, e.target.value)}>
                  <option value="">Selecciona…</option>
                  {f.options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                </select>
              ) : f.type === 'textarea' ? (
                <textarea className="textarea" rows={2} placeholder={f.ph} value={data[f.key] || ''} onChange={e => lxSetProfileData(cat.id, f.key, e.target.value)} />
              ) : (
                <input className="input" placeholder={f.ph} value={data[f.key] || ''} onChange={e => lxSetProfileData(cat.id, f.key, e.target.value)} />
              )}
            </div>
          ))}
        </div>
      )}
      {on && cat.fields.length === 0 && (
        <div className="pc-note"><Icon name="check" size={13} /> Activado. Lexly podrá tener en cuenta esta información para personalizar tu experiencia.</div>
      )}

      {hasData && (
        <button className="pc-del" onClick={() => lxProfileDeleteCategory(cat.id)}><Icon name="trash" size={13} /> Borrar datos de esta categoría</button>
      )}
    </div>
  );
}

function DataViewer({ profile }) {
  const items = [];
  PROFILE_CATEGORIES.forEach(cat => {
    if (!profile.consent[cat.id]) return;
    const data = profile.data[cat.id] || {};
    const entries = cat.fields
      .filter(f => data[f.key] && String(data[f.key]).trim())
      .map(f => {
        let val = data[f.key];
        if (f.type === 'select') { const opt = f.options.find(o => o[0] === val); if (opt) val = opt[1]; }
        return { label: f.label, val };
      });
    items.push({ cat, entries });
  });

  return (
    <div className="data-viewer fade-up">
      {items.length === 0 ? (
        <div className="dv-empty"><Icon name="eye" size={20} /><p>No hay ninguna categoría activada. Cuando actives alguna y rellenes sus datos, aparecerán aquí.</p></div>
      ) : items.map(({ cat, entries }) => (
        <div key={cat.id} className="dv-cat">
          <div className="dv-cat-title"><Icon name="check" size={13} /> {cat.label}</div>
          {entries.length > 0 ? (
            <div className="dv-entries">
              {entries.map((e, i) => <div key={i} className="dv-entry"><span className="dv-k">{e.label}</span><span className="dv-v">{e.val}</span></div>)}
            </div>
          ) : (
            <div className="dv-na">Activado, sin datos introducidos.</div>
          )}
        </div>
      ))}
    </div>
  );
}

function TransparencyItem({ icon, title, text }) {
  return (
    <div className="trans-item">
      <div className="ti-ic"><Icon name={icon} size={15} /></div>
      <div><strong>{title}</strong><span>{text}</span></div>
    </div>
  );
}

function PrivacyStyles() {
  return (
    <style>{`
      .priv { max-width: 880px; }
      .priv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); font-weight: 500; margin-bottom: 22px; transition: color .15s; }
      .priv-back:hover { color: var(--violet-soft); }
      .priv-back .flip { transform: rotate(180deg); }

      .priv-hero { display: flex; gap: 18px; align-items: flex-start; }
      .priv-hero-ic { width: 56px; height: 56px; border-radius: 15px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
      .priv-hero .h-sub { max-width: 640px; }
      .priv-hero .h-sub b { color: var(--text); font-weight: 600; }

      .priv-status { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--text-2); }
      .priv-status .ic { color: var(--green); flex-shrink: 0; }
      .priv-status b { color: var(--white); font-weight: 600; }

      .priv-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4); margin: 30px 0 14px; }

      .priv-cats { display: flex; flex-direction: column; gap: 10px; }
      .priv-cat { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; transition: border-color .15s; }
      .priv-cat.on { border-color: var(--violet-line); }
      .pc-main { display: flex; align-items: center; gap: 16px; }
      .pc-text { flex: 1; min-width: 0; }
      .pc-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
      .pc-text span { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
      .pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
      .pc-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
      .pc-field:has(textarea) { grid-column: 1 / -1; }
      .pc-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--violet-soft); margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
      .pc-note .ic { color: var(--violet-soft); }
      .pc-del { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-4); font-weight: 500; margin-top: 12px; padding: 5px 9px; border-radius: 7px; transition: color .15s, background .15s; }
      .pc-del:hover { color: var(--red); background: var(--red-dim); }

      .priv-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .right-btn { display: flex; align-items: center; gap: 13px; text-align: left; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; transition: border-color .15s, background .15s, transform .12s; }
      .right-btn:hover { border-color: var(--violet-line); background: var(--surface-2); transform: translateY(-2px); }
      .rb-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
      .rb-text { flex: 1; min-width: 0; }
      .rb-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--white); }
      .rb-text span { font-size: 12px; color: var(--text-3); }
      .rb-arr { color: var(--text-4); transition: transform .2s; }
      .rb-arr.open { transform: rotate(90deg); }

      .data-viewer { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 16px; }
      .dv-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--text-3); }
      .dv-empty .ic { color: var(--text-4); }
      .dv-empty p { font-size: 13px; max-width: 360px; line-height: 1.5; }
      .dv-cat { border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; background: var(--surface); }
      .dv-cat-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--violet-soft); margin-bottom: 9px; }
      .dv-entries { display: flex; flex-direction: column; gap: 7px; }
      .dv-entry { display: flex; gap: 12px; font-size: 13px; }
      .dv-k { color: var(--text-3); min-width: 160px; flex-shrink: 0; }
      .dv-v { color: var(--text); font-weight: 500; }
      .dv-na { font-size: 12.5px; color: var(--text-4); font-style: italic; }

      .priv-danger { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; background: linear-gradient(180deg, var(--red-dim), transparent); border: 1px solid rgba(248,113,113,0.22); border-radius: 13px; }
      .pd-text { flex: 1; min-width: 220px; }
      .pd-text strong { display: block; font-size: 13.5px; font-weight: 600; color: #ffb4b4; margin-bottom: 2px; }
      .pd-text span { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
      .pd-confirm { display: flex; align-items: center; gap: 10px; }
      .pd-confirm span { font-size: 13px; color: var(--text-2); font-weight: 600; }
      .btn-danger { background: var(--red); color: #fff; }
      .btn-danger:hover { background: #ef5a5a; }
      .btn-danger-ghost { background: transparent; border: 1px solid rgba(248,113,113,0.35); color: var(--red); }
      .btn-danger-ghost:hover { background: var(--red-dim); }

      .priv-transparency { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .trans-item { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; }
      .ti-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
      .trans-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
      .trans-item span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

      .priv-log-intro { font-size: 12.5px; color: var(--text-3); margin: -6px 0 14px; line-height: 1.5; max-width: 640px; }
      .priv-log { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
      .log-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; }
      .log-row:hover { background: var(--surface-2); }
      .log-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
      .log-dot.on { background: var(--green); }
      .log-dot.off { background: var(--text-3); }
      .log-action { color: var(--text); font-weight: 600; }
      .log-cat { color: var(--text-2); }
      .log-date { margin-left: auto; color: var(--text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }

      @media (max-width: 760px) {
        .priv-rights, .priv-transparency, .pc-fields { grid-template-columns: 1fr; }
        .priv-hero { flex-direction: column; gap: 14px; }
        .log-cat { display: none; }
      }
    `}</style>
  );
}

Object.assign(window, { PrivacyData });