Yaltopia-Tickets-App/app/change-pin.tsx

import React, { useState } from "react";
import {
  View,
  ScrollView,
  Pressable,
  TextInput,
  ActivityIndicator,
  useColorScheme,
} 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, Lock, Eye, EyeOff } from "@/lib/icons";
import { api } from "@/lib/api";
import { toast } from "@/lib/toast-store";

export default function ChangePinScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const isDark = useColorScheme() === "dark";
  const iconColor = isDark ? "#94a3b8" : "#64748b";

  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!currentPassword.trim()) {
      toast.error("Error", "Current password is required");
      return;
    }
    if (!newPassword.trim()) {
      toast.error("Error", "New password is required");
      return;
    }
    if (newPassword !== confirmPassword) {
      toast.error("Error", "Passwords do not match");
      return;
    }
    if (newPassword.length < 6) {
      toast.error("Error", "Password must be at least 6 characters");
      return;
    }

    setLoading(true);
    try {
      await api.auth.changePassword({
        body: {
          currentPassword: currentPassword.trim(),
          newPassword: newPassword.trim(),
        },
      });
      toast.success("Success", "Password changed successfully");
      nav.back();
    } catch (e: any) {
      toast.error("Error", e?.message || "Failed to change password");
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScreenWrapper className="bg-background">
      <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 className="text-foreground text-[17px] font-sans-bold tracking-tight">
          Change PIN
        </Text>
        <View className="w-10" />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: 24,
          paddingTop: 32,
          paddingBottom: 40,
        }}
      >
        <View className="gap-6">
          <View>
            <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
              Current Password
            </Text>
            <View className="flex-row items-center rounded-xl px-4 border border-border h-14">
              <Lock size={16} color={iconColor} />
              <TextInput
                className="flex-1 ml-3 text-foreground text-base"
                placeholder="Enter current password"
                placeholderTextColor={isDark ? "#475569" : "#94a3b8"}
                value={currentPassword}
                onChangeText={setCurrentPassword}
                secureTextEntry={!showCurrent}
                autoCorrect={false}
                autoCapitalize="none"
              />
              <Pressable
                onPress={() => setShowCurrent(!showCurrent)}
                className="p-1"
              >
                {showCurrent ? (
                  <EyeOff size={18} color={iconColor} />
                ) : (
                  <Eye size={18} color={iconColor} />
                )}
              </Pressable>
            </View>
          </View>

          <View>
            <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
              New Password
            </Text>
            <View className="flex-row items-center rounded-xl px-4 border border-border h-14">
              <Lock size={16} color={iconColor} />
              <TextInput
                className="flex-1 ml-3 text-foreground text-base"
                placeholder="Enter new password"
                placeholderTextColor={isDark ? "#475569" : "#94a3b8"}
                value={newPassword}
                onChangeText={setNewPassword}
                secureTextEntry={!showNew}
                autoCorrect={false}
                autoCapitalize="none"
              />
              <Pressable onPress={() => setShowNew(!showNew)} className="p-1">
                {showNew ? (
                  <EyeOff size={18} color={iconColor} />
                ) : (
                  <Eye size={18} color={iconColor} />
                )}
              </Pressable>
            </View>
          </View>

          <View>
            <Text className="text-[11px] font-sans-bold uppercase tracking-widest text-muted-foreground mb-2 ml-1">
              Confirm New Password
            </Text>
            <View className="flex-row items-center rounded-xl px-4 border border-border h-14">
              <Lock size={16} color={iconColor} />
              <TextInput
                className="flex-1 ml-3 text-foreground text-base"
                placeholder="Confirm new password"
                placeholderTextColor={isDark ? "#475569" : "#94a3b8"}
                value={confirmPassword}
                onChangeText={setConfirmPassword}
                secureTextEntry={!showConfirm}
                autoCorrect={false}
                autoCapitalize="none"
              />
              <Pressable
                onPress={() => setShowConfirm(!showConfirm)}
                className="p-1"
              >
                {showConfirm ? (
                  <EyeOff size={18} color={iconColor} />
                ) : (
                  <Eye size={18} color={iconColor} />
                )}
              </Pressable>
            </View>
          </View>

          <View className="mt-4">
            <Button
              className="h-12 bg-primary rounded-[8px]"
              onPress={handleSubmit}
              disabled={loading}
            >
              {loading ? (
                <ActivityIndicator color="white" />
              ) : (
                <Text className="text-white font-sans-bold text-sm tracking-widest">
                  Change PIN
                </Text>
              )}
            </Button>
          </View>
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}