import React, { useState, useEffect, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Modal,
  Alert,
  Pressable,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Clock, CircleCheck as CheckCircle, ChefHat, Bell } from 'lucide-react-native';
import { API_URL } from '../../config';
import MaintenanceModal from '../../components/MaintenanceModal';
import StaffOperationModal from '../../components/StaffOperationModal';
import TimeLimitDisplay from '../../components/TimeLimitDisplay';
import { useTableStatus } from '../../hooks/useTableStatus';
import { useCustomerId } from '../../hooks/useCustomerId';
import { useTranslation } from '../../hooks/useTranslation';

interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  selectedOptions?: string;
  status: 'preparing' | 'ready' | 'served';
}

interface Order {
  id: string;
  items: OrderItem[];
  orderTime: string;
  subtotal: number;
  taxAmount: number;
  totalAmount: number;
}

export default function OrdersScreen() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const { tableNumber, setTableNumber, locked } = useTableStatus();
  const { customerId, refreshCustomerId } = useCustomerId();
  const { t } = useTranslation();
  
  // 顧客IDが取得できている場合（入店処理完了）は、locked状態に関係なく画面を表示
  const shouldShowStaffOperationModal = locked && !customerId;
  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
  const longPressTimerRef = useRef<number | null>(null);
  const [firstOrderTime, setFirstOrderTime] = useState<Date | null>(null);
  const [timeLimitMinutes, setTimeLimitMinutes] = useState(0);
  const [storeTimeLimitMinutes, setStoreTimeLimitMinutes] = useState(0);

  // 店舗の時間制限設定を取得
  useEffect(() => {
    const fetchStoreTimeLimit = async () => {
      try {
        const response = await fetch(`${API_URL}/customers/store-time-limit`, {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'X-App-Type': 'front',
          },
          body: JSON.stringify({ store_id: 1 }), // STORE_IDを使用
        });

        if (response.ok) {
          const data = await response.json();
          setStoreTimeLimitMinutes(data.timeLimitMinutes || 0);
        }
      } catch (error) {
        console.error('店舗時間制限設定取得エラー:', error);
      }
    };

    fetchStoreTimeLimit();
  }, []);

  // 顧客の時間制限設定を取得
  useEffect(() => {
    const fetchCustomerTimeLimit = async () => {
      if (!customerId) {
        setTimeLimitMinutes(0);
        return;
      }

      try {
        const response = await fetch(`${API_URL}/customers/${customerId}`, {
          credentials: 'include',
          headers: {
            'X-App-Type': 'front',
          },
        });

        if (response.ok) {
          const data = await response.json();
          if (data.drinkAllYouCanEnabled && data.timeLimitEnabled) {
            setTimeLimitMinutes(data.timeLimitMinutes || storeTimeLimitMinutes);
          } else {
            setTimeLimitMinutes(0);
          }
        } else {
          setTimeLimitMinutes(0);
        }
      } catch (error) {
        console.error('顧客時間制限取得エラー:', error);
        setTimeLimitMinutes(0);
      }
    };

    fetchCustomerTimeLimit();
  }, [customerId, storeTimeLimitMinutes]);

  // 注文データを取得
  useEffect(() => {
    const fetchOrders = async () => {
      if (!customerId) {
        setOrders([]);
        setLoading(false);
        return;
      }

      try {
        const response = await fetch(`${API_URL}/customers/orders`, {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ customer_id: customerId }),
        });
        
        if (!response.ok) {
          const errorText = await response.text();
          console.error('APIエラーレスポンス:', errorText);
          throw new Error(`注文データの取得に失敗しました: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (!Array.isArray(data)) {
          setOrders([]);
          return;
        }
        
        const formattedOrders = data.map((order: any) => {
          // orderDetailsが存在しない場合の安全な処理
          const orderDetails = order.orderDetails || [];
          
          const items = Array.isArray(orderDetails) ? orderDetails.map((detail: any) => {
            // ステータスを正しく取得（completedフィールドから判定）
            let status: 'preparing' | 'ready' | 'served' = 'preparing';
            if (detail.completed === true) {
              status = 'served';
            } else if (detail.completed === false) {
              status = 'preparing';
            } else {
              // completedフィールドがない場合は注文全体のステータスを使用
              switch (order.status) {
                case 'completed':
                  status = 'served';
                  break;
                case 'in_progress':
                  status = 'ready';
                  break;
                case 'pending':
                default:
                  status = 'preparing';
                  break;
              }
            }
            
            return {
              id: String(detail.id || detail.productId),
              name: detail.productName || '商品名不明',
              quantity: detail.quantity || 1,
              selectedOptions: detail.selectedOptions || '',
              status: status,
            };
          }) : [];
          
          return {
            id: String(order.id),
            items: items,
            orderTime: order.orderedAt 
              ? new Date(order.orderedAt).toLocaleTimeString('ja-JP', { 
                  hour: '2-digit', 
                  minute: '2-digit' 
                })
              : '',
            subtotal: order.subtotal || 0,
            taxAmount: order.taxAmount || 0,
            totalAmount: order.totalAmount || 0,
          };
        });
        
        setOrders(formattedOrders);
        
        // 最初の注文時間を設定
        if (data.length > 0) {
          const firstOrder = data[0]; // 最初の注文
          if (firstOrder.orderedAt) {
            setFirstOrderTime(new Date(firstOrder.orderedAt));
          }
        }
      } catch (error) {
        console.error('注文データ取得エラー:', error);
        setOrders([]);
      } finally {
        setLoading(false);
      }
    };

    fetchOrders();
  }, [customerId]);


  const [showTimeAlert, setShowTimeAlert] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(30 * 60); // 30 minutes in seconds

  useEffect(() => {
    if (!firstOrderTime || timeLimitMinutes === 0) return; // 制限時間が0の場合は制限なし

    // 最初の注文時間から設定された制限時間を計算
    const timeLimit = timeLimitMinutes * 60; // 分を秒に変換
    const startTime = firstOrderTime.getTime();
    const currentTime = Date.now();
    const elapsedTime = Math.floor((currentTime - startTime) / 1000);
    const remainingTime = Math.max(0, timeLimit - elapsedTime);

    setTimeRemaining(remainingTime);

    const timer = setInterval(() => {
      setTimeRemaining(prev => {
        const newRemaining = Math.max(0, prev - 1);
        if (newRemaining <= 1800 && newRemaining > 1800 - 1) { // Show alert at 30 minutes remaining
          setShowTimeAlert(true);
        }
        return newRemaining;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [firstOrderTime, timeLimitMinutes]);

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'preparing':
        return <ChefHat size={20} color="#F59E0B" />;
      case 'ready':
        return <Bell size={20} color="#10B981" />;
      case 'served':
        return <CheckCircle size={20} color="#6B7280" />;
      default:
        return <Clock size={20} color="#6B7280" />;
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'preparing':
        return '調理中';
      case 'ready':
        return '提供待ち';
      case 'served':
        return '提供済み';
      default:
        return '待機中';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'preparing':
        return '#F59E0B';
      case 'ready':
        return '#10B981';
      case 'served':
        return '#6B7280';
      default:
        return '#6B7280';
    }
  };

  const handleLongPress = () => {
    setShowMaintenanceModal(true);
  };

  const handlePressIn = () => {
    longPressTimerRef.current = setTimeout(() => {
      handleLongPress();
    }, 3000);
  };

  const handlePressOut = () => {
    if (longPressTimerRef.current) {
      clearTimeout(longPressTimerRef.current);
      longPressTimerRef.current = null;
    }
  };

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>{t('orders')}</Text>
        </View>
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>{t('loading')}</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (!customerId || orders.length === 0) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>{t('orders')}</Text>
        </View>
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyText}>{t('ordersEmpty')}</Text>
          <Text style={styles.emptySubtext}>
            {t('ordersEmptyDescription')}
          </Text>
        </View>
        
        <MaintenanceModal
          visible={showMaintenanceModal}
          onClose={() => setShowMaintenanceModal(false)}
          currentTableNumber={tableNumber}
          onTableChange={setTableNumber}
        />

        {shouldShowStaffOperationModal && <StaffOperationModal visible={true} isWaitingForCheckIn={true} />}
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>{t('orders')}</Text>
        <Text style={styles.tableNumber}>{tableNumber}</Text>
        {firstOrderTime && (
          <Text style={styles.startTime}>
            {t('startTime')}: {firstOrderTime.toLocaleTimeString('ja-JP', {
              hour: '2-digit',
              minute: '2-digit'
            })}
          </Text>
        )}
      </View>

      {/* Time Limit Display */}
      <TimeLimitDisplay
        timeLimitMinutes={timeLimitMinutes}
        firstOrderTime={firstOrderTime}
        timeLimitExtensionMinutes={30}
      />

      <ScrollView style={styles.content}>
        {orders.map((order) => (
          <View key={order.id} style={styles.orderCard}>
            <View style={styles.orderHeader}>
              <Text style={styles.orderTime}>{t('orderTime')}: {order.orderTime}</Text>
              <Text style={styles.orderNumber}>{t('orderNumber')}: #{order.id}</Text>
            </View>

            {order.items.map((item, index) => (
              <View key={`${order.id}-${item.id}-${index}`} style={styles.itemRow}>
                <View style={styles.itemInfo}>
                  <Text style={styles.itemName}>{item.name}</Text>
                  <Text style={styles.itemQuantity}>× {item.quantity}</Text>
                  {item.selectedOptions && (
                    <Text style={styles.itemOptions}>{item.selectedOptions}</Text>
                  )}
                </View>
                <View style={styles.statusContainer}>
                  {getStatusIcon(item.status)}
                  <Text style={[styles.statusText, { color: getStatusColor(item.status) }]}>
                    {getStatusText(item.status)}
                  </Text>
                </View>
              </View>
            ))}

            <View style={styles.orderSummary}>
              <View style={styles.summaryRow}>
                <Text style={styles.summaryLabel}>{t('subtotal')}</Text>
                <Text style={styles.summaryValue}>¥{order.subtotal.toLocaleString()}</Text>
              </View>
              <View style={styles.summaryRow}>
                <Text style={styles.summaryLabel}>{t('tax')}</Text>
                <Text style={styles.summaryValue}>¥{order.taxAmount.toLocaleString()}</Text>
              </View>
              <View style={styles.summaryRow}>
                <Text style={styles.totalLabel}>{t('total')}</Text>
                <Text style={styles.totalValue}>¥{order.totalAmount.toLocaleString()}</Text>
              </View>
            </View>
          </View>
        ))}
      </ScrollView>

      <Modal
        visible={showTimeAlert}
        transparent={true}
        animationType="fade"
        onRequestClose={() => setShowTimeAlert(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
              <Text style={styles.modalTitle}>{t('timeLimitNoticeTitle')}</Text>
              <Text style={styles.modalText}>
                {t('timeLimitNoticeMessage')}
              </Text>
            <TouchableOpacity
              style={styles.modalButton}
              onPress={() => setShowTimeAlert(false)}
            >
                <Text style={styles.modalButtonText}>{t('ok')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      <MaintenanceModal
        visible={showMaintenanceModal}
        onClose={() => setShowMaintenanceModal(false)}
        currentTableNumber={tableNumber}
        onTableChange={setTableNumber}
      />

      {shouldShowStaffOperationModal && <StaffOperationModal visible={true} isWaitingForCheckIn={true} />}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
  header: {
    backgroundColor: '#FFFFFF',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#111827',
  },
  tableNumber: {
    fontSize: 14,
    color: '#6B7280',
    marginTop: 4,
  },
  startTime: {
    fontSize: 12,
    color: '#9CA3AF',
    marginTop: 2,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    fontSize: 16,
    color: '#6B7280',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 40,
  },
  emptyText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#374151',
    marginBottom: 8,
  },
  emptySubtext: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
    lineHeight: 20,
  },
  content: {
    flex: 1,
    padding: 16,
  },
  orderCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  orderHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
  },
  orderTime: {
    fontSize: 14,
    color: '#6B7280',
  },
  orderNumber: {
    fontSize: 14,
    fontWeight: '600',
    color: '#111827',
  },
  itemRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  itemInfo: {
    flex: 1,
  },
  itemName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111827',
  },
  itemQuantity: {
    fontSize: 14,
    color: '#6B7280',
    marginTop: 2,
  },
  itemOptions: {
    fontSize: 12,
    color: '#9CA3AF',
    marginTop: 2,
  },
  statusContainer: {
    alignItems: 'center',
    minWidth: 80,
  },
  statusText: {
    fontSize: 12,
    fontWeight: '600',
    marginTop: 4,
  },
  orderSummary: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
  },
  summaryRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 2,
  },
  summaryLabel: {
    fontSize: 14,
    color: '#6B7280',
  },
  summaryValue: {
    fontSize: 14,
    fontWeight: '600',
    color: '#111827',
  },
  totalLabel: {
    fontSize: 16,
    fontWeight: '700',
    color: '#111827',
  },
  totalValue: {
    fontSize: 16,
    fontWeight: '700',
    color: '#F97316',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 24,
    margin: 20,
    alignItems: 'center',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#111827',
    marginBottom: 12,
  },
  modalText: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: 20,
  },
  modalButton: {
    backgroundColor: '#3B82F6',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  modalButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});