// signup.jsx — Înscriere creatori (3 pași)

const { useState: useStateSU } = React;

function SignupPage({ onNav }) {
  const [step, setStep] = useStateSU(1);
  const [done, setDone] = useStateSU(false);
  const [loading, setLoading] = useStateSU(false);
  const [errorMsg, setErrorMsg] = useStateSU('');
  const [data, setData] = useStateSU({
    name: '', surname: '', email: '', phone: '', city: '', country: 'România',
    tiktok: '', followers: '', hours: 15, diamonds: '', category: 'Lifestyle',
    motivation: '', source: 'Recomandare prieten', terms: false,
    website_url: '',
  });
  const upd = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = async (e) => {
    e && e.preventDefault();
    if (!data.terms) return;

    // Honeypot — bot detected, fake success silent
    if (data.website_url) {
      setDone(true);
      return;
    }

    setLoading(true);
    setErrorMsg('');

    const tiktokTrimmed = data.tiktok.trim();
    const tiktokUrl = tiktokTrimmed ? `https://www.tiktok.com/@${tiktokTrimmed}` : null;
    const followersInt = parseInt(data.followers, 10);
    const diamondsClean = data.diamonds.trim();

    try {
      const { error } = await window.sb.from('creator_applications').insert({
        name: data.name.trim(),
        surname: data.surname.trim(),
        email: data.email.trim().toLowerCase(),
        phone: data.phone.trim(),
        city: data.city.trim(),
        country: data.country,
        tiktok: tiktokTrimmed,
        tiktok_url: tiktokUrl,
        followers: isNaN(followersInt) ? 0 : followersInt,
        hours: parseInt(data.hours, 10) || 0,
        diamonds: diamondsClean || null,
        category: data.category,
        motivation: data.motivation.trim(),
        source: data.source,
        terms_accepted: data.terms,
      });

      if (error) {
        console.error('[4U Agency] Eroare submit creator:', error);
        setErrorMsg('A apărut o eroare la trimitere. Te rugăm să încerci din nou sau să ne contactezi pe email.');
        setLoading(false);
        return;
      }

      setLoading(false);
      setDone(true);
      setTimeout(() => { if (window.fireConfetti) window.fireConfetti(); }, 200);
    } catch (err) {
      console.error('[4U Agency] Network error submit creator:', err);
      setErrorMsg('Conexiune eșuată. Verifică internetul și încearcă din nou.');
      setLoading(false);
    }
  };

  return (
    <div className="page">
      <SignupHero onNav={onNav} />
      <section style={{ padding: '0 0 40px' }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{ padding: '18px 22px', borderRadius: 14, background: 'rgba(82,242,15,.05)', border: '1px solid rgba(82,242,15,.20)' }}>
            <div style={{ fontSize: 14, color: 'var(--txt-2)', lineHeight: 1.55 }}>💡 Dacă faci live pe TikTok sau vrei să te apuci de LIVE pe TikTok, completează formularul de mai jos. Te contactăm în maxim 24 de ore.</div>
          </div>
        </div>
      </section>
      <section style={{ padding: '40px 0 120px' }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <Reveal>
            <div className="card-glass" style={{ padding: 'clamp(28px, 4vw, 48px)' }}>
              {!done && <ProgressBar step={step} />}
              {!done && step === 1 && <SuStep1 data={data} upd={upd} next={() => setStep(2)} />}
              {!done && step === 2 && <SuStep2Combined data={data} upd={upd} submit={submit} back={() => setStep(1)} loading={loading} errorMsg={errorMsg} />}
              {done && <SuSuccessCard onNav={onNav} />}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function SignupHero({ onNav }) {
  return (
    <section style={{ minHeight: '40vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh />
      <Particles count={40} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>ÎNSCRIERE CREATORI</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 6vw, 84px)', margin: 0 }}>
            Începe-ți călătoria <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>4U</span>.
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: 'clamp(17px, 1.3vw, 20px)', color: 'var(--txt-2)', marginTop: 20, maxWidth: 660, lineHeight: 1.55 }}>
            Completează formularul în <strong style={{ color: 'var(--txt-0)' }}>2 minute</strong>. Te contactăm în <strong style={{ color: 'var(--txt-0)' }}>24h</strong>.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ marginTop: 24 }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            {[['5.000+','creatori'],['6 premii','naționale'],['8 țări','prezență']].map(([n, l]) => (
              <div key={n} className="card-glass" style={{ padding: '12px 18px', display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="display mono" style={{ fontSize: 18, color: 'var(--accent-1)' }}>{n}</span>
                <span style={{ fontSize: 12, color: 'var(--txt-2)' }}>{l}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ProgressBar({ step }) {
  return (
    <div style={{ display: 'flex', gap: 12, marginBottom: 32 }}>
      {[1, 2].map(n => (
        <div key={n} style={{ flex: 1, height: 4, borderRadius: 2, background: n <= step ? 'var(--accent-1)' : 'rgba(255,255,255,.08)', transition: 'background .3s' }} />
      ))}
    </div>
  );
}

function SuField({ label, children, full }) {
  return (
    <div style={{ gridColumn: full ? '1 / -1' : 'auto' }}>
      <label className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 6, display: 'block' }}>{label.toUpperCase()}</label>
      {children}
    </div>
  );
}

function SuStep1({ data, upd, next }) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const phoneRegex = /^\+?[\d\s()-]{8,20}$/;
  const valid = data.name && data.surname && data.email && emailRegex.test(data.email) &&
                data.phone && phoneRegex.test(data.phone) && data.city;
  return (
    <form onSubmit={(e) => { e.preventDefault(); valid && next(); }}>
      <h2 className="display" style={{ fontSize: 28, margin: '0 0 8px' }}>Informații de bază</h2>
      <p style={{ color: 'var(--txt-2)', fontSize: 14, marginBottom: 28 }}>Ca să știm cum putem lua legătura cu tine.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="su-grid">
        <SuField label="Nume"><input className="input" required value={data.name} onChange={e => upd('name', e.target.value)} placeholder="Popescu" /></SuField>
        <SuField label="Prenume"><input className="input" required value={data.surname} onChange={e => upd('surname', e.target.value)} placeholder="Ion" /></SuField>
        <div>
          <SuField label="Email"><input className="input" type="email" required value={data.email} onChange={e => upd('email', e.target.value)} placeholder="ion@email.ro" /></SuField>
          {data.email && !emailRegex.test(data.email) && (
            <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: -10, marginBottom: 6 }}>Format email invalid</div>
          )}
        </div>
        <div>
          <SuField label="Telefon"><input className="input" type="tel" required value={data.phone} onChange={e => upd('phone', e.target.value)} placeholder="+40 7XX XXX XXX" /></SuField>
          {data.phone && !phoneRegex.test(data.phone) && (
            <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: -10, marginBottom: 6 }}>Format telefon invalid</div>
          )}
        </div>
        <SuField label="Oraș"><input className="input" required value={data.city} onChange={e => upd('city', e.target.value)} placeholder="București" /></SuField>
        <SuField label="Țară">
          <select className="input" value={data.country} onChange={e => upd('country', e.target.value)}>
            {['România','UK','Germania','Austria','Elveția','Italia','Spania','UAE'].map(c => <option key={c}>{c}</option>)}
          </select>
        </SuField>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 32 }}>
        <button type="submit" className="btn btn-primary btn-lg" disabled={!valid} style={{ opacity: valid ? 1 : 0.4 }}>Continuă →</button>
      </div>
      <style>{`@media (max-width: 600px) { .su-grid { grid-template-columns: 1fr !important; } }`}</style>
    </form>
  );
}

