import { Field, Input, Switch, Card, Subtitle2, Caption1 } from '@fluentui/react-components'
import { DocumentRegular } from '@fluentui/react-icons'
import { useSettings } from '../../store/settings'
import { useSettingsStyles } from './settingsStyles'

export function FilenamesCard(): React.JSX.Element {
  const styles = useSettingsStyles()
  const filenameTemplate = useSettings((s) => s.filenameTemplate)
  const collectionOutputTemplate = useSettings((s) => s.collectionOutputTemplate)
  const restrictFilenames = useSettings((s) => s.restrictFilenames)
  const useDownloadArchive = useSettings((s) => s.useDownloadArchive)
  const update = useSettings((s) => s.update)

  return (
    <Card className={styles.card}>
      <div className={styles.sectionHeader}>
        <DocumentRegular className={styles.sectionIcon} />
        <Subtitle2 as="h3">Filenames</Subtitle2>
      </div>
      <Field
        label="Filename template"
        hint="Controls how saved files are named. Use %(title)s for the video title, %(ext)s for the extension, and similar tokens."
      >
        <Input
          value={filenameTemplate}
          onChange={(_, d) => update({ filenameTemplate: d.value })}
        />
      </Field>
      <Caption1 className={styles.hint}>
        Example: {filenameTemplate.replace('%(title)s', 'My Video').replace('%(ext)s', 'mp4')}
      </Caption1>

      <Field
        label="Collection folder layout"
        hint="How channel/playlist (Library) downloads are foldered. Leave blank for the default Channel / Playlist / Title. Power users: a raw yt-dlp -o template, e.g. %(uploader)s/%(playlist)s/%(playlist_index)s - %(title)s.%(ext)s"
      >
        <Input
          value={collectionOutputTemplate}
          placeholder="Channel / Playlist / NNN - Title (default)"
          onChange={(_, d) => update({ collectionOutputTemplate: d.value })}
        />
      </Field>

      <Field
        label="Restrict filenames"
        hint="Sanitize titles to plain ASCII letters/digits, no spaces -- safer for old filesystems and shells."
      >
        <Switch
          checked={restrictFilenames}
          onChange={(_, d) => update({ restrictFilenames: d.checked })}
        />
      </Field>

      <Field
        label="Skip already-downloaded videos"
        hint="Keeps a record of completed downloads (--download-archive) and skips them on repeat playlist/channel runs."
      >
        <Switch
          checked={useDownloadArchive}
          onChange={(_, d) => update({ useDownloadArchive: d.checked })}
        />
      </Field>
    </Card>
  )
}
