const TweaksUI = () => {
  const [tweaks, setTweaks] = React.useState({
    accentColor: '#C9A84C',
    accentName: 'Gold',
    dataColor: '#4FC3F7',
    bgDarkness: 0.98,
    borderOpacity: 0.07,
    cardOpacity: 0.025,
    sidebarCollapsed: false,
    fontScale: 1,
    animationsEnabled: true,
  });

  const [isOpen, setIsOpen] = React.useState(false);

  // Load saved tweaks on mount
  React.useEffect(() => {
    const saved = localStorage.getItem('cipher-tweaks');
    if (saved) {
      try {
        setTweaks(prev => ({ ...prev, ...JSON.parse(saved) }));
      } catch (e) {
        console.error('Failed to load tweaks:', e);
      }
    }

    // Register with host
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    
    const handler = (e) => {
      if (e.data.type === '__activate_edit_mode') setIsOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setIsOpen(false);
    };
    window.addEventListener('message', handler);
    return () => window.removeEventListener('message', handler);
  }, []);

  // Save tweaks locally and notify host
  const updateTweak = (key, value) => {
    const newTweaks = { ...tweaks, [key]: value };
    setTweaks(newTweaks);
    localStorage.setItem('cipher-tweaks', JSON.stringify(newTweaks));
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: { [key]: value }
    }, '*');
    applyTweaks(newTweaks);
  };

  // Apply tweaks to CSS variables
  const applyTweaks = (t) => {
    const root = document.documentElement;
    root.style.setProperty('--gold', t.accentColor);
    root.style.setProperty('--gold-dim', t.accentColor + '26');
    root.style.setProperty('--gold-glow', t.accentColor + '40');
    root.style.setProperty('--blue', t.dataColor);
    root.style.setProperty('--blue-dim', t.dataColor + '1F');
    root.style.setProperty('--blue-glow', t.dataColor + '40');
    
    const bgVal = Math.round(255 * (1 - t.bgDarkness));
    root.style.setProperty('--bg', `rgb(${bgVal},${bgVal},${bgVal})`);
    root.style.setProperty('--bg2', `rgb(${Math.round(bgVal * 1.1)},${Math.round(bgVal * 1.1)},${Math.round(bgVal * 1.1)})`);
    root.style.setProperty('--bg3', `rgb(${Math.round(bgVal * 1.2)},${Math.round(bgVal * 1.2)},${Math.round(bgVal * 1.2)})`);
    
    root.style.setProperty('--border', `rgba(255,255,255,${t.borderOpacity})`);
    root.style.setProperty('--card', `rgba(255,255,255,${t.cardOpacity})`);
    root.style.setProperty('--card-h', `rgba(255,255,255,${t.cardOpacity * 1.6})`);
    
    document.documentElement.style.setProperty('--font-scale', t.fontScale);
    if (!t.animationsEnabled) {
      document.documentElement.style.setProperty('--animation-duration', '0s');
    }
  };

  // Apply on load
  React.useEffect(() => {
    applyTweaks(tweaks);
  }, []);

  const accentOptions = [
    { name: 'Gold', color: '#C9A84C' },
    { name: 'Rose', color: '#E8886B' },
    { name: 'Cyan', color: '#4FC3F7' },
    { name: 'Purple', color: '#A78BFA' },
    { name: 'Teal', color: '#2DD4BF' },
    { name: 'Orange', color: '#F97316' },
  ];

  const dataColorOptions = [
    { name: 'Stark Blue', color: '#4FC3F7' },
    { name: 'Electric', color: '#00D9FF' },
    { name: 'Violet', color: '#A78BFA' },
    { name: 'Emerald', color: '#10B981' },
    { name: 'Sky', color: '#0EA5E9' },
  ];

  const s = {
    panel: {
      position: 'fixed', bottom: 20, right: 20,
      width: 320, maxHeight: '80vh',
      background: 'rgba(10,10,10,0.95)',
      border: '1px solid rgba(201,168,76,0.2)',
      borderRadius: 10,
      backdropFilter: 'blur(20px)',
      display: isOpen ? 'flex' : 'none',
      flexDirection: 'column',
      zIndex: 9999,
      boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,168,76,0.1)',
      animation: isOpen ? 'slideInUp 0.3s ease-out' : 'none',
    },
    header: {
      padding: '16px 20px',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    },
    title: {
      fontFamily: "'JetBrains Mono'", fontSize: 12, fontWeight: 600,
      letterSpacing: '0.15em', color: '#C9A84C', textTransform: 'uppercase',
    },
    closeBtn: {
      background: 'none', border: 'none', color: '#666', fontSize: 18,
      cursor: 'pointer', padding: 4,
    },
    content: {
      flex: 1, overflowY: 'auto', padding: '16px 20px',
    },
    section: {
      marginBottom: 24,
    },
    label: {
      fontFamily: "'JetBrains Mono'", fontSize: 9, letterSpacing: '0.2em',
      color: '#999', textTransform: 'uppercase', marginBottom: 8, display: 'block',
    },
    colorGrid: {
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
    },
    colorSwatch: (color, isActive) => ({
      width: '100%', aspectRatio: '1',
      background: color,
      border: `2px solid ${isActive ? color : 'rgba(255,255,255,0.1)'}`,
      borderRadius: 6, cursor: 'pointer',
      boxShadow: isActive ? `0 0 12px ${color}80` : 'none',
      transition: 'all 0.2s',
    }),
    slider: {
      width: '100%', height: 4,
      borderRadius: 2, cursor: 'pointer',
      accentColor: '#C9A84C',
    },
    checkbox: {
      display: 'flex', alignItems: 'center', gap: 10,
    },
    checkInput: {
      width: 16, height: 16, cursor: 'pointer', accentColor: '#C9A84C',
    },
    checkLabel: {
      fontFamily: "'Inter'", fontSize: 11, color: '#E2E2E2', cursor: 'pointer',
    },
    resetBtn: {
      width: '100%', padding: '10px 14px',
      background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: 5, fontFamily: "'JetBrains Mono'", fontSize: 9,
      color: '#999', letterSpacing: '0.1em', cursor: 'pointer',
      transition: 'all 0.2s',
    },
  };

  const reset = () => {
    const defaults = {
      accentColor: '#C9A84C',
      accentName: 'Gold',
      dataColor: '#4FC3F7',
      bgDarkness: 0.98,
      borderOpacity: 0.07,
      cardOpacity: 0.025,
      sidebarCollapsed: false,
      fontScale: 1,
      animationsEnabled: true,
    };
    setTweaks(defaults);
    localStorage.setItem('cipher-tweaks', JSON.stringify(defaults));
    applyTweaks(defaults);
  };

  return (
    <div style={s.panel}>
      <div style={s.header}>
        <span style={s.title}>Tweaks</span>
        <button style={s.closeBtn} onClick={() => {
          setIsOpen(false);
          window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
        }}>✕</button>
      </div>
      
      <div style={s.content}>
        {/* Accent Color */}
        <div style={s.section}>
          <label style={s.label}>Accent Color</label>
          <div style={s.colorGrid}>
            {accentOptions.map(opt => (
              <button key={opt.color} style={s.colorSwatch(opt.color, tweaks.accentColor === opt.color)}
                onClick={() => { updateTweak('accentColor', opt.color); updateTweak('accentName', opt.name); }}
                title={opt.name}/>
            ))}
          </div>
          <div style={{ fontSize: 10, color: '#666', marginTop: 8, textAlign: 'center' }}>
            {tweaks.accentName}
          </div>
        </div>

        {/* Data Color */}
        <div style={s.section}>
          <label style={s.label}>Data Visualization Color</label>
          <div style={s.colorGrid}>
            {dataColorOptions.map(opt => (
              <button key={opt.color} style={s.colorSwatch(opt.color, tweaks.dataColor === opt.color)}
                onClick={() => updateTweak('dataColor', opt.color)}
                title={opt.name}/>
            ))}
          </div>
        </div>

        {/* Background Darkness */}
        <div style={s.section}>
          <label style={s.label}>Background Darkness</label>
          <input type="range" min="0.85" max="1" step="0.01" value={tweaks.bgDarkness}
            onChange={e => updateTweak('bgDarkness', parseFloat(e.target.value))}
            style={s.slider}/>
          <div style={{ fontSize: 9, color: '#666', marginTop: 6, textAlign: 'center' }}>
            {Math.round(tweaks.bgDarkness * 100)}% Dark
          </div>
        </div>

        {/* Border Opacity */}
        <div style={s.section}>
          <label style={s.label}>Border Visibility</label>
          <input type="range" min="0.02" max="0.15" step="0.01" value={tweaks.borderOpacity}
            onChange={e => updateTweak('borderOpacity', parseFloat(e.target.value))}
            style={s.slider}/>
          <div style={{ fontSize: 9, color: '#666', marginTop: 6, textAlign: 'center' }}>
            {Math.round(tweaks.borderOpacity * 100)}%
          </div>
        </div>

        {/* Card Opacity */}
        <div style={s.section}>
          <label style={s.label}>Card Transparency</label>
          <input type="range" min="0.01" max="0.08" step="0.005" value={tweaks.cardOpacity}
            onChange={e => updateTweak('cardOpacity', parseFloat(e.target.value))}
            style={s.slider}/>
          <div style={{ fontSize: 9, color: '#666', marginTop: 6, textAlign: 'center' }}>
            {Math.round(tweaks.cardOpacity * 100)}%
          </div>
        </div>

        {/* Font Scale */}
        <div style={s.section}>
          <label style={s.label}>Font Scale</label>
          <input type="range" min="0.8" max="1.3" step="0.05" value={tweaks.fontScale}
            onChange={e => updateTweak('fontScale', parseFloat(e.target.value))}
            style={s.slider}/>
          <div style={{ fontSize: 9, color: '#666', marginTop: 6, textAlign: 'center' }}>
            {Math.round(tweaks.fontScale * 100)}%
          </div>
        </div>

        {/* Animations */}
        <div style={s.section}>
          <label style={s.checkbox}>
            <input type="checkbox" style={s.checkInput} checked={tweaks.animationsEnabled}
              onChange={e => updateTweak('animationsEnabled', e.target.checked)}/>
            <span style={s.checkLabel}>Enable Animations</span>
          </label>
        </div>

        {/* Reset */}
        <button style={s.resetBtn} onClick={reset}
          onMouseEnter={e => { e.currentTarget.style.background='rgba(255,255,255,0.1)'; e.currentTarget.style.color='#C9A84C'; }}
          onMouseLeave={e => { e.currentTarget.style.background='rgba(255,255,255,0.06)'; e.currentTarget.style.color='#999'; }}>
          Reset to Defaults
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { TweaksUI });