import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { Slot } from 'expo-router';
import { trpc } from '@/src/trpc-client';
import { MyText, MyTouchableOpacity, tw, AppContainer } from 'common-ui';
import { useRouter } from 'expo-router';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useGetEssentialConsts } from '@/src/api-hooks/essential-consts.api';

export default function FlashDeliveryBaseLayout() {
  const router = useRouter();
  const { data: essentialConsts, isLoading } = useGetEssentialConsts();

  if (isLoading) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center`}>
          <ActivityIndicator size="large" color="#22c55e" />
          <MyText style={tw`text-gray-500 mt-4`}>Loading...</MyText>
        </View>
      </AppContainer>
    );
  }

  const isFlashDeliveryEnabled = essentialConsts?.isFlashDeliveryEnabled ?? true;

  if (!isFlashDeliveryEnabled) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center p-6`}>
          <View style={tw`bg-gray-100 rounded-full p-6 mb-6`}>
            <MaterialIcons name="flash-off" size={64} color="#9ca3af" />
          </View>
          <MyText style={tw`text-2xl font-bold text-gray-800 mb-4 text-center`}>
            Flash Delivery Unavailable
          </MyText>
          <MyText style={tw`text-base text-gray-600 text-center mb-8`}>
            Flash Delivery is not available at the moment. Please opt for a scheduled delivery.
          </MyText>
          <MyTouchableOpacity
            onPress={() => router.replace('/(drawer)/(tabs)/home')}
            style={tw`bg-green-500 px-8 py-4 rounded-lg`}
          >
            <MyText style={tw`text-white text-lg font-semibold`}>
              Go to Scheduled Delivery
            </MyText>
          </MyTouchableOpacity>
        </View>
      </AppContainer>
    );
  }

  return <Slot />;
}