Yaltopia-Tickets-App/app/edit-profile.tsx

import React, { useState } from "react";
import {
  View,
  ScrollView,
  Pressable,
  TextInput,
  ActivityIndicator,
} from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { ArrowLeft, User, Check, X } from "@/lib/icons";
import { useAuthStore } from "@/lib/auth-store";
import { api } from "@/lib/api";
import { useToast } from "@/lib/toast-store";
import { useColorScheme } from "nativewind";

export default function EditProfileScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const { user, updateUser } = useAuthStore();
  const { showToast } = useToast();
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  const [loading, setLoading] = useState(false);
  const [firstName, setFirstName] = useState(user?.firstName || "");
  const [lastName, setLastName] = useState(user?.lastName || "");

  const handleSave = async () => {
    if (!firstName.trim() || !lastName.trim()) {
      showToast("First and last name are required", "error");
      return;
    }

    setLoading(true);
    try {
      const response = await api.users.updateProfile({
        body: {
          firstName: firstName.trim(),
          lastName: lastName.trim(),
        },
      });

      // Update local store with the returned user data
      updateUser(response);

      showToast("Profile updated successfully", "success");
      nav.back();
    } catch (e: any) {
      console.error("[EditProfile] Update failed:", e);
      showToast(e.message || "Failed to update profile", "error");
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScreenWrapper className="bg-background">
      {/* Header */}
      <View className="px-6 pt-4 flex-row justify-between items-center">
        <Pressable
          onPress={() => nav.back()}
          className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
        >
          <ArrowLeft color={isDark ? "#fff" : "#0f172a"} size={20} />
        </Pressable>
        <Text variant="h4" className="text-foreground font-semibold">
          Edit Profile
        </Text>
        <View className="w-10" /> {/* Spacer */}
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: 24,
          paddingTop: 32,
          paddingBottom: 40,
        }}
      >
        <View className="gap-6">
          {/* First Name */}
          <View>
            <Text
              variant="small"
              className="font-semibold mb-2 ml-1 text-foreground/70"
            >
              First Name
            </Text>
            <View className="flex-row items-center rounded-xl px-4 border border-border h-14">
              <User size={18} color={isDark ? "#94a3b8" : "#64748b"} />
              <TextInput
                className="flex-1 ml-3 text-foreground text-base h-12"
                placeholder="Enter first name"
                placeholderTextColor={isDark ? "#475569" : "#94a3b8"}
                value={firstName}
                onChangeText={setFirstName}
                autoCorrect={false}
              />
              {firstName.trim().length > 0 && (
                <Check size={16} color="#10b981" />
              )}
            </View>
          </View>

          {/* Last Name */}
          <View>
            <Text
              variant="small"
              className="font-semibold mb-2 ml-1 text-foreground/70"
            >
              Last Name
            </Text>
            <View className="flex-row items-center rounded-xl px-4 border border-border h-14">
              <User size={18} color={isDark ? "#94a3b8" : "#64748b"} />
              <TextInput
                className="flex-1 ml-3 text-foreground text-base h-12"
                placeholder="Enter last name"
                placeholderTextColor={isDark ? "#475569" : "#94a3b8"}
                value={lastName}
                onChangeText={setLastName}
                autoCorrect={false}
                style={{ textAlignVertical: "center" }}
              />
              {lastName.trim().length > 0 && (
                <Check size={16} color="#10b981" />
              )}
            </View>
          </View>

          <View className="mt-8 gap-3">
            <Button
              className="h-10 bg-primary rounded-[6px] shadow-lg shadow-primary/30"
              onPress={handleSave}
              disabled={loading}
            >
              {loading ? (
                <ActivityIndicator color="white" />
              ) : (
                <Text className="text-white font-bold text-sm">
                  Save Changes
                </Text>
              )}
            </Button>

            <Pressable
              onPress={() => nav.back()}
              className="h-10 border border-border items-center justify-center"
              disabled={loading}
            >
              <Text className="text-muted-foreground font-semibold">
                Cancel
              </Text>
            </Pressable>
          </View>
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}