import { Database, RefreshCw } from '../../../lib/icons'
import { Section, Row, Toggle, DangerButton } from '../_ui'
import { usePreferencesStore } from '../../../stores/preferences-store'

export function PrivacySection() {
  const prefs = usePreferencesStore()
  return (
    <Section id="privacy" title="Privacy & Data" description="What's stored on this device and how to clear it">
      <Row label="Diagnostic logging" hint="Verbose console output for troubleshooting">
        <Toggle value={prefs.diagnosticLogging} onChange={v => prefs.setPreference('diagnosticLogging', v)} />
      </Row>
      <Row label="Push notifications" hint="Toast alerts when new movies or shows are added to the library">
        <Toggle value={prefs.pushNotifications} onChange={v => prefs.setPreference('pushNotifications', v)} />
      </Row>
      <Row label="Cached metadata" hint="Posters, backdrops, and TMDB responses">
        <DangerButton
          icon={Database}
          label="Clear cache"
          onConfirm={() => {
            try {
              for (const key of Object.keys(localStorage)) {
                if (key.startsWith('jf_cache_') || key.startsWith('rq_')) {
                  localStorage.removeItem(key)
                }
              }
            } catch { /* noop */ }
            window.location.reload()
          }}
        />
      </Row>
      <Row label="Reset preferences" hint="Restore everything on this page to defaults" danger>
        <DangerButton
          icon={RefreshCw}
          label="Reset"
          onConfirm={() => prefs.resetToDefaults()}
        />
      </Row>
    </Section>
  )
}
