// ─────────────────────────────────────────────────────────
// ChefVerse · Onboarding flow (6 steps)
// ─────────────────────────────────────────────────────────
const { useState: useStateOB } = React;

function Onboarding({ locale, onLocaleChange, onComplete, onSetProfile }) {
  const [step, setStep] = useStateOB(1);
  const [market, setMarket] = useStateOB(locale);
  const [name, setName] = useStateOB("Amaya Reyes");
  const [email, setEmail] = useStateOB("amaya@oakwoodbar.nyc");
  const [role, setRole] = useStateOB("role_sous");
  const [restaurant, setRestaurant] = useStateOB("Oakwood Bar & Grill");
  const [years, setYears] = useStateOB("4");
  const [socials, setSocials] = useStateOB({ instagram: "", tiktok: "", facebook: "", youtube: "" });
  const [goals, setGoals] = useStateOB([]);
  const [addr, setAddr] = useStateOB({ line1: "", line2: "", city: "", postal: "", region: "", country: "" });
  const [consent, setConsent] = useStateOB({ marketing: false, rewards: true });
  const t = window.I18N[market].onboard;
  const total = 6;
  const welcomeStep = total - 1;
  const videoStep = total;

  const toggleGoal = (g) => setGoals(prev => prev.includes(g) ? prev.filter(x => x !== g) : [...prev, g]);
  const finish = () => { onSetProfile({ name, role_key: role }); onComplete(); };

  return (
    <div className="ob-shell">
      <div className="ob-side">
        <div className="ob-brand">
          <img src="assets/UFS_Primary_logo.png" alt="UFS" />
          <div className="ob-brand-name">ChefVerse</div>
        </div>
        <div className="ob-tagline display-italic">
          Built by chefs, for chefs — to grow your audience without losing your edge.
        </div>
        <div className="ob-steps">
          {["Region", "Profile", "Channels", "Goals", "You're in", "Tutorial"].map((label, i) => {
            const n = i + 1;
            return (
              <div key={n} className={"ob-step " + (step === n ? "on " : "") + (step > n ? "done" : "")}>
                <div className="ob-step-dot">{step > n ? <Icon name="check" size={12} /> : n}</div>
                <span>{label}</span>
              </div>
            );
          })}
        </div>
        <div className="ob-foot">
          <span>· {window.I18N[market].flag} {window.I18N[market].market}</span>
        </div>
      </div>
      <div className="ob-main">
        <div className="ob-progress">
          <span className="eyebrow">{t.step} {step} {t.of} {total}</span>
          <div className="ob-progress-bar"><div style={{ width: `${(step / total) * 100}%` }} /></div>
        </div>

        <div className="ob-content">
          {step === 1 && (
            <>
              <h1 className="ob-h1">{t.market_q}</h1>
              <p className="ob-lead display-italic">{t.market_sub}</p>
              <div className="ob-markets">
                {["en", "de", "id"].map(k => {
                  const o = window.I18N[k];
                  return (
                    <button key={k} className={"ob-market " + (market === k ? "on" : "")} onClick={() => { setMarket(k); onLocaleChange(k); }}>
                      <div className="ob-market-flag">{o.flag}</div>
                      <div className="ob-market-name">{o.market}</div>
                      <div className="ob-market-sub display-italic">{o.locale}</div>
                      {market === k && <div className="ob-market-check"><Icon name="check" size={14} /></div>}
                    </button>
                  );
                })}
              </div>
              <div className="ob-note">
                <Icon name="captions" size={14} />
                <span className="display-italic">All training videos include closed captions in your market language. Briefs and recipes adapt too.</span>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <h1 className="ob-h1">{t.profile_q}</h1>
              <p className="ob-lead display-italic">{t.profile_sub}</p>
              <div className="ob-form">
                <Field label="Full name">
                  <input value={name} onChange={e => setName(e.target.value)} />
                </Field>
                <Field label="Email">
                  <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
                </Field>
                <Field label="Restaurant or kitchen">
                  <input value={restaurant} onChange={e => setRestaurant(e.target.value)} />
                </Field>
                <Field label="Role">
                  <div className="ob-role-grid">
                    {["role_chef", "role_sous", "role_owner", "role_pastry", "role_consult"].map(rk => (
                      <button key={rk} className={"ob-role " + (role === rk ? "on" : "")} onClick={() => setRole(rk)}>
                        {t[rk]}
                      </button>
                    ))}
                  </div>
                </Field>
                <Field label="Years in professional kitchens">
                  <input type="number" value={years} onChange={e => setYears(e.target.value)} style={{ maxWidth: 120 }} />
                </Field>
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <h1 className="ob-h1">{t.socials_q}</h1>
              <p className="ob-lead display-italic">{t.socials_sub}</p>
              <div className="ob-socials">
                {[
                  { k: "instagram", label: "Instagram", placeholder: "@yourhandle" },
                  { k: "tiktok", label: "TikTok", placeholder: "@yourhandle" },
                  { k: "facebook", label: "Facebook", placeholder: "facebook.com/yourpage" },
                  { k: "youtube", label: "YouTube", placeholder: "@yourchannel" },
                ].map(s => (
                  <div key={s.k} className="ob-social">
                    <Icon name={s.k} size={18} />
                    <input
                      placeholder={s.placeholder}
                      value={socials[s.k]}
                      onChange={e => setSocials({ ...socials, [s.k]: e.target.value })}
                    />
                    <span className="ob-social-name">{s.label}</span>
                  </div>
                ))}
              </div>
            </>
          )}

          {step === 4 && (
            <>
              <h1 className="ob-h1">{t.goals_q}</h1>
              <p className="ob-lead display-italic">{t.goals_sub}</p>
              <div className="ob-goals">
                {[
                  { k: "goal_audience", icon: "trending-up" },
                  { k: "goal_brand", icon: "award" },
                  { k: "goal_skills", icon: "video" },
                  { k: "goal_paid", icon: "briefcase" },
                  { k: "goal_network", icon: "users" },
                ].map(g => (
                  <button key={g.k} className={"ob-goal " + (goals.includes(g.k) ? "on" : "")} onClick={() => toggleGoal(g.k)}>
                    <div className="ob-goal-icon"><Icon name={g.icon} size={18} /></div>
                    <span>{t[g.k]}</span>
                    <div className="ob-goal-check">
                      {goals.includes(g.k) ? <Icon name="check" size={14} /> : null}
                    </div>
                  </button>
                ))}
              </div>
            </>
          )}

          {step === welcomeStep && (
            <>
              <div className="ob-welcome">
                <div className="ob-welcome-header">
                  <div className="ob-welcome-art">
                    <div className="ob-flame"><Icon name="flame" size={28} /></div>
                    <div className="ob-confetti">
                      <span /><span /><span /><span /><span />
                    </div>
                  </div>
                  <span className="eyebrow">{t.welcome_q.toUpperCase()}</span>
                </div>
                <h1 className="ob-h1">{t.welcome_sub}</h1>
                <div className="ob-summary">
                  <SummaryRow label={t.market_q.replace("?", "")} value={`${window.I18N[market].flag}  ${window.I18N[market].market}`} />
                  <SummaryRow label="Role" value={window.I18N[market].onboard[role]} />
                  <SummaryRow label="Goals" value={goals.length ? goals.map(g => t[g]).join(" · ") : "—"} />
                  <SummaryRow label="Channels"
                    value={Object.entries(socials).filter(([, v]) => v).map(([k]) => k).join(" · ") || "Not connected"} />
                </div>
                <div className="ob-starter">
                  <div className="ob-starter-head">
                    <span className="eyebrow">Your starter path</span>
                  </div>
                  <div className="ob-starter-card">
                    <img className="ob-starter-cover" src="uploads/chef-food.jpg" alt="Chef preparing food" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    <div className="ob-starter-body">
                      <div className="ob-starter-title">Camera fundamentals for chefs</div>
                      <div className="subtle">6 modules · 1 hr 12 min · with Marco Rivera</div>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}

          {step === videoStep && (
            <>
              <div className="ob-video">
                <div className="ob-video-hero">
                  <div className="ob-video-poster">
                    <img src="uploads/chef-food.jpg" alt="Chef at work" />
                    <div className="ob-video-play" onClick={() => { /* open video modal or navigate to player */ }}>
                      <div className="ob-video-ring">
                        <Icon name="play" size={32} style={{ marginLeft: 4 }} />
                      </div>
                      <span className="ob-video-play-label">1 min · Marco Rivera</span>
                    </div>
                  </div>
                </div>
                <div className="ob-video-copy">
                  <span className="eyebrow">WELCOME TO THE LINE</span>
                  <h1 className="ob-h1">See how it works — then jump in.</h1>
                  <p className="ob-lead display-italic">
                    A quick walkthrough from Marco: how the modules unlock, how the briefs pay, and how the kit ships to your door.
                  </p>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="ob-actions">
          <button className="btn btn-ghost" disabled={step === 1} onClick={() => setStep(s => s - 1)}>
            <Icon name="chevron-left" size={14} /> {t.back}
          </button>
          <div className="ob-dots">
            {Array.from({ length: total }, (_, i) => i + 1).map(n => <div key={n} className={"ob-dot " + (step >= n ? "on" : "")} />)}
          </div>
          {step === videoStep ? (
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn btn-ghost" onClick={finish}>
                {locale === "de" ? "Überspringen" : locale === "id" ? "Lewati" : "Skip"}
              </button>
              <button className="btn btn-primary" onClick={finish}>
                {locale === "de" ? "Los geht's" : locale === "id" ? "Mulai" : "Start cooking"} <Icon name="arrow-right" size={14} />
              </button>
            </div>
          ) : step < total ? (
            <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>
              {t.next} <Icon name="arrow-right" size={14} />
            </button>
          ) : (
            <button className="btn btn-primary" onClick={finish}>
              {t.finish} <Icon name="arrow-right" size={14} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label className="ob-field">
      <span className="ob-field-label">{label}</span>
      {children}
    </label>
  );
}

function SummaryRow({ label, value }) {
  return (
    <div className="ob-summary-row">
      <span className="ob-summary-label">{label}</span>
      <span className="ob-summary-value">{value}</span>
    </div>
  );
}

window.Onboarding = Onboarding;