import { useState, useEffect } from 'react';
import './App.css';

interface Order {
  id: string;
  orderNumber: string;
  status: string;
  total: number;
  items: any[];
  createdAt: string;
}

export default function OrdersApp() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    // Simulated data for demonstration
    const mockOrders: Order[] = [
      {
        id: '1',
        orderNumber: 'ORD-001',
        status: 'preparing',
        total: 45.99,
        items: [],
        createdAt: new Date().toISOString(),
      },
      {
        id: '2',
        orderNumber: 'ORD-002',
        status: 'ready',
        total: 32.50,
        items: [],
        createdAt: new Date().toISOString(),
      },
    ];
    setOrders(mockOrders);
    setLoading(false);
  }, []);

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      pending: '#fbbf24',
      preparing: '#3b82f6',
      ready: '#10b981',
      served: '#8b5cf6',
      completed: '#6b7280',
      cancelled: '#ef4444',
    };
    return colors[status] || '#6b7280';
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>🍽️ Orders Dashboard</h1>
        <p>Real-time order tracking and management</p>
      </header>

      <div className="filter-bar">
        {['all', 'pending', 'preparing', 'ready', 'served'].map((status) => (
          <button
            key={status}
            className={`filter-btn ${filter === status ? 'active' : ''}`}
            onClick={() => setFilter(status)}
          >
            {status.charAt(0).toUpperCase() + status.slice(1)}
          </button>
        ))}
      </div>

      <div className="orders-grid">
        {loading ? (
          <div className="loading">Loading orders...</div>
        ) : (
          orders.map((order) => (
            <div key={order.id} className="order-card">
              <div className="order-header">
                <span className="order-number">{order.orderNumber}</span>
                <span
                  className="order-status"
                  style={{ backgroundColor: getStatusColor(order.status) }}
                >
                  {order.status}
                </span>
              </div>
              <div className="order-details">
                <div className="order-total">${order.total.toFixed(2)}</div>
                <div className="order-time">
                  {new Date(order.createdAt).toLocaleTimeString()}
                </div>
              </div>
              <div className="order-actions">
                <button className="action-btn">View Details</button>
                <button className="action-btn primary">Update Status</button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
