import { Globe } from '../../../lib/icons'
import { Section, Row, Toggle, Segmented, type PrefsLike } from '../_ui'
import Select, { type SelectOption } from '../../../components/ui/Select'
import { regionForUser, countryLabel } from '../../../lib/format'

const REGIONS = [
  'US', 'GB', 'CA', 'AU', 'NZ', 'IE',
  'DE', 'FR', 'ES', 'IT', 'NL', 'BE', 'CH', 'AT', 'PT', 'PL', 'SE', 'NO', 'DK', 'FI',
  'JP', 'KR', 'IN', 'SG', 'HK', 'TW',
  'BR', 'MX', 'AR', 'CL', 'CO',
  'ZA',
]

export function DiscoverySection({ prefs }: { prefs: PrefsLike }) {
  return (
    <Section id="discovery" title="Discovery" description="Region, content filters, and where you start">
      <Row label="Region" hint="Drives watch providers and content certifications">
        <Select
          value={prefs.region || regionForUser()}
          onChange={v => prefs.setPreference('region', v)}
          width="min-w-[180px]"
          triggerIcon={<Globe size={12} stroke={2} />}
          options={REGIONS.map<SelectOption<string>>(r => ({
            value: r,
            label: countryLabel(r) || r,
          }))}
          ariaLabel="Region"
        />
      </Row>
      <Row label="Hide adult content" hint="Filter explicit titles from discovery rows">
        <Toggle value={prefs.hideAdult} onChange={v => prefs.setPreference('hideAdult', v)} />
      </Row>
      <Row label="Default landing" hint="Where to go when you open the app">
        <Segmented
          value={prefs.defaultLanding}
          onChange={v => prefs.setPreference('defaultLanding', v)}
          options={[
            { value: 'home', label: 'Home' },
            { value: 'movies', label: 'Movies' },
            { value: 'shows', label: 'Shows' },
          ]}
        />
      </Row>
    </Section>
  )
}
