// tweaks.jsx — in-design tweak panel for Fire Lingo welcome screen

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;

  const set = (k, v) => setTweaks(t => {
    const next = { ...t, [k]: v };
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
    return next;
  });

  const Group = ({ label, children }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{
        fontSize: 10, fontWeight: 700, textTransform: 'uppercase',
        letterSpacing: '0.12em', color: 'var(--fg3)', fontFamily: 'var(--font-sans)',
      }}>{label}</div>
      <div style={{ display: 'flex', gap: 6 }}>{children}</div>
    </div>
  );

  const Seg = ({ active, onClick, children }) => (
    <button onClick={onClick} style={{
      flex: 1, padding: '8px 12px', border: `1px solid ${active ? 'var(--td-blue)' : 'var(--border)'}`,
      background: active ? 'var(--td-blue-50)' : '#fff',
      color: active ? 'var(--td-navy)' : 'var(--fg2)',
      borderRadius: 'var(--radius-md)', cursor: 'pointer',
      fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
      whiteSpace: 'nowrap',
    }}>{children}</button>
  );

  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, zIndex: 1000,
      width: 280, background: '#fff',
      border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)',
      boxShadow: 'var(--shadow-xl)',
      padding: 16, display: 'flex', flexDirection: 'column', gap: 14,
      fontFamily: 'var(--font-sans)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingBottom: 10, borderBottom: '1px solid var(--divider)',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 800,
          color: 'var(--td-navy)',
        }}>Tweaks</div>
        <div style={{
          fontSize: 10, fontWeight: 600, textTransform: 'uppercase',
          letterSpacing: '0.12em', color: 'var(--fg3)',
        }}>Welcome screen</div>
      </div>

      <Group label="Hero">
        <Seg active={tweaks.showHero} onClick={() => set('showHero', true)}>Show</Seg>
        <Seg active={!tweaks.showHero} onClick={() => set('showHero', false)}>Hide</Seg>
      </Group>

      <Group label="Hero tone">
        <Seg active={tweaks.heroTone === 'navy'} onClick={() => set('heroTone', 'navy')}>Navy hero</Seg>
        <Seg active={tweaks.heroTone === 'light'} onClick={() => set('heroTone', 'light')}>Light</Seg>
      </Group>

      <Group label="Grid columns">
        <Seg active={tweaks.columns === 3} onClick={() => set('columns', 3)}>3 cols</Seg>
        <Seg active={tweaks.columns === 4} onClick={() => set('columns', 4)}>4 cols</Seg>
      </Group>

      <Group label="Card variant">
        <Seg active={tweaks.cardVariant === 'bracket'} onClick={() => set('cardVariant', 'bracket')}>Brackets</Seg>
        <Seg active={tweaks.cardVariant === 'subtle'} onClick={() => set('cardVariant', 'subtle')}>Subtle</Seg>
      </Group>

      <div style={{ height: 1, background: 'var(--divider)', margin: '2px 0' }} />

      <Group label="White-label brand">
        <Seg active={tweaks.brand === 'traduality'} onClick={() => set('brand', 'traduality')}>Traduality</Seg>
        <Seg active={tweaks.brand === 'metro-cu'} onClick={() => set('brand', 'metro-cu')}>Metro CU</Seg>
        <Seg active={tweaks.brand === 'iucu'} onClick={() => set('brand', 'iucu')}>IU CU</Seg>
        <Seg active={tweaks.brand === 'financial-center'} onClick={() => set('brand', 'financial-center')}>Financial Center</Seg>
      </Group>
    </div>
  );
}

Object.assign(window, { TweaksPanel });