// Global Help overlay + trigger button.
//
// BFHelpButton is a small floating "?" that lives in the app shell; it stays
// out of the way of the player. BFHelp is a full-screen bottom-sheet-style
// panel with plain-language answers to the things people actually ask:
// what each pattern does, how BOLT works, what progression is, privacy.

function BFHelpButton({ theme, accentH, onClick, compactTabs }) {
  const label = (window.BFI18n ? window.BFI18n.t('help.button_label') : 'Help') || 'Help';
  return (
    <button
      onClick={onClick}
      aria-label={label}
      title={label}
      style={{
        position: 'absolute',
        top: 'calc(env(safe-area-inset-top, 0px) + 16px)',
        right: compactTabs ? 20 : 16,
        zIndex: 35,
        width: 40, height: 40, borderRadius: 999,
        border: `1px solid ${theme.line}`,
        background: `${theme.bg}cc`,
        backdropFilter: 'blur(12px)',
        color: theme.fgFaint,
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      <BFIcon name="help" size={20} />
    </button>
  );
}

// Sections resolve text from BFI18n at render time (see helpSections below).
// Each entry uses keys so the whole Help sheet flips language reactively.
const BF_HELP_SECTION_KEYS = [
  { titleKey: 'help.welcome_title',    bodyKeys:  ['help.welcome_p1', 'help.welcome_p2'] },
  { titleKey: 'help.patterns_title',   itemKeys:  [
    ['help.patterns_box_k',       'help.patterns_box_v'],
    ['help.patterns_478_k',       'help.patterns_478_v'],
    ['help.patterns_coherent_k',  'help.patterns_coherent_v'],
    ['help.patterns_resonance_k', 'help.patterns_resonance_v'],
  ] },
  { titleKey: 'help.bolt_title',       bodyKeys: ['help.bolt_p1', 'help.bolt_p2'] },
  { titleKey: 'help.progression_title', bodyKeys: ['help.progression_p1', 'help.progression_p2'] },
  { titleKey: 'help.voice_title',      bodyKeys: ['help.voice_p1', 'help.voice_p2'] },
  { titleKey: 'help.kids_title',       bodyKeys: ['help.kids_p1', 'help.kids_p2'] },
  { titleKey: 'help.data_title',       bodyKeys: ['help.data_p1', 'help.data_p2'] },
];

function BFHelp({ theme, accentH, onClose }) {
  // Subscribe to locale changes so text re-resolves if user flips language
  // while the sheet is open.
  const [, forceRender] = React.useState(0);
  React.useEffect(() => {
    if (!window.BFI18n) return;
    return window.BFI18n.onChange(() => forceRender((n) => n + 1));
  }, []);
  const t = (k) => (window.BFI18n ? window.BFI18n.t(k) : k);
  const helpSections = BF_HELP_SECTION_KEYS.map((s) => ({
    title: t(s.titleKey),
    body:  s.bodyKeys  ? s.bodyKeys.map(t)                               : undefined,
    items: s.itemKeys  ? s.itemKeys.map(([k, v]) => [t(k), t(v)])        : undefined,
  }));
  return (
    <div
      onClick={onClose}
      style={{
        position: 'absolute', inset: 0, zIndex: 50,
        background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 640, maxHeight: '92%',
          background: theme.bg, color: theme.fg,
          borderTop: `1px solid ${theme.line}`,
          borderTopLeftRadius: 24, borderTopRightRadius: 24,
          padding: '22px 22px 32px',
          overflow: 'auto',
          fontFamily: BF_FONTS.sans,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <h2 style={{
            margin: 0, fontFamily: BF_FONTS.display, fontWeight: 400,
            fontSize: 28, letterSpacing: -0.5,
          }}>{t('help.title')}</h2>
          <button
            onClick={onClose}
            aria-label={t('help.close_label')}
            style={{
              width: 36, height: 36, borderRadius: 999,
              background: 'transparent', border: `1px solid ${theme.line}`,
              color: theme.fgFaint, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            <BFIcon name="close" size={18} />
          </button>
        </div>

        {helpSections.map((s) => (
          <section key={s.title} style={{ marginTop: 18 }}>
            <h3 style={{
              margin: '0 0 8px', fontSize: 11, fontWeight: 600,
              letterSpacing: 0.8, textTransform: 'uppercase',
              color: bfAccentText(theme, accentH),
            }}>{s.title}</h3>
            {s.body && s.body.map((p, i) => (
              <p key={i} style={{ margin: '6px 0', fontSize: 14, lineHeight: 1.55, color: theme.fg }}>{p}</p>
            ))}
            {s.items && (
              <ul style={{ margin: '6px 0', paddingLeft: 0, listStyle: 'none' }}>
                {s.items.map(([k, v]) => (
                  <li key={k} style={{
                    padding: '10px 12px', margin: '6px 0',
                    background: theme.card, border: `1px solid ${theme.line}`,
                    borderRadius: 12,
                  }}>
                    <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>{k}</div>
                    <div style={{ fontSize: 13, color: theme.fgFaint, lineHeight: 1.5 }}>{v}</div>
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}

        <p style={{
          marginTop: 22, fontSize: 12, color: theme.fgFaint,
          textAlign: 'center', opacity: 0.7,
        }}>
          {t('help.footer')}
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { BFHelp, BFHelpButton });