import React from 'react'
import { getThemePreference, setTheme } from '../../lib/theme'
import type { ThemePreference } from '../../lib/theme'
import { getDensityPreference, setDensity } from '../../lib/density'
import type { DensityPreference } from '../../lib/density'
import { getToolCallsPreference, setToolCalls } from '../../lib/toolCalls'
import type { ToolCallsPreference } from '../../lib/toolCalls'

export function DisplaySection(): React.JSX.Element {
  const [theme, setThemeState] = React.useState<ThemePreference>(getThemePreference)
  const [density, setDensityState] = React.useState<DensityPreference>(getDensityPreference)
  const [toolCalls, setToolCallsState] = React.useState<ToolCallsPreference>(
    getToolCallsPreference,
  )

  function handleThemeChange(value: ThemePreference) {
    setThemeState(value)
    setTheme(value === 'system' ? null : value)
  }

  function handleDensityChange(value: DensityPreference | null) {
    const next = value ?? 'cozy'
    setDensityState(next)
    setDensity(value)
  }

  function handleToolCallsChange(value: ToolCallsPreference | null) {
    const next = value ?? 'yes'
    setToolCallsState(next)
    setToolCalls(value)
  }

  return (
    <div className="display-section">
      <fieldset>
        <legend>Theme</legend>
        <label>
          <input
            type="radio"
            name="theme"
            value="system"
            checked={theme === 'system'}
            onChange={() => handleThemeChange('system')}
          />
          System
        </label>
        <label>
          <input
            type="radio"
            name="theme"
            value="light"
            checked={theme === 'light'}
            onChange={() => handleThemeChange('light')}
          />
          Light
        </label>
        <label>
          <input
            type="radio"
            name="theme"
            value="dark"
            checked={theme === 'dark'}
            onChange={() => handleThemeChange('dark')}
          />
          Dark
        </label>
        <div className="display-help">
          Follows your OS appearance setting when System is selected.
        </div>
      </fieldset>

      <fieldset>
        <legend>Row density</legend>
        <label>
          <input
            type="radio"
            name="density"
            value="cozy"
            checked={density === 'cozy'}
            onChange={() => handleDensityChange('cozy')}
          />
          Cozy
        </label>
        <label>
          <input
            type="radio"
            name="density"
            value="compact"
            checked={density === 'compact'}
            onChange={() => handleDensityChange('compact')}
          />
          Compact
        </label>
        <div className="display-help">
          Controls vertical spacing in session lists and project tables.
        </div>
      </fieldset>

      <fieldset>
        <legend>Tool calls</legend>
        <label>
          <input
            type="radio"
            name="toolCalls"
            value="yes"
            checked={toolCalls === 'yes'}
            onChange={() => handleToolCallsChange('yes')}
          />
          Show
        </label>
        <label>
          <input
            type="radio"
            name="toolCalls"
            value="no"
            checked={toolCalls === 'no'}
            onChange={() => handleToolCallsChange('no')}
          />
          Hide
        </label>
        <div className="display-help">
          Tool-call turns are hidden with CSS; they remain in the DOM for
          anchor-target and selection stability.
        </div>
      </fieldset>
    </div>
  )
}