/* ============================================================
   AUTH — bienvenida, registro, login, modo invitado
   ============================================================ */

const ACTIVITIES = [
  { v: 'autonomo',   l: 'Autónomo / Freelancer' },
  { v: 'pyme',       l: 'Pyme / Sociedad' },
  { v: 'particular', l: 'Particular' },
];

/* ---- client-side account store ---- */
function loadAccounts() {
  try { return JSON.parse(localStorage.getItem('lexly_accounts') || '{}'); } catch (e) { return {}; }
}
function persistAccount(acc) {
  const all = loadAccounts();
  all[acc.email.toLowerCase()] = acc;
  try { localStorage.setItem('lexly_accounts', JSON.stringify(all)); } catch (e) {}
}
const emailOk = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);

const BENEFITS = [
  'Resuelve tus dudas legales al instante, en lenguaje claro',
  'Genera y revisa contratos conformes a la ley española',
  'No vuelvas a perder un plazo fiscal con Hacienda',
];

/* ============================================================
   AuthModal — switches between welcome / register / login
   ============================================================ */
function AuthModal({ mode, setMode, onGuest, onAuthenticated, onClose, dismissable }) {
  return (
    <div className="auth-overlay" onMouseDown={(e) => { if (dismissable && e.target === e.currentTarget) onClose(); }}>
      <div className="auth-card" role="dialog" aria-modal="true">
        {dismissable && (
          <button className="auth-close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16} /></button>
        )}
        {mode === 'welcome' && <Welcome setMode={setMode} onGuest={onGuest} />}
        {mode === 'register' && <RegisterForm setMode={setMode} onAuthenticated={onAuthenticated} />}
        {mode === 'login' && <LoginForm setMode={setMode} onAuthenticated={onAuthenticated} />}
      </div>
      <AuthStyles />
    </div>
  );
}

function AuthBrand({ big }) {
  return (
    <div className={'auth-brand' + (big ? ' big' : '')}>
      <div className="auth-mark"><Icon name="scale" size={big ? 30 : 22} className="auth-mark-ic" stroke={1.7} /></div>
      {!big && <div className="auth-brand-name">Lex<b>ly</b></div>}
    </div>
  );
}

/* ---------- Welcome ---------- */
function Welcome({ setMode, onGuest }) {
  return (
    <div className="auth-body welcome">
      <AuthBrand big />
      <h2 className="auth-title">El abogado que siempre quisiste tener</h2>
      <ul className="benefits">
        {BENEFITS.map((b, i) => (
          <li key={i}><span className="ben-ic"><Icon name="check" size={13} /></span>{b}</li>
        ))}
      </ul>
      <div className="auth-actions">
        <button className="btn btn-primary auth-primary" onClick={() => setMode('register')}>
          <Icon name="sparkle" size={16} /> Crear cuenta gratis
        </button>
        <button className="btn btn-ghost auth-secondary" onClick={() => setMode('login')}>
          Ya tengo cuenta
        </button>
      </div>
      <button className="auth-guest" onClick={onGuest}>
        Continuar como invitado <span>(15 consultas gratuitas)</span>
      </button>
    </div>
  );
}

/* ---------- Register ---------- */
function RegisterForm({ setMode, onAuthenticated }) {
  const [f, setF] = useState({ name: '', email: '', activity: 'autonomo', password: '' });
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const submit = (e) => {
    e?.preventDefault();
    setErr('');
    if (!f.name.trim()) return setErr('Introduce tu nombre completo.');
    if (!emailOk(f.email)) return setErr('Introduce un email válido.');
    if (f.password.length < 6) return setErr('La contraseña debe tener al menos 6 caracteres.');
    if (loadAccounts()[f.email.toLowerCase()]) return setErr('Ya existe una cuenta con este email. Inicia sesión.');
    setBusy(true);
    const user = { name: f.name.trim(), email: f.email.trim(), activity: f.activity };
    persistAccount({ ...user, password: f.password });
    setTimeout(() => onAuthenticated(user), 380);
  };

  return (
    <form className="auth-body" onSubmit={submit}>
      <AuthBrand />
      <h2 className="auth-title sm">Crea tu cuenta gratis</h2>
      <p className="auth-sub">Tu asesor legal inteligente, listo en segundos.</p>

      <div className="field">
        <label>Nombre completo</label>
        <input className="input" placeholder="Marta Ruiz" value={f.name} onChange={set('name')} autoFocus />
      </div>
      <div className="field">
        <label>Email</label>
        <input className="input" type="email" placeholder="tu@email.com" value={f.email} onChange={set('email')} />
      </div>
      <div className="field">
        <label>Tipo de actividad</label>
        <select className="select" value={f.activity} onChange={set('activity')}>
          {ACTIVITIES.map(a => <option key={a.v} value={a.v}>{a.l}</option>)}
        </select>
      </div>
      <div className="field">
        <label>Contraseña</label>
        <input className="input" type="password" placeholder="Mínimo 6 caracteres" value={f.password} onChange={set('password')} />
      </div>

      {err && <div className="auth-err"><Icon name="warn" size={14} />{err}</div>}

      <button className="btn btn-primary auth-primary" type="submit" disabled={busy}>
        {busy ? <><Spinner /> Creando cuenta…</> : <><Icon name="sparkle" size={16} /> Crear cuenta gratis</>}
      </button>
      <p className="auth-switch">
        Ya tengo cuenta <button type="button" onClick={() => setMode('login')}>Iniciar sesión →</button>
      </p>
    </form>
  );
}

