import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { ScreenContainer } from '../../components/layout/ScreenContainer';
import { AnimatedCard } from '../../components/ui/AnimatedCard';
import { EmptyState } from '../../components/ui/EmptyState';
import { StatusBadge } from '../../components/common/StatusBadge';
import { useResponsive } from '../../hooks/useResponsive';
import { materialService } from '../../services/materialService';
import { MaterialOrder } from '../../types';
import { colors, spacing, radii } from '../../theme';

export default function OrderListScreen() {
  const navigation = useNavigation<any>();
  const { contentPadding, fontSize } = useResponsive();
  const [orders, setOrders] = useState<MaterialOrder[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const loadData = async () => {
    try {
      const data = await materialService.listOrders();
      setOrders(data);
    } catch {} finally { setLoading(false); setRefreshing(false); }
  };

  useEffect(() => { loadData(); }, []);

  const onRefresh = () => { setRefreshing(true); loadData(); };

  return (
    <ScreenContainer
      title="Purchase Orders"
      subtitle={`${orders.length} orders`}
      onBack={() => navigation.goBack()}
      loading={loading}
      refreshing={refreshing}
      onRefresh={onRefresh}
      scroll={true}
      contentPadding={contentPadding}
      rightAction={{ icon: 'add-circle-outline', onPress: () => navigation.navigate('PurchaseOrder') }}
    >
      {orders.length > 0 ? (
        orders.map((order, index) => (
          <AnimatedCard key={order.id} delay={index * 50} style={{ marginBottom: spacing.sm }}>
            <TouchableOpacity
              style={[styles.card, { gap: spacing.md }]}
              onPress={() => navigation.navigate('OrderDetail', { orderId: order.id })}
              activeOpacity={0.7}
            >
              <View style={[styles.iconContainer, { backgroundColor: colors.info[50] }]}>
                <Ionicons name="receipt-outline" size={22} color={colors.info[600]} />
              </View>
              <View style={styles.info}>
                <Text style={[styles.orderNum, { fontSize: fontSize.body }]}>{order.order_number}</Text>
                <View style={styles.metaRow}>
                  <StatusBadge status={order.order_status || 'REQUESTED'} />
                  {order.item_count != null && (
                    <Text style={[styles.metaText, { color: colors.gray[500], fontSize: fontSize.caption }]}>
                      {(order.item_count as any)} items
                    </Text>
                  )}
                </View>
                <Text style={[styles.date, { color: colors.gray[400], fontSize: fontSize.caption }]}>
                  {new Date(order.order_date).toLocaleDateString()}
                  {order.expected_delivery_date && ` • Due: ${new Date(order.expected_delivery_date).toLocaleDateString()}`}
                </Text>
              </View>
              <Ionicons name="chevron-forward" size={18} color={colors.gray[300]} />
            </TouchableOpacity>
          </AnimatedCard>
        ))
      ) : (
        <EmptyState
          icon="receipt-outline"
          title="No orders"
          description="Create a purchase order to get started"
          action={
            <TouchableOpacity style={styles.createBtn} onPress={() => navigation.navigate('PurchaseOrder')}>
              <Text style={[styles.createBtnText, { fontSize: fontSize.body }]}>Create Order</Text>
            </TouchableOpacity>
          }
        />
      )}
    </ScreenContainer>
  );
}

const styles = StyleSheet.create({
  card: { flexDirection: 'row', alignItems: 'center' },
  iconContainer: { width: 44, height: 44, borderRadius: radii.lg, justifyContent: 'center', alignItems: 'center' },
  info: { flex: 1, gap: 3 },
  orderNum: { fontWeight: '600', color: colors.gray[900] },
  metaRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
  metaText: { fontWeight: '500' },
  date: {},
  createBtn: {
    backgroundColor: colors.primary[600], borderRadius: radii.md,
    paddingHorizontal: spacing.lg, paddingVertical: spacing.sm,
  },
  createBtnText: { color: colors.white, fontWeight: '600' },
});