import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
import { AuditTimeline } from "./audit-timeline";
import { OrderItemsPanel } from "./order-items-panel";
import { OrderNotes } from "./order-notes";
import { OrderSummaryPanel } from "./order-summary";
import { ShippingAddressForm } from "./shipping-address-form";

interface OrderDetailPageProps {
  order: OrderDetail;
  auditEvents: AuditEvent[];
  onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
  onSaveAddress: (address: Address) => Promise<void>;
  onSaveNotes: (notes: string) => Promise<void>;
  onCancel: () => Promise<void>;
}

export function OrderDetailPage({
  order,
  auditEvents,
  onUpdateQuantity,
  onSaveAddress,
  onSaveNotes,
  onCancel
}: OrderDetailPageProps) {
  return (
    <div className="space-y-4">
      <OrderSummaryPanel order={order} />
      <div className="flex justify-end">
        <button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white" onClick={() => void onCancel()} type="button">
          Cancel order
        </button>
      </div>
      <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
      <ShippingAddressForm order={order} onSave={onSaveAddress} />
      <OrderNotes order={order} onSave={onSaveNotes} />
      <AuditTimeline events={auditEvents} />
    </div>
  );
}