import React, { useState, useEffect, useRef } from "react";
import { ScrollView, View, Image, TouchableOpacity } from "react-native";
import { Button } from "~/components/ui/button";
import { Text } from "~/components/ui/text";
import { router } from "expo-router";
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
import { ROUTES } from "~/lib/routes";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import { Icons } from "~/assets/icons";
import ModalToast from "~/components/ui/toast";
import { useTranslation } from "react-i18next";
import {
  ChevronRight,
  Store,
  LifeBuoy,
  Bell,
  ScanFace,
  Grid3x3,
  LogOut,
  Book,
  Award,
  Settings,
} from "lucide-react-native";
import Toggle from "~/components/ui/toggle";
import BottomSheet from "~/components/ui/bottomSheet";
import { useLangStore } from "~/lib/stores";
import { getPointsState } from "~/lib/services/pointsService";
import BackButton from "~/components/ui/backButton";

export default function Profile() {
  const { t } = useTranslation();
  const { signOut, user, profile, profileLoading } = useAuthWithProfile();
  const language = useLangStore((state) => state.language);
  const setLanguage = useLangStore((state) => state.setLanguage);

  // Preferences state
  const [pushNotifications, setPushNotifications] = useState(true);
  const [smsNotifications, setSmsNotifications] = useState(true);
  const [emailNotifications, setEmailNotifications] = useState(true);
  const [faceID, setFaceID] = useState(true);
  const [profileImage, setProfileImage] = useState<string | null>(null);
  const [languageSheetVisible, setLanguageSheetVisible] = useState(false);
  const [pointsTotal, setPointsTotal] = useState<number | null>(null);

  const [toastVisible, setToastVisible] = useState(false);
  const [toastTitle, setToastTitle] = useState("");
  const [toastDescription, setToastDescription] = useState<string | undefined>(
    undefined
  );
  const [toastVariant, setToastVariant] = useState<
    "success" | "error" | "warning" | "info"
  >("info");
  const toastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const showToast = (
    title: string,
    description?: string,
    variant: "success" | "error" | "warning" | "info" = "info"
  ) => {
    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
    }

    setToastTitle(title);
    setToastDescription(description);
    setToastVariant(variant);
    setToastVisible(true);

    toastTimeoutRef.current = setTimeout(() => {
      setToastVisible(false);
      toastTimeoutRef.current = null;
    }, 2500);
  };

  useEffect(() => {
    return () => {
      if (toastTimeoutRef.current) {
        clearTimeout(toastTimeoutRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (profile?.photoUrl) {
      setProfileImage(profile.photoUrl);
    } else {
      setProfileImage(null);
    }
  }, [profile?.photoUrl]);

  useEffect(() => {
    (async () => {
      try {
        const state = await getPointsState();
        setPointsTotal(state.total);
      } catch (error) {
        if (__DEV__) {
          console.warn("[Profile] Failed to load points state", error);
        }
      }
    })();
  }, []);

  const handleLogout = async () => {
    try {
      await signOut();
      showToast(
        t("profile.toastLoggedOutTitle"),
        t("profile.toastLoggedOutDescription"),
        "success"
      );
      router.replace(ROUTES.SIGNIN);
    } catch (error) {
      console.log(error);
      showToast(
        t("profile.toastErrorTitle"),
        t("profile.toastLogoutFailed"),
        "error"
      );
    }
  };

  const handleEditProfile = () => {
    router.push(ROUTES.EDIT_PROFILE);
  };

  const handleMyStores = () => {
    // TODO: Navigate to My Stores screen
    showToast("My stores", "Coming soon", "info");
  };

  const handleSupport = () => {
    router.push(ROUTES.HELP_SUPPORT);
  };

  const handleKyc = () => {
    router.push(ROUTES.KYC);
  };

  const handlePoints = () => {
    router.push(ROUTES.POINTS);
  };

  const handleHistory = () => {
    router.push(ROUTES.HISTORY);
  };

  const handleChangePassword = () => {
    // Placeholder screen for Change Password
    showToast("Change Password", "Coming soon", "info");
  };

  const handlePINCode = () => {
    router.push(ROUTES.CHANGE_PIN);
  };

  const displayName = profile?.fullName || user?.displayName || "User";
  const displayEmail = profile?.email || user?.email || "";
  const agentId = user?.uid
    ? `AGENT-${user.uid.slice(-6).toUpperCase()}`
    : "AGENT-001";

  const languageOptions = [
    { value: "en", label: t("profile.languageOptionEnglish") },
    { value: "am", label: t("profile.languageOptionAmharic") },
    { value: "fr", label: t("profile.languageOptionFrench") },
    { value: "ti", label: t("profile.languageOptionTigrinya") },
    { value: "om", label: t("profile.languageOptionOromo") },
  ];

  const initialLetter = displayName?.trim().charAt(0).toUpperCase() || "U";

  return (
    <ScreenWrapper edges={[]}>
      <BackButton />
      <ScrollView
        showsVerticalScrollIndicator={false}
        className="flex-1 bg-white"
      >
        {/* Profile Header */}
        <View className="items-center pt-6 pb-6">
          {/* Avatar with + icon */}
          <View className="mb-4">
            <View className="w-24 h-24 rounded-full bg-[#C8E6C9] items-center justify-center overflow-hidden">
              {profileImage ? (
                <Image
                  source={{ uri: profileImage }}
                  className="w-24 h-24 rounded-full"
                  resizeMode="cover"
                />
              ) : (
                <Image
                  source={Icons.avatar}
                  style={{ width: 84, height: 84, resizeMode: "contain" }}
                />
              )}
            </View>
          </View>

          {/* Agent Info Card: Name, Role, Agent ID, Email */}
          <Text className="text-xl font-dmsans-bold text-gray-900 mb-1">
            {profileLoading ? "..." : displayName}
          </Text>
          <Text className="text-xs font-dmsans text-gray-500 mb-0.5">
            Role: Agent
          </Text>
          <Text className="text-xs font-dmsans text-gray-500 mb-1">
            Agent ID: {agentId}
          </Text>
          <Text className="text-sm font-dmsans text-gray-500 mb-6">
            {profileLoading ? "..." : displayEmail}
          </Text>

          {/* Edit Profile Button */}
          <TouchableOpacity
            onPress={handleEditProfile}
            className="bg-primary px-8 py-3 rounded-full"
            activeOpacity={0.8}
          >
            <Text className="text-white font-dmsans-medium text-sm">
              Edit profile
            </Text>
          </TouchableOpacity>
        </View>

        <View className="px-5 pt-6">
          <Text className="text-xs font-dmsans-medium text-gray-400 mb-3">
            Inventories
          </Text>

          {/* Inventories Card - grouped items */}
          <View className="bg-gray-50 rounded-2xl overflow-hidden mb-3">
            {/* Points */}
            <TouchableOpacity
              onPress={handlePoints}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Award size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900 flex-1">
                  Points
                </Text>
                <View className="bg-primary w-6 h-6 rounded-full items-center justify-center mr-2">
                  <Text className="text-white font-dmsans-bold text-xs">
                    {pointsTotal ?? 0}
                  </Text>
                </View>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            <View className="h-px bg-gray-200 mx-4" />

            {/* Help and Support */}
            <TouchableOpacity
              onPress={handleSupport}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <LifeBuoy size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  Help & Support
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            <View className="h-px bg-gray-200 mx-4" />

            {/* Terms and Conditions */}
            <TouchableOpacity
              onPress={() => router.push(ROUTES.TERMS)}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Book size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  Terms & Conditions
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>
            <View className="h-px bg-gray-200 mx-4" />
            <TouchableOpacity
              onPress={handleKyc}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <ScanFace size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900 flex-1">
                  Information
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            <View className="h-px bg-gray-200 mx-4" />
          </View>
        </View>

        {/* Preferences Section */}
        <View className="px-5 pt-6 pb-8">
          <Text className="text-xs font-dmsans-medium text-gray-400 mb-3">
            Preferences
          </Text>

          {/* Preferences Card - grouped items */}
          <View className="bg-gray-50 rounded-2xl overflow-hidden mb-3">
            {/* SMS notifications */}
            <View className="p-4 flex-row items-center justify-between">
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Bell size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  SMS notifications
                </Text>
              </View>
              <Toggle
                value={smsNotifications}
                onValueChange={setSmsNotifications}
              />
            </View>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* In-app notifications */}
            <View className="p-4 flex-row items-center justify-between">
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Bell size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  In-app notifications
                </Text>
              </View>
              <Toggle
                value={pushNotifications}
                onValueChange={setPushNotifications}
              />
            </View>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* Email notifications */}
            <View className="p-4 flex-row items-center justify-between">
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Bell size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  Email notifications
                </Text>
              </View>
              <Toggle
                value={emailNotifications}
                onValueChange={setEmailNotifications}
              />
            </View>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* Biometric Login (Face ID) */}
            <View className="p-4 flex-row items-center justify-between">
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <ScanFace size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  Biometric Login
                </Text>
              </View>
              <Toggle value={faceID} onValueChange={setFaceID} />
            </View>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* Language */}
            <TouchableOpacity
              onPress={() => setLanguageSheetVisible(true)}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Grid3x3 size={20} color="#000" />
                </View>
                <View className="flex-1">
                  <Text className="text-base font-dmsans text-gray-900">
                    {t("profile.languageLabel")}
                  </Text>
                  <Text className="text-xs font-dmsans text-gray-500 mt-0.5">
                    {
                      languageOptions.find((opt) => opt.value === language)
                        ?.label
                    }
                  </Text>
                </View>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* Reports / Transaction history */}
            <TouchableOpacity
              onPress={handleHistory}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Settings size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900 flex-1">
                  View Reports
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* Change Password (placeholder) */}
            <TouchableOpacity
              onPress={handleChangePassword}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Grid3x3 size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  Change Password
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>

            {/* Divider */}
            <View className="h-px bg-gray-200 mx-4" />

            {/* PIN Code */}
            <TouchableOpacity
              onPress={handlePINCode}
              className="p-4 flex-row items-center justify-between"
              activeOpacity={0.7}
            >
              <View className="flex-row items-center flex-1">
                <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                  <Grid3x3 size={20} color="#000" />
                </View>
                <Text className="text-base font-dmsans text-gray-900">
                  PIN Code
                </Text>
              </View>
              <ChevronRight size={20} color="#9CA3AF" />
            </TouchableOpacity>
          </View>

          {/* Logout - separate card */}
          <TouchableOpacity
            onPress={handleLogout}
            className="bg-gray-50 rounded-2xl p-4 flex-row items-center justify-between"
            activeOpacity={0.7}
          >
            <View className="flex-row items-center flex-1">
              <View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
                <LogOut size={20} color="#EF4444" />
              </View>
              <Text className="text-base font-dmsans text-red-500">Logout</Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>

      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />

      <BottomSheet
        visible={languageSheetVisible}
        onClose={() => setLanguageSheetVisible(false)}
        maxHeightRatio={0.4}
      >
        <View className="w-full py-2">
          {languageOptions.map((opt) => {
            const selected = language === opt.value;
            return (
              <TouchableOpacity
                key={opt.value}
                activeOpacity={0.8}
                onPress={() => {
                  setLanguage(opt.value as any);
                  setLanguageSheetVisible(false);
                }}
                className="py-3 flex-row items-center border-b border-gray-100"
              >
                <View className="mr-3">
                  {selected ? (
                    <View className="w-4 h-4 rounded-full bg-primary" />
                  ) : (
                    <View className="w-4 h-4 rounded-full border border-gray-300" />
                  )}
                </View>
                <Text className="text-base font-dmsans text-gray-800">
                  {opt.label}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </BottomSheet>
    </ScreenWrapper>
  );
}