// Brand book — same surface as onboarding step 2, but inline editable + live preview.
const { useState: useStateBb } = React;

const BB_FONTS = [
  { 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 BB_TONES = ['Дружелюбный', 'Экспертный', 'Игривый', 'Формальный'];

function Brandbook({ org, onChange }) {
  const { Button, Card, ColorSwatch, Pill, Textarea, IconButton, SectionHead } = window.UI;
  const I = window.Icons;
  const { SlideFrame } = window.Carousel;

  const brand = org.brand;
  const [fontMenu, setFontMenu] = useStateBb(null);
  const [activeKind, setActiveKind] = useStateBb('cover');

  const setBrand = (patch) => onChange({ ...org, brand: { ...brand, ...patch } });

  const sampleSlide = {
    cover: { kind: 'cover', title: 'Ваш бренд в каждой карусели', subtitle: 'Цвета и шрифты подставляются автоматически.', label: '01 · cover', fg: brand.colors[1], bg: brand.colors[0], accent: brand.colors[2] },
    header: { kind: 'header', title: 'Раздел документа', body: 'Этот стиль используется для смены темы внутри карусели.', label: '02 · header', fg: brand.colors[0], bg: brand.colors[3] || brand.colors[1], accent: brand.colors[2] },
    number: { kind: 'number', number: '7×', body: 'Любая цифра тут смотрится крупно и контрастно.', label: '03 · number', fg: brand.colors[1], bg: brand.colors[0], accent: brand.colors[2] },
    quote: { kind: 'quote', body: '«Брендбук — это не правила. Это память бренда.»', author: '— основатель', label: '04 · quote', fg: brand.colors[0], bg: brand.colors[3] || brand.colors[1], accent: brand.colors[2] },
  }[activeKind];

  return (
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-8">
      <SectionHead
        kicker="брендбук"
        title={org.name}
        sub="Цвета, шрифты, тон голоса и логотип — основа дизайна каждой карусели."
      />

      <div className="grid lg:grid-cols-[1.1fr_1fr] gap-8">
        <div className="space-y-8">
          {/* Colors */}
          <section>
            <div className="flex items-center justify-between mb-3">
              <div>
                <div className="text-[13px] font-semibold">Цвета</div>
                <div className="text-[12px] text-ink-500">1–4 цвета. Первый — основной фон, третий — акцент.</div>
              </div>
              {brand.colors.length < 4 && (
                <Button size="sm" variant="outline" icon={<I.Plus size={13}/>} onClick={() => setBrand({ colors: [...brand.colors, '#000000'] })}>Добавить</Button>
              )}
            </div>
            <Card className="p-5">
              <div className="flex flex-wrap gap-4">
                {brand.colors.map((c, i) => (
                  <div key={i} className="flex flex-col items-center gap-1.5">
                    <ColorSwatch
                      color={c}
                      onChange={(v) => setBrand({ colors: brand.colors.map((x, idx) => idx === i ? v : x) })}
                      onRemove={brand.colors.length > 1 ? () => setBrand({ colors: brand.colors.filter((_, idx) => idx !== i) }) : null}
                      removable={brand.colors.length > 1}
                      size={56}
                    />
                    <span className="text-[10.5px] font-mono text-ink-500">{c.toUpperCase()}</span>
                  </div>
                ))}
              </div>
            </Card>
          </section>

          {/* Fonts */}
          <section>
            <div className="text-[13px] font-semibold mb-1">Шрифты</div>
            <div className="text-[12px] 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: brand.fonts[idx] || 'Manrope' }}>{brand.fonts[idx] || 'Manrope'}</div>
                    <div className="text-[11px] text-ink-500 mt-0.5">{(BB_FONTS.find(f => f.name === brand.fonts[idx]) || {}).vibe || '—'}</div>
                    <I.Chevron size={16} className="absolute right-3 top-1/2 -translate-y-1/2 text-ink-400"/>
                  </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">
                      {BB_FONTS.map((f) => (
                        <button key={f.name} onClick={() => { setBrand({ fonts: brand.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 ' + (brand.fonts[idx] === f.name ? 'bg-ink-50' : '')}>
                          <div>
                            <div className="text-[15px]" style={{ fontFamily: f.name }}>{f.name}</div>
                            <div className="text-[11.5px] text-ink-500">{f.vibe}</div>
                          </div>
                          {brand.fonts[idx] === f.name && <I.Check size={14}/>}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </section>

          {/* Tone */}
          <section>
            <div className="text-[13px] font-semibold mb-1">Тон голоса</div>
            <div className="text-[12px] text-ink-500 mb-3">Несколько ярлыков + описание своими словами.</div>
            <div className="flex flex-wrap gap-2 mb-3">
              {BB_TONES.map((t) => {
                const on = brand.tonePresets.includes(t);
                return <Pill key={t} active={on} onClick={() => setBrand({ tonePresets: on ? brand.tonePresets.filter(x => x !== t) : [...brand.tonePresets, t] })}>{t}</Pill>;
              })}
            </div>
            <Textarea value={brand.tone} onChange={(v) => setBrand({ tone: v })} rows={3}/>
          </section>

          {/* Brandbook PDF */}
          <section>
            <div className="text-[13px] font-semibold mb-1">Брендбук в PDF</div>
            <div className="text-[12px] text-ink-500 mb-3">Загрузите готовый брендбук — Omneee распарсит и будет учитывать всё, что внутри.</div>
            {org.brandPdf ? (
              <Card className="p-4 flex items-center gap-3">
                <div className="h-12 w-12 rounded-xl bg-red-50 text-red-700 flex items-center justify-center shrink-0"><I.Pdf size={20}/></div>
                <div className="flex-1 min-w-0">
                  <div className="text-[13.5px] font-semibold truncate">{org.brandPdf.name}</div>
                  <div className="text-[11.5px] text-ink-500 mt-0.5 font-mono">{org.brandPdf.pages} стр · {org.brandPdf.size} · {org.brandPdf.when}</div>
                </div>
                <div className="hidden sm:flex items-center gap-1.5 text-[11px] text-emerald-700 font-semibold"><I.Check size={13} strokeWidth={2.5}/> распарсен</div>
                <window.UI.IconButton size="sm" title="Скачать"><I.Download size={14}/></window.UI.IconButton>
                <window.UI.IconButton size="sm" title="Удалить" onClick={() => onChange({ ...org, brandPdf: null })}><I.Trash size={14}/></window.UI.IconButton>
              </Card>
            ) : (
              <label className="block">
                <input type="file" accept=".pdf" className="hidden" onChange={(e) => {
                  const f = e.target.files && e.target.files[0];
                  if (f) onChange({ ...org, brandPdf: { name: f.name, pages: 24, size: f.size ? (f.size / 1048576).toFixed(1) + ' МБ' : '—', when: 'только что' } });
                }}/>
                <div className="rounded-2xl border-2 border-dashed border-ink-200 bg-paper hover:bg-ink-50 transition-colors p-5 flex items-center gap-4 cursor-pointer">
                  <div className="h-12 w-12 rounded-xl bg-white border border-ink-200 flex items-center justify-center text-ink-700"><I.Upload size={18}/></div>
                  <div className="flex-1">
                    <div className="text-[13.5px] font-semibold">Загрузить PDF-брендбук</div>
                    <div className="text-[12px] text-ink-500">До 20 МБ · мы вытащим палитру, шрифты и тон голоса</div>
                  </div>
                </div>
              </label>
            )}
          </section>

          {/* Brand assets / images */}
          <section>
            <div className="flex items-center justify-between mb-2">
              <div>
                <div className="text-[13px] font-semibold">Изображения и логотипы</div>
                <div className="text-[12px] text-ink-500">Логотип, паттерны, текстуры — всё, что Omneee может вставить в карусели.</div>
              </div>
              <label className="block">
                <input type="file" multiple accept="image/*" className="hidden" onChange={(e) => {
                  const arr = Array.from(e.target.files || []).map((f, i) => ({
                    id: 'a' + Date.now() + '-' + i,
                    name: f.name,
                    size: f.size ? (f.size > 1048576 ? (f.size / 1048576).toFixed(1) + ' МБ' : Math.round(f.size / 1024) + ' КБ') : '—',
                  }));
                  onChange({ ...org, brandImages: [...arr, ...(org.brandImages || [])] });
                }}/>
                <span className="inline-flex h-8 px-3 rounded-full bg-white border border-ink-200 hover:bg-ink-50 text-[13px] font-medium cursor-pointer items-center gap-1.5"><I.Plus size={13}/> Добавить</span>
              </label>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {/* Logo slot is special - always shown first */}
              <LogoSlot logo={brand.logo} onChange={(l) => setBrand({ logo: l })}/>
              {(org.brandImages || []).map((img) => (
                <div key={img.id} className="group relative rounded-2xl border border-ink-200 bg-white overflow-hidden">
                  <div className="aspect-square placeholder-grid flex items-center justify-center text-ink-500">
                    <I.ImageFile size={22}/>
                  </div>
                  <div className="px-3 py-2 border-t border-ink-200">
                    <div className="text-[11.5px] font-medium truncate">{img.name}</div>
                    <div className="text-[10.5px] text-ink-500 font-mono">{img.size}</div>
                  </div>
                  <button onClick={() => onChange({ ...org, brandImages: (org.brandImages || []).filter(x => x.id !== img.id) })}
                    className="absolute top-2 right-2 h-7 w-7 rounded-full bg-white border border-ink-200 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-ink-700 hover:bg-red-50 hover:text-red-700">
                    <I.Trash size={13}/>
                  </button>
                </div>
              ))}
            </div>
          </section>
        </div>

        {/* Live preview */}
        <div className="lg:sticky lg:top-20 self-start">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-3">живой превью</div>
          <div className="rounded-3xl border border-ink-200 bg-paper p-6">
            <div className="flex flex-wrap items-center gap-1.5 mb-4">
              {['cover', 'header', 'number', 'quote'].map((k) => (
                <Pill key={k} active={activeKind === k} onClick={() => setActiveKind(k)}>{k}</Pill>
              ))}
            </div>
            <div className="mx-auto rounded-2xl overflow-hidden shadow-card" style={{ width: 360, aspectRatio: '4/5' }}>
              <div style={{ transform: 'scale(0.667)', transformOrigin: 'top left', width: 540, height: 675 }}>
                <SlideFrame slide={sampleSlide} brand={brand} scale={1}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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

function LogoSlot({ logo, onChange }) {
  const I = window.Icons;
  return (
    <label className="group relative rounded-2xl border-2 border-dashed border-ink-300 bg-paper hover:bg-ink-50 transition-colors overflow-hidden cursor-pointer">
      <input type="file" accept="image/*,.svg" className="hidden" onChange={(e) => {
        const f = e.target.files && e.target.files[0];
        if (f) onChange({ name: f.name });
      }}/>
      <div className="aspect-square flex flex-col items-center justify-center text-ink-500 gap-2 p-3 text-center">
        {logo ? (
          <>
            <div className="h-12 w-12 rounded-xl bg-ink-900 text-white flex items-center justify-center font-semibold">LOGO</div>
            <div className="text-[11.5px] font-medium text-ink-900 truncate w-full">{logo.name}</div>
          </>
        ) : (
          <>
            <I.Upload size={20}/>
            <div className="text-[12px] font-semibold text-ink-700">Логотип</div>
            <div className="text-[10.5px] text-ink-500">SVG / PNG</div>
          </>
        )}
      </div>
      <div className="px-3 py-2 border-t border-ink-200 bg-white">
        <div className="text-[11.5px] font-medium">Основной логотип</div>
        <div className="text-[10.5px] text-ink-500 font-mono">{logo ? 'загружен' : 'не загружен'}</div>
      </div>
    </label>
  );
}