// Step 1: Auth + Step 2: Role + Step 4: Verify + Step 5: Welcome

const I = window.SonaraIcons;

function Step1Auth({ data, setData, onNext }) {
  const [showPwView, setShowPwView] = React.useState(false);
  const pw = data.password || "";
  const strength = pw.length >= 12 && /[A-Z]/.test(pw) && /\d/.test(pw) ? "strong"
                  : pw.length >= 8 && /[A-Z]/.test(pw) && /\d/.test(pw) ? "medium"
                  : pw.length > 0 ? "weak" : "";
  const strengthLabel = { weak: "Debole", medium: "Media", strong: "Forte" }[strength] || "";

  return (
    <div className="step-enter">
      <window.Eyebrow>Inizia gratis</window.Eyebrow>
      <h1 className="step-title">Crea il tuo account</h1>
      <p className="step-subtitle">Bastano 90 secondi. Userai SONARA per creare, collaborare, e monetizzare la tua musica.</p>

      <button className="btn-oauth btn" onClick={onNext}>
        <window.GoogleGlyph/> Continua con Google
      </button>
      <div style={{ height: 10 }}/>
      <button className="btn-oauth btn" onClick={onNext}>
        <window.AppleGlyph/> Continua con Apple
      </button>

      <div className="divider-or">oppure con email</div>

      <window.Field label="Email">
        <input className="input" type="email" placeholder="la-tua@email.com"
          value={data.email || ""} onChange={(e) => setData({ ...data, email: e.target.value })}/>
      </window.Field>

      <window.Field label="Password" hint="Almeno 8 caratteri, 1 numero, 1 maiuscola.">
        <div style={{ position: "relative" }}>
          <input className="input" type={showPwView ? "text" : "password"} placeholder="••••••••"
            style={{ paddingRight: 44 }}
            value={pw} onChange={(e) => setData({ ...data, password: e.target.value })}/>
          <button type="button" onClick={() => setShowPwView(!showPwView)} style={{
            position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)",
            border: "none", background: "transparent", color: "var(--muted-foreground)",
            cursor: "pointer", padding: 8, borderRadius: 8,
          }}>
            <span style={{ fontSize: 11, fontWeight: 500 }}>{showPwView ? "Nascondi" : "Mostra"}</span>
          </button>
        </div>
        {pw.length > 0 && (
          <>
            <div className={`pw-strength ${strength}`}>
              <span/><span/><span/>
            </div>
            <div className="pw-strength-label">Sicurezza: <strong style={{ color: "var(--foreground)" }}>{strengthLabel}</strong></div>
          </>
        )}
      </window.Field>

      <div style={{ marginTop: 14, marginBottom: 8 }}>
        <window.Checkbox checked={data.terms || false} onChange={(v) => setData({ ...data, terms: v })}>
          Accetto i <a href="#">Termini di servizio</a>. Confermo di avere almeno 16 anni.
        </window.Checkbox>
        <window.Checkbox checked={data.privacy || false} onChange={(v) => setData({ ...data, privacy: v })}>
          Ho letto la <a href="#">Privacy Policy</a> (GDPR).
        </window.Checkbox>
        <window.Checkbox checked={data.marketing || false} onChange={(v) => setData({ ...data, marketing: v })}>
          Sì, voglio ricevere aggiornamenti su nuove feature, beat e occasioni. <span style={{ color: "var(--muted-foreground)" }}>(opzionale)</span>
        </window.Checkbox>
      </div>

      <button className="btn btn-primary btn-block" style={{ marginTop: 16 }} onClick={onNext}>
        Registrati gratis <I.arrowRight size={16}/>
      </button>

      <window.Trust/>

      <div style={{ textAlign: "center", marginTop: 24, fontSize: 13, color: "var(--muted-foreground)" }}>
        Hai già un account? <a href="#" style={{ color: "var(--violet-bright, #7b55d0)", fontWeight: 500 }}>Accedi</a>
      </div>
    </div>
  );
}

const ROLES = [
  { id: "artist", title: "Artista", icon: "mic",
    desc: "Voglio fare musica e collaborare. Cerco beat, producer, mix, manager.",
    badge: "Più scelto" },
  { id: "producer", title: "Producer", icon: "mixer",
    desc: "Vendo beat e servizi musicali. Cerco artisti che esplodano." },
  { id: "manager", title: "Manager", icon: "chart",
    desc: "Gestisco artisti e cerco talenti da far crescere." },
];

