import { View, StyleSheet, ScrollView, Text, TouchableOpacity } from "react-native";
import { useAuthStore } from "@/stores/auth";
import { Avatar, Input } from "@rn-vui/themed";
import { Card } from "@rn-vui/themed";
import { useState } from "react";
import { useUser } from "@/providers/UserProvider";
import { LinearGradient } from "expo-linear-gradient";
import { User, Mail, Edit3, Check, LogOut, Settings, Shield } from "lucide-react-native";
import { Stack } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProfileScreen() {
  const signOut = useAuthStore((state) => state.signOut);
  const user = useUser();
  const insets = useSafeAreaInsets();

  // const [displayName, setDisplayName] = useState(user.name || "");
  // const [isEditing, setIsEditing] = useState(false);

  // const handleSaveDisplayName = () => {
  //   // TODO: Implémenter la fonctionnalité de sauvegarde
  //   setIsEditing(false);
  // };

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ headerShown: false }} />
      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
        <LinearGradient
          colors={["#1e3a8a", "#3b82f6", "#60a5fa"]}
          style={[styles.headerGradient, { paddingTop: insets.top + 60 }]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        >
          <View style={styles.headerContent}>
            <Avatar
              size={120}
              rounded
              source={user.avatar_url ? { uri: user.avatar_url } : undefined}
              icon={!user.avatar_url ? { name: "user", type: "font-awesome" } : undefined}
              containerStyle={styles.avatar}
            />
            <Text style={styles.userName}>{user.name || "Utilisateur"}</Text>
            <Text style={styles.userEmail}>{user.email}</Text>
          </View>
        </LinearGradient>

        {/* Contenu principal */}
        <View style={styles.content}>
          {/* Carte d'informations personnelles */}
          <Card containerStyle={styles.mainCard}>
            <View style={styles.cardHeader}>
              <User size={20} color="#3b82f6" />
              <Text style={styles.cardHeaderTitle}>Informations personnelles</Text>
            </View>

            <View style={styles.infoItem}>
              <View style={styles.infoIconContainer}>
                <Mail size={18} color="#6b7280" />
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.infoLabel}>Adresse e-mail</Text>
                <Text style={styles.infoValue}>{user.email}</Text>
              </View>
            </View>

            <View style={styles.divider} />

            <View style={styles.infoItem}>
              <View style={styles.infoIconContainer}>
                <User size={18} color="#6b7280" />
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.infoLabel}>Nom d'affichage</Text>
                <Text style={styles.infoValue}>{user.name}</Text>
                {/* {isEditing ? (
                  <Input
                    placeholder="Entrez le nom d'affichage"
                    value={displayName}
                    onChangeText={setDisplayName}
                    containerStyle={styles.inputContainer}
                    inputStyle={styles.inputText}
                    autoFocus
                  />
                ) : (
                  <Text style={styles.infoValue}>
                    {user.name || "Non défini"}
                  </Text>
                )} */}
              </View>
              {/* <TouchableOpacity
                style={styles.editButton}
                onPress={() => {
                  if (isEditing) {
                    handleSaveDisplayName();
                  } else {
                    setDisplayName(user.name ?? "");
                    setIsEditing(true);
                  }
                }}
              >
                {isEditing ? (
                  <Check size={18} color="#10b981" />
                ) : (
                  <Edit3 size={18} color="#6b7280" />
                )}
              </TouchableOpacity> */}
            </View>
          </Card>

          {/* Bouton de déconnexion */}
          <TouchableOpacity style={styles.signOutContainer} onPress={signOut}>
            <LinearGradient
              colors={["#ef4444", "#dc2626"]}
              style={styles.signOutGradient}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
            >
              <LogOut size={20} color="white" />
              <Text style={styles.signOutText}>Se déconnecter</Text>
            </LinearGradient>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8fafc",
  },
  headerGradient: {
    paddingBottom: 40,
    paddingHorizontal: 20,
  },
  headerContent: {
    alignItems: "center",
  },
  avatar: {
    marginBottom: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
    borderWidth: 4,
    borderColor: "white",
  },
  userName: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
    marginBottom: 4,
    textAlign: "center",
  },
  userEmail: {
    fontSize: 16,
    color: "rgba(255, 255, 255, 0.9)",
    textAlign: "center",
  },
  content: {
    padding: 20,
    marginTop: -20,
  },
  mainCard: {
    borderRadius: 16,
    padding: 0,
    marginBottom: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
    borderWidth: 0,
  },
  menuCard: {
    borderRadius: 16,
    padding: 0,
    marginBottom: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
    borderWidth: 0,
  },
  cardHeader: {
    flexDirection: "row",
    alignItems: "center",
    padding: 20,
    paddingBottom: 16,
  },
  cardHeaderTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: "#1f2937",
    marginLeft: 12,
  },
  infoItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  infoIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "#f3f4f6",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  infoContent: {
    flex: 1,
  },
  infoLabel: {
    fontSize: 14,
    color: "#6b7280",
    marginBottom: 4,
    fontWeight: "500",
  },
  infoValue: {
    fontSize: 16,
    color: "#1f2937",
    fontWeight: "500",
  },
  editButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: "#f3f4f6",
    justifyContent: "center",
    alignItems: "center",
  },
  inputContainer: {
    paddingHorizontal: 0,
    height: 40,
    marginTop: 4,
  },
  inputText: {
    fontSize: 16,
    color: "#1f2937",
  },
  divider: {
    height: 1,
    backgroundColor: "#e5e7eb",
    marginLeft: 72,
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  menuIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "#f3f4f6",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  menuContent: {
    flex: 1,
  },
  menuTitle: {
    fontSize: 16,
    fontWeight: "500",
    color: "#1f2937",
    marginBottom: 2,
  },
  menuSubtitle: {
    fontSize: 14,
    color: "#6b7280",
  },
  menuArrow: {
    fontSize: 20,
    color: "#9ca3af",
    fontWeight: "300",
  },
  signOutContainer: {
    marginTop: 10,
    marginBottom: 40,
  },
  signOutGradient: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 16,
    paddingHorizontal: 24,
    borderRadius: 12,
    shadowColor: "#ef4444",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  signOutText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 8,
  },
});
