import React, { useState, useEffect } from "react";
import {
  View,
  ScrollView,
  Pressable,
  Platform,
  Dimensions,
  StyleSheet,
} from "react-native";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { X, Zap, Camera as CameraIcon } from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { CameraView, useCameraPermissions } from "expo-camera";
import { router, useNavigation } from "expo-router";

const { width } = Dimensions.get("window");

export default function ScanScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const [torch, setTorch] = useState(false);
  const navigation = useNavigation();
  const NAV_BG = "#ffffff";

  // Hide tab bar when on this screen (since it's a dedicated camera view)
  useEffect(() => {
    navigation.setOptions({
      tabBarStyle: {
        display: "none",
      },
    });
    return () => {
      navigation.setOptions({
        tabBarStyle: {
          display: "flex",
          backgroundColor: NAV_BG,
          borderTopWidth: 0,
          elevation: 10,
          height: 75,
          paddingBottom: Platform.OS === "ios" ? 30 : 10,
          paddingTop: 10,
          marginHorizontal: 20,
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          borderRadius: 32,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 10 },
          shadowOpacity: 0.12,
          shadowRadius: 20,
        },
      });
    };
  }, [navigation]);

  if (!permission) {
    // Camera permissions are still loading.
    return <View className="flex-1 bg-black" />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet.
    return (
      <ScreenWrapper className="bg-background items-center justify-center p-10">
        <View className="bg-primary/10 p-6 rounded-[24px] mb-6">
          <CameraIcon className="text-primary" size={48} strokeWidth={1.5} />
        </View>
        <Text variant="h2" className="text-center mb-2">
          Camera Access
        </Text>
        <Text variant="muted" className="text-center mb-10 leading-6">
          We need your permission to use the camera to scan invoices and
          receipts automatically.
        </Text>
        <Button
          className="w-full h-14 rounded-[12px] bg-primary"
          onPress={requestPermission}
        >
          <Text className="text-white font-bold uppercase tracking-widest">
            Enable Camera
          </Text>
        </Button>
        <Pressable onPress={() => router.back()} className="mt-6">
          <Text className="text-muted-foreground font-bold">Go Back</Text>
        </Pressable>
      </ScreenWrapper>
    );
  }

  return (
    <View className="flex-1 bg-black">
      <CameraView
        style={StyleSheet.absoluteFill}
        facing="back"
        enableTorch={torch}
      >
        <View className="flex-1 justify-between p-10 pt-16">
          <View className="flex-row justify-between items-center">
            <Pressable
              onPress={() => setTorch(!torch)}
              className={`h-12 w-12 rounded-full items-center justify-center border border-white/20 ${torch ? "bg-primary" : "bg-black/40"}`}
            >
              <Zap
                color="white"
                size={20}
                fill={torch ? "white" : "transparent"}
              />
            </Pressable>

            <Pressable
              onPress={() => navigation.goBack()}
              className="h-12 w-12 rounded-full bg-black/40 items-center justify-center border border-white/20"
            >
              <X color="white" size={24} />
            </Pressable>
          </View>

          <View className="items-center">
            {/* Scanning Frame */}
            <View className="w-72 h-72 border-2 border-primary rounded-3xl border-dashed opacity-50 items-center justify-center">
              <View className="w-64 h-64 border border-white/10 rounded-2xl" />
            </View>
            <Text className="text-white font-bold mt-8 uppercase tracking-[3px] text-xs">
              Align Invoice
            </Text>
          </View>

          <View className="items-center pb-10">
            <View className="bg-black/40 px-6 py-3 rounded-full border border-white/10">
              <Text className="text-white/60 text-[10px] font-black uppercase tracking-widest">
                AI Auto-detecting...
              </Text>
            </View>
          </View>
        </View>
      </CameraView>
    </View>
  );
}