import React, { useState } from 'react';
import { ShoppingCart, User, DollarSign, Clock } from 'lucide-react';

export default function OrderDetail() {
  const [order] = useState({
    id: 'ORD-12345',
    title: 'Table 5',
    state: 'open',
    total: 4250,
    createdTime: Date.now() - 3600000,
    lineItems: [
      { id: '1', name: 'Burger', price: 1200, unitQty: 2 },
      { id: '2', name: 'Fries', price: 600, unitQty: 2 },
      { id: '3', name: 'Soda', price: 325, unitQty: 2 },
    ],
  });

  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 Detail</h1>
        <p className="text-gray-400">{order.id}</p>
      </header>

      <div className="grid grid-cols-2 gap-6">
        <div className="bg-gray-800 rounded-lg p-6">
          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
            <ShoppingCart size={20} /> Line Items
          </h2>
          <div className="space-y-3">
            {order.lineItems.map(item => (
              <div key={item.id} className="flex justify-between items-center bg-gray-700 p-3 rounded">
                <div>
                  <div className="font-medium">{item.name}</div>
                  <div className="text-sm text-gray-400">Qty: {item.unitQty}</div>
                </div>
                <div className="text-lg font-semibold">${(item.price * item.unitQty / 100).toFixed(2)}</div>
              </div>
            ))}
          </div>
          <div className="mt-6 pt-4 border-t border-gray-700 flex justify-between text-xl font-bold">
            <span>Total</span>
            <span>${(order.total / 100).toFixed(2)}</span>
          </div>
        </div>

        <div className="space-y-6">
          <div className="bg-gray-800 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-4">Order Info</h3>
            <div className="space-y-3">
              <InfoRow icon={<User size={16} />} label="Title" value={order.title} />
              <InfoRow icon={<Clock size={16} />} label="Created" value={new Date(order.createdTime).toLocaleString()} />
              <InfoRow icon={<DollarSign size={16} />} label="State" value={order.state.toUpperCase()} />
            </div>
          </div>

          <div className="bg-gray-800 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-4">Actions</h3>
            <div className="space-y-2">
              <button className="w-full bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition">
                Add Item
              </button>
              <button className="w-full bg-green-600 hover:bg-green-700 px-4 py-2 rounded transition">
                Fire Order
              </button>
              <button className="w-full bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded transition">
                Lock Order
              </button>
              <button className="w-full bg-red-600 hover:bg-red-700 px-4 py-2 rounded transition">
                Delete Order
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function InfoRow({ icon, label, value }: any) {
  return (
    <div className="flex items-center gap-3">
      <div className="text-gray-400">{icon}</div>
      <div className="flex-1">
        <div className="text-sm text-gray-400">{label}</div>
        <div className="font-medium">{value}</div>
      </div>
    </div>
  );
}
