"use client";

import { use, useState } from "react";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { ArrowRight, MapPin, Navigation, Package, UserRound } from "lucide-react";
import { PageHeader, Breadcrumbs } from "@/components/shared/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { ErrorState } from "@/components/shared/states";
import { OrderStatusBadge } from "@/components/shared/status-badges";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { getOrder } from "@/services/orders";
import { queryKeys } from "@/lib/query-keys";
import { useI18n, useT } from "@/i18n";
import { useCan } from "@/features/auth/use-can";
import { AssignOrderDialog } from "@/features/orders/assign-order-dialog";
import { CancelOrderDialog } from "@/features/orders/cancel-order-dialog";
import { OrderMoney } from "@/features/orders/order-money";
import { OfferStatus } from "@/features/orders/offer-status";
import { friendlyErrorMessage } from "@/lib/errors";
import { formatCurrency, formatDateTime } from "@/lib/format";
import { isOrderOpen } from "@/services/orders";

export default function OrderDetailPage({
  params,
}: {
  params: Promise<{ uuid: string }>;
}) {
  const t = useT();
  const { locale, dir } = useI18n();
  const { can } = useCan();
  const { uuid } = use(params);
  const [assignOpen, setAssignOpen] = useState(false);
  const [cancelOpen, setCancelOpen] = useState(false);

  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: queryKeys.orders.detail(uuid),
    queryFn: () => getOrder(uuid),
  });

  const order = data?.Model ?? null;

  if (isLoading) {
    return (
      <div className="mx-auto max-w-5xl space-y-4">
        <Skeleton className="h-8 w-72" />
        <Skeleton className="h-56 w-full" />
        <Skeleton className="h-72 w-full" />
      </div>
    );
  }

  if (isError || !order) {
    return (
      <div className="mx-auto max-w-2xl py-10">
        <ErrorState
          message={friendlyErrorMessage(error ?? new Error(t("common.notFound")), t)}
          onRetry={() => refetch()}
        />
      </div>
    );
  }

  const canAssign = can("orders.assign") && isOrderOpen(order.status);
  // Cancelling is offered for as long as the order is open — including while a captain is carrying
  // it, which is exactly when operations needs it most.
  const canCancel = can("orders.cancel") && isOrderOpen(order.status);

  return (
    <div className="mx-auto max-w-5xl">
      <Breadcrumbs
        items={[
          { label: t("nav.orders"), href: "/orders" },
          { label: order.order_number },
        ]}
      />
      <PageHeader
        title={order.order_number}
        subtitle={
          <span className="flex flex-wrap items-center gap-2 text-sm">
            <OrderStatusBadge status={order.status} label={order.status_label} />
            <span className="text-muted-foreground">{order.customer_name}</span>
            {order.driver ? (
              <span className="inline-flex items-center gap-1 text-muted-foreground">
                <UserRound className="h-3.5 w-3.5" aria-hidden />
                {order.driver.name}
              </span>
            ) : null}
          </span>
        }
        actions={
          canAssign || canCancel ? (
            <div className="flex flex-wrap items-center gap-2">
              {canCancel ? (
                <Button variant="outline" onClick={() => setCancelOpen(true)}>
                  {t("orders.cancel.action")}
                </Button>
              ) : null}
              {canAssign ? (
                <Button onClick={() => setAssignOpen(true)}>{t("orders.assign")}</Button>
              ) : null}
            </div>
          ) : null
        }
      />

      {/* Why an order sitting at `assigned` may quietly become `pending` again: it is an offer with
          a deadline, and this is the only place on the screen that says so. */}
      <div className="mb-4">
        <OfferStatus order={order} />
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Route */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>{t("orders.pickup")} → {t("orders.dropoff")}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <StopRow
              icon={<MapPin className="h-4 w-4 text-primary" aria-hidden />}
              label={t("orders.pickup")}
              address={order.pickup_address}
              lat={order.pickup_lat}
              lng={order.pickup_lng}
            />
            <div className="flex items-center gap-2 ps-6">
              {dir === "rtl" ? (
                <ArrowRight className="h-4 w-4 rotate-180 text-muted-foreground" aria-hidden />
              ) : (
                <ArrowRight className="h-4 w-4 text-muted-foreground" aria-hidden />
              )}
              <span className="text-xs text-muted-foreground">{order.fee ? formatCurrency(order.fee, order.currency, locale) : t("orders.deliveryFee")}</span>
            </div>
            <StopRow
              icon={<MapPin className="h-4 w-4 text-primary" aria-hidden />}
              label={t("orders.dropoff")}
              address={order.dropoff_address}
              lat={order.dropoff_lat}
              lng={order.dropoff_lng}
            />
            {order.note ? (
              <div className="rounded-lg bg-muted p-3 text-sm text-muted-foreground">
                <span className="font-medium text-foreground">{t("orders.note")}: </span>
                {order.note}
              </div>
            ) : null}
          </CardContent>
        </Card>

        {/* Captain + timeline summary */}
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>{t("orders.captain")}</CardTitle>
            </CardHeader>
            <CardContent>
              {order.driver ? (
                <Link
                  href={`/captains/${order.driver.uuid}`}
                  className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/40"
                >
                  <span className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-soft text-primary">
                    {order.driver.name.slice(0, 1).toUpperCase()}
                  </span>
                  <div className="min-w-0">
                    <p className="truncate font-semibold text-foreground">{order.driver.name}</p>
                    <p className="truncate text-xs text-muted-foreground" dir="ltr">
                      {order.driver.phone}
                    </p>
                  </div>
                </Link>
              ) : (
                <div className="flex items-center gap-2 rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
                  <Package className="h-4 w-4" aria-hidden />
                  {t("orders.unassigned")}
                </div>
              )}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>{t("orders.timeline")}</CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="space-y-3">
                {(order.history ?? []).slice().reverse().map((step) => (
                  <li key={step.uuid} className="flex gap-3">
                    <span className="mt-1 flex h-2 w-2 shrink-0 translate-y-1 rounded-full bg-primary" />
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-foreground">{step.status_label}</p>
                      <p className="text-xs text-muted-foreground">
                        {formatDateTime(step.created_at, locale)}
                        {step.actor ? <span className="ms-1">· {step.actor}</span> : null}
                      </p>
                      {step.note ? <p className="text-xs text-muted-foreground">{step.note}</p> : null}
                    </div>
                  </li>
                ))}
              </ol>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Items */}
      <Card className="mt-6">
        <CardHeader>
          <CardTitle>{t("orders.items")}</CardTitle>
        </CardHeader>
        <CardContent>
          {(order.items ?? []).length === 0 ? (
            <p className="text-sm text-muted-foreground">{t("common.notAvailable")}</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t("orders.item")}</TableHead>
                  <TableHead>{t("orders.quantity")}</TableHead>
                  <TableHead>{t("orders.unitPrice")}</TableHead>
                  <TableHead>{t("orders.subtotal")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {(order.items ?? []).map((item) => (
                  <TableRow key={item.uuid}>
                    <TableCell>
                      <p className="font-medium text-foreground">{item.name}</p>
                      {item.note ? <p className="text-xs text-muted-foreground">{item.note}</p> : null}
                    </TableCell>
                    <TableCell className="numeric">{item.quantity}</TableCell>
                    <TableCell className="numeric">{formatCurrency(item.unit_price, order.currency, locale)}</TableCell>
                    <TableCell className="numeric">
                      {formatCurrency(item.unit_price !== null ? item.unit_price * item.quantity : null, order.currency, locale)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {/* What this order cost and what it yielded. Renders nothing when no money was involved and
          the order carries no prices, so a plain prepaid delivery does not grow an empty card. */}
      <OrderMoney order={order} />

      <AssignOrderDialog uuid={uuid} open={assignOpen} onOpenChange={setAssignOpen} />
      <CancelOrderDialog
        uuid={uuid}
        orderNumber={order.order_number}
        captainName={order.driver?.name ?? null}
        open={cancelOpen}
        onOpenChange={setCancelOpen}
      />
    </div>
  );
}

function StopRow({
  label,
  address,
  lat,
  lng,
  icon,
}: {
  label: string;
  address: string;
  lat: number | null;
  lng: number | null;
  icon: React.ReactNode;
}) {
  const t = useT();
  return (
    <div className="flex items-start gap-3">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary-soft">
        {icon}
      </span>
      <div className="min-w-0 flex-1">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
        <p className="mt-0.5 text-sm font-medium text-foreground">{address}</p>
        {lat !== null && lng !== null ? (
          <p className="mt-1 inline-flex items-center gap-1 text-xs text-primary">
            <Navigation className="h-3 w-3" aria-hidden />
            <span dir="ltr" className="numeric">
              {lat.toFixed(5)}, {lng.toFixed(5)}
            </span>
            <span className="ms-1">({t("orders.pickupCoords")})</span>
          </p>
        ) : null}
      </div>
    </div>
  );
}