"use client";

import Link from "next/link";
import { ArrowLeft, CheckCircle2, Pencil, Ban } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  OrderStatusBadge,
  FulfillmentStatusBadge,
} from "../../components/order-status-badge";
import { formatDateTime } from "../../lib/format-utils";
import type { Order } from "../../types";

interface OrderDetailsHeaderProps {
  order: Order;
  onUpdateStatus: () => void;
  onCancelOrder: () => void;
  canCancel: boolean;
}

export function OrderDetailsHeader({
  order,
  onUpdateStatus,
  onCancelOrder,
  canCancel,
}: OrderDetailsHeaderProps) {
  return (
    <div className="space-y-4">
      <Link
        href="/admin/dashboard/orders"
        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" />
        Back to orders
      </Link>

      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="space-y-1.5">
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="text-2xl font-bold tracking-tight">
              {order.orderNumber}
            </h1>
            <OrderStatusBadge status={order.status} />
            <FulfillmentStatusBadge
              status={order.fulfillmentStatus}
              className="hidden sm:inline-flex"
            />
          </div>
          <p className="text-sm text-muted-foreground">
            Placed on{" "}
            <span className="font-medium text-foreground">
              {formatDateTime(order.date)}
            </span>
            {" · "}
            <span className="font-mono">{order.customer.name}</span>
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <Button variant="outline" size="sm" onClick={onUpdateStatus}>
            <Pencil className="h-4 w-4 mr-1.5" />
            Update status
          </Button>
          {canCancel ? (
            <Button variant="destructive" size="sm" onClick={onCancelOrder}>
              <Ban className="h-4 w-4 mr-1.5" />
              Cancel order
            </Button>
          ) : (
            <Button
              variant="secondary"
              size="sm"
              className="pointer-events-none opacity-60"
            >
              <CheckCircle2 className="h-4 w-4 mr-1.5" />
              Order closed
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}