import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import { useNavigation, CompositeNavigationProp } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './myOrdersScreen.styles';
import { Header, OrderHistoryCard } from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';
import { MainTabParamList } from '../../../navigation/mainTabNavigator';

type MyOrdersNavProp = CompositeNavigationProp<
  BottomTabNavigationProp<MainTabParamList, 'MyOrdersScreen'>,
  StackNavigationProp<AppStackParamList>
>;

const TABS = ['All', 'Ongoing', 'Completed'];
const mockOrders = [
  { id: 'ORD-591283', providerName: 'Pizza Planet', providerImage: '', orderDate: '29 Jun 2026', status: 'Delivered', total: 599 },
  { id: 'ORD-771239', providerName: 'Fresh Mart', providerImage: '', orderDate: '28 Jun 2026', status: 'Ongoing', total: 349 },
  { id: 'ORD-108239', providerName: 'Burger Barn', providerImage: '', orderDate: '27 Jun 2026', status: 'Delivered', total: 449 },
];

export const MyOrdersScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<MyOrdersNavProp>();
  const [activeTab, setActiveTab] = useState('All');

  const filteredOrders = activeTab === 'All'
    ? mockOrders
    : activeTab === 'Ongoing'
      ? mockOrders.filter((o) => o.status === 'Ongoing')
      : mockOrders.filter((o) => o.status === 'Delivered');

  return (
    <View style={styles.container}>
      <Header title="My Orders" />
      <View style={styles.tabRow}>
        {TABS.map((tab) => (
          <TouchableOpacity
            key={tab}
            style={[
              styles.tab,
              activeTab === tab && styles.tabActive,
            ]}
            onPress={() => setActiveTab(tab)}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.tabText,
                activeTab === tab && styles.tabTextActive,
              ]}
            >
              {tab}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <FlatList
        data={filteredOrders}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <OrderHistoryCard
            providerName={item.providerName}
            providerImage={item.providerImage}
            orderDate={item.orderDate}
            status={item.status}
            total={item.total}
            onReorder={() => {
              navigation.navigate('ProviderDetailsScreen', {
                providerId: 'p1',
                providerName: item.providerName,
              });
            }}
            onDetails={() => {
              if (item.status === 'Ongoing') {
                navigation.navigate('OrderTrackingScreen', { orderId: item.id });
              } else {
                navigation.navigate('OrderDeliveredScreen', { orderId: item.id });
              }
            }}
          />
        )}
        contentContainerStyle={styles.list}
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={styles.emptyText}>No orders found</Text>
          </View>
        }
      />
    </View>
  );
};