MeowSpool/mobile/app/(app)/(tabs)/config.tsx

import React from 'react';
import {
  View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert,
} from 'react-native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { usePresetStore } from '@store/presetStore';
import { isUserOwnedPreset } from '@domain/SpoolPreset';
import { colors, typography, spacing, radius } from '@shared/theme';

/**
 * Tela de Presets de Carretéis — M4-0
 */
export default function ConfigScreen(): React.ReactElement {
  const router = useRouter();
  const { systemPresets, userPresets, removePreset } = usePresetStore();

  function handleDelete(id: string, name: string): void {
    Alert.alert(
      'Excluir preset',
      `Deseja excluir o preset "${name}"?`,
      [
        { text: 'Cancelar', style: 'cancel' },
        { text: 'Excluir', style: 'destructive', onPress: () => removePreset(id) },
      ],
    );
  }

  return (
    <SafeAreaView style={styles.safe}>
      {/* Header */}
      <View style={styles.header}>
        <View>
          <Text style={styles.headerSub}>Configurações</Text>
          <Text style={styles.headerTitle}>Presets de Carretéis</Text>
        </View>
        <TouchableOpacity
          style={styles.addBtn}
          onPress={() => router.push('/(app)/config/presets/new' as never)}
        >
          <Ionicons name="add" size={24} color={colors.bgBase} />
        </TouchableOpacity>
      </View>

      <ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
        {/* Presets do Sistema */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionLabel}>PRESETS DO SISTEMA</Text>
            <View style={styles.readonlyBadge}>
              <Text style={styles.readonlyText}>Somente leitura</Text>
            </View>
          </View>
          {systemPresets.map((preset) => (
            <View key={preset.id} style={styles.presetRow}>
              <View style={styles.presetIcon}>
                <Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
              </View>
              <View style={styles.presetInfo}>
                <Text style={styles.presetName}>{preset.name}</Text>
                <Text style={styles.presetSub}>
                  {/* type field not in SpoolPreset domain yet — show dash */}
                  Carretel · {preset.spoolWeightG}g
                </Text>
              </View>
              <View style={styles.weightBadge}>
                <Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
              </View>
            </View>
          ))}
        </View>

        {/* Meus Presets */}
        {userPresets.length > 0 && (
          <View style={styles.section}>
            <Text style={styles.sectionLabel}>MEUS PRESETS</Text>
            {userPresets.map((preset) => (
              <View key={preset.id} style={styles.presetRow}>
                <View style={styles.presetIcon}>
                  <Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
                </View>
                <View style={styles.presetInfo}>
                  <Text style={styles.presetName}>{preset.name}</Text>
                  <Text style={styles.presetSub}>Customizado · {preset.spoolWeightG}g</Text>
                </View>
                <View style={styles.userPresetActions}>
                  <View style={styles.weightBadge}>
                    <Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
                  </View>
                  {isUserOwnedPreset(preset) && (
                    <>
                      <TouchableOpacity
                        onPress={() => router.push(`/(app)/config/presets/${preset.id}/edit` as never)}
                      >
                        <Ionicons name="create-outline" size={20} color={colors.textSecondary} />
                      </TouchableOpacity>
                      <TouchableOpacity onPress={() => handleDelete(preset.id, preset.name)}>
                        <Ionicons name="trash-outline" size={20} color={colors.textSecondary} />
                      </TouchableOpacity>
                    </>
                  )}
                </View>
              </View>
            ))}
          </View>
        )}

        {userPresets.length === 0 && (
          <View style={styles.emptyUser}>
            <Text style={styles.emptyText}>Nenhum preset personalizado ainda.</Text>
            <TouchableOpacity onPress={() => router.push('/(app)/config/presets/new' as never)}>
              <Text style={styles.emptyLink}>+ Criar preset</Text>
            </TouchableOpacity>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bgBase },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: spacing[5],
    paddingTop: spacing[5],
    paddingBottom: spacing[4],
  },
  headerSub: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  headerTitle: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xl,
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  addBtn: {
    width: 44,
    height: 44,
    borderRadius: radius.lg,
    backgroundColor: colors.accent,
    alignItems: 'center',
    justifyContent: 'center',
  },
  scroll: { flex: 1, paddingHorizontal: spacing[5] },
  section: { marginBottom: spacing[6] },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing[3],
    marginBottom: spacing[3],
  },
  sectionLabel: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xs,
    fontWeight: typography.fontWeight.bold,
    color: colors.textSecondary,
    letterSpacing: 0.8,
    textTransform: 'uppercase',
  },
  readonlyBadge: {
    backgroundColor: colors.accentMuted,
    paddingHorizontal: spacing[3],
    paddingVertical: 3,
    borderRadius: radius.full,
  },
  readonlyText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xs,
    color: colors.accent,
  },
  presetRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing[3],
    backgroundColor: colors.bgSurface,
    borderRadius: radius.lg,
    padding: spacing[4],
    marginBottom: spacing[2],
    borderWidth: 1,
    borderColor: colors.border,
  },
  presetIcon: {
    width: 40,
    height: 40,
    borderRadius: radius.md,
    backgroundColor: colors.bgHover,
    alignItems: 'center',
    justifyContent: 'center',
  },
  presetInfo: { flex: 1 },
  presetName: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    fontWeight: typography.fontWeight.medium,
    color: colors.textPrimary,
  },
  presetSub: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
    marginTop: 2,
  },
  weightBadge: {
    backgroundColor: colors.bgHover,
    paddingHorizontal: spacing[3],
    paddingVertical: 5,
    borderRadius: radius.sm,
  },
  weightBadgeText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    fontWeight: typography.fontWeight.medium,
    color: colors.textPrimary,
  },
  userPresetActions: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
  emptyUser: {
    alignItems: 'center',
    paddingVertical: spacing[8],
    gap: spacing[3],
  },
  emptyText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  emptyLink: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.accent,
  },
});