"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import { ArrowLeft, PackageSearch } from "lucide-react";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { Button } from "@/components/ui/button";
import { OrderDetailsHeader } from "./components/order-details-header";
import { OrderTimeline } from "./components/order-timeline";
import { OrderItemsCard } from "./components/order-items-card";
import { OrderSummaryCard } from "./components/order-summary-card";
import { CustomerCard } from "./components/customer-card";
import { ShippingCard } from "./components/shipping-card";
import { BillingPaymentCard } from "./components/billing-payment-card";
import { FulfillmentCard } from "./components/fulfillment-card";
import { PaymentActionsCard } from "./components/payment-actions-card";
import { UpdateOrderStatusDialog } from "../components/update-order-status-dialog";
import { CancelOrderDialog } from "../components/cancel-order-dialog";
import { updateOrderStatus, cancelOrder } from "@/lib/actions/orders";
import type {
  Order,
  OrderStatus,
  FulfillmentStatus,
  ShipmentInfo,
} from "../types";

const CANCELLABLE = new Set<OrderStatus>(["pending", "processing", "shipped"]);

function deriveFulfillment(status: OrderStatus): FulfillmentStatus {
  switch (status) {
    case "shipped":
    case "delivered":
      return "fulfilled";
    case "cancelled":
      return "cancelled";
    case "processing":
      return "partially-fulfilled";
    default:
      return "unfulfilled";
  }
}

export function OrderDetailsPage({ order: fetched }: { order: Order | null }) {
  // Held in state so status updates re-render optimistically while the
  // Server Action persists and revalidates the route.
  const [order, setOrder] = useState<Order | null>(fetched);
  const [, startTransition] = useTransition();
  const [statusOpen, setStatusOpen] = useState(false);
  const [cancelOpen, setCancelOpen] = useState(false);
  const [actionError, setActionError] = useState<string | null>(null);

  if (!order) {
    return (
      <Empty className="min-h-64">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <PackageSearch className="size-6" />
          </EmptyMedia>
          <EmptyTitle>Order not found</EmptyTitle>
          <EmptyDescription>
            The order you are looking for doesn&apos;t exist or has been
            removed.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Link href="/admin/dashboard/orders">
            <Button size="sm">
              <ArrowLeft className="h-4 w-4 mr-1.5" />
              Back to orders
            </Button>
          </Link>
        </EmptyContent>
      </Empty>
    );
  }

  const canCancel = CANCELLABLE.has(order.status);

  const handleStatusChange = (status: OrderStatus) => {
    setOrder((prev) =>
      prev ? { ...prev, status, fulfillmentStatus: deriveFulfillment(status) } : prev,
    );
    setActionError(null);
    startTransition(() => {
      void updateOrderStatus(order.id, status).then((result) => {
        if (!result.ok) setActionError(result.error);
      });
    });
  };

  const handleCancelOrder = (options: { refund: boolean }) => {
    setOrder((prev) => {
      if (!prev) return prev;
      return {
        ...prev,
        status: "cancelled",
        fulfillmentStatus: "cancelled",
        payment:
          options.refund && prev.payment.status === "paid"
            ? { ...prev.payment, status: "refunded" }
            : prev.payment,
      };
    });
    setActionError(null);
    startTransition(() => {
      void cancelOrder(order.id, options).then((result) => {
        if (!result.ok) setActionError(result.error);
      });
    });
  };

  const handlePaymentUpdated = (payment: { status: "paid" | "refunded" | "partial-refund" }) => {
    setOrder((prev) => (prev ? { ...prev, payment: { ...prev.payment, ...payment } } : prev));
    setActionError(null);
  };

  const handleFulfillmentUpdated = (updates: {
    fulfillmentStatus: FulfillmentStatus;
    shipment?: ShipmentInfo;
    items: { id: string; shippedQuantity: number }[];
  }) => {
    setOrder((prev) =>
      prev
        ? {
            ...prev,
            fulfillmentStatus: updates.fulfillmentStatus,
            shipment: updates.shipment,
            items: prev.items.map((item) => {
              const shipped = updates.items.find((u) => u.id === item.id);
              return shipped
                ? { ...item, shippedQuantity: shipped.shippedQuantity }
                : item;
            }),
          }
        : prev,
    );
    setActionError(null);
  };

  return (
    <div className="flex flex-col gap-6">
      {actionError && (
        <div className="flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive">
          <span>{actionError}</span>
          <button
            type="button"
            aria-label="Dismiss"
            onClick={() => setActionError(null)}
            className="text-destructive/70 hover:text-destructive"
          >
            ✕
          </button>
        </div>
      )}

      {/* Header + actions */}
      <OrderDetailsHeader
        order={order}
        canCancel={canCancel}
        onUpdateStatus={() => setStatusOpen(true)}
        onCancelOrder={() => setCancelOpen(true)}
      />

      {/* Layout */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main column */}
        <div className="space-y-6 lg:col-span-2">
          <OrderItemsCard order={order} />
          <OrderSummaryCard order={order} />

          {order.notes && (
            <div className="rounded-lg border border-amber-600/20 bg-amber-500/5 px-4 py-3 text-sm">
              <p className="font-medium text-amber-700 dark:text-amber-400">
                Notes
              </p>
              <p className="mt-0.5 text-muted-foreground">{order.notes}</p>
            </div>
          )}
        </div>

        {/* Sidebar column */}
        <div className="space-y-6">
          <OrderTimeline events={order.timeline} />
          <CustomerCard order={order} />
          <ShippingCard order={order} />
          <FulfillmentCard order={order} onOrderUpdated={handleFulfillmentUpdated} />
          <BillingPaymentCard order={order} />
          <PaymentActionsCard order={order} onOrderUpdated={handlePaymentUpdated} />
        </div>
      </div>

      {/* Dialogs */}
      <UpdateOrderStatusDialog
        order={order}
        open={statusOpen}
        onOpenChange={setStatusOpen}
        onConfirm={handleStatusChange}
      />
      <CancelOrderDialog
        order={order}
        open={cancelOpen}
        onOpenChange={setCancelOpen}
        onConfirm={handleCancelOrder}
      />
    </div>
  );
}