import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import { getStyles } from './myOrdersScreen.styles';
import { Header, OrderHistoryCard } from '@components';
import { useAppTheme } from '@theme';

const TABS = ['All', 'Ongoing', 'Completed'];
const mockOrders = [
  { id: '1', providerName: 'Pizza Planet', providerImage: '', orderDate: '29 Jun 2026', status: 'Delivered', total: 599 },
  { id: '2', providerName: 'Fresh Mart', providerImage: '', orderDate: '28 Jun 2026', status: 'Ongoing', total: 349 },
  { id: '3', 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 [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={() => {}}
            onDetails={() => {}}
          />
        )}
        contentContainerStyle={styles.list}
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={styles.emptyText}>No orders found</Text>
          </View>
        }
      />
    </View>
  );
};