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

export function PlaybackSection({ prefs }: { prefs: PrefsLike }) {
  return (
    <Section id="playback" title="Playback" description="How videos start, stream, and continue">
      <SubHeading label="Auto-advance & skipping" />
      <Row label="Auto-play next episode" hint="Roll into the next episode when one ends">
        <Toggle value={prefs.autoplayNext} onChange={v => prefs.setPreference('autoplayNext', v)} />
      </Row>
      <Row label="Skip intros" hint="Jump past intro markers automatically">
        <Toggle value={prefs.skipIntros} onChange={v => prefs.setPreference('skipIntros', v)} />
      </Row>
      <Row label="Skip credits" hint="Jump past end-credits markers automatically">
        <Toggle value={prefs.skipCredits} onChange={v => prefs.setPreference('skipCredits', v)} />
      </Row>

      <SubHeading label="Resume & recap" />
      <Row label="Resume threshold" hint="Show 'Resume' only after this much watched">
        <Select
          value={String(prefs.resumeThresholdSec)}
          onChange={v => prefs.setPreference('resumeThresholdSec', parseInt(v, 10))}
          width="min-w-[120px]"
          options={[
            { value: '5', label: '5 seconds' },
            { value: '15', label: '15 seconds' },
            { value: '30', label: '30 seconds' },
            { value: '60', label: '1 minute' },
            { value: '300', label: '5 minutes' },
          ]}
          ariaLabel="Resume threshold"
        />
      </Row>
      <Row label="Ask before resuming" hint="Show a 'Resume / Start over' prompt instead of silently jumping to position">
        <Toggle value={prefs.showResumePrompt} onChange={v => prefs.setPreference('showResumePrompt', v)} />
      </Row>
      <Row label="End-of-video card" hint="Show Replay / Episodes / Back when a video ends with no auto-advance">
        <Toggle value={prefs.endOfVideoCard} onChange={v => prefs.setPreference('endOfVideoCard', v)} />
      </Row>
      <Row label="Pre-roll trailers" hint="Play a trailer before starting a movie, when one is available">
        <Toggle value={prefs.preRollTrailers} onChange={v => prefs.setPreference('preRollTrailers', v)} />
      </Row>
      <Row label="'Previously on' recap" hint="Surface a recap card before playback if it has been a while since the last episode of a series">
        <Toggle value={prefs.episode.recap.card} onChange={v => prefs.setEpisodeRecap('card', v)} />
      </Row>
      <Row label="Recap gap" hint="How long since the last watch in this series before showing the recap card">
        <Select
          value={String(prefs.episode.recap.gapDays)}
          onChange={v => prefs.setEpisodeRecap('gapDays', parseInt(v, 10))}
          width="min-w-[140px]"
          options={[
            { value: '3', label: '3 days' },
            { value: '7', label: '1 week' },
            { value: '14', label: '2 weeks' },
            { value: '30', label: '1 month' },
            { value: '90', label: '3 months' },
          ]}
          ariaLabel="Recap gap days"
        />
      </Row>

      <SubHeading label="Timer & prompts" />
      <Row label="Sleep timer" hint="Stop playback after a set time (0 = off)"
        data-settings-row
      >
        <Select
          value={String(prefs.sleepTimerMinutes)}
          onChange={v => prefs.setPreference('sleepTimerMinutes', parseInt(v, 10))}
          width="min-w-[120px]"
          options={[
            { value: '0', label: 'Off' },
            { value: '15', label: '15 min' },
            { value: '30', label: '30 min' },
            { value: '45', label: '45 min' },
            { value: '60', label: '1 hour' },
            { value: '90', label: '1.5 hours' },
            { value: '120', label: '2 hours' },
          ]}
          ariaLabel="Sleep timer"
        />
      </Row>
      <Row label="Are you still watching?" hint="Pause auto-advance after 3 consecutive episodes"
        data-settings-row
      >
        <Toggle value={prefs.areYouStillWatching} onChange={v => prefs.setPreference('areYouStillWatching', v)} />
      </Row>

      <SubHeading label="Speed & focus" />
      <Row label="Pause on blur" hint="Auto-pause when the window loses focus">
        <Toggle value={prefs.pauseOnBlur} onChange={v => prefs.setPreference('pauseOnBlur', v)} />
      </Row>
      <Row label="Default speed" hint="Used when a new playback session starts">
        <Segmented
          value={String(prefs.defaultPlaybackRate)}
          onChange={v => prefs.setPreference('defaultPlaybackRate', Number(v))}
          options={[
            { value: '0.75', label: '0.75x' },
            { value: '1', label: '1x' },
            { value: '1.25', label: '1.25x' },
            { value: '1.5', label: '1.5x' },
            { value: '2', label: '2x' },
          ]}
        />
      </Row>
      <Row label="Preserve audio pitch at speed" hint="Keep voices natural-sounding when playing faster or slower">
        <Toggle value={prefs.preserveAudioPitch} onChange={v => prefs.setPreference('preserveAudioPitch', v)} />
      </Row>
    </Section>
  )
}
