/* Tweaks panel — theme, accent, density */

function TweaksPanel({ tweaks, setTweak, onClose, initialTab = 'appearance' }) {
  const [tab, setTab] = React.useState(initialTab);
  React.useEffect(() => setTab(initialTab), [initialTab]);

  const tabs = [
    ['appearance', 'Appearance', '🎨'],
    ['my-work',    'My Work',    '◉'],
    ['tasks',      'Tasks',      '☰'],
    ['workspace',  'Workspace',  '◐'],
  ];

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0,
      background: 'rgba(15,23,42,0.4)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
      zIndex: 200,
    }}>
      <div onClick={e => e.stopPropagation()} className="slide-in-r" style={{
        width: 360, height: '100vh',
        background: 'rgb(var(--surface))',
        borderLeft: '1px solid rgb(var(--rule))',
        display: 'flex', flexDirection: 'column',
        boxShadow: 'var(--sh-pop)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', padding: '14px 18px', borderBottom: '1px solid rgb(var(--rule))' }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Tweaks</h3>
            <p style={{ margin: '2px 0 0', fontSize: 12, color: 'rgb(var(--muted))' }}>Personalise per-section</p>
          </div>
          <span style={{ flex: 1 }} />
          <button onClick={onClose} style={{ fontSize: 20, color: 'rgb(var(--muted))', padding: 4, lineHeight: 1, borderRadius: 6 }}>×</button>
        </div>

        {/* Tab strip */}
        <div style={{ padding: '10px 14px 8px', borderBottom: '1px solid rgb(var(--rule))' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2, padding: 3, background: 'rgb(var(--paper-2))', borderRadius: 8 }}>
            {tabs.map(([k, lbl, glyph]) => (
              <button key={k} onClick={() => setTab(k)} title={lbl} style={{
                padding: '6px 4px', fontSize: 10.5, fontWeight: 700,
                background: tab === k ? 'rgb(var(--surface))' : 'transparent',
                color: tab === k ? 'rgb(var(--ink))' : 'rgb(var(--muted))',
                borderRadius: 6, boxShadow: tab === k ? 'var(--sh-sm)' : 'none',
                display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              }}>
                <span style={{ fontSize: 13, color: tab === k ? 'rgb(var(--accent))' : 'rgb(var(--muted))' }}>{glyph}</span>
                {lbl}
              </button>
            ))}
          </div>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '18px' }}>
          {tab === 'appearance' && (
            <>
              <Section label="Theme">
                <SegControl value={tweaks.theme} onChange={v => setTweak('theme', v)}
                  options={[['light', '☀ Light'], ['dark',  '☾ Dark'], ['auto',  '◑ Auto']]} />
              </Section>
              <Section label="Accent colour">
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
                  {[['indigo','#6366F1'],['emerald','#10B981'],['coral','#F97316'],['violet','#8B5CF6'],['rose','#F43F5E']].map(([key, c]) => (
                    <button key={key} onClick={() => setTweak('accent', key)} style={{
                      height: 40, borderRadius: 10, background: c,
                      border: '2px solid ' + (tweaks.accent === key ? 'rgb(var(--ink))' : 'transparent'),
                      boxShadow: tweaks.accent === key ? '0 0 0 2px rgb(var(--surface)) inset' : 'none',
                      position: 'relative',
                    }}>
                      {tweaks.accent === key && <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 16 }}>✓</span>}
                    </button>
                  ))}
                </div>
              </Section>
              <Section label="Density">
                <SegControl value={tweaks.density} onChange={v => setTweak('density', v)}
                  options={[['compact','Compact'],['cozy','Cozy'],['spacious','Spacious']]} />
              </Section>
              <Section label="Animations">
                <Toggle checked={tweaks.animations} onChange={v => setTweak('animations', v)} label="Smooth transitions" />
              </Section>
            </>
          )}

          {tab === 'my-work' && (
            <>
              <Section label="My Day">
                <Toggle checked={tweaks.compactMyDay} onChange={v => setTweak('compactMyDay', v)} label="Compact My Day hero" />
                <Toggle checked={tweaks.showPulse} onChange={v => setTweak('showPulse', v)} label="Show pulse card" />
              </Section>
              <Section label="Landing view">
                <SegControl value={tweaks.landingView || 'my-work'} onChange={v => setTweak('landingView', v)}
                  options={[['my-work','My Work'],['my-day','My Day'],['views','Hub']]} />
              </Section>
            </>
          )}

          {tab === 'tasks' && (
            <>
              <Section label="Default view">
                <SegControl value={tweaks.defaultViewMode} onChange={v => setTweak('defaultViewMode', v)}
                  options={[['list','List'],['board','Board'],['calendar','Calendar'],['timeline','Timeline']]} />
              </Section>
              <Section label="Compact mode">
                <Toggle checked={!!tweaks.compactCards} onChange={v => setTweak('compactCards', v)} label="Super-compact rows & cards" />
                <p style={{ margin: '4px 0 0 2px', fontSize: 11.5, color: 'rgb(var(--muted))', lineHeight: 1.55 }}>
                  Show only title + priority + status. Hover anything for the full tooltip.
                </p>
              </Section>
              <Section label="Default grouping">
                <SegControl value={tweaks.defaultGroupBy || 'status'} onChange={v => setTweak('defaultGroupBy', v)}
                  options={[['status','Status'],['space','Space'],['priority','Priority'],['none','None']]} />
              </Section>
            </>
          )}

          {tab === 'workspace' && (
            <>
              <Section label="Sidebar">
                <Toggle checked={tweaks.showPulseSidebar !== false} onChange={v => setTweak('showPulseSidebar', v)} label="Show Today's Pulse" />
                <Toggle checked={tweaks.showTagsSidebar !== false} onChange={v => setTweak('showTagsSidebar', v)} label="Show tags" />
                <Toggle checked={tweaks.showSavedViews !== false} onChange={v => setTweak('showSavedViews', v)} label="Show saved views" />
              </Section>
              <Section label="Workspace overview">
                <Toggle checked={tweaks.showSpacesGrid !== false} onChange={v => setTweak('showSpacesGrid', v)} label="Show spaces grid" />
                <Toggle checked={tweaks.showStatusDonut !== false} onChange={v => setTweak('showStatusDonut', v)} label="Show status donut" />
              </Section>
            </>
          )}

          <div style={{
            marginTop: 14, padding: 14,
            background: 'rgb(var(--accent-soft) / 0.5)',
            borderRadius: 10,
            fontSize: 12, color: 'rgb(var(--ink-2))', lineHeight: 1.55,
          }}>
            <strong style={{ display: 'block', marginBottom: 4 }}>Tip</strong>
            Press <kbd style={kbdStyle}>?</kbd> for keyboard shortcuts. Press <kbd style={kbdStyle}>⌘K</kbd> to jump anywhere.
          </div>
        </div>
      </div>
    </div>
  );
}

