import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { FormField, Switch } from '@/components/form';
import { Screen } from '@/components/ui/Screen';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { typography } from '@/theme/typography';

export default function SwitchDemoScreen() {
  const [pushEnabled, setPushEnabled] = useState(true);
  const [weeklyDigestEnabled, setWeeklyDigestEnabled] = useState(false);

  return (
    <Screen contentContainerStyle={styles.content}>
      <View style={styles.header}>
        <Text style={styles.kicker}>DESIGN SYSTEM · SWITCH</Text>
        <Text style={styles.title}>Demos du composant Switch</Text>
      </View>

      <FormField
        label="Notifications push"
        helper="Switch custom basé sur Expo/React Native"
      >
        <View style={styles.switchRow}>
          <View style={styles.switchLabelWrap}>
            <Text style={styles.switchLabel}>Activer les alertes de nouveaux événements</Text>
            <Text style={styles.switchHint}>
              {pushEnabled ? 'Activé' : 'Désactivé'}
            </Text>
          </View>
          <Switch
            accessibilityLabel="Activer les notifications push"
            value={pushEnabled}
            onValueChange={setPushEnabled}
          />
        </View>
      </FormField>

      <FormField
        label="Digest hebdo"
        helper="Exemple de taille large"
      >
        <View style={styles.switchRow}>
          <View style={styles.switchLabelWrap}>
            <Text style={styles.switchLabel}>Recevoir un recap chaque lundi</Text>
            <Text style={styles.switchHint}>
              {weeklyDigestEnabled ? 'Activé' : 'Désactivé'}
            </Text>
          </View>
          <Switch
            accessibilityLabel="Activer le digest hebdomadaire"
            value={weeklyDigestEnabled}
            onValueChange={setWeeklyDigestEnabled}
            size="lg"
          />
        </View>
      </FormField>

      <FormField label="Etat desactive" helper="Le switch est non interactif">
        <View style={styles.switchRow}>
          <View style={styles.switchLabelWrap}>
            <Text style={styles.switchLabel}>Mode maintenance</Text>
            <Text style={styles.switchHint}>Indisponible</Text>
          </View>
          <Switch
            accessibilityLabel="Switch desactive"
            value
            disabled
          />
        </View>
      </FormField>
    </Screen>
  );
}

const styles = StyleSheet.create({
  content: {
    gap: spacing[16],
    paddingTop: spacing[24],
  },
  header: {
    gap: spacing[8],
    marginBottom: spacing[8],
  },
  kicker: {
    ...typography.sectionLabel,
    color: colors.textSecondary,
  },
  title: {
    ...typography.body,
    color: colors.textPrimary,
  },
  switchRow: {
    minHeight: 56,
    borderWidth: 1,
    borderColor: colors.inputBorder,
    borderRadius: 14,
    backgroundColor: colors.inputBackground,
    paddingHorizontal: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: spacing[12],
  },
  switchLabelWrap: {
    flex: 1,
    gap: 2,
  },
  switchLabel: {
    ...typography.body,
    color: colors.textPrimary,
  },
  switchHint: {
    ...typography.caption,
    color: colors.textSecondary,
  },
});