/* Tweaks panel — accent color, hero variant (future-proofed), density.
   Uses EDITMODE protocol: register listener, announce availability, persist via postMessage. */

const Tweaks = ({ tweaks, onChange }) => {
  const [enabled, setEnabled] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEnabled(true);
      if (e.data.type === '__deactivate_edit_mode') setEnabled(false);
    };
    window.addEventListener('message', handler);
    // Announce after registration
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

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

  if (!enabled) return null;

  return (
    <div className="tweaks-panel">
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        paddingBottom: 10, marginBottom: 10,
        borderBottom: '1px solid var(--line-2)',
      }}>
        <I.settings size={13} style={{ color: 'var(--accent-2)' }} />
        <span style={{
          fontSize: 11, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          fontFamily: 'var(--font-mono)',
          color: 'var(--fg-1)',
        }}>Tweaks</span>
        <span style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)' }}>
          preview
        </span>
      </div>

      {/* Theme */}
      <TweakRow label="Theme">
        {[
          { k: 'dark',  label: 'Dark',  icon: 'moon' },
          { k: 'light', label: 'Light', icon: 'sun' },
        ].map((t) => {
          const Icn = I[t.icon];
          const isActive = (tweaks.theme || 'dark') === t.k;
          return (
            <button key={t.k} onClick={() => set('theme', t.k)}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 10px',
                fontSize: 11, fontFamily: 'var(--font-mono)',
                letterSpacing: '0.06em',
                color: isActive ? 'var(--accent-2)' : 'var(--fg-2)',
                background: isActive ? 'var(--accent-soft)' : 'var(--bg-3)',
                border: `1px solid ${isActive ? 'var(--line-3)' : 'var(--line-2)'}`,
                borderRadius: 6, cursor: 'pointer',
              }}>
              <Icn size={11} />
              {t.label}
            </button>
          );
        })}
      </TweakRow>

      {/* Font preset */}
      <TweakRow label="Type">
        {[
          { k: 'simple',    label: 'Simple' },
          { k: 'editorial', label: 'Editorial' },
          { k: 'technical', label: 'Technical' },
        ].map((f) => {
          const isActive = (tweaks.font || 'simple') === f.k;
          return (
            <button key={f.k} onClick={() => set('font', f.k)}
              style={{
                padding: '5px 10px',
                fontSize: 11, fontFamily: 'var(--font-mono)',
                letterSpacing: '0.06em',
                color: isActive ? 'var(--accent-2)' : 'var(--fg-2)',
                background: isActive ? 'var(--accent-soft)' : 'var(--bg-3)',
                border: `1px solid ${isActive ? 'var(--line-3)' : 'var(--line-2)'}`,
                borderRadius: 6, cursor: 'pointer',
              }}>
              {f.label}
            </button>
          );
        })}
      </TweakRow>

      {/* Accent color */}
      <TweakRow label="Accent">
        {[
          { k: 'violet', c: '#8b5cf6' },
          { k: 'mint',   c: '#5eead4' },
          { k: 'amber',  c: '#f59e0b' },
          { k: 'lime',   c: '#a3e635' },
        ].map((a) => (
          <button key={a.k} onClick={() => set('accent', a.k)}
            style={{
              width: 26, height: 26, borderRadius: 7,
              background: a.c,
              border: `2px solid ${tweaks.accent === a.k ? '#fff' : 'transparent'}`,
              boxShadow: tweaks.accent === a.k ? `0 0 0 2px ${a.c}` : 'none',
              cursor: 'pointer',
            }}
            title={a.k}
          />
        ))}
      </TweakRow>

      {/* Density */}
      <TweakRow label="Density">
        {['compact', 'comfortable', 'spacious'].map((d) => (
          <button key={d} onClick={() => set('density', d)}
            style={{
              padding: '5px 10px',
              fontSize: 11, fontFamily: 'var(--font-mono)',
              letterSpacing: '0.06em',
              color: tweaks.density === d ? 'var(--accent-2)' : 'var(--fg-2)',
              background: tweaks.density === d ? 'var(--accent-soft)' : 'var(--bg-3)',
              border: `1px solid ${tweaks.density === d ? 'var(--line-3)' : 'var(--line-2)'}`,
              borderRadius: 6,
              cursor: 'pointer',
              textTransform: 'uppercase',
            }}>
            {d}
          </button>
        ))}
      </TweakRow>

      {/* Hero variant */}
      <TweakRow label="Hero">
        {[
          { k: 'orchestration', label: 'Orchestration' },
          { k: 'code',          label: 'Code stream' },
          { k: 'split',         label: 'Split' },
        ].map((v) => (
          <button key={v.k} onClick={() => set('heroVariant', v.k)}
            style={{
              padding: '5px 10px',
              fontSize: 11, fontFamily: 'var(--font-mono)',
              letterSpacing: '0.06em',
              color: tweaks.heroVariant === v.k ? 'var(--accent-2)' : 'var(--fg-2)',
              background: tweaks.heroVariant === v.k ? 'var(--accent-soft)' : 'var(--bg-3)',
              border: `1px solid ${tweaks.heroVariant === v.k ? 'var(--line-3)' : 'var(--line-2)'}`,
              borderRadius: 6,
              cursor: 'pointer',
            }}>
            {v.label}
          </button>
        ))}
      </TweakRow>
    </div>
  );
};

const TweakRow = ({ label, children }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '6px 0',
  }}>
    <div style={{
      width: 70,
      fontSize: 11, color: 'var(--fg-3)',
      fontFamily: 'var(--font-mono)',
      letterSpacing: '0.08em', textTransform: 'uppercase',
    }}>{label}</div>
    <div style={{ display: 'flex', gap: 6, flex: 1, flexWrap: 'wrap' }}>
      {children}
    </div>
  </div>
);

window.Tweaks = Tweaks;