import ChangeProfileImage from "@/components/sections/change-profile-image";
import LogoutModal from "@/components/sections/LogoutModal";
import { useColor } from "@/hooks/useColor";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { router } from "expo-router";
import {
  ArrowDownLeftIcon,
  ArrowUpRightIcon,
  ArticleIcon,
  BuildingsIcon,
  CalendarCheckIcon,
  CaretRightIcon,
  ClockIcon,
  EnvelopeIcon,
  HeadsetIcon,
  HeartIcon,
  IdentificationCardIcon,
  LockKeyIcon,
  PencilLineIcon,
  ShieldCheckIcon,
  SignOutIcon,
  StorefrontIcon,
  TrendUpIcon,
  UserIcon,
  WalletIcon,
} from "phosphor-react-native";
import { useState } from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function AccountScreen() {
  const { user } = useAuthStore((state) => state);
  const { primary } = useColor();
  const [logoutVisible, setLogoutVisible] = useState(false);

  return (
    <>
      <ScrollView className="px-4 bg-slate-50" contentContainerStyle={{ paddingBottom: 60 }}>
        <SafeAreaView className="gap-3">
          <View
            className="flex-row justify-between items-center pb-6 border-b border-slate-200 p-3 rounded-xl mb-4"
            style={{
              backgroundColor: primary[10],
            }}
          >
            <View className="flex-row justify-start items-center gap-3">
              <ChangeProfileImage />
              <View className="justify-start items-start">
                <Text className="text-2xl font-manrope-extrabold text-slate-900">{user?.full_name}</Text>
                <Text className="text-lg font-manrope text-slate-500 mb-1">{user?.email}</Text>
                <View className="flex-row items-center gap-1.5 bg-white/50 px-2 py-0.5 rounded-lg border border-white/40">
                  <WalletIcon size={14} color={primary.base} weight="fill" />
                  <Text className="text-sm font-manrope-bold text-slate-700">
                    {user?.balance || 0}
                  </Text>
                </View>
              </View>
            </View>
            <TouchableOpacity onPress={() => router.push("/edit-profile")} hitSlop={10}>
              <View pointerEvents="none">
                <PencilLineIcon size={24} color={primary.base} />
              </View>
            </TouchableOpacity>
          </View>

          <View className="gap-y-6">
            <MenuSection title="PORTFOLIO & EARNINGS">
              <LinkCard link="/my-shares" name="My Shares" icon={BuildingsIcon} />
              <LinkCard link="/for-sale" name="For Sale / Listed" icon={StorefrontIcon} />
              <LinkCard link="/roi-recieved" name="ROI Received" icon={TrendUpIcon} />
              <LinkCard link="/upcoming-payouts" name="Upcoming Payouts" icon={CalendarCheckIcon} />
              <LinkCard link="/wishlist" name="Wishlist" icon={HeartIcon} />
            </MenuSection>

            <MenuSection title="WALLET">
              <LinkCard link="/wallet/transactions" name="Transactions" icon={WalletIcon} />
              <LinkCard link="/wallet/deposit" name="Deposit" icon={ArrowDownLeftIcon} />
              <LinkCard link="/wallet/withdraw" name="Withdraw" icon={ArrowUpRightIcon} />
            </MenuSection>

            <MenuSection title="SETTINGS">
              <LinkCard link="/edit-profile" name="Profile Settings" icon={UserIcon} />
              <LinkCard link="/verification-status" name="Verification Status" icon={ShieldCheckIcon} />
              <LinkCard link="/security-settings" name="Security" icon={LockKeyIcon} />
              <LinkCard link="/contact-information" name="Contact Information" icon={EnvelopeIcon} />
              <LinkCard link="/account-activity" name="Account Activity" icon={ClockIcon} />
              <LinkCard link="/(screens)/support" name="Support Tickets" icon={HeadsetIcon} />
              <LinkCard link="/terms-and-conditions" name="Terms & Conditions" icon={ArticleIcon} />

              {/* Logout Button */}
              <TouchableOpacity onPress={() => setLogoutVisible(true)} className="flex-row justify-between items-center p-3 rounded-xl border border-slate-200 bg-white" activeOpacity={0.8}>
                <View className="flex-row justify-start items-center gap-4">
                  <View
                    className="size-12 rounded-full justify-center items-center"
                    style={{
                      backgroundColor: "#fee2e2",
                    }}
                  >
                    <SignOutIcon weight="fill" color="#dc2626" size={24} />
                  </View>
                  <Text className="text-xl font-manrope-semibold text-red-600">Logout</Text>
                </View>
                <View>
                  <CaretRightIcon size={20} color="#dc2626" />
                </View>
              </TouchableOpacity>
            </MenuSection>
          </View>
        </SafeAreaView>
      </ScrollView>
      <LogoutModal visible={logoutVisible} setVisible={setLogoutVisible} />
    </>
  );
}

function MenuSection({ title, children }: { title: string; children: React.ReactNode }) {
  const { primary } = useColor();
  return (
    <View>
      <Text className="text-[13px] font-manrope-extrabold text-slate-500 uppercase tracking-widest pl-2 mb-2">{title}</Text>
      <View
        className="p-2 rounded-2xl gap-y-1 shadow-sm shadow-slate-200 border border-slate-100"
        style={{
          backgroundColor: primary[5],
        }}
      >
        {children}
      </View>
    </View>
  );
}

function LinkCard({ link, name, icon: Icon }: { link: string; name: string; icon: any }) {
  const { primary } = useColor();

  return (
    <TouchableOpacity
      onPress={() => router.push(link as any)}
      className="flex-row justify-between items-center p-3 rounded-xl border border-slate-200 bg-white shadow-sm shadow-slate-100"
      activeOpacity={0.8}
    >
      <View className="flex-row justify-start items-center gap-4">
        <View
          className="size-12 rounded-xl justify-center items-center"
          style={{
            backgroundColor: primary[5],
          }}
        >
          <Icon weight="fill" color={primary.base} size={24} />
        </View>
        <Text className="text-[17px] font-manrope-bold text-slate-800">{name}</Text>
      </View>
      <View>
        <CaretRightIcon size={20} color="#94a3b8" />
      </View>
    </TouchableOpacity>
  );
}