function Step2Role({ data, setData, onNext, onBack, layout = "spacious" }) {
  const compact = layout === "compact";
  return (
    <div className="step-enter">
      <window.Eyebrow>Profilo</window.Eyebrow>
      <h1 className="step-title">Chi sei su SONARA?</h1>
      <p className="step-subtitle">Scegli il tuo ruolo principale. Potrai aggiungerne altri in seguito dalle impostazioni.</p>

      <div className="role-grid">
        {ROLES.map((r) => {
          const Ico = I[r.icon];
          const sel = data.role === r.id;
          return (
            <button key={r.id} type="button" onClick={() => setData({ ...data, role: r.id })}
              className={`role-card ${compact ? "compact" : ""} ${sel ? "selected" : ""}`}>
              <span className="role-check"><I.check size={12}/></span>
              <span className="role-icon"><Ico size={22}/></span>
              <div className="role-title">{r.title}</div>
              {!compact && <div className="role-desc">{r.desc}</div>}
            </button>
          );
        })}
      </div>

      <div className="nav-row">
        <button className="btn btn-ghost" onClick={onBack}>Indietro</button>
        <div className="right">
          <button className="btn btn-primary" onClick={onNext} disabled={!data.role}>
            Continua <I.arrowRight size={16}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function Step4Verify({ data, onNext, onBack }) {
  const [resent, setResent] = React.useState(false);
  return (
    <div className="step-enter verify-card" style={{ textAlign: "center" }}>
      <div className="verify-icon-ring"><I.audioFile size={36}/></div>
      <window.Eyebrow>Verifica</window.Eyebrow>
      <h1 className="step-title">Controlla la tua email</h1>
      <p className="step-subtitle">
        Ti abbiamo mandato un link di verifica a <span className="email-pill">{data.email || "la-tua@email.com"}</span><br/>
        Clicca il link per attivare l'account. Il link è valido per 24 ore.
      </p>

      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 24 }}>
        <button className="btn btn-ghost" onClick={() => setResent(true)} disabled={resent}>
          {resent ? <><I.check size={14}/> Email reinviata</> : "Reinvia email"}
        </button>
        <button className="btn btn-primary" onClick={onNext}>
          Ho verificato <I.arrowRight size={16}/>
        </button>
      </div>

      <div style={{ fontSize: 13, color: "var(--muted-foreground)", lineHeight: 1.6, maxWidth: 360, margin: "0 auto" }}>
        Non trovi l'email? Controlla la cartella spam o <a href="#" style={{ color: "var(--violet-bright, #7b55d0)" }}>cambia indirizzo</a>.
      </div>

      <div style={{ marginTop: 24 }}>
        <button className="btn btn-ghost" style={{ height: 36, fontSize: 13 }} onClick={onNext}>
          Salta per ora →
        </button>
      </div>
    </div>
  );
}

const WELCOME_ACTIONS = {
  artist: [
    { ico: "search", t: "Esplora producer", s: "Trova il sound che hai in mente. Filtra per genere, città, prezzo." },
    { ico: "audioFile", t: "Pubblica una richiesta", s: "Descrivi cosa cerchi: producer e mix engineer ti scrivono loro." },
    { ico: "user", t: "Completa il profilo", s: "+30% di proposte se aggiungi foto, bio e link Spotify." },
  ],
  producer: [
    { ico: "audioFile", t: "Crea il primo listing", s: "Pubblica un beat o un servizio. È così che gli artisti ti trovano." },
    { ico: "search", t: "Esplora artisti", s: "Scopri chi sta cercando producer in questo momento." },
    { ico: "user", t: "Completa il profilo", s: "Portfolio, generi, DAW: rendi il tuo profilo un vero biglietto da visita." },
  ],
  manager: [
    { ico: "target", t: "Cerca talenti", s: "Filtra per genere, città, ascolti Spotify. Trova prima che esplodano." },
    { ico: "collaboration", t: "Aggiungi al roster", s: "Tieni tutti i tuoi artisti in un unico posto. Senza chat infinita." },
    { ico: "user", t: "Completa il profilo", s: "Tipologia, esperienza, aree di competenza: aiutaci a verificarti." },
  ],
};

function Step5Welcome({ data, role }) {
  const r = role || data.role || "artist";
  const actions = WELCOME_ACTIONS[r];
  const name = data.artistName || data.producerName || data.firstName || "amico";
  return (
    <div className="step-enter">
      <window.Eyebrow><I.verified size={12}/> Account attivato</window.Eyebrow>
      <h1 className="step-title">Benvenuto su SONARA, {name}.</h1>
      <p className="step-subtitle">Il tuo profilo è pronto. Ecco da dove iniziare.</p>

      <div className="gift-card">
        <div className="badge"><I.coins size={20}/></div>
        <div>
          <div className="gift-t">Hai guadagnato <strong>1 mese gratis</strong> di funzioni Pro.</div>
          <div className="gift-s">Crediti accreditati. Validi fino al 30 giorni dall'attivazione.</div>
        </div>
      </div>

      <div className="welcome-grid">
        {actions.map((a, idx) => {
          const Ico = I[a.ico];
          return (
            <button key={idx} type="button" className="welcome-card">
              <span className="ico"><Ico size={20}/></span>
              <div className="t">{a.t}</div>
              <div className="s">{a.s}</div>
              <div className="more">Inizia <I.arrowRight size={14}/></div>
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 28, fontSize: 13, color: "var(--muted-foreground)", textAlign: "center" }}>
        Vai alla <a href="#" style={{ color: "var(--violet-bright, #7b55d0)", fontWeight: 500 }}>dashboard →</a>
      </div>
    </div>
  );
}

Object.assign(window, { Step1Auth, Step2Role, Step4Verify, Step5Welcome, ROLES });