import React, { useState, useEffect } from 'react';
import { Package, Clock, DollarSign, TrendingUp } from 'lucide-react';

interface Order {
  id: string;
  total: number;
  state: string;
  createdTime: number;
  title?: string;
}

export default function OrderDashboard() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [stats, setStats] = useState({
    total: 0,
    open: 0,
    paid: 0,
    totalRevenue: 0,
  });

  useEffect(() => {
    // In production, fetch from MCP tools
    const mockOrders: Order[] = [
      { id: '1', total: 4250, state: 'open', createdTime: Date.now() - 3600000, title: 'Table 5' },
      { id: '2', total: 3500, state: 'paid', createdTime: Date.now() - 7200000, title: 'Table 3' },
      { id: '3', total: 6200, state: 'open', createdTime: Date.now() - 1800000, title: 'Table 8' },
    ];
    setOrders(mockOrders);

    setStats({
      total: mockOrders.length,
      open: mockOrders.filter(o => o.state === 'open').length,
      paid: mockOrders.filter(o => o.state === 'paid').length,
      totalRevenue: mockOrders.reduce((sum, o) => sum + o.total, 0),
    });
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <header className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Order Dashboard</h1>
        <p className="text-gray-400">Real-time order management</p>
      </header>

      <div className="grid grid-cols-4 gap-4 mb-8">
        <StatCard icon={<Package />} label="Total Orders" value={stats.total} />
        <StatCard icon={<Clock />} label="Open Orders" value={stats.open} color="text-yellow-400" />
        <StatCard icon={<DollarSign />} label="Paid Orders" value={stats.paid} color="text-green-400" />
        <StatCard icon={<TrendingUp />} label="Revenue" value={`$${(stats.totalRevenue / 100).toFixed(2)}`} color="text-blue-400" />
      </div>

      <div className="bg-gray-800 rounded-lg p-6">
        <h2 className="text-xl font-semibold mb-4">Recent Orders</h2>
        <div className="space-y-3">
          {orders.map(order => (
            <div key={order.id} className="bg-gray-700 p-4 rounded flex justify-between items-center hover:bg-gray-600 transition">
              <div>
                <div className="font-medium">{order.title || `Order ${order.id}`}</div>
                <div className="text-sm text-gray-400">
                  {new Date(order.createdTime).toLocaleTimeString()}
                </div>
              </div>
              <div className="flex items-center gap-4">
                <span className={`px-3 py-1 rounded text-sm ${
                  order.state === 'open' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400'
                }`}>
                  {order.state.toUpperCase()}
                </span>
                <span className="text-lg font-semibold">${(order.total / 100).toFixed(2)}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCard({ icon, label, value, color = 'text-gray-100' }: any) {
  return (
    <div className="bg-gray-800 p-4 rounded-lg">
      <div className={`${color} mb-2`}>{icon}</div>
      <div className="text-2xl font-bold mb-1">{value}</div>
      <div className="text-sm text-gray-400">{label}</div>
    </div>
  );
}
