import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useUser } from "@clerk/clerk-expo";
import { useTheme } from "../contexts/ThemeContext";
import { MinimalCard } from "../components/MinimalCard";
import { Input } from "../components/Input";
import { MinimalButton } from "../components/MinimalButton";

export default function PersonalDetailsScreen() {
  const router = useRouter();
  const { user } = useUser();
  const { colors, typography } = useTheme();
  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    firstName: user?.firstName || "",
    lastName: user?.lastName || "",
    email: user?.primaryEmailAddress?.emailAddress || "",
    phone: user?.primaryPhoneNumber?.phoneNumber || "",
  });

  const updateField = (field: "firstName" | "lastName", value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSave = async () => {
    setLoading(true);
    try {
      await user?.update({
        firstName: formData.firstName,
        lastName: formData.lastName,
      });

      Alert.alert("Success", "Personal details updated successfully", [
        { text: "OK", onPress: () => router.back() },
      ]);
    } catch {
      Alert.alert(
        "Error",
        "Failed to update personal details. Please try again.",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <View style={[styles.container, { backgroundColor: colors.background }]}>
        <View
          style={[styles.header, { borderBottomColor: colors.borderLight }]}
        >
          <TouchableOpacity
            style={[
              styles.backButton,
              { backgroundColor: colors.surfaceElevated },
            ]}
            onPress={() => router.back()}
            activeOpacity={0.8}
          >
            <Ionicons name="arrow-back" size={20} color={colors.textPrimary} />
          </TouchableOpacity>
          <Text style={[typography.h3, { color: colors.textPrimary }]}>
            Personal Details
          </Text>
          <View style={styles.backButtonPlaceholder} />
        </View>

        <ScrollView
          style={styles.content}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
        >
          <MinimalCard variant="elevated" style={styles.card}>
            <Input
              label="First Name"
              value={formData.firstName}
              onChangeText={(value) => updateField("firstName", value)}
              placeholder="Enter first name"
            />

            <Input
              label="Last Name"
              value={formData.lastName}
              onChangeText={(value) => updateField("lastName", value)}
              placeholder="Enter last name"
            />

            <View style={styles.readOnlyField}>
              <Text style={[typography.h4, { color: colors.textPrimary }]}>
                Email
              </Text>
              <Text style={[typography.body, { color: colors.textSecondary }]}>
                {formData.email || "Not set"}
              </Text>
              <Text
                style={[typography.caption, { color: colors.textTertiary }]}
              >
                Read-only in app settings
              </Text>
            </View>

            <View style={styles.readOnlyField}>
              <Text style={[typography.h4, { color: colors.textPrimary }]}>
                Phone Number
              </Text>
              <Text style={[typography.body, { color: colors.textSecondary }]}>
                {formData.phone || "Not set"}
              </Text>
              <Text
                style={[typography.caption, { color: colors.textTertiary }]}
              >
                Read-only in app settings
              </Text>
            </View>
          </MinimalCard>

          <MinimalButton
            title="Save Changes"
            onPress={handleSave}
            loading={loading}
            disabled={loading}
            fullWidth
            size="lg"
            style={{ marginTop: 16 }}
          />

          {loading ? (
            <View style={styles.loadingRow}>
              <ActivityIndicator size="small" color={colors.primary} />
            </View>
          ) : null}
        </ScrollView>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingTop: 56,
    paddingBottom: 12,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  backButton: {
    width: 36,
    height: 36,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  backButtonPlaceholder: {
    width: 36,
    height: 36,
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
    paddingBottom: 80,
  },
  card: {
    borderRadius: 16,
  },
  readOnlyField: {
    marginTop: 8,
    marginBottom: 12,
    gap: 4,
  },
  loadingRow: {
    marginTop: 16,
    alignItems: "center",
  },
});