import { Section, Row, SubHeading, Toggle, Segmented, ZoomSlider, type PrefsLike } from '../_ui'
import Select from '../../../components/ui/Select'

const PRESET_COLORS = [
  '#F5B642',
  '#6BA3FF',
  '#4ADE80',
  '#FB7185',
  '#A78BFA',
  '#F472B6',
  '#22D3EE',
  '#FB923C',
]

function isHexColor(v: string): boolean {
  return /^#[0-9A-Fa-f]{6}$/.test(v)
}

export function DisplaySection({ prefs }: { prefs: PrefsLike }) {
  return (
    <Section id="display" title="Display" description="Appearance, motion, and layout">
      <SubHeading label="Theme & layout" />
      <Row label="Theme" hint="Light theme coming soon">
        <span className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md bg-void/60 border border-border text-[11.5px] text-text-2 font-medium">
          Dark
        </span>
      </Row>
      <Row label="Accent color" hint="Pick a custom accent for buttons, highlights, and focus rings">
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1.5">
            {PRESET_COLORS.map(c => (
              <button
                key={c}
                type="button"
                onClick={() => prefs.setPreference('accentColor', c)}
                className={`w-6 h-6 rounded-full ring-2 transition-all focus-ring ${
                  prefs.accentColor === c
                    ? 'ring-white scale-110'
                    : 'ring-transparent hover:ring-white/30'
                }`}
                style={{ backgroundColor: c }}
                aria-label={`Set accent color ${c}`}
              />
            ))}
          </div>
          <div className="flex items-center gap-1.5">
            <input
              type="color"
              value={isHexColor(prefs.accentColor || '') ? prefs.accentColor : '#F5B642'}
              onChange={e => prefs.setPreference('accentColor', e.target.value)}
              className="w-7 h-7 p-0 border-0 rounded-full overflow-hidden cursor-pointer focus-ring"
              aria-label="Custom accent color"
            />
            <input
              type="text"
              value={prefs.accentColor || ''}
              onChange={e => {
                const v = e.target.value.trim()
                if (!v || isHexColor(v)) prefs.setPreference('accentColor', v || '#F5B642')
              }}
              placeholder="#F5B642"
              className="w-20 h-7 px-2 rounded-md bg-elevated/40 border border-border text-[11.5px] text-text-1 font-mono tracking-tight focus:outline-none focus:border-accent/60"
              aria-label="Custom hex color"
            />
          </div>
        </div>
      </Row>
      <Row label="Density" hint="How tightly content packs in lists and grids">
        <Segmented
          value={prefs.density}
          onChange={v => prefs.setPreference('density', v)}
          options={[
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'compact', label: 'Compact' },
          ]}
        />
      </Row>
      <Row label="Interface zoom" hint="Scale the entire UI. Applies when you release the slider.">
        <ZoomSlider value={prefs.uiZoom} onCommit={v => prefs.setPreference('uiZoom', v)} />
      </Row>
      <Row label="Reduce motion" hint="Disable big animations like Ken Burns and parallax">
        <Toggle value={prefs.reduceMotion} onChange={v => prefs.setPreference('reduceMotion', v)} />
      </Row>

      <SubHeading label="Card chrome" />
      <Row label="Tech badges" hint="4K / HDR / Atmos chips on poster cards">
        <Toggle value={prefs.showTechBadges} onChange={v => prefs.setPreference('showTechBadges', v)} />
      </Row>
      <Row label="TMDB ratings" hint="Show TMDB community score on items">
        <Toggle value={prefs.showTmdbRatings} onChange={v => prefs.setPreference('showTmdbRatings', v)} />
      </Row>
      <Row label="Blur unwatched thumbnails" hint="Hide spoilers in episode lists by blurring stills and overviews until watched">
        <Toggle value={prefs.episode.show.spoilerBlur} onChange={v => prefs.setEpisodeShow('spoilerBlur', v)} />
      </Row>

      <SubHeading label="Featured carousel" />
      <Row label="Auto-cycle hero" hint="Auto-rotate the home page featured carousel">
        <Toggle value={prefs.heroAutoAdvance} onChange={v => prefs.setPreference('heroAutoAdvance', v)} />
      </Row>
      <Row label="Carousel speed" hint="How fast slides advance when auto-cycling">
        <Select
          value={String(prefs.heroAutoAdvanceMs)}
          onChange={v => prefs.setPreference('heroAutoAdvanceMs', parseInt(v, 10))}
          width="min-w-[120px]"
          disabled={!prefs.heroAutoAdvance}
          options={[
            { value: '6000', label: 'Fast (6s)' },
            { value: '9000', label: 'Normal (9s)' },
            { value: '14000', label: 'Slow (14s)' },
          ]}
          ariaLabel="Carousel speed"
        />
      </Row>
    </Section>
  )
}
