/* Brainstorm X — Naming wizard. Interactive multi-step flow. */
(function () {
  const { useState } = React;
  const DS = window.BrainstormXDesignSystem_f2a458;
  const { Button, Card, Input, Textarea, Chip, SentimentSlider, ProgressSteps, Badge } = DS;
  const I = window.BXIcons;

  const STEPS = ['Basics', 'Keywords', 'Feeling', 'Style', 'Email'];

  const PROJECT_TYPES = ['Business name', 'Product name', 'App / platform', 'Service name', 'Event name', 'Campaign name'];
  const QUICK_CHIPS = ['Fun', 'Clever', 'Clean', 'Technical', 'Luxurious', 'Quirky', 'Warm', 'Direct', 'Inventive', 'Trustworthy'];
  const STYLES = [
    ['Auto', 'All styles'], ['Brandable', 'Invented, like Google'], ['Evocative', 'Energy, like Red Bull'],
    ['Short phrase', 'Like Dollar Shave Club'], ['Compound', 'Blended, like FedEx'],
    ['Alternate spelling', 'Like Lyft'], ['Real words', 'Like Apple'],
  ];
  const AXES = [['Playful', 'Serious'], ['Premium', 'Affordable'], ['Minimal', 'Expressive'], ['Safe', 'Unusual']];

  function Shell({ step, children, onBack, onNext, nextLabel, canBack = true }) {
    return (
      <div className="bx-nebula-bg" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '36px 24px 110px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 26 }}>
          <img src="../../assets/mark-spark.svg" width="28" height="28" alt="" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--text-1)' }}>Brainstorm<span className="bx-text-nebula"> X</span></span>
        </div>
        <div style={{ width: 'min(720px, 100%)', marginBottom: 26 }}>
          <ProgressSteps current={step} steps={STEPS} />
        </div>
        <Card glass style={{ width: 'min(720px, 100%)', padding: '32px 34px' }}>
          {children}
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 30 }}>
            <Button variant="ghost" onClick={onBack} disabled={!canBack} iconLeft={<I.ArrowLeft size={18} />}>Back</Button>
            <Button onClick={onNext} iconRight={<I.ArrowRight size={18} />}>{nextLabel || 'Continue'}</Button>
          </div>
        </Card>
      </div>
    );
  }

  function Field({ label, children, hint }) {
    return (
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: 'var(--text-2)', marginBottom: 9 }}>{label}</div>
        {children}
        {hint && <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 7 }}>{hint}</div>}
      </div>
    );
  }

  function Wizard({ goto }) {
    const [step, setStep] = useState(0);
    const [type, setType] = useState('Business name');
    const [chips, setChips] = useState({ Quirky: true, Fun: true });
    const [styles, setStyles] = useState({ Brandable: true, Evocative: true, Compound: true });
    const [kw, setKw] = useState(['quirky', 'cute', 'paws']);
    const [kwInput, setKwInput] = useState('');
    const [axes, setAxes] = useState([28, 62, 40, 70]);

    const next = () => (step < STEPS.length - 1 ? setStep(step + 1) : goto('invite'));
    const back = () => setStep(Math.max(0, step - 1));
    const toggle = (obj, set, k) => set({ ...obj, [k]: !obj[k] });
    const addKw = (e) => { e.preventDefault(); const v = kwInput.trim(); if (v && !kw.includes(v)) setKw([...kw, v]); setKwInput(''); };

    const heads = [
      ['What are you naming?', "Let's train your naming session — answer a few quick questions and we'll generate your first set of ideas."],
      ['Add your keywords', 'Add words, themes or existing names that point the AI in the right direction.'],
      ['Feeling & personality', 'Slide towards the qualities that fit your brand. Add a few quick chips too.'],
      ['Name style', 'Pick one or more styles. You can always change this later.'],
      ['Save your naming session', "Enter your email and we'll send a secure magic link. No password needed."],
    ];

    return (
      <Shell step={step} onBack={back} onNext={next} canBack={step > 0}
        nextLabel={step === STEPS.length - 1 ? 'Send magic link' : 'Continue'}>
        <span className="bx-eyebrow">Step {step + 1} of {STEPS.length}</span>
        <h2 style={{ fontSize: 28, margin: '10px 0 6px' }}>{heads[step][0]}</h2>
        <p style={{ fontSize: 15, color: 'var(--text-2)', marginBottom: 24 }}>{heads[step][1]}</p>

        {step === 0 && (<>
          <Field label="Project name"><Input placeholder="New pet accessories shop" defaultValue="Pickle Paws" /></Field>
          <Field label="Naming type">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
              {PROJECT_TYPES.map((t) => <Chip key={t} selected={type === t} onClick={() => setType(t)}>{t}</Chip>)}
            </div>
          </Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Field label="Industry"><Input placeholder="Pet products" defaultValue="Pet products" /></Field>
            <Field label="Target audience"><Input placeholder="UK dog & cat owners" defaultValue="UK owners who like quirky accessories" /></Field>
          </div>
        </>)}

        {step === 1 && (<>
          <Field label="Main keywords" hint="Press enter to add. These become boostable orbs in the arena.">
            <form onSubmit={addKw} style={{ marginBottom: 12 }}>
              <Input placeholder="Type a keyword and press enter…" value={kwInput} onChange={(e) => setKwInput(e.target.value)} iconLeft={<I.Plus size={18} />} />
            </form>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
              {kw.map((k) => <Chip key={k} selected onRemove={() => setKw(kw.filter((x) => x !== k))}>{k}</Chip>)}
            </div>
          </Field>
          <Field label="Words to avoid">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
              <Chip accent="var(--cold-cool)" onRemove={() => {}}>corporate</Chip>
              <Chip accent="var(--cold-cool)" onRemove={() => {}}>marketplace</Chip>
            </div>
          </Field>
          <Field label="Names you like"><Input placeholder="Pickle Paws" defaultValue="Pickle Paws" /></Field>
        </>)}

        {step === 2 && (<>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 32px', marginBottom: 22 }}>
            {AXES.map(([l, r], i) => (
              <SentimentSlider key={l} leftLabel={l} rightLabel={r} value={axes[i]}
                accent={i % 2 ? 'var(--neon-cyan)' : 'var(--neon-violet)'}
                onChange={(v) => setAxes(axes.map((a, j) => (j === i ? v : a)))} />
            ))}
          </div>
          <Field label="Quick chips">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
              {QUICK_CHIPS.map((c) => <Chip key={c} selected={!!chips[c]} onClick={() => toggle(chips, setChips, c)}>{c}</Chip>)}
            </div>
          </Field>
        </>)}

        {step === 3 && (<>
          <Field label="Name styles">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {STYLES.map(([name, eg]) => {
                const on = !!styles[name];
                return (
                  <button key={name} onClick={() => toggle(styles, setStyles, name)} style={{
                    textAlign: 'left', cursor: 'pointer', padding: '14px 16px', borderRadius: 'var(--radius-md)',
                    background: on ? 'color-mix(in srgb, var(--neon-cyan) 12%, transparent)' : 'var(--surface-2)',
                    border: `1px solid ${on ? 'var(--neon-cyan)' : 'var(--line-2)'}`,
                    boxShadow: on ? '0 0 16px color-mix(in srgb, var(--neon-cyan) 30%, transparent)' : 'none',
                    transition: 'all var(--dur-base) var(--ease-out)',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, color: on ? 'var(--neon-cyan)' : 'var(--text-1)' }}>{name}</span>
                      {on && <span style={{ color: 'var(--neon-cyan)' }}><I.Check size={16} /></span>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>{eg}</div>
                  </button>
                );
              })}
            </div>
          </Field>
          <Field label="Randomness" hint="Default is medium — balanced ideas with some creative range.">
            <div style={{ display: 'flex', gap: 9 }}>
              {['Low', 'Medium', 'High'].map((r) => <Chip key={r} selected={r === 'Medium'} accent="var(--neon-magenta)">{r}</Chip>)}
            </div>
          </Field>
        </>)}

        {step === 4 && (<>
          <Field label="Email address"><Input type="email" placeholder="you@studio.co.uk" iconLeft={<I.Mail size={18} />} helper="We'll send a secure magic link to save your session and invite others." /></Field>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '14px 16px', borderRadius: 'var(--radius-md)', background: 'var(--surface-inset)', border: '1px solid var(--line-1)' }}>
            <span style={{ color: 'var(--neon-lime)' }}><I.Check size={18} /></span>
            <span style={{ fontSize: 14, color: 'var(--text-2)' }}>Your wizard answers are ready — we'll generate <strong style={{ color: 'var(--text-1)' }}>40 names</strong> across your selected styles.</span>
          </div>
        </>)}
      </Shell>
    );
  }

  window.BXWizard = Wizard;
})();