/* ---------- Login ---------- */
function LoginForm({ setMode, onAuthenticated }) {
  const [f, setF] = useState({ email: '', password: '' });
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const submit = (e) => {
    e?.preventDefault();
    setErr('');
    if (!emailOk(f.email)) return setErr('Introduce un email válido.');
    if (!f.password) return setErr('Introduce tu contraseña.');
    const acc = loadAccounts()[f.email.toLowerCase()];
    if (!acc) return setErr('No encontramos ninguna cuenta con ese email.');
    if (acc.password !== f.password) return setErr('Contraseña incorrecta. Inténtalo de nuevo.');
    setBusy(true);
    setTimeout(() => onAuthenticated({ name: acc.name, email: acc.email, activity: acc.activity }), 380);
  };

  return (
    <form className="auth-body" onSubmit={submit}>
      <AuthBrand />
      <h2 className="auth-title sm">Bienvenido de nuevo</h2>
      <p className="auth-sub">Inicia sesión para continuar con Lexly.</p>

      <div className="field">
        <label>Email</label>
        <input className="input" type="email" placeholder="tu@email.com" value={f.email} onChange={set('email')} autoFocus />
      </div>
      <div className="field">
        <label>Contraseña</label>
        <input className="input" type="password" placeholder="Tu contraseña" value={f.password} onChange={set('password')} />
      </div>

      {err && <div className="auth-err"><Icon name="warn" size={14} />{err}</div>}

      <button className="btn btn-primary auth-primary" type="submit" disabled={busy}>
        {busy ? <><Spinner /> Entrando…</> : 'Iniciar sesión'}
      </button>
      <p className="auth-switch">
        ¿No tienes cuenta? <button type="button" onClick={() => setMode('register')}>Registrarse →</button>
      </p>
    </form>
  );
}

/* ============================================================
   LockedFeature — shown to guests on gated sections
   ============================================================ */
function LockedFeature({ title, desc, onRegister }) {
  return (
    <div className="section-pad fade-up">
      <div className="locked">
        <div className="locked-ic"><Icon name="shield" size={28} /></div>
        <h2>Función disponible para usuarios registrados</h2>
        <p>{desc || `Crea tu cuenta gratuita para usar ${title} y desbloquear todas las herramientas de Lexly.`}</p>
        <div className="locked-actions">
          <button className="btn btn-primary" onClick={onRegister}><Icon name="sparkle" size={16} /> Crear cuenta gratis</button>
        </div>
        <div className="locked-perks">
          {BENEFITS.map((b, i) => <span key={i}><Icon name="check" size={13} /> {b}</span>)}
        </div>
      </div>
      <style>{`
        .locked { max-width: 460px; margin: clamp(20px, 8vh, 80px) auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
        .locked-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); margin-bottom: 20px; }
        .locked h2 { font-size: 21px; font-weight: 600; color: var(--white); letter-spacing: -0.02em; margin-bottom: 10px; }
        .locked p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-bottom: 22px; }
        .locked-actions { margin-bottom: 26px; }
        .locked-perks { display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; width: 100%; }
        .locked-perks span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
        .locked-perks .ic { color: var(--green); flex-shrink: 0; }
      `}</style>
    </div>
  );
}

/* ============================================================
   PremiumFeature — función disponible solo en plan de pago
   ============================================================ */
