MeowSpool/mobile/app/(app)/config/presets/new.tsx

import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet, Alert,
} from 'react-native';
import { 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';
import type { SpoolPreset } from '@domain/SpoolPreset';

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 Novo Preset — QM-0
 */
export default function NewPresetScreen(): React.ReactElement {
  const router = useRouter();
  const { addPreset } = usePresetStore();
  const [spoolType, setSpoolType] = useState<SpoolType>('Plástico');
  const [isLoading, setIsLoading] = useState(false);

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

  async function onSubmit(data: FormData): Promise<void> {
    setIsLoading(true);
    try {
      // TODO: CreatePresetUseCase via DI container
      const preset: SpoolPreset = {
        id: `user-${Date.now()}`,
        name: data.name,
        spoolWeightG: Number(data.spoolWeightG),
        isSystem: false,
        userId: 'me',
        createdAt: new Date().toISOString(),
      };
      addPreset(preset);
      router.back();
    } catch {
      Alert.alert('Erro', 'Não foi possível salvar o preset.');
    } 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}>Novo Preset</Text>
        <View style={{ width: 24 }} />
      </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 Preset" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bgBase },
  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,
  },
});