"use client";

import Link from "next/link";
import { useMemo } from "react";
import { getErrorMessage } from "@/lib/api/types";
import {
  formatOrderStatus,
  getOrderStatusClassName,
} from "@/lib/orders/format";
import { useBranches } from "@/lib/query/hooks/branches";
import { useDiningTables } from "@/lib/query/hooks/dining-tables";
import { useOrderDetail } from "@/lib/query/hooks/orders";
import { useUsers } from "@/lib/query/hooks/users";
import { MaterialIcon } from "../icons/nav-icons";
import { DetailPesananItemsTable } from "./detail-pesanan-items-table";
import { DetailPesananPaymentsTable } from "./detail-pesanan-payments-table";
import { DetailPesananSummary } from "./detail-pesanan-summary-card";

type DetailPesananViewProps = {
  orderId: number;
};

export function DetailPesananView({ orderId }: DetailPesananViewProps) {
  const orderQuery = useOrderDetail(orderId);
  const branchesQuery = useBranches({ enabled: orderId > 0 });
  const diningTablesQuery = useDiningTables();
  const usersQuery = useUsers();

  const error =
    orderId <= 0
      ? "ID pesanan tidak valid."
      : orderQuery.error
        ? getErrorMessage(orderQuery.error, "Gagal memuat detail pesanan.")
        : null;

  const order = useMemo(() => {
    const detail = orderQuery.data;
    if (!detail) return null;

    const branchName =
      detail.branchName !== "-"
        ? detail.branchName
        : detail.branchId != null
          ? (branchesQuery.data?.find((item) => item.id === detail.branchId)
              ?.name ?? "-")
          : "-";

    const table = detail.diningTableId
      ? diningTablesQuery.data?.find((item) => item.id === detail.diningTableId)
      : undefined;

    const orderAdminName =
      detail.orderAdminName !== "-"
        ? detail.orderAdminName
        : detail.createdBy != null
          ? (usersQuery.data?.find((item) => item.id === detail.createdBy)
              ?.fullName ?? "-")
          : "-";

    const cashierName =
      detail.cashierName !== "-"
        ? detail.cashierName
        : detail.cashierId != null
          ? (usersQuery.data?.find((item) => item.id === detail.cashierId)
              ?.fullName ?? "-")
          : "-";

    return {
      ...detail,
      branchName,
      tableNumber:
        detail.tableNumber !== "-"
          ? detail.tableNumber
          : (table?.tableNumber ?? "-"),
      tableCategoryName:
        detail.tableCategoryName !== "-"
          ? detail.tableCategoryName
          : (table?.tableCategoryName ?? "-"),
      orderAdminName,
      cashierName,
    };
  }, [
    orderQuery.data,
    branchesQuery.data,
    diningTablesQuery.data,
    usersQuery.data,
  ]);

  return (
    <div className="flex min-h-0 flex-1 flex-col gap-5">
      <Link
        href="/daftar-pesanan"
        className="text-m-regular inline-flex w-fit items-center gap-2 text-neutral-80 transition-colors hover:text-neutral-100"
      >
        <MaterialIcon name="arrow_back" size={20} />
        Kembali
      </Link>

      {error && (
        <p className="text-m-regular rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-danger-700">
          {error}
        </p>
      )}

      {orderId <= 0 ? null : orderQuery.isPending || !order ? (
        <p className="text-m-regular text-neutral-80">Memuat detail...</p>
      ) : (
        <div className="flex min-h-0 flex-1 flex-col gap-5 xl:flex-row xl:items-start">
          <div className="flex min-w-0 flex-1 flex-col gap-5">
            <section className="overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10">
              <div className="relative flex items-center gap-3 px-5 pt-5">
                <div className="absolute top-5 left-0 h-5 w-1 rounded-r-sm bg-primary-500" />
                <h1 className="text-l-medium text-neutral-100">
                  Detail Pesanan
                </h1>
                <span
                  className={`text-s-medium inline-flex rounded-md px-2.5 py-0.5 ${getOrderStatusClassName(order.status)}`}
                >
                  {formatOrderStatus(order.status)}
                </span>
              </div>
              <div className="p-5 pt-4">
                <DetailPesananItemsTable items={order.items} />
              </div>
            </section>

            <section className="overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10">
              <div className="relative flex items-center gap-2 px-5 pt-5">
                <div className="absolute top-5 left-0 h-5 w-1 rounded-r-sm bg-primary-500" />
                <h2 className="text-l-medium text-neutral-100">
                  Riwayat Split Pembayaran
                </h2>
              </div>
              <div className="p-5 pt-4">
                <DetailPesananPaymentsTable items={order.paymentSplits} />
              </div>
            </section>
          </div>

          <DetailPesananSummary order={order} />
        </div>
      )}
    </div>
  );
}