/* ============================================================
   ONBOARDING — wizard de configuración del perfil (opcional)
   Escribe en el perfil RGPD existente (store.jsx). Additive.
   ============================================================ */

const ONB_SITUACIONES = [
  { v: 'autonomo',   icon: 'briefcase', label: 'Autónomo / Freelancer', desc: 'Trabajo por mi cuenta' },
  { v: 'pyme',       icon: 'building',  label: 'Pequeña empresa (pyme)', desc: 'Tengo una sociedad o equipo' },
  { v: 'particular', icon: 'user',      label: 'Particular', desc: 'Para mis asuntos personales' },
];

const ONB_SECTORES = [
  ['servicios', 'Servicios profesionales'], ['comercio', 'Comercio'], ['hosteleria', 'Hostelería'],
  ['construccion', 'Construcción'], ['tecnologia', 'Tecnología'], ['salud', 'Salud'],
  ['creativo', 'Creativo / Diseño'], ['transporte', 'Transporte'], ['otro', 'Otro'],
];

const ONB_CCAA = [
  'Andalucía','Aragón','Asturias','Islas Baleares','Canarias','Cantabria',
  'Castilla-La Mancha','Castilla y León','Cataluña','Comunidad Valenciana',
  'Extremadura','Galicia','Madrid','Murcia','Navarra','País Vasco','La Rioja',
];

const ONB_INTERESES = [
  { v: 'ahorrar', icon: 'euro', label: 'Ahorrar en impuestos' },
  { v: 'plazos', icon: 'calendar', label: 'No saltarme plazos' },
  { v: 'contratos', icon: 'contract', label: 'Hacer bien mis contratos' },
  { v: 'obligaciones', icon: 'shield', label: 'Entender mis obligaciones' },
  { v: 'impagos', icon: 'bolt', label: 'Reclamar impagos' },
  { v: 'crecer', icon: 'sparkle', label: 'Crecer mi negocio' },
];

const SECTOR_LABEL = Object.fromEntries(ONB_SECTORES);
const INTEREST_LABEL = Object.fromEntries(ONB_INTERESES.map(i => [i.v, i.label]));

