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

export default function OrderDetailScreen() {
  const navigation = useNavigation<any>();
  const route = useRoute<any>();
  const { orderId } = route.params;
  const { contentPadding, fontSize } = useResponsive();
  const { toast } = useToast();
  const [order, setOrder] = useState<MaterialOrder | null>(null);
  const [loading, setLoading] = useState(true);

  const loadData = async () => {
    try {
      const data = await materialService.getOrder(orderId);
      setOrder(data);
    } catch {} finally { setLoading(false); }
  };

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

  const handleStatusUpdate = async (status: string) => {
    try {
      await materialService.updateOrderStatus(orderId, status);
      toast(`Order ${status.toLowerCase()}`, 'success');
      loadData();
    } catch { toast('Failed to update', 'error'); }
  };

  if (!order) return null;

  const nextStatus: Record<string, string> = {
    REQUESTED: 'APPROVED',
    APPROVED: 'ORDERED',
    ORDERED: 'RECEIVED',
  };

  return (
    <ScreenContainer
      title={order.order_number}
      subtitle={`Created ${new Date(order.order_date).toLocaleDateString()}`}
      onBack={() => navigation.goBack()}
      loading={loading}
      scroll={true}
      contentPadding={contentPadding}
    >
      <AnimatedCard delay={0}>
        <View style={styles.statusRow}>
          <StatusBadge status={order.order_status || 'REQUESTED'} size="md" />
        </View>
        {order.expected_delivery_date && (
          <View style={[styles.metaRow, { marginTop: spacing.md }]}>
            <Ionicons name="calendar-outline" size={16} color={colors.gray[500]} />
            <Text style={[styles.metaText, { color: colors.gray[600], fontSize: fontSize.body }]}>
              Expected: {new Date(order.expected_delivery_date).toLocaleDateString()}
            </Text>
          </View>
        )}
        {order.first_name && (
          <View style={[styles.metaRow, { marginTop: spacing.sm }]}>
            <Ionicons name="person-outline" size={16} color={colors.gray[500]} />
            <Text style={[styles.metaText, { color: colors.gray[600], fontSize: fontSize.body }]}>
              Created by: {order.first_name} {order.last_name}
            </Text>
          </View>
        )}
        {order.remarks && (
          <Text style={[styles.remarks, { color: colors.gray[600], fontSize: fontSize.body, marginTop: spacing.md }]}>
            {order.remarks}
          </Text>
        )}
      </AnimatedCard>

      <AnimatedCard delay={100} style={{ marginTop: spacing.md }}>
        <Text style={[styles.sectionTitle, { fontSize: fontSize.body, marginBottom: spacing.md }]}>
          Items ({order.items?.length || 0})
        </Text>
        {order.items && order.items.length > 0 ? (
          order.items.map((item, i) => (
            <View key={item.id} style={[styles.itemRow, { paddingVertical: spacing.sm, borderBottomWidth: 1, borderBottomColor: colors.gray[100] }]}>
              <View style={[styles.itemIcon, { backgroundColor: colors.primary[50] }]}>
                <Ionicons name="cube-outline" size={16} color={colors.primary[600]} />
              </View>
              <View style={styles.itemInfo}>
                <Text style={[styles.itemName, { fontSize: fontSize.body }]}>{item.material_name}</Text>
                <Text style={[styles.itemCode, { color: colors.gray[500], fontSize: fontSize.caption }]}>{item.material_code}</Text>
              </View>
              <Text style={[styles.itemQty, { color: colors.gray[800], fontSize: fontSize.body }]}>
                x{item.quantity}
              </Text>
              {item.unit_price && (
                <Text style={[styles.itemPrice, { color: colors.success[600], fontSize: fontSize.body }]}>
                  ${item.unit_price}
                </Text>
              )}
            </View>
          ))
        ) : (
          <Text style={[styles.emptyText, { fontSize: fontSize.body }]}>No items</Text>
        )}
      </AnimatedCard>

      {nextStatus[order.order_status || 'REQUESTED'] && (
        <AnimatedCard delay={200} style={{ marginTop: spacing.md }}>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => handleStatusUpdate(nextStatus[order.order_status || 'REQUESTED'])}
          >
            <Ionicons name="arrow-forward-outline" size={20} color={colors.white} />
            <Text style={[styles.actionButtonText, { fontSize: fontSize.body }]}>
              Mark as {nextStatus[order.order_status || 'REQUESTED']}
            </Text>
          </TouchableOpacity>
        </AnimatedCard>
      )}

      <View style={{ height: 40 }} />
    </ScreenContainer>
  );
}

const styles = StyleSheet.create({
  statusRow: { flexDirection: 'row', gap: spacing.sm },
  metaRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs },
  metaText: { fontWeight: '500' },
  remarks: { lineHeight: 20 },
  sectionTitle: { fontWeight: '600', color: colors.gray[900] },
  itemRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
  itemIcon: { width: 32, height: 32, borderRadius: radii.sm, justifyContent: 'center', alignItems: 'center' },
  itemInfo: { flex: 1 },
  itemName: { fontWeight: '600', color: colors.gray[900] },
  itemCode: { fontWeight: '500' },
  itemQty: { fontWeight: '600' },
  itemPrice: { fontWeight: '600' },
  emptyText: { color: colors.gray[400], textAlign: 'center', paddingVertical: spacing.lg },
  actionButton: {
    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: spacing.sm,
    backgroundColor: colors.primary[600], borderRadius: radii.md, paddingVertical: 14,
  },
  actionButtonText: { color: colors.white, fontWeight: '600' },
});