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

interface Order {
  id: string;
  orderNumber: string;
  status: string;
  type: string;
  customer: string;
  server: string;
  total: number;
  createdAt: string;
}

export default function OrderGrid() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [typeFilter, setTypeFilter] = useState('all');

  useEffect(() => {
    // Mock data
    const mockOrders: Order[] = [
      { id: '1', orderNumber: 'ORD-142', status: 'in_progress', type: 'dine_in', customer: 'Sarah Johnson', server: 'Mike Chen', total: 77.87, createdAt: '2024-01-15T14:30:00Z' },
      { id: '2', orderNumber: 'ORD-141', status: 'completed', type: 'takeout', customer: 'John Smith', server: 'Lisa Park', total: 45.50, createdAt: '2024-01-15T14:15:00Z' },
      { id: '3', orderNumber: 'ORD-140', status: 'pending', type: 'delivery', customer: 'Emma Davis', server: 'Tom Wilson', total: 92.30, createdAt: '2024-01-15T14:00:00Z' },
      { id: '4', orderNumber: 'ORD-139', status: 'completed', type: 'dine_in', customer: 'Michael Brown', server: 'Mike Chen', total: 156.75, createdAt: '2024-01-15T13:45:00Z' },
      { id: '5', orderNumber: 'ORD-138', status: 'voided', type: 'takeout', customer: 'Jessica Lee', server: 'Lisa Park', total: 34.20, createdAt: '2024-01-15T13:30:00Z' },
      { id: '6', orderNumber: 'ORD-137', status: 'completed', type: 'dine_in', customer: 'David Wilson', server: 'Tom Wilson', total: 68.90, createdAt: '2024-01-15T13:15:00Z' },
      { id: '7', orderNumber: 'ORD-136', status: 'completed', type: 'curbside', customer: 'Amy Chen', server: 'Mike Chen', total: 52.40, createdAt: '2024-01-15T13:00:00Z' },
      { id: '8', orderNumber: 'ORD-135', status: 'completed', type: 'dine_in', customer: 'Robert Taylor', server: 'Lisa Park', total: 89.25, createdAt: '2024-01-15T12:45:00Z' },
    ];
    setOrders(mockOrders);
  }, []);

  const filteredOrders = orders.filter((order) => {
    const matchesSearch =
      order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
      order.customer.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = statusFilter === 'all' || order.status === statusFilter;
    const matchesType = typeFilter === 'all' || order.type === typeFilter;
    return matchesSearch && matchesStatus && matchesType;
  });

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

  return (
    <div className="app">
      <header className="app-header">
        <h1>📋 Order History</h1>
        <p>Search and filter all orders</p>
      </header>

      <div className="filters">
        <input
          type="text"
          className="search-input"
          placeholder="Search by order number or customer..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <select
          className="filter-select"
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
        >
          <option value="all">All Statuses</option>
          <option value="pending">Pending</option>
          <option value="in_progress">In Progress</option>
          <option value="ready">Ready</option>
          <option value="completed">Completed</option>
          <option value="voided">Voided</option>
        </select>
        <select
          className="filter-select"
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
        >
          <option value="all">All Types</option>
          <option value="dine_in">Dine In</option>
          <option value="takeout">Takeout</option>
          <option value="delivery">Delivery</option>
          <option value="curbside">Curbside</option>
        </select>
      </div>

      <div className="results-info">
        Showing {filteredOrders.length} of {orders.length} orders
      </div>

      <div className="table-container">
        <table className="orders-table">
          <thead>
            <tr>
              <th>Order #</th>
              <th>Customer</th>
              <th>Type</th>
              <th>Server</th>
              <th>Status</th>
              <th>Total</th>
              <th>Time</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {filteredOrders.map((order) => (
              <tr key={order.id}>
                <td className="order-number">{order.orderNumber}</td>
                <td>{order.customer}</td>
                <td>
                  <span className="type-badge">
                    {order.type.replace('_', ' ')}
                  </span>
                </td>
                <td>{order.server}</td>
                <td>
                  <span
                    className="status-badge"
                    style={{ backgroundColor: getStatusColor(order.status) }}
                  >
                    {order.status.replace('_', ' ')}
                  </span>
                </td>
                <td className="total">${order.total.toFixed(2)}</td>
                <td className="time">
                  {new Date(order.createdAt).toLocaleTimeString()}
                </td>
                <td>
                  <button className="action-btn">View</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {filteredOrders.length === 0 && (
        <div className="no-results">
          No orders found matching your filters
        </div>
      )}
    </div>
  );
}
