import { ScrollView, StyleSheet, Pressable, View } from 'react-native';

import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { MaxContentWidth, Spacing } from '@/constants/theme';
import { useTheme } from '@/hooks/use-theme';
import { listModels } from '@/lib/models/catalog';
import { useTranscribe } from '@/stores/transcribeStore';

export default function SettingsScreen() {
  const theme = useTheme();
  const modelId = useTranscribe((s) => s.modelId);
  const setModel = useTranscribe((s) => s.setModel);
  const models = listModels();

  return (
    <ThemedView style={styles.fill}>
      <ScrollView contentContainerStyle={styles.content}>
        <ThemedText type="subtitle">Model</ThemedText>
        <ThemedText type="small" themeColor="textSecondary">
          Smaller models are faster and run well on any CPU; larger ones are more accurate but want a GPU.
          The model downloads once, then works fully offline.
        </ThemedText>

        {models.map((m) => {
          const selected = m.id === modelId;
          return (
            <Pressable key={m.id} onPress={() => setModel(m.id)}>
              <ThemedView
                type={selected ? 'backgroundSelected' : 'backgroundElement'}
                style={[styles.card, selected && { borderColor: '#3c87f7', borderWidth: 1 }]}>
                <View style={styles.rowBetween}>
                  <ThemedText type="smallBold">{m.label}</ThemedText>
                  {selected && <ThemedText type="small" style={{ color: '#3c87f7' }}>✓ selected</ThemedText>}
                </View>
                <ThemedText type="small" themeColor="textSecondary">
                  {cap(m.tier)} · ~{m.approxMB} MB · {m.multilingual ? 'multilingual' : 'English-only'}
                </ThemedText>
              </ThemedView>
            </Pressable>
          );
        })}

        <View style={styles.spacer} />
        <ThemedText type="subtitle">Privacy</ThemedText>
        <ThemedText type="small" themeColor="textSecondary">
          Wisp transcribes entirely on your device using OpenAI&apos;s Whisper model. Your audio is never
          uploaded to any server — there is no account, no per-minute fee, and it keeps working with the
          network off. The only download is the model file itself.
        </ThemedText>
      </ScrollView>
    </ThemedView>
  );
}

function cap(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

const styles = StyleSheet.create({
  fill: { flex: 1 },
  content: { padding: Spacing.three, gap: Spacing.two, maxWidth: MaxContentWidth, width: '100%', alignSelf: 'center' },
  card: { padding: Spacing.three, borderRadius: Spacing.three, gap: Spacing.one },
  rowBetween: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  spacer: { height: Spacing.three },
});