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

interface OrderStats {
  total: number;
  pending: number;
  inProgress: number;
  completed: number;
  revenue: number;
  averageValue: number;
}

interface RecentOrder {
  id: string;
  orderNumber: string;
  status: string;
  total: number;
  time: string;
}

export default function OrderDashboard() {
  const [stats, setStats] = useState<OrderStats>({
    total: 0,
    pending: 0,
    inProgress: 0,
    completed: 0,
    revenue: 0,
    averageValue: 0,
  });
  const [recentOrders, setRecentOrders] = useState<RecentOrder[]>([]);
  const [hourlyVolume, setHourlyVolume] = useState<{ hour: string; count: number }[]>([]);

  useEffect(() => {
    // Mock data
    setStats({
      total: 142,
      pending: 8,
      inProgress: 12,
      completed: 122,
      revenue: 8547.32,
      averageValue: 60.19,
    });

    setRecentOrders([
      { id: '1', orderNumber: 'ORD-142', status: 'in_progress', total: 68.50, time: '2 min ago' },
      { id: '2', orderNumber: 'ORD-141', status: 'pending', total: 45.00, time: '5 min ago' },
      { id: '3', orderNumber: 'ORD-140', status: 'completed', total: 92.75, time: '8 min ago' },
      { id: '4', orderNumber: 'ORD-139', status: 'in_progress', total: 54.25, time: '12 min ago' },
      { id: '5', orderNumber: 'ORD-138', status: 'completed', total: 78.90, time: '15 min ago' },
    ]);

    setHourlyVolume([
      { hour: '11am', count: 15 },
      { hour: '12pm', count: 28 },
      { hour: '1pm', count: 32 },
      { hour: '2pm', count: 18 },
      { hour: '3pm', count: 12 },
      { hour: '4pm', count: 8 },
      { hour: '5pm', count: 22 },
      { hour: '6pm', count: 35 },
    ]);
  }, []);

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

  const maxVolume = Math.max(...hourlyVolume.map(h => h.count));

  return (
    <div className="app">
      <header className="app-header">
        <h1>📊 Order Dashboard</h1>
        <p>Live order statistics and activity</p>
      </header>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Total Orders Today</div>
          <div className="stat-value">{stats.total}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Pending</div>
          <div className="stat-value pending">{stats.pending}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">In Progress</div>
          <div className="stat-value in-progress">{stats.inProgress}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Completed</div>
          <div className="stat-value completed">{stats.completed}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Revenue</div>
          <div className="stat-value revenue">${stats.revenue.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Average Order Value</div>
          <div className="stat-value">${stats.averageValue.toFixed(2)}</div>
        </div>
      </div>

      <div className="dashboard-content">
        <div className="section">
          <h2>Hourly Order Volume</h2>
          <div className="chart">
            {hourlyVolume.map((item) => (
              <div key={item.hour} className="chart-bar">
                <div
                  className="bar-fill"
                  style={{ height: `${(item.count / maxVolume) * 100}%` }}
                >
                  <span className="bar-label">{item.count}</span>
                </div>
                <div className="bar-hour">{item.hour}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="section">
          <h2>Recent Orders</h2>
          <div className="recent-orders">
            {recentOrders.map((order) => (
              <div key={order.id} className="order-row">
                <div className="order-info">
                  <span className="order-number">{order.orderNumber}</span>
                  <span className="order-time">{order.time}</span>
                </div>
                <div className="order-details">
                  <span
                    className="order-status"
                    style={{ backgroundColor: getStatusColor(order.status) }}
                  >
                    {order.status.replace('_', ' ')}
                  </span>
                  <span className="order-total">${order.total.toFixed(2)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