function PremiumFeature({ title, desc, onUpgrade }) {
  return (
    <div className="section-pad fade-up">
      <div className="locked">
        <div className="locked-ic"><Icon name="sparkle" size={28} /></div>
        <h2>{title} · Plan Autónomo</h2>
        <p>{desc}</p>
        <div className="locked-actions">
          <button className="btn btn-primary" onClick={onUpgrade}><Icon name="bolt" size={16} /> Ver planes</button>
        </div>
        <div className="locked-perks">
          <span><Icon name="check" size={13} /> Análisis de riesgos fiscales ilimitado</span>
          <span><Icon name="check" size={13} /> Asistente con Hacienda</span>
          <span><Icon name="check" size={13} /> Contratos y revisiones sin límite</span>
          <span><Icon name="check" size={13} /> Adaptación por comunidad autónoma</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   GuestLimitBanner — chat after guest limit
   ============================================================ */
function GuestLimitBanner({ onRegister }) {
  return (
    <div className="guest-banner">
      <div className="gb-left">
        <Icon name="bolt" size={16} />
        <div>
          <strong>Has alcanzado el límite gratuito</strong>
          <span>Regístrate gratis para seguir consultando sin límites.</span>
        </div>
      </div>
      <button className="btn btn-primary gb-btn" onClick={onRegister}><Icon name="sparkle" size={15} /> Regístrate para continuar</button>
      <style>{`
        .guest-banner {
          display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
          background: linear-gradient(180deg, var(--violet-dim), rgba(124,58,237,0.06));
          border: 1px solid var(--violet-line); border-radius: 14px;
          padding: 14px 16px; margin: 8px 0 4px;
        }
        .gb-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
        .gb-left > .ic { color: var(--violet-soft); flex-shrink: 0; }
        .gb-left strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--white); }
        .gb-left span { font-size: 12.5px; color: var(--text-2); }
        .gb-btn { flex-shrink: 0; }
      `}</style>
    </div>
  );
}

/* ============================================================
   Styles for the modal
   ============================================================ */
function AuthStyles() {
  return (
    <style>{`
      .auth-overlay {
        position: fixed; inset: 0; z-index: 100;
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
        background: rgba(5, 5, 9, 0.74);
        backdrop-filter: blur(8px);
        animation: authFade .25s ease;
      }
      @keyframes authFade { from { opacity: 0; } }
      .auth-card {
        position: relative;
        width: 100%; max-width: 420px;
        background: var(--surface);
        border: 1px solid var(--line-2);
        border-radius: 20px;
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124,58,237,0.06);
        padding: 32px 30px 28px;
        max-height: calc(100vh - 40px); overflow-y: auto;
        animation: authPop .32s cubic-bezier(.2,.8,.3,1);
      }
      @keyframes authPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
      .auth-close {
        position: absolute; top: 14px; right: 14px;
        width: 32px; height: 32px; border-radius: 9px;
        display: grid; place-items: center; color: var(--text-3);
        transition: background .15s, color .15s;
      }
      .auth-close:hover { background: var(--surface-3); color: var(--text); }

      .auth-body { display: flex; flex-direction: column; }
      .auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
      .auth-brand.big { flex-direction: column; gap: 0; margin-bottom: 22px; }
      .auth-mark {
        width: 44px; height: 44px; border-radius: 12px;
        background: linear-gradient(150deg, var(--violet-bright), var(--violet));
        display: grid; place-items: center; flex-shrink: 0;
        box-shadow: 0 8px 22px -6px rgba(124,58,237,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
      }
      .auth-brand.big .auth-mark { width: 56px; height: 56px; border-radius: 15px; }
      .auth-mark-ic { color: #fff; }
      .auth-brand-name { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
      .auth-brand-name b { color: var(--violet-soft); font-weight: 600; }

      .welcome { align-items: center; text-align: center; }
      .auth-title { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--white); line-height: 1.22; margin-top: 16px; }
      .welcome .auth-title { max-width: 320px; }
      .auth-title.sm { font-size: 20px; margin-top: 0; }
      .auth-sub { font-size: 13.5px; color: var(--text-2); margin-top: 7px; margin-bottom: 22px; }

      .benefits { list-style: none; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 13px; text-align: left; width: 100%; }
      .benefits li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
      .ben-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; margin-top: 1px; }

      .auth-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
      .auth-primary { width: 100%; padding: 12px; }
      .auth-secondary { width: 100%; padding: 11px; }
      .auth-guest {
        margin-top: 18px; font-size: 12.5px; color: var(--text-3); font-weight: 500;
        padding: 6px; border-radius: 8px; transition: color .15s;
      }
      .auth-guest span { color: var(--text-4); }
      .auth-guest:hover { color: var(--text); }

      .auth-err {
        display: flex; align-items: center; gap: 8px;
        font-size: 12.5px; color: var(--red); background: var(--red-dim);
        border: 1px solid rgba(248,113,113,0.28); border-radius: 9px;
        padding: 9px 12px; margin-bottom: 14px;
      }
      .auth-body > .auth-primary { margin-top: 4px; }
      .auth-switch { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 18px; }
      .auth-switch button { color: var(--violet-soft); font-weight: 600; font-size: 13px; }
      .auth-switch button:hover { color: var(--violet-bright); }

      @media (max-width: 520px) {
        .auth-card { padding: 26px 20px 22px; }
        .auth-title { font-size: 21px; }
      }
    `}</style>
  );
}

Object.assign(window, { AuthModal, LockedFeature, GuestLimitBanner, ACTIVITIES });