const kbdStyle = {
  fontFamily: 'JetBrains Mono, monospace',
  fontSize: 11, padding: '1px 6px',
  background: 'rgb(var(--surface))',
  border: '1px solid rgb(var(--rule))',
  borderRadius: 4,
};

function Section({ label, children }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <p style={{
        margin: '0 0 10px',
        fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'rgb(var(--muted))',
      }}>{label}</p>
      {children}
    </div>
  );
}

function SegControl({ value, onChange, options }) {
  return (
    <div style={{
      display: 'flex', gap: 2, padding: 3,
      background: 'rgb(var(--paper-2))', borderRadius: 10,
    }}>
      {options.map(([k, lbl]) => (
        <button key={k} onClick={() => onChange(k)}
          style={{
            flex: 1, padding: '6px 10px',
            fontSize: 12, fontWeight: 600,
            background: value === k ? 'rgb(var(--surface))' : 'transparent',
            color: value === k ? 'rgb(var(--ink))' : 'rgb(var(--muted))',
            borderRadius: 7,
            boxShadow: value === k ? 'var(--sh-sm)' : 'none',
            transition: 'all .14s',
          }}>{lbl}</button>
      ))}
    </div>
  );
}

function Toggle({ checked, onChange, label }) {
  return (
    <label style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 0', cursor: 'pointer',
    }}>
      <span style={{
        position: 'relative', width: 32, height: 18,
        background: checked ? 'rgb(var(--accent))' : 'rgb(var(--rule-2))',
        borderRadius: 999,
        transition: 'background .15s',
      }}>
        <span style={{
          position: 'absolute', top: 2, left: checked ? 16 : 2,
          width: 14, height: 14, borderRadius: '50%',
          background: 'white',
          transition: 'left .15s',
          boxShadow: '0 1px 2px rgba(0,0,0,0.18)',
        }} />
      </span>
      <span style={{ fontSize: 13, flex: 1, color: 'rgb(var(--ink-2))' }}>{label}</span>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }} />
    </label>
  );
}

window.TweaksPanel = TweaksPanel;