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

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

const S = StyleSheet.create({
  input: {
    paddingHorizontal: 14,
    paddingVertical: 13,
    fontSize: 15,
    fontWeight: "500",
    borderRadius: 10,
    borderWidth: 1,
    textAlignVertical: "center",
  },
});

function useInputColors() {
  const { colorScheme } = useColorScheme();
  const dark = colorScheme === "dark";
  return {
    bg: dark ? "rgba(30,30,30,0.8)" : "rgba(241,245,249,0.2)",
    border: dark ? "rgba(255,255,255,0.08)" : "rgba(203,213,225,0.6)",
    text: dark ? "#f1f5f9" : "#0f172a",
    placeholder: "rgba(100,116,139,0.45)",
  };
}

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

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

  const initials = `${user?.firstName?.[0] || ""}${user?.lastName?.[0] || ""}`.toUpperCase();

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

    setLoading(true);
    try {
      const response = await api.users.updateProfile({
        body: {
          firstName: firstName.trim(),
          lastName: lastName.trim(),
        },
      });
      updateUser(response);
      toast.success("Success", "Profile updated");
      nav.back();
    } catch (e: any) {
      toast.error("Error", e?.message || "Failed to update profile");
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader title="Edit Profile" showBack />

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: 20,
          paddingTop: 12,
          paddingBottom: 40,
        }}
      >
        <View className="items-center mb-8">
          <View className="h-24 w-24 rounded-full items-center justify-center mb-4" style={{ backgroundColor: "#ea580c" }}>
            <Text className="text-white text-3xl font-sans-bold">
              {initials || "?"}
            </Text>
          </View>
          <Text className="text-foreground text-lg font-sans-bold tracking-tight">
            {user?.firstName} {user?.lastName}
          </Text>
          <Text className="text-sm text-muted-foreground font-sans-bold mt-0.5">
            {user?.email}
          </Text>
        </View>

        <View className="rounded-[12px] border border-border bg-card p-5 gap-5">
          <View>
            <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
              First Name
            </Text>
            <TextInput
              style={[S.input, { backgroundColor: c.bg, borderColor: c.border, color: c.text }]}
              placeholder="Enter first name"
              placeholderTextColor={c.placeholder}
              value={firstName}
              onChangeText={setFirstName}
              autoCorrect={false}
            />
          </View>

          <View>
            <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
              Last Name
            </Text>
            <TextInput
              style={[S.input, { backgroundColor: c.bg, borderColor: c.border, color: c.text }]}
              placeholder="Enter last name"
              placeholderTextColor={c.placeholder}
              value={lastName}
              onChangeText={setLastName}
              autoCorrect={false}
            />
          </View>

          {user?.email && (
            <View>
              <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
                Email
              </Text>
              <View
                style={[
                  S.input,
                  {
                    backgroundColor: isDark ? "rgba(30,30,30,0.4)" : "rgba(241,245,249,0.1)",
                    borderColor: "transparent",
                    color: isDark ? "#64748b" : "#94a3b8",
                  },
                ]}
              >
                <Text className="text-sm text-muted-foreground">{user.email}</Text>
              </View>
            </View>
          )}
        </View>

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

          <Button
            variant="outline"
            className="h-12 rounded-[10px]"
            onPress={() => nav.back()}
            disabled={loading}
          >
            <Text className="text-muted-foreground font-sans-bold text-sm tracking-widest">
              Cancel
            </Text>
          </Button>
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}