import { ActivityIndicator, Modal, Toast } from '@ant-design/react-native';
import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image';
import { Pressable, ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { MenuRow } from '@/components/ui/menu-row';
import api from '@/utils/api';
import { signOut, useAuthContext } from '@/utils/auth';
import { useSWC } from '@/utils/cache';
export default function ProfileScreen() {
  const { setToken } = useAuthContext();

  const handleLogout = () => {
    Modal.alert('退出登录', '确定要退出当前账号吗？', [
      { text: '取消', style: 'cancel' },
      {
        text: '退出',
        style: 'destructive',
        onPress: async () => {
          const l = Toast.loading("请稍候");
          try {
            await signOut();
          } catch(e) {
            console.warn(e);
          }
          setToken(null);
          Toast.remove(l);
        },
      },
    ]);
  };

  const {data: userInfo, loading}: any = useSWC("me", async ()=> {
    return await api.post('user/profile')
  }, {
    cacheOnly: true,
    cacheTimeout: 15*60
  });
  if (loading) {
    return <ActivityIndicator />;
  }
  return (
    <SafeAreaView className="flex-1 bg-surface" edges={['top']}>
      <View className="h-14 flex-row items-center justify-between border-b border-outline-variant/20 bg-surface-container-lowest px-5">
        <View className="flex-row items-center gap-3">
          <View className="h-9 w-9 items-center justify-center rounded-full bg-slate-900">
            <Ionicons name="person" size={18} color="#ffffff" />
          </View>
          <Text className="text-xl font-extrabold tracking-tight text-on-surface">
            贷款助手
          </Text>
        </View>
        <Pressable hitSlop={8}>
          <Ionicons name="notifications-outline" size={20} color="#94a3b8" />
        </Pressable>
      </View>

      <ScrollView
        className="flex-1"
        contentContainerClassName="px-5 pt-4 pb-24"
        showsVerticalScrollIndicator={false}
      >
        <View className="mb-8 items-center">
          <View className="relative mb-4">
            <View className="h-28 w-28 rounded-full bg-primary-container p-1.5">
              <View className="h-full w-full items-center justify-center rounded-full border-4 border-surface-container-lowest bg-slate-900">
                {userInfo?.avatar&&<Image source={{uri: userInfo.avatar}} />}
              </View>
            </View>
            <View className="absolute bottom-1 right-1 h-8 w-8 items-center justify-center rounded-full border-4 border-surface-container-lowest bg-primary">
              <Ionicons name="checkmark" size={15} color="#ffffff" />
            </View>
          </View>
          <Text className="mb-2 text-3xl font-extrabold tracking-tight text-on-surface">
            {userInfo?.nickname}
          </Text>
          <Text className="text-base font-medium text-on-surface-variant">
            高级信贷经理 · 智融金融
          </Text>
        </View>

        <View className="mb-8 flex-row gap-3">
          <View className="flex-1 items-center rounded-2xl border border-outline-variant bg-surface-container-lowest px-4 py-5">
            <Text className="text-3xl font-extrabold text-primary">128</Text>
            <Text className="mt-2 text-sm font-bold text-outline">已完成</Text>
          </View>
          <View className="flex-1 items-center rounded-2xl border border-outline-variant bg-surface-container-lowest px-4 py-5">
            <Text className="text-3xl font-extrabold text-primary">94%</Text>
            <Text className="mt-2 text-sm font-bold text-outline">成功率</Text>
          </View>
          <View className="flex-1 items-center rounded-2xl border border-outline-variant bg-surface-container-lowest px-4 py-5">
            <Text className="text-3xl font-extrabold text-primary">¥42k</Text>
            <Text className="mt-2 text-sm font-bold text-outline">本月收入</Text>
          </View>
        </View>

        <View className="mb-5 overflow-hidden rounded-2xl border border-outline-variant bg-surface-container-lowest">
          <MenuRow icon="people-outline" label="我的客户" iconBgClass="bg-blue-50" />
          <MenuRow
            icon="business-outline"
            label="机构设置"
            iconBgClass="bg-indigo-50"
            iconColorClass="#4f46e5"
          />
        </View>

        <View className="mb-5 overflow-hidden rounded-2xl border border-outline-variant bg-surface-container-lowest">
          <MenuRow
            icon="shield-outline"
            label="安全设置"
            iconBgClass="bg-orange-50"
            iconColorClass="#ea580c"
          />
          <MenuRow
            icon="help-circle-outline"
            label="帮助与支持"
            iconBgClass="bg-green-50"
            iconColorClass="#16a34a"
          />
          <MenuRow
            icon="information-circle-outline"
            label="关于我们"
            iconBgClass="bg-slate-100"
            iconColorClass="#475569"
          />
        </View>

        <Pressable
          onPress={handleLogout}
          className="mt-2 flex-row items-center justify-center gap-2 rounded-2xl bg-surface-container-low py-3.5 active:opacity-88"
        >
          <Ionicons name="log-out-outline" size={18} color={Colors.error.DEFAULT} />
          <Text className="text-base font-bold text-error">退出登录</Text>
        </Pressable>
      </ScrollView>
    </SafeAreaView>
  );
}