MeowSpool/mobile/app/(app)/config/presets/[id]/edit.tsx

import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet, Alert,
} from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { usePresetStore } from '@store/presetStore';
import { Input } from '@presentation/components/ui/Input';
import { Button } from '@presentation/components/ui/Button';
import { colors, typography, spacing, radius } from '@shared/theme';

const schema = z.object({
  name: z.string().min(1, 'Nome obrigatório'),
  spoolWeightG: z.coerce.number().min(1, 'Peso obrigatório'),
});

type FormData = z.infer<typeof schema>;

type SpoolType = 'Plástico' | 'Papelão' | 'Outro';

/**
 * Tela de Editar Preset — 1KD-0
 */
export default function EditPresetScreen(): React.ReactElement {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const { presets, updatePreset, removePreset } = usePresetStore();

  const preset = presets.find((p) => p.id === id);
  const [spoolType, setSpoolType] = useState<SpoolType>('Plástico');
  const [isLoading, setIsLoading] = useState(false);

  const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: preset?.name ?? '',
      spoolWeightG: preset?.spoolWeightG ?? undefined,
    },
  });

  if (!preset) {
    return (
      <SafeAreaView style={styles.safe}>
        <View style={styles.notFound}>
          <Text style={styles.notFoundText}>Preset não encontrado</Text>
          <TouchableOpacity onPress={() => router.back()}>
            <Text style={styles.backLink}>Voltar</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  function handleDelete(): void {
    Alert.alert(
      'Excluir preset',
      `Deseja excluir o preset "${preset!.name}"?`,
      [
        { text: 'Cancelar', style: 'cancel' },
        {
          text: 'Excluir',
          style: 'destructive',
          onPress: () => {
            removePreset(preset!.id);
            router.replace('/(app)/(tabs)/config' as never);
          },
        },
      ],
    );
  }

  async function onSubmit(data: FormData): Promise<void> {
    setIsLoading(true);
    try {
      // TODO: UpdatePresetUseCase via DI container
      updatePreset({
        ...preset!,
        name: data.name,
        spoolWeightG: Number(data.spoolWeightG),
      });
      router.back();
    } catch {
      Alert.alert('Erro', 'Não foi possível salvar as alterações.');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <SafeAreaView style={styles.safe}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()}>
          <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Editar Preset</Text>
        <TouchableOpacity onPress={handleDelete}>
          <Ionicons name="trash-outline" size={20} color={colors.textPrimary} />
        </TouchableOpacity>
      </View>

      <View style={styles.content}>
        {/* Ícone */}
        <View style={styles.iconContainer}>
          <View style={styles.iconBg}>
            <Ionicons name="disc-outline" size={48} color={colors.accent} />
          </View>
        </View>

        {/* Nome */}
        <Controller
          control={control}
          name="name"
          render={({ field }) => (
            <Input
              label="NOME DO PRESET"
              placeholder="Ex: Minha Marca Especial"
              error={errors.name?.message}
              onChangeText={field.onChange}
              value={field.value}
              leftIcon={<Ionicons name="create-outline" size={16} color={colors.textSecondary} />}
            />
          )}
        />

        {/* Peso */}
        <Controller
          control={control}
          name="spoolWeightG"
          render={({ field }) => (
            <Input
              label="PESO DO CARRETEL VAZIO"
              placeholder="Ex: 250"
              keyboardType="numeric"
              error={errors.spoolWeightG?.message}
              onChangeText={field.onChange}
              value={field.value?.toString() ?? ''}
              leftIcon={<Ionicons name="scale-outline" size={16} color={colors.textSecondary} />}
              rightLabel="g"
            />
          )}
        />
        <Text style={styles.hint}>
          Pese o carretel vazio em uma balança e insira o valor em gramas.
        </Text>

        {/* Tipo */}
        <View style={styles.typeRow}>
          <Text style={styles.typeLabel}>TIPO DE CARRETEL</Text>
          <Text style={styles.optional}>Opcional</Text>
        </View>
        <View style={styles.typeChips}>
          {(['Plástico', 'Papelão', 'Outro'] as SpoolType[]).map((t) => (
            <TouchableOpacity
              key={t}
              onPress={() => setSpoolType(t)}
              style={[styles.chip, spoolType === t && styles.chipActive]}
            >
              <Text style={[styles.chipText, spoolType === t && styles.chipTextActive]}>{t}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      {/* CTA */}
      <View style={styles.footer}>
        <Button label="Salvar Alterações" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bgBase },
  notFound: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[4] },
  notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
  backLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.accent },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing[5],
    paddingVertical: spacing[4],
  },
  headerTitle: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.semibold,
    color: colors.textPrimary,
  },
  content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[4] },
  iconContainer: { alignItems: 'center', paddingVertical: spacing[6] },
  iconBg: {
    width: 96,
    height: 96,
    borderRadius: radius.xl,
    backgroundColor: colors.bgSurface,
    alignItems: 'center',
    justifyContent: 'center',
  },
  hint: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
    lineHeight: typography.fontSize.sm * 1.6,
    marginTop: -spacing[2],
  },
  typeRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
  typeLabel: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xs,
    fontWeight: typography.fontWeight.bold,
    color: colors.textSecondary,
    letterSpacing: 0.8,
    textTransform: 'uppercase',
  },
  optional: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
  },
  typeChips: { flexDirection: 'row', gap: spacing[2] },
  chip: {
    paddingHorizontal: spacing[4],
    paddingVertical: spacing[3],
    borderRadius: radius.md,
    backgroundColor: colors.bgSurface,
    borderWidth: 1,
    borderColor: colors.border,
  },
  chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
  chipText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    fontWeight: typography.fontWeight.medium,
    color: colors.textSecondary,
  },
  chipTextActive: { color: colors.bgBase },
  footer: {
    padding: spacing[5],
    borderTopWidth: 1,
    borderTopColor: colors.border,
    backgroundColor: colors.bgBase,
  },
});