function Onboarding({ user, onClose }) {
  const [step, setStep] = useState(0);
  const [a, setA] = useState({ tipo: '', sector: '', ccaa: '', regimen: '', iva: '', intereses: [] });
  const TOTAL = 5; // pasos de pregunta (0..4); el 5 es bienvenida
  const firstName = (user.name || '').split(' ')[0] || '';

  const set = (k, v) => setA(s => ({ ...s, [k]: v }));
  const toggleInterest = (v) => setA(s => ({ ...s, intereses: s.intereses.includes(v) ? s.intereses.filter(x => x !== v) : [...s.intereses, v] }));

  const next = () => setStep(s => Math.min(s + 1, TOTAL));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const finish = () => {
    // Guarda en el perfil RGPD: completar = consentir esas categorías (queda en el log).
    try {
      if (a.tipo) {
        lxSetConsent('whoami', true);
        lxSetProfileData('whoami', 'tipo', a.tipo);
        if (user.name) lxSetProfileData('whoami', 'nombre', user.name);
        if (a.sector) lxSetProfileData('whoami', 'actividad', SECTOR_LABEL[a.sector] || a.sector);
      }
      if (a.sector) { lxSetConsent('company', true); lxSetProfileData('company', 'sector', SECTOR_LABEL[a.sector] || a.sector); }
      if (a.ccaa) { lxSetConsent('region', true); lxSetProfileData('region', 'ccaa', a.ccaa); }
      if (a.regimen || a.iva) {
        lxSetConsent('fiscal', true);
        if (a.regimen) lxSetProfileData('fiscal', 'regimen', a.regimen);
        if (a.iva) lxSetProfileData('fiscal', 'iva', a.iva);
      }
      if (a.intereses.length) {
        lxSetConsent('topics', true);
        lxSetProfileData('topics', 'temas', a.intereses.map(v => INTEREST_LABEL[v]).join(', '));
      }
    } catch (e) {}
    lxSetOnboarded();
    onClose(true);
  };

  const skip = () => { lxSetOnboarded(); onClose(false); };

  const canNext = () => {
    if (step === 0) return !!a.tipo;
    if (step === 1) return !!a.sector;
    if (step === 2) return !!a.ccaa;
    return true; // 3 (fiscal) y 4 (intereses) son opcionales
  };

  const ccaaLabel = a.ccaa || 'España';
  const tipoLabel = { autonomo: 'autónomo', pyme: 'tu empresa', particular: 'particular' }[a.tipo] || 'ti';

  return (
    <div className="onb-overlay">
      <div className="onb-card">
        {/* Top bar: progreso + omitir */}
        {step < TOTAL && (
          <div className="onb-top">
            <div className="onb-brand"><div className="onb-mark"><Icon name="scale" size={15} /></div> Lexly</div>
            <div className="onb-progress">
              <div className="onb-progress-fill" style={{ width: ((step + 1) / TOTAL * 100) + '%' }}></div>
            </div>
            <button className="onb-skip" onClick={skip}>Omitir por ahora</button>
          </div>
        )}

        <div className="onb-body" key={step}>
          {step === 0 && (
            <div className="onb-step fade-up">
              <div className="onb-consent"><Icon name="lock" size={13} /> Esta información se guarda solo en tu dispositivo para personalizar Lexly. Puedes editarla o borrarla cuando quieras desde Privacidad.</div>
              <span className="onb-num">Paso 1 de {TOTAL}</span>
              <h2>¿Cuál es tu situación?</h2>
              <p className="onb-sub">Así adapto las respuestas, los plazos y los documentos a lo que necesitas.</p>
              <div className="onb-cards">
                {ONB_SITUACIONES.map(o => (
                  <button key={o.v} className={'onb-pick' + (a.tipo === o.v ? ' on' : '')} onClick={() => { set('tipo', o.v); }}>
                    <div className="op-ic"><Icon name={o.icon} size={22} /></div>
                    <div className="op-text"><strong>{o.label}</strong><span>{o.desc}</span></div>
                    <span className="op-check"><Icon name="check" size={14} /></span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="onb-step fade-up">
              <span className="onb-num">Paso 2 de {TOTAL}</span>
              <h2>¿A qué te dedicas?</h2>
              <p className="onb-sub">Elige tu sector para que los ejemplos y la normativa encajen con tu actividad.</p>
              <div className="onb-chips">
                {ONB_SECTORES.map(([v, l]) => (
                  <button key={v} className={'onb-chip' + (a.sector === v ? ' on' : '')} onClick={() => set('sector', v)}>{l}</button>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="onb-step fade-up">
              <span className="onb-num">Paso 3 de {TOTAL}</span>
              <h2>¿En qué Comunidad Autónoma desarrollas tu actividad?</h2>
              <p className="onb-sub">Cada comunidad tiene particularidades fiscales. Con esto adapto la información a tu territorio.</p>
              <div className="onb-region">
                <Icon name="globe" size={17} />
                <select className="select" value={a.ccaa} onChange={e => set('ccaa', e.target.value)}>
                  <option value="">Selecciona tu comunidad…</option>
                  {ONB_CCAA.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="onb-step fade-up">
              <span className="onb-num">Paso 4 de {TOTAL} · opcional</span>
              <h2>¿Cuál es tu situación fiscal?</h2>
              <p className="onb-sub">Si no lo tienes claro, no pasa nada: puedes saltarlo y configurarlo más adelante.</p>

              <div className="onb-fiscal-q">¿Cómo tributas?</div>
              <div className="onb-chips">
                {[['directa','Estimación directa'],['modulos','Módulos (objetiva)'],['recargo','Recargo de equivalencia']].map(([v,l]) => (
                  <button key={v} className={'onb-chip' + (a.regimen === v ? ' on' : '')} onClick={() => set('regimen', a.regimen === v ? '' : v)}>{l}</button>
                ))}
              </div>

              <div className="onb-fiscal-q">Tu IVA habitual</div>
              <div className="onb-chips">
                {[['21','IVA general (21%)'],['10','Reducido (10%)'],['exento','Exento de IVA']].map(([v,l]) => (
                  <button key={v} className={'onb-chip' + (a.iva === v ? ' on' : '')} onClick={() => set('iva', a.iva === v ? '' : v)}>{l}</button>
                ))}
              </div>

              <button className="onb-unsure" onClick={() => { set('regimen', ''); set('iva', ''); next(); }}>No estoy seguro, saltar este paso →</button>
            </div>
          )}

          {step === 4 && (
            <div className="onb-step fade-up">
              <span className="onb-num">Paso 5 de {TOTAL}</span>
              <h2>¿Qué te preocupa o interesa más?</h2>
              <p className="onb-sub">Puedes elegir varias. Priorizaré la información sobre lo que más te importa.</p>
              <div className="onb-interests">
                {ONB_INTERESES.map(o => (
                  <button key={o.v} className={'onb-interest' + (a.intereses.includes(o.v) ? ' on' : '')} onClick={() => toggleInterest(o.v)}>
                    <Icon name={o.icon} size={17} />
                    <span>{o.label}</span>
                    {a.intereses.includes(o.v) && <span className="oi-check"><Icon name="check" size={12} /></span>}
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === TOTAL && (
            <div className="onb-step welcome fade-up">
              <div className="onb-done-ic"><Icon name="check" size={34} /></div>
              <h2>Listo{firstName ? ', ' + firstName : ''}.</h2>
              <p className="onb-welcome-text">
                He configurado Lexly para <b>{tipoLabel}</b> en <b>{ccaaLabel}</b>{a.sector ? <> · <b>{SECTOR_LABEL[a.sector]}</b></> : null}. Ya puedo darte respuestas adaptadas a ti.
              </p>
              <button className="btn btn-primary onb-start" onClick={finish}><Icon name="sparkle" size={16} /> Empezar</button>
              <button className="onb-edit-later" onClick={finish}>Podrás cambiarlo cuando quieras en Privacidad</button>
            </div>
          )}
        </div>

        {/* Nav inferior */}
        {step < TOTAL && (
          <div className="onb-nav">
            {step > 0 ? <button className="btn btn-ghost" onClick={back}><Icon name="arrowRight" size={15} className="flip" /> Atrás</button> : <span></span>}
            <button className="btn btn-primary" disabled={!canNext()} onClick={next}>
              {step === TOTAL - 1 ? 'Finalizar' : 'Siguiente'} <Icon name="arrowRight" size={15} />
            </button>
          </div>
        )}
      </div>

      <style>{`
        .onb-overlay { position: fixed; inset: 0; z-index: 95; background: radial-gradient(900px 600px at 70% -10%, rgba(124,58,237,0.16), transparent 60%), rgba(8,8,12,0.92); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; animation: onbFade .25s ease; }
        @keyframes onbFade { from { opacity: 0; } }
        .onb-card { width: 100%; max-width: 580px; margin: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: onbPop .35s cubic-bezier(.2,.8,.3,1); }
        @keyframes onbPop { from { opacity: 0; transform: translateY(16px) scale(.98); } }

        .onb-top { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
        .onb-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--white); }
        .onb-mark { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(150deg, var(--violet-bright), var(--violet)); display: grid; place-items: center; color: #fff; }
        .onb-progress { flex: 1; height: 6px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
        .onb-progress-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); border-radius: 20px; transition: width .4s cubic-bezier(.3,.7,.2,1); }
        .onb-skip { font-size: 12.5px; color: var(--text-3); font-weight: 500; white-space: nowrap; transition: color .15s; }
        .onb-skip:hover { color: var(--text); }

        .onb-body { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 32px; }
        .onb-step { display: flex; flex-direction: column; }
        .onb-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 22px; }
        .onb-consent .ic { color: var(--violet-soft); flex-shrink: 0; margin-top: 1px; }
        .onb-num { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--violet-soft); margin-bottom: 10px; }
        .onb-step h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.025em; color: var(--white); line-height: 1.2; text-wrap: balance; }
        .onb-sub { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 8px; margin-bottom: 24px; }

        .onb-cards { display: flex; flex-direction: column; gap: 11px; }
        .onb-pick { display: flex; align-items: center; gap: 15px; text-align: left; padding: 16px 18px; background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: 14px; transition: border-color .15s, background .15s, transform .12s; }
        .onb-pick:hover { border-color: var(--line-3); transform: translateY(-1px); }
        .onb-pick.on { border-color: var(--violet); background: var(--violet-dim); }
        .op-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; transition: background .15s; }
        .onb-pick.on .op-ic { background: var(--violet); color: #fff; border-color: transparent; }
        .op-text { flex: 1; }
        .op-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--white); }
        .op-text span { font-size: 12.5px; color: var(--text-3); }
        .op-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: .15s; }
        .onb-pick.on .op-check { background: var(--violet); border-color: var(--violet); color: #fff; }

        .onb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
        .onb-chip { padding: 11px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1.5px solid var(--line-2); transition: .15s; }
        .onb-chip:hover { border-color: var(--line-3); color: var(--text); }
        .onb-chip.on { border-color: var(--violet); background: var(--violet-dim); color: var(--violet-soft); }

        .onb-region { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: 13px; padding: 4px 16px; }
        .onb-region:focus-within { border-color: var(--violet-line); }
        .onb-region > .ic { color: var(--violet-soft); flex-shrink: 0; }
        .onb-region .select { border: none; background: transparent; padding: 14px 0; font-size: 15px; }
        .onb-region .select:focus { box-shadow: none; }

        .onb-fiscal-q { font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 0 11px; }
        .onb-fiscal-q:not(:first-of-type) { margin-top: 22px; }
        .onb-unsure { align-self: flex-start; margin-top: 22px; font-size: 13px; color: var(--text-3); font-weight: 500; transition: color .15s; }
        .onb-unsure:hover { color: var(--violet-soft); }

        .onb-interests { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
        .onb-interest { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; padding: 15px 16px; background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: 13px; font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: .15s; }
        .onb-interest .ic { color: var(--violet-soft); flex-shrink: 0; }
        .onb-interest:hover { border-color: var(--line-3); color: var(--text); }
        .onb-interest.on { border-color: var(--violet); background: var(--violet-dim); color: var(--white); }
        .oi-check { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; color: #fff; }

        .onb-step.welcome { align-items: center; text-align: center; padding: 20px 0 8px; }
        .onb-done-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); margin-bottom: 22px; animation: onbPop .4s cubic-bezier(.2,.8,.3,1) .1s both; }
        .onb-step.welcome h2 { font-size: 27px; }
        .onb-welcome-text { font-size: 15.5px; color: var(--text-2); line-height: 1.6; max-width: 420px; margin: 12px 0 28px; }
        .onb-welcome-text b { color: var(--white); font-weight: 600; }
        .onb-start { padding: 13px 30px; font-size: 15px; }
        .onb-edit-later { margin-top: 16px; font-size: 12px; color: var(--text-4); }

        .onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line); flex-shrink: 0; }
        .onb-nav .flip { transform: rotate(180deg); }

        @media (max-width: 540px) {
          .onb-body { padding: 24px 20px; }
          .onb-interests { grid-template-columns: 1fr; }
          .onb-step h2 { font-size: 20px; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Onboarding });