TEDI-DDP-FE/src/components/page/consultation/TableHistoryPatient/TableHistoryPatient.tsx

"use client";

import React from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";

import consultationServices, {
  ConsultationItem,
  ConsultationResponse,
} from "@/services/consultationServices";
import { httpRequest } from "@/services";

import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";

import DataWrapper from "@/components/customs/DataWrapper";
import Table from "@/components/customs/custom-table";
import StateActive from "@/components/customs/StateActive";
import Pagination from "@/components/customs/custom-pagination";
import Search from "@/components/customs/custom-search";
import moment from "moment";

const TableHistoryPatient = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();
  const patientId = searchParams.get("_id");

  const consultationQuery = useQuery<ConsultationResponse>({
    queryKey: [QUERY_KEY.table_list_consultation, patientId, "full-history"],
    enabled: !!patientId,
    queryFn: async () => {
      const res = await httpRequest<ConsultationResponse>({
        showMessageFailed: true,
        http: consultationServices.getConsultations({
          Page: 1,
          PageSize: 1000,
          PatientId: patientId || "",
        }),
      });

      return (
        res || {
          items: [],
          page: 1,
          pageSize: 10,
          total: 0,
          totalPages: 0,
        }
      );
    },
  });

  const _page = searchParams.get("_page");

  const _pageSize = searchParams.get("_pageSize");

  const _keyword = searchParams.get("_keyword");

  const page = _page ? Number(_page) : 1;
  const pageSize = _pageSize ? Number(_pageSize) : 10;

  const updateQuery = (key: string, value: string | number) => {
    const params = new URLSearchParams(searchParams.toString());

    if (!value || value === "" || (key === "_page" && value === 1)) {
      params.delete(key);
    } else {
      params.set(key, String(value));
    }

    if (key === "_pageSize") {
      params.delete("_page");
    }

    const queryString = params.toString();

    router.push(queryString ? `?${queryString}` : pathname);
  };

  const data = consultationQuery.data?.items || [];

  // lấy tên bệnh nhân từ record đầu tiên (nếu backend có trả)
  const patientName = data?.[0]?.patientName || "Bệnh nhân";

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-semibold">
          Lịch sử phiên khám của {patientName}
        </h2>

        <button
          onClick={() => router.back()}
          className="text-blue-500 hover:underline"
        >
          ← Quay lại
        </button>
      </div>
      <div className="flex items-center justify-between gap-4">
        <div className="w-full md:min-w-[400px]">
          <Search
            keyword={_keyword ?? ""}
            setKeyword={(value) => updateQuery("_keyword", value)}
            placeholder="Tìm kiếm phiên khám..."
          />
        </div>
      </div>

      <DataWrapper
        data={data}
        loading={consultationQuery.isLoading}
        title="Không có dữ liệu"
        note="Bệnh nhân chưa có lịch sử khám"
      >
        <Table
          rowKey={(item: ConsultationItem) => item.id}
          data={data}
          column={[
            {
              title: "MÃ PHIÊN KHÁM",
              render: (item: ConsultationItem) => (
                <Link
                  href={`/consultation/${item.id}`}
                  className="text-blue-500 hover:underline"
                >
                  {item.sessionCode}
                </Link>
              ),
            },
            {
              title: "NGÀY KHÁM",
              render: (item: ConsultationItem) => (
                <span>
                  {item.visitDate
                    ? moment(item.visitDate).format("DD/MM/YYYY")
                    : "---"}
                </span>
              ),
            },
            {
              title: "DẤU HIỆU",
              render: (item: ConsultationItem) => (
                <span>{item.symptomsText || "---"}</span>
              ),
            },
            {
              title: "CHẨN ĐOÁN",
              render: (item: ConsultationItem) => (
                <span>{item.diagnosis || "---"}</span>
              ),
            },
            {
              title: "TRẠNG THÁI",
              render: (item: ConsultationItem) => (
                <StateActive
                  stateActive={item.status}
                  listState={[
                    {
                      state: TYPE_STATUS.Draft,
                      text: "Đang chờ khám",
                      textColor: "#92400E",
                      backgroundColor: "#FEF3C7",
                    },

                    {
                      state: TYPE_STATUS.InProgress,
                      text: "Đang khám tổng quát",
                      textColor: "#1E3A8A",
                      backgroundColor: "#DBEAFE",
                    },

                    {
                      state: TYPE_STATUS.ToSpecialty,
                      text: "Chờ khám chuyên khoa",
                      textColor: "#6B21A8",
                      backgroundColor: "#E9D5FF",
                    },

                    {
                      state: TYPE_STATUS.PendingPrescription,
                      text: "Chờ nhận thuốc/kính",
                      textColor: "#9A3412",
                      backgroundColor: "#FED7AA",
                    },

                    {
                      state: TYPE_STATUS.Completed,
                      text: "Hoàn thành",
                      textColor: "#166534",
                      backgroundColor: "#DCFCE7",
                    },

                    {
                      state: TYPE_STATUS.Cancelled,
                      text: "Đã hủy",
                      textColor: "#991B1B",
                      backgroundColor: "#FEE2E2",
                    },
                  ]}
                />
              ),
            },
          ]}
        />
      </DataWrapper>

      <Pagination
        total={data.length}
        page={page}
        pageSize={pageSize}
        onSetPage={(value) => updateQuery("_page", value)}
        onSetPageSize={(value) => updateQuery("_pageSize", value)}
        dependencies={[_pageSize, _keyword]}
      />
    </div>
  );
};

export default TableHistoryPatient;