function SuRow({ children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="su-grid">
      {children}
    </div>
  );
}

function SuStep2Combined({ data, upd, submit, back, loading, errorMsg }) {
  React.useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.iubenda.com/iubenda.js';
    script.async = true;
    document.body.appendChild(script);
    return () => {
      if (script.parentNode) script.parentNode.removeChild(script);
    };
  }, []);

  const valid = data.tiktok && data.followers && data.terms;
  return (
    <form onSubmit={submit}>
      <h3 className="display" style={{ fontSize: 24, marginBottom: 6 }}>Despre tine ca și creator</h3>
      <p style={{ fontSize: 14, color: 'var(--txt-3)', marginBottom: 24 }}>Datele tale TikTok și motivația ta. Te contactăm în 24h.</p>

      <SuRow>
        <SuField label="Username TikTok *" full>
          <div style={{ position: 'relative' }}>
            <span className="mono" style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--txt-3)' }}>@</span>
            <input className="input" required value={data.tiktok} onChange={e => upd('tiktok', e.target.value.replace(/^@/, ''))} placeholder="Username TikTok (îl găsești pe profilul tău, sub poză)" style={{ paddingLeft: 30 }} />
          </div>
        </SuField>
        <SuField label="Followers TikTok *">
          <input className="input" type="number" required value={data.followers} onChange={e => upd('followers', e.target.value)} placeholder="ex: 12000" />
        </SuField>
        <SuField label="Categorie conținut">
          <select className="input" value={data.category} onChange={e => upd('category', e.target.value)}>
            {['Lifestyle','Gaming','Music','Talk Show','Beauty','Fashion','Other'].map(c => <option key={c}>{c}</option>)}
          </select>
        </SuField>
        <SuField label={`Ore live / săptămână — ${data.hours}h`} full>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <input type="range" min="0" max="50" value={data.hours} onChange={e => upd('hours', +e.target.value)} style={{ flex: 1, accentColor: 'var(--accent-1)' }} />
            <span className="display mono" style={{ fontSize: 22, color: 'var(--accent-1)', minWidth: 60, textAlign: 'right' }}>{data.hours}h</span>
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
            <span>0h</span><span>30h (recomandat)</span><span>50h</span>
          </div>
        </SuField>
        <SuField label="Diamante câștigate (estimativ)">
          <input className="input" value={data.diamonds} onChange={e => upd('diamonds', e.target.value)} placeholder="ex: 250.000" />
        </SuField>
      </SuRow>

      <div style={{ height: 1, background: 'var(--line)', margin: '32px 0' }} />

      <SuRow>
        <SuField label="De ce vrei să te alături 4U? *" full>
          <textarea className="input" required value={data.motivation} onChange={e => upd('motivation', e.target.value)} placeholder="Spune-ne pe scurt..." rows={4} style={{ resize: 'vertical', minHeight: 100, paddingTop: 12, lineHeight: 1.5, fontFamily: 'inherit' }} />
        </SuField>
        <SuField label="Cum ai aflat de noi?" full>
          <select className="input" value={data.source} onChange={e => upd('source', e.target.value)}>
            {['Recomandare prieten','Social media','Eveniment 4U','Articol/blog','Căutare Google','Altceva'].map(s => <option key={s}>{s}</option>)}
          </select>
        </SuField>
      </SuRow>

      {/* Honeypot — câmp invizibil pentru detectare boți */}
      <input type="text" name="website_url" value={data.website_url} onChange={e => upd('website_url', e.target.value)}
        tabIndex={-1} autoComplete="off" aria-hidden="true"
        style={{ position: 'absolute', left: -9999, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />

      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginTop: 24, cursor: 'pointer' }}>
        <input type="checkbox" checked={data.terms} onChange={e => upd('terms', e.target.checked)} style={{ marginTop: 4, accentColor: 'var(--accent-1)' }} />
        <span style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>
          Sunt de acord cu <a className="iubenda-nostyle iubenda-noiframe iubenda-embed ulink" href="https://www.iubenda.com/terms-and-conditions/26919297" title="Termeni și condiții" style={{ cursor: 'pointer' }}>Termenii și condițiile</a> și cu <a className="iubenda-nostyle iubenda-noiframe iubenda-embed ulink" href="https://www.iubenda.com/privacy-policy/49632785" title="Politica de confidențialitate" style={{ cursor: 'pointer' }}>Politica de confidențialitate</a>.
        </span>
      </label>

      {errorMsg && (
        <div style={{ marginTop: 24, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,90,90,.06)', border: '.5px solid rgba(255,100,100,.3)', display: 'flex', gap: 10, fontSize: 13, color: 'var(--txt-2)' }}>
          <span>⚠️</span><span>{errorMsg}</span>
        </div>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, gap: 12, flexWrap: 'wrap' }}>
        <button type="button" className="btn btn-glass" onClick={back} disabled={loading}
          style={{ opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>← Înapoi</button>
        <button type="submit" className="btn btn-primary" disabled={loading || !valid}
          style={{ opacity: (loading || !valid) ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>
          {loading ? (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, border: '2px solid rgba(0,0,0,.2)', borderTopColor: 'currentColor', borderRadius: '50%', animation: 'su-spin .8s linear infinite', display: 'inline-block' }} />
              Se trimite...
            </span>
          ) : 'Trimite cererea →'}
        </button>
      </div>
      <style>{`
        @media (max-width: 600px) { .su-grid { grid-template-columns: 1fr !important; } }
        @keyframes su-spin { to { transform: rotate(360deg); } }
      `}</style>
    </form>
  );
}

function SuSuccessCard({ onNav }) {
  return (
    <div style={{ textAlign: 'center', padding: '20px 0' }}>
      <div style={{ width: 88, height: 88, borderRadius: 999, background: 'linear-gradient(135deg, rgba(82,242,15,.25), rgba(255,215,0,.15))', border: '1px solid rgba(82,242,15,.4)', display: 'grid', placeItems: 'center', margin: '0 auto 24px', fontSize: 40, boxShadow: '0 0 60px rgba(82,242,15,.35)', animation: 'floatY 4s ease-in-out infinite' }}>✓</div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● CERERE PRIMITĂ</div>
      <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 48px)', margin: '0 0 16px' }}>Cerere trimisă!</h2>
      <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 480, margin: '0 auto 32px' }}>
        Mulțumim! Ai făcut primul pas. Echipa 4U îți răspunde în <strong style={{ color: 'var(--txt-0)' }}>maxim 24h</strong> pe email și telefon — pregătește-ți întrebările pentru primul nostru call.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button className="btn btn-glass btn-lg" onClick={() => onNav('home')}>← Înapoi acasă</button>
        <button className="btn btn-primary btn-lg" onClick={() => onNav('about')}>Despre 4U →</button>
      </div>
    </div>
  );
}

// Stilizare select pentru dropdown-uri (fix lista albă)
if (typeof document !== 'undefined' && !document.getElementById('signup-select-fix')) {
  const style = document.createElement('style');
  style.id = 'signup-select-fix';
  style.textContent = `
    .input option { background: #0E0E0E !important; color: #fff !important; padding: 8px; }
    .input { color-scheme: dark; }
  `;
  document.head.appendChild(style);
}

window.SignupPage = SignupPage;