import { Text, View, TouchableOpacity, Alert, Image } from "react-native";
import { useRouter } from "expo-router";
import * as Haptics from "expo-haptics";
import { Platform } from "react-native";

import { ScreenContainer } from "@/components/screen-container";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { useColors } from "@/hooks/use-colors";
import { useAppAuth } from "@/lib/auth-context";

export default function ProfileScreen() {
  const router = useRouter();
  const colors = useColors();
  const { user, logout } = useAppAuth();

  async function handleLogout() {
    Alert.alert(
      "Sair",
      "Tem certeza que deseja sair da sua conta?",
      [
        { text: "Cancelar", style: "cancel" },
        {
          text: "Sair",
          style: "destructive",
          onPress: async () => {
            if (Platform.OS !== "web") {
              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
            }
            await logout();
            router.replace("/login");
          },
        },
      ]
    );
  }

  function handleEditProfile() {
    if (Platform.OS !== "web") {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
    router.push("/edit-profile" as any);
  }

  return (
    <ScreenContainer className="p-4">
      {/* Header */}
      <View className="flex-row items-center justify-between mb-6">
        <Text className="text-3xl font-bold text-foreground">Meu Perfil</Text>
        <TouchableOpacity onPress={handleEditProfile} activeOpacity={0.7}>
          <IconSymbol name="edit" size={24} color={colors.primary} />
        </TouchableOpacity>
      </View>

      {/* Card de informações do usuário */}
      <View className="bg-surface rounded-2xl p-6 border border-border mb-6">
        <View className="items-center mb-6">
          {/* Foto de Perfil */}
          <View 
            className="w-24 h-24 rounded-full items-center justify-center mb-4 overflow-hidden"
            style={{ backgroundColor: colors.primary + '20' }}
          >
            {user?.photoUrl ? (
              <Image 
                source={{ uri: user.photoUrl }} 
                className="w-full h-full"
                resizeMode="cover"
              />
            ) : (
              <IconSymbol name="person.fill" size={48} color={colors.primary} />
            )}
          </View>
          <Text className="text-xl font-bold text-foreground">{user?.name}</Text>
          {user?.isMaintenance && (
            <View 
              className="mt-2 px-3 py-1 rounded-full"
              style={{ backgroundColor: colors.warning + '20' }}
            >
              <Text style={{ color: colors.warning }} className="text-sm font-semibold">
                Equipe de Manutenção
              </Text>
            </View>
          )}
        </View>

        {/* Informações */}
        <View className="gap-4">
          <View className="flex-row items-center">
            <View 
              className="w-10 h-10 rounded-full items-center justify-center mr-3"
              style={{ backgroundColor: colors.muted + '20' }}
            >
              <IconSymbol name="mail" size={20} color={colors.muted} />
            </View>
            <View className="flex-1">
              <Text className="text-muted text-sm">E-mail</Text>
              <Text className="text-foreground font-medium">{user?.email}</Text>
            </View>
          </View>

          <View className="flex-row items-center">
            <View 
              className="w-10 h-10 rounded-full items-center justify-center mr-3"
              style={{ backgroundColor: colors.muted + '20' }}
            >
              <IconSymbol name="work" size={20} color={colors.muted} />
            </View>
            <View className="flex-1">
              <Text className="text-muted text-sm">Função</Text>
              <Text className="text-foreground font-medium">{user?.role}</Text>
            </View>
          </View>

          <View className="flex-row items-center">
            <View 
              className="w-10 h-10 rounded-full items-center justify-center mr-3"
              style={{ backgroundColor: colors.muted + '20' }}
            >
              <IconSymbol name="business" size={20} color={colors.muted} />
            </View>
            <View className="flex-1">
              <Text className="text-muted text-sm">Unidade</Text>
              <Text className="text-foreground font-medium">{user?.company}</Text>
            </View>
          </View>
        </View>
      </View>

      {/* Botão Editar Perfil */}
      <TouchableOpacity
        onPress={handleEditProfile}
        activeOpacity={0.8}
        className="bg-primary rounded-2xl p-5 mb-4"
      >
        <View className="flex-row items-center justify-center">
          <IconSymbol name="edit" size={24} color="#FFFFFF" />
          <Text className="text-white text-lg font-bold ml-3">
            EDITAR PERFIL
          </Text>
        </View>
      </TouchableOpacity>

      {/* Botão de Logout */}
      <TouchableOpacity
        onPress={handleLogout}
        activeOpacity={0.8}
        className="rounded-2xl p-5 border-2"
        style={{ borderColor: colors.error }}
      >
        <View className="flex-row items-center justify-center">
          <IconSymbol name="logout" size={24} color={colors.error} />
          <Text style={{ color: colors.error }} className="text-lg font-bold ml-3">
            SAIR DA CONTA
          </Text>
        </View>
      </TouchableOpacity>
    </ScreenContainer>
  );
}