// Onboarding wizard: org → brandbook → sources. Final → main app.
const { useState: useStateO, useMemo: useMemoO } = React;

const FONT_LIST = [
  { name: 'Manrope', vibe: 'Универсальный sans · UI-friendly' },
  { name: 'Inter', vibe: 'Чистый sans · нейтральный' },
  { name: 'Space Grotesk', vibe: 'Геометричный · технологичный' },
  { name: 'Playfair Display', vibe: 'Серифный · редакционный' },
  { name: 'DM Serif Display', vibe: 'Высокий контраст · финансы / люкс' },
  { name: 'Instrument Serif', vibe: 'Тёплый serif · мягкий и литературный' },
  { name: 'JetBrains Mono', vibe: 'Моно · техно' },
];

const TONE_PRESETS = ['Дружелюбный', 'Экспертный', 'Игривый', 'Формальный'];

function Onboarding({ email, onDone }) {
  const { Button, IconButton, TextInput, Textarea, ColorSwatch, Pill } = window.UI;
  const I = window.Icons;
  const { SlideThumb } = window.Carousel;

  const [step, setStep] = useStateO(0);
  const [orgName, setOrgName] = useStateO('');
  const [slug, setSlug] = useStateO('');
  const [touchedSlug, setTouchedSlug] = useStateO(false);

  const [colors, setColors] = useStateO(['#0F0F0F', '#FFFFFF', '#7C5CFF']);
  const [fonts, setFonts] = useStateO(['Manrope', 'Instrument Serif']);
  const [fontMenu, setFontMenu] = useStateO(null); // 0 | 1 | null
  const [tones, setTones] = useStateO(['Дружелюбный']);
  const [tone, setTone] = useStateO('');
  const [logo, setLogo] = useStateO(null);

  const [rss, setRss] = useStateO('');
  const [tg, setTg] = useStateO('');
  const [site, setSite] = useStateO('');

  useMemoO(() => {
    if (!touchedSlug) {
      const s = orgName.toLowerCase().replace(/[^a-zа-я0-9]+/gi, '-').replace(/^-+|-+$/g, '').slice(0, 30);
      setSlug(s);
    }
  }, [orgName, touchedSlug]);

  const finish = () => {
    onDone({
      org: {
        name: orgName || 'Моя организация',
        slug: slug || 'my-org',
        initial: (orgName || 'M')[0].toUpperCase(),
        accent: colors[2] || '#7C5CFF',
        role: 'Новая организация',
        brand: { colors, fonts, tone: tone || tones.join(', '), tonePresets: tones, logo },
      },
      sources: { rss, tg, site },
    });
  };

  const STEPS = ['Организация', 'Брендбук', 'Источники'];

  return (
    <div className="min-h-screen flex flex-col fade-in">
      <header className="px-6 sm:px-10 py-5 flex items-center justify-between border-b border-ink-200">
        <div className="flex items-center gap-2.5">
          <div className="h-7 w-7 rounded-md bg-ink-900 text-white flex items-center justify-center" style={{ fontFamily: 'Instrument Serif, serif', fontSize: 17 }}>o</div>
          <span className="text-[15px] font-semibold tracking-tight">Omneee</span>
        </div>
        <div className="hidden sm:flex items-center gap-2 text-[13px] text-ink-500">
          <I.Mail size={14}/> {email}
        </div>
      </header>

      <div className="max-w-[1100px] w-full mx-auto px-6 sm:px-10 pt-10 pb-4">
        <div className="flex items-center gap-3 mb-8">
          {STEPS.map((label, i) => (
            <React.Fragment key={i}>
              <div className="flex items-center gap-2">
                <div className={'h-7 w-7 rounded-full flex items-center justify-center text-[12px] font-semibold ' + (i < step ? 'bg-ink-900 text-white' : i === step ? 'bg-ink-900 text-white' : 'bg-ink-100 text-ink-500')}>
                  {i < step ? <I.Check size={13} strokeWidth={2.5}/> : i + 1}
                </div>
                <span className={'text-[13.5px] ' + (i <= step ? 'text-ink-900 font-medium' : 'text-ink-500')}>{label}</span>
              </div>
              {i < STEPS.length - 1 && <div className="flex-1 h-[1px] bg-ink-200"/>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <main className="flex-1 max-w-[1100px] w-full mx-auto px-6 sm:px-10 pb-16">
        {step === 0 && (
          <div className="grid lg:grid-cols-[1.2fr_1fr] gap-12 fade-in">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">Шаг 01</div>
              <h1 className="mt-2 text-[36px] sm:text-[44px] font-semibold tracking-tight leading-[1.05]" style={{ textWrap: 'balance' }}>
                Создайте организацию
              </h1>
              <p className="mt-3 text-[15.5px] text-ink-600 max-w-md">
                Это рабочее пространство для одного бренда. Внутри можно создать сколько угодно — личных, клиентских, командных.
              </p>

              <div className="mt-8 space-y-5 max-w-md">
                <div>
                  <label className="block text-[13px] font-medium mb-1.5 text-ink-700">Название</label>
                  <TextInput value={orgName} onChange={setOrgName} placeholder="Например, Анна Котова Studio" size="lg" autoFocus/>
                </div>
                <div>
                  <label className="block text-[13px] font-medium mb-1.5 text-ink-700">Slug</label>
                  <div className="flex items-center gap-2">
                    <span className="text-[14px] text-ink-500 font-mono">omneee.app/</span>
                    <TextInput value={slug} onChange={(v) => { setSlug(v); setTouchedSlug(true); }} placeholder="my-studio" size="lg" className="flex-1"/>
                  </div>
                  <p className="text-[12.5px] text-ink-500 mt-2">Так будет выглядеть адрес панели.</p>
                </div>

                <div className="pt-2">
                  <Button size="lg" onClick={() => setStep(1)} disabled={!orgName.trim()} iconRight={<I.Arrow size={16}/>}>Дальше</Button>
                </div>
              </div>
            </div>

            <div className="rounded-3xl bg-paper border border-ink-200 p-7 self-start">
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-4">предпросмотр</div>
              <div className="bg-white rounded-2xl border border-ink-200 p-5 shadow-soft">
                <div className="flex items-center gap-3 mb-4">
                  <div className="h-10 w-10 rounded-xl flex items-center justify-center text-white font-semibold text-[18px]" style={{ background: colors[2] || '#7C5CFF' }}>
                    {(orgName || '·')[0].toUpperCase()}
                  </div>
                  <div>
                    <div className="text-[14.5px] font-semibold">{orgName || 'Название организации'}</div>
                    <div className="text-[12px] text-ink-500 font-mono">{slug ? `omneee.app/${slug}` : 'omneee.app/slug'}</div>
                  </div>
                </div>
                <div className="space-y-1.5">
                  {['Дашборд', 'Источники', 'Идеи', 'Генерация'].map((x) => (
                    <div key={x} className="h-9 rounded-lg bg-ink-50 px-3 flex items-center text-[13.5px] text-ink-700">{x}</div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="grid lg:grid-cols-[1.2fr_1fr] gap-12 fade-in">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">Шаг 02</div>
              <h1 className="mt-2 text-[36px] sm:text-[44px] font-semibold tracking-tight leading-[1.05]">Брендбук</h1>
              <p className="mt-3 text-[15.5px] text-ink-600 max-w-lg">Это превратится в дизайн каждой карусели. Всё можно менять позже.</p>

              <div className="mt-10 space-y-9 max-w-xl">
                {/* colors */}
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <div className="text-[13px] font-semibold">Цвета бренда</div>
                      <div className="text-[12.5px] text-ink-500">1–4 цвета. Первый — основной фон.</div>
                    </div>
                    {colors.length < 4 && (
                      <Button size="sm" variant="outline" icon={<I.Plus size={14}/>} onClick={() => setColors([...colors, '#000000'])}>Добавить</Button>
                    )}
                  </div>
                  <div className="flex flex-wrap gap-3">
                    {colors.map((c, i) => (
                      <div key={i} className="flex flex-col items-center gap-1.5">
                        <ColorSwatch
                          color={c}
                          onChange={(v) => setColors(colors.map((x, idx) => idx === i ? v : x))}
                          onRemove={colors.length > 1 ? () => setColors(colors.filter((_, idx) => idx !== i)) : null}
                          removable={colors.length > 1}
                          size={56}
                        />
                        <span className="text-[11px] font-mono text-ink-500">{c.toUpperCase()}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* fonts */}
                <div>
                  <div className="text-[13px] font-semibold">Шрифты</div>
                  <div className="text-[12.5px] text-ink-500 mb-3">Первый — для заголовков, второй — для текста.</div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {[0, 1].map((idx) => (
                      <div key={idx} className="relative">
                        <button
                          onClick={() => setFontMenu(fontMenu === idx ? null : idx)}
                          className="w-full text-left bg-white border border-ink-200 rounded-2xl p-4 hover:border-ink-300 transition-colors"
                        >
                          <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-1">{idx === 0 ? 'Заголовки' : 'Текст'}</div>
                          <div className="text-[20px] leading-tight" style={{ fontFamily: fonts[idx] }}>{fonts[idx]}</div>
                          <div className="text-[11.5px] text-ink-500 mt-1">{(FONT_LIST.find(f => f.name === fonts[idx]) || {}).vibe || ''}</div>
                          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-ink-400"><I.Chevron size={16}/></div>
                        </button>
                        {fontMenu === idx && (
                          <div className="absolute z-20 top-full left-0 right-0 mt-2 bg-white border border-ink-200 rounded-2xl shadow-pop p-2 slide-up">
                            {FONT_LIST.map((f) => (
                              <button
                                key={f.name}
                                onClick={() => { setFonts(fonts.map((x, i) => i === idx ? f.name : x)); setFontMenu(null); }}
                                className={'w-full text-left rounded-xl px-3 py-2 flex items-center justify-between hover:bg-ink-50 ' + (fonts[idx] === f.name ? 'bg-ink-50' : '')}
                              >
                                <div>
                                  <div className="text-[16px]" style={{ fontFamily: f.name }}>{f.name}</div>
                                  <div className="text-[11.5px] text-ink-500">{f.vibe}</div>
                                </div>
                                {fonts[idx] === f.name && <I.Check size={14}/>}
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>

                {/* tone */}
                <div>
                  <div className="text-[13px] font-semibold">Тон голоса</div>
                  <div className="text-[12.5px] text-ink-500 mb-3">Выберите ярлыки и опишите голос своими словами.</div>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {TONE_PRESETS.map((t) => (
                      <Pill key={t} active={tones.includes(t)} onClick={() => setTones(tones.includes(t) ? tones.filter(x => x !== t) : [...tones, t])}>{t}</Pill>
                    ))}
                  </div>
                  <Textarea
                    value={tone}
                    onChange={setTone}
                    placeholder='Например: «Пишем на ты, тёплый юмор, избегаем канцелярита.»'
                    rows={3}
                  />
                </div>

                {/* logo */}
                <div>
                  <div className="text-[13px] font-semibold">Логотип <span className="text-ink-400 font-normal">(необязательно)</span></div>
                  <label className="mt-2 block">
                    <input type="file" className="hidden" onChange={(e) => {
                      const f = e.target.files && e.target.files[0];
                      if (f) setLogo({ name: f.name });
                    }}/>
                    <div className="border-2 border-dashed border-ink-200 rounded-2xl p-5 hover:border-ink-300 transition-colors flex items-center gap-4 cursor-pointer bg-white">
                      <div className="h-12 w-12 rounded-xl bg-ink-100 flex items-center justify-center text-ink-500">
                        <I.Upload size={18}/>
                      </div>
                      <div className="flex-1">
                        <div className="text-[14px] font-medium">{logo ? logo.name : 'Загрузите SVG, PNG или JPG'}</div>
                        <div className="text-[12.5px] text-ink-500">До 2 МБ. Подходит и тёмный, и светлый.</div>
                      </div>
                    </div>
                  </label>
                </div>

                <div className="flex items-center gap-3 pt-4">
                  <Button variant="ghost" onClick={() => setStep(0)} icon={<I.ChevronLeft size={16}/>}>Назад</Button>
                  <Button size="lg" onClick={() => setStep(2)} iconRight={<I.Arrow size={16}/>}>Дальше</Button>
                </div>
              </div>
            </div>

            {/* preview cards */}
            <div className="space-y-4 lg:sticky lg:top-6 self-start">
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">живой превью</div>
              <BrandPreview colors={colors} fonts={fonts}/>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="grid lg:grid-cols-[1.2fr_1fr] gap-12 fade-in">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">Шаг 03</div>
              <h1 className="mt-2 text-[36px] sm:text-[44px] font-semibold tracking-tight leading-[1.05]">Подключите источники</h1>
              <p className="mt-3 text-[15.5px] text-ink-600 max-w-lg">Мы будем читать их в фоне и предлагать темы. Можно пропустить — добавите позже.</p>

              <div className="mt-8 space-y-5 max-w-xl">
                <SourceField icon={<I.Rss size={16}/>} label="RSS-фиды" placeholder="https://example.com/feed.xml" value={rss} onChange={setRss} hint="По одному в строке"/>
                <SourceField icon={<I.Telegram size={16}/>} label="Telegram-каналы" placeholder="@channel_name" value={tg} onChange={setTg} hint="Только публичные каналы"/>
                <SourceField icon={<I.Globe size={16}/>} label="Свой сайт" placeholder="https://mybrand.com" value={site} onChange={setSite} hint="Чтобы Omneee знал ваш контекст"/>

                <div className="flex items-center gap-3 pt-4">
                  <Button variant="ghost" onClick={() => setStep(1)} icon={<I.ChevronLeft size={16}/>}>Назад</Button>
                  <Button variant="ghost" onClick={finish}>Пропустить</Button>
                  <Button size="lg" onClick={finish} iconRight={<I.Arrow size={16}/>}>Готово, начнём</Button>
                </div>
              </div>
            </div>

            <div className="self-start space-y-4">
              <div className="rounded-3xl bg-paper border border-ink-200 p-7">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-4">что произойдёт дальше</div>
                <ol className="space-y-4">
                  {[
                    ['Сканируем источники', 'В фоне за 1–3 минуты'],
                    ['Предлагаем темы', 'Те, что подходят вашему бренду'],
                    ['Генерируем карусели', 'На основе ваших цветов, шрифтов и тона'],
                    ['Кидаем в Telegram', 'Когда пост готов'],
                  ].map(([t, s], i) => (
                    <li key={i} className="flex items-start gap-3">
                      <span className="h-6 w-6 rounded-full bg-ink-900 text-white text-[11px] font-semibold flex items-center justify-center">{i + 1}</span>
                      <div>
                        <div className="text-[14px] font-medium">{t}</div>
                        <div className="text-[12.5px] text-ink-500">{s}</div>
                      </div>
                    </li>
                  ))}
                </ol>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

function SourceField({ icon, label, placeholder, hint, value, onChange }) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-1.5">
        <span className="text-ink-700">{icon}</span>
        <span className="text-[13.5px] font-semibold">{label}</span>
      </div>
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={2}
        className="w-full bg-white border border-ink-200 rounded-2xl px-4 py-3 text-[14px] font-mono placeholder:text-ink-400 focus:outline-none focus:border-ink-900 resize-none"
      />
      <div className="text-[11.5px] text-ink-500 mt-1.5">{hint}</div>
    </div>
  );
}

function BrandPreview({ colors, fonts }) {
  const [c1, c2, c3] = [colors[0] || '#000', colors[1] || '#fff', colors[2] || '#7C5CFF'];
  return (
    <>
      <div className="rounded-3xl overflow-hidden shadow-card border border-ink-200" style={{ background: c1, color: c2, aspectRatio: '4/5' }}>
        <div className="h-full w-full p-8 relative flex flex-col justify-end" style={{ fontFamily: fonts[1] || 'Manrope' }}>
          <div className="absolute top-6 left-8 font-mono text-[10px] tracking-[0.2em] opacity-70">01 · COVER</div>
          <div className="absolute top-6 right-8 font-mono text-[10px] tracking-[0.2em] opacity-70">OMNEEE</div>
          <div style={{ height: 4, width: 56, background: c3, marginBottom: 16 }}/>
          <h3 className="leading-[1.02] tracking-tight font-semibold" style={{ fontFamily: fonts[0] || 'Manrope', fontSize: 40 }}>
            Ваш бренд<br/>в каждой карусели
          </h3>
          <p className="mt-3 text-[14px] opacity-85 max-w-[260px]">Цвета, шрифты и тон Omneee помнит везде.</p>
          <div className="absolute bottom-6 left-8 h-[2px] w-7" style={{ background: c3 }}/>
          <div className="absolute bottom-6 right-8 font-mono text-[10px] tracking-[0.2em] opacity-50">@brand</div>
        </div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        {colors.map((c, i) => (
          <div key={i} className="rounded-xl border border-ink-200 p-3 bg-white">
            <div className="h-10 rounded-lg" style={{ background: c }}/>
            <div className="mt-2 font-mono text-[10.5px] text-ink-500">{c.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </>
  );
}

window.Screens = window.Screens || {};
window.Screens.Onboarding = Onboarding;