// Tweaks panel — floating bottom-right
// Přepíná mezi 3 směry + uvnitř každého směru mezi variantami typografie.

function TweaksPanel({ tweaks, setTweak }) {
  const [open, setOpen] = React.useState(false);
  const [tab, setTab] = React.useState('direction');

  const directions = [
    { id: 'editorial', name: 'Editorial Journal', desc: 'knižní, sépiové tóny, serif' },
    { id: 'brutalism', name: 'Warm Brutalism', desc: 'monumentální typo, papír, odvážnost' },
    { id: 'quietlight', name: 'Quiet Light', desc: 'galerijní, minimum UI, světlo' },
  ];

  const typoMap = {
    editorial: [
      { id: 'default', name: 'Fraunces', desc: 'variabilní serif, teplý' },
      { id: 'newsreader', name: 'Newsreader', desc: 'knižní, jemnější' },
      { id: 'playfair', name: 'Playfair', desc: 'kontrastní, elegantní' },
      { id: 'instrument', name: 'Instrument', desc: 'klasický, vznešený' },
    ],
    brutalism: [
      { id: 'default', name: 'Fraunces + Inter', desc: 'teplý display + moderní sans' },
      { id: 'display', name: 'Playfair + Work Sans', desc: 'vysoký kontrast' },
      { id: 'instrument', name: 'Instrument + Inter', desc: 'klasika, vznešenější' },
      { id: 'sans', name: 'Work Sans only', desc: 'čistý sans, bez serifu' },
    ],
    quietlight: [
      { id: 'default', name: 'Fraunces + Inter', desc: 'teplý serif, lehkost' },
      { id: 'instrument', name: 'Instrument + Inter', desc: 'klasický, vzdušný' },
      { id: 'newsreader', name: 'Newsreader + Work Sans', desc: 'knižní, měkký' },
      { id: 'sans', name: 'Work Sans only', desc: 'minimalismus do konce' },
    ],
  };

  const currentTypos = typoMap[tweaks.direction] || typoMap.editorial;

  return (
    <>
      {/* FAB */}
      <button
        onClick={() => setOpen(!open)}
        style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 100,
          width: 56, height: 56, borderRadius: 28,
          background: '#1a1612', color: '#f5eedb',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
          transition: 'all .3s ease',
          transform: open ? 'scale(0.9)' : 'scale(1)',
        }}
        onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.05)'}
        onMouseLeave={e => e.currentTarget.style.transform = open ? 'scale(0.9)' : 'scale(1)'}
        aria-label="Tweaks"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <circle cx="12" cy="12" r="3"/>
          <path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"/>
        </svg>
      </button>

      {/* Panel */}
      {open && (
        <div style={{
          position: 'fixed', bottom: 96, right: 24, zIndex: 100,
          width: 380, maxHeight: '70vh', overflow: 'auto',
          background: '#ffffff', color: '#1a1612',
          borderRadius: 16,
          boxShadow: '0 24px 64px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1)',
          fontFamily: 'Inter, system-ui, sans-serif',
          animation: 'tweaks-in .3s cubic-bezier(.2,.8,.2,1) both',
        }}>
          <style>{`
            @keyframes tweaks-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
            .tw-opt { padding: 14px 16px; border-radius: 10px; cursor: pointer; transition: background .2s ease; border: 1px solid transparent; }
            .tw-opt:hover { background: #f5f2ed; }
            .tw-opt.active { background: #f7f2e9; border-color: #c9632a; }
            .tw-tab { padding: 10px 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; color: #8a8278; border-bottom: 2px solid transparent; transition: all .2s ease; }
            .tw-tab.active { color: #1a1612; border-color: #c9632a; }
          `}</style>

          <div style={{ padding: '18px 20px', borderBottom: '1px solid #efebe4', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Tweaks</div>
              <div style={{ fontSize: 11, color: '#8a8278', marginTop: 2 }}>Přepni směr a typografii</div>
            </div>
            <button onClick={() => setOpen(false)} style={{ fontSize: 20, color: '#8a8278', padding: 4 }}>×</button>
          </div>

          <div style={{ display: 'flex', gap: 24, padding: '0 20px', borderBottom: '1px solid #efebe4' }}>
            <div className={`tw-tab ${tab === 'direction' ? 'active' : ''}`} onClick={() => setTab('direction')}>Směr</div>
            <div className={`tw-tab ${tab === 'typo' ? 'active' : ''}`} onClick={() => setTab('typo')}>Typografie</div>
          </div>

          <div style={{ padding: 12 }}>
            {tab === 'direction' && directions.map(d => (
              <div key={d.id} className={`tw-opt ${tweaks.direction === d.id ? 'active' : ''}`} onClick={() => { setTweak('direction', d.id); setTweak('typographyVariant', 'default'); }}>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{d.name}</div>
                <div style={{ fontSize: 12, color: '#6b655c' }}>{d.desc}</div>
              </div>
            ))}
            {tab === 'typo' && currentTypos.map(t => (
              <div key={t.id} className={`tw-opt ${tweaks.typographyVariant === t.id ? 'active' : ''}`} onClick={() => setTweak('typographyVariant', t.id)}>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{t.name}</div>
                <div style={{ fontSize: 12, color: '#6b655c' }}>{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

window.TweaksPanel = TweaksPanel;