"use client";

import { useState } from "react";
import type { SalesByCategoryReportParams } from "@/lib/api/reports-sales-by-category";
import { getErrorMessage } from "@/lib/api/types";
import { toOwnerDateParam } from "@/lib/dashboard/owner-dashboard";
import {
  formatLaporanDateRangeLabel,
  getDefaultLaporanDateRange,
} from "@/lib/laporan/metode-pembayaran";
import { useLaporanBranchFilter } from "@/lib/hooks/use-laporan-branch-filter";
import { useMenuCategories } from "@/lib/query/hooks/menu-categories";
import { useSalesByCategoryReport } from "@/lib/query/hooks/reports-sales-by-category";
import { OwnerDateRangePicker } from "../owner/owner-date-range-picker";
import { Button } from "../ui/button";
import { FormMultiSearchSelect } from "../ui/form-multi-search-select";
import { FormSearchSelect } from "../ui/form-search-select";
import { LaporanPenjualanKategoriTable } from "./laporan-penjualan-kategori-table";

export function LaporanPenjualanKategoriView() {
  const categoriesQuery = useMenuCategories();
  const categories = categoriesQuery.data ?? [];
  const {
    branchesQuery,
    branchOptions,
    effectiveBranchId,
    branchIdParam,
    handleBranchChange,
  } = useLaporanBranchFilter();

  const categoryOptions = categories.map((item) => ({
    value: String(item.id),
    label: item.name,
  }));

  const [dateRange, setDateRange] = useState(() => getDefaultLaporanDateRange());
  const [selectedCategoryIds, setSelectedCategoryIds] = useState<string[]>([]);
  const [appliedParams, setAppliedParams] =
    useState<SalesByCategoryReportParams | null>(null);

  const reportQuery = useSalesByCategoryReport(appliedParams);

  const dateRangeLabel = formatLaporanDateRangeLabel(
    dateRange.start,
    dateRange.end,
  );

  const error =
    (branchesQuery.error
      ? getErrorMessage(branchesQuery.error, "Gagal memuat data cabang.")
      : null) ??
    (categoriesQuery.error
      ? getErrorMessage(categoriesQuery.error, "Gagal memuat kategori menu.")
      : null) ??
    (reportQuery.error
      ? getErrorMessage(
          reportQuery.error,
          "Gagal memuat laporan penjualan per kategori.",
        )
      : null);

  function handleSearch() {
    const categoryIds = selectedCategoryIds
      .map((id) => Number(id))
      .filter((id) => Number.isFinite(id));

    const nextParams = {
      dateFrom: toOwnerDateParam(dateRange.start),
      dateTo: toOwnerDateParam(dateRange.end),
      ...(branchIdParam != null ? { branchId: branchIdParam } : {}),
      ...(categoryIds.length > 0 ? { categoryIds } : {}),
    };

    const isSameFilter =
      appliedParams != null &&
      JSON.stringify(appliedParams) === JSON.stringify(nextParams);

    setAppliedParams(nextParams);

    if (isSameFilter) {
      void reportQuery.refetch();
    }
  }

  const showReportLoading =
    appliedParams != null &&
    (reportQuery.isPending || reportQuery.isFetching) &&
    !reportQuery.data;

  return (
    <div className="flex min-h-[calc(100vh-114px)] min-w-0 flex-col gap-5">
      {error && (
        <p className="text-m-regular rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-danger-700">
          {error}
        </p>
      )}

      <section className="min-w-0 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" />
          <h1 className="text-l-medium text-neutral-100">
            Penjualan per Kategori
          </h1>
        </div>

        <div className="flex flex-col gap-4 p-5">
          <div className="flex flex-col gap-2">
            <p className="text-m-medium text-neutral-100">Tanggal Transaksi</p>
            <OwnerDateRangePicker
              value={dateRange}
              label={dateRangeLabel}
              onChange={setDateRange}
              variant="field"
            />
          </div>

          <FormSearchSelect
            id="laporan-kategori-cabang"
            label="Cabang"
            value={effectiveBranchId}
            placeholder={
              branchesQuery.isPending ? "Memuat cabang..." : "Semua Cabang"
            }
            searchPlaceholder="Cari cabang..."
            disabled={branchesQuery.isPending}
            options={branchOptions}
            onChange={handleBranchChange}
          />

          <FormMultiSearchSelect
            id="laporan-kategori"
            label="Kategori"
            values={selectedCategoryIds}
            options={categoryOptions}
            onChange={setSelectedCategoryIds}
            placeholder={
              categoriesQuery.isPending
                ? "Memuat kategori..."
                : "Pilih kategori"
            }
            searchPlaceholder="Cari kategori..."
            disabled={categoriesQuery.isPending || categoryOptions.length === 0}
          />

          <Button
            type="button"
            variant="primary"
            size="md"
            className="w-full"
            onClick={handleSearch}
            disabled={
              branchesQuery.isPending ||
              categoriesQuery.isPending ||
              (reportQuery.isFetching && appliedParams != null)
            }
          >
            {reportQuery.isFetching && appliedParams != null
              ? "Memuat..."
              : "Cari"}
          </Button>
        </div>
      </section>

      <section className="min-w-0 rounded-[10px] border border-neutral-40 bg-neutral-10">
        <div className="relative flex items-center gap-2 border-b border-neutral-40 px-5 py-4">
          <div className="absolute top-1/2 left-0 h-5 w-1 -translate-y-1/2 rounded-r-sm bg-primary-500" />
          <h2 className="text-l-medium pl-3 text-neutral-100">
            Laporan Penjualan per Kategori
          </h2>
        </div>

        <div className="p-5">
          <LaporanPenjualanKategoriTable
            result={appliedParams ? (reportQuery.data ?? null) : null}
            isLoading={showReportLoading}
          />
        </div>
      </section>
    </div>
  );
}