// Step 6 — Localization: default locale + available locales with copy preview

const Step6Locales = ({ draft, setDraft }) => {
  const { SectionTitle, LOCALES, IconCheck, IconLanguage } = window;

  const toggleLocale = (k) => {
    if (draft.locales.includes(k)) {
      if (k === draft.defaultLocale) {
        window.toast('Cannot remove the default locale', 'error');
        return;
      }
      setDraft({ ...draft, locales: draft.locales.filter(x => x !== k) });
    } else {
      setDraft({ ...draft, locales: [...draft.locales, k] });
    }
  };

  const setDefault = (k) => {
    const locales = draft.locales.includes(k) ? draft.locales : [...draft.locales, k];
    setDraft({ ...draft, defaultLocale: k, locales });
  };

  // Mock per-locale strings preview
  const PREVIEW = {
    en: { appName: 'Neon Slots — Casino Games', cta: 'Install', tagline: 'Spin, win and enjoy the best slot machines' },
    de: { appName: 'Neon Slots — Casino Spiele', cta: 'Installieren', tagline: 'Drehe, gewinne und genieße die besten Spielautomaten' },
    pl: { appName: 'Neon Slots — Gry Kasynowe', cta: 'Instaluj', tagline: 'Kręć, wygrywaj i ciesz się najlepszymi slotami' },
    no: { appName: 'Neon Slots — Kasinospill', cta: 'Installer', tagline: 'Spinn, vinn og nyt de beste spilleautomatene' },
    fi: { appName: 'Neon Slots — Kasinopelit', cta: 'Asenna', tagline: 'Pyöritä, voita ja nauti parhaista hedelmäpeleistä' },
    cs: { appName: 'Neon Slots — Kasino hry', cta: 'Nainstalovat', tagline: 'Točte, vyhrávejte a užijte si nejlepší automaty' },
    hu: { appName: 'Neon Slots — Kaszinó játékok', cta: 'Telepítés', tagline: 'Pörgess, nyerj és élvezd a legjobb nyerőgépeket' },
    fr: { appName: 'Neon Slots — Jeux de Casino', cta: 'Installer', tagline: 'Tournez, gagnez et profitez des meilleures machines à sous' },
    it: { appName: 'Neon Slots — Giochi da Casinò', cta: 'Installa', tagline: 'Gira, vinci e goditi le migliori slot machine' },
  };

  return (
    <div className="step-anim">
      <SectionTitle
        kicker="Step 06 / 07"
        title="Translate your funnel"
        desc="Auto-detected from the user's browser. Pick at least the languages your target GEOs speak — the listing copy, install button, and push messages will localize."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <div className="panel" style={{ padding: 0 }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line-soft)' }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Available languages</div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>
              {draft.locales.length} active · default is {LOCALES[draft.defaultLocale]?.label}
            </div>
          </div>
          <div>
            {Object.entries(LOCALES).map(([k, v], i) => {
              const active = draft.locales.includes(k);
              const isDefault = draft.defaultLocale === k;
              return (
                <div key={k} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 20px',
                  borderTop: i > 0 ? '1px solid var(--line-soft)' : 'none',
                  cursor: 'pointer',
                  background: active ? 'rgba(0,208,132,0.025)' : 'transparent',
                }}
                onClick={() => toggleLocale(k)}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 5,
                    background: active ? 'var(--accent)' : 'var(--bg-3)',
                    border: `1px solid ${active ? 'var(--accent)' : 'var(--line)'}`,
                    display: 'grid', placeItems: 'center',
                    color: '#001a0c',
                    transition: 'all 0.12s',
                  }}>
                    {active && <IconCheck size={13} sw={3} />}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{v.label}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{v.nativeName}</div>
                  </div>
                  <span className="mono" style={{
                    fontSize: 11,
                    color: active ? 'var(--accent)' : 'var(--muted)',
                    background: active ? 'var(--accent-dim)' : 'var(--bg-3)',
                    padding: '2px 7px', borderRadius: 4,
                    border: `1px solid ${active ? 'var(--accent-line)' : 'var(--line)'}`,
                  }}>{k}</span>
                  <button
                    className="btn ghost small"
                    onClick={e => { e.stopPropagation(); setDefault(k); }}
                    disabled={!active}
                    style={{
                      opacity: active ? 1 : 0.3,
                      color: isDefault ? 'var(--accent)' : 'var(--muted)',
                      borderColor: isDefault ? 'var(--accent-line)' : 'var(--line)',
                      background: isDefault ? 'var(--accent-dim)' : 'transparent',
                      border: '1px solid',
                    }}
                  >{isDefault ? '★ default' : 'set default'}</button>
                </div>
              );
            })}
          </div>
        </div>

        {/* Per-locale preview */}
        <div>
          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10, paddingLeft: 4 }}>
            Copy preview · per locale
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 600, overflowY: 'auto', paddingRight: 4 }}>
            {draft.locales.map(k => {
              const p = PREVIEW[k] || PREVIEW.en;
              return (
                <div key={k} className="panel" style={{ padding: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                    <code style={{ background: 'var(--bg-3)', padding: '2px 8px', borderRadius: 4, fontSize: 11 }}>{k}</code>
                    <span style={{ fontSize: 12, fontWeight: 500 }}>{LOCALES[k]?.label}</span>
                    {k === draft.defaultLocale && (
                      <span style={{ fontSize: 10, color: 'var(--accent)', background: 'var(--accent-dim)', padding: '2px 6px', borderRadius: 4, fontWeight: 600 }}>★ DEFAULT</span>
                    )}
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--text)', marginBottom: 4 }}>{p.appName}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10 }}>{p.tagline}</div>
                  <button style={{
                    padding: '6px 14px',
                    background: 'var(--accent)', color: '#001a0c',
                    border: 'none', borderRadius: 4,
                    fontWeight: 600, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase',
                  }}>{p.cta}</button>
                </div>
              );
            })}

            {draft.locales.length === 0 && (
              <div style={{ padding: 30, textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>
                Pick at least one language.
              </div>
            )}
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 22, padding: '12px 16px',
        background: 'var(--purple-dim)', border: '1px solid rgba(183,148,244,0.25)',
        borderRadius: 10, fontSize: 12.5, color: 'var(--text-dim)',
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <IconLanguage size={16} style={{ color: 'var(--purple)', flexShrink: 0, marginTop: 1 }} />
        <span>
          <strong style={{ color: 'var(--text)' }}>Phase B preview:</strong>{' '}
          When AI translation ships, you'll be able to generate the full string set for a new locale from your default in one click — including push copy and review-text variations.
        </span>
      </div>
    </div>
  );
};

window.Step6Locales = Step6Locales;