"use client";

import CustomButton from "@/components/customs/custom-button";
import CustomDialog from "@/components/customs/custom-dialog";
import DataWrapper from "@/components/customs/DataWrapper";
import Search from "@/components/customs/custom-search";
import StateActive from "@/components/customs/StateActive";
import Table from "@/components/customs/custom-table";

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

import { httpRequest } from "@/services";

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

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

import Link from "next/link";

import { Pencil, ClipboardPlus, Ellipsis } from "lucide-react";

import { usePathname, useRouter, useSearchParams } from "next/navigation";

import React, { useEffect, useMemo, useState } from "react";

import Pagination from "@/components/customs/custom-pagination";
import moment from "moment";
import specialtyServices, { SpecialtyItem } from "@/services/specialtyServices";

import FilterCustom from "@/components/customs/FilterCustom";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@radix-ui/react-tooltip";
import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import TabNavLink from "@/components/customs/custom-tabs";
import { removeVietnameseTones } from "@/common/funcs/optionConvert";
import useSpecialtyTabs from "@/hooks/useSpecialtyTabs";

const MainPageConsultation = () => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  /* =========================
        QUERY PARAMS
  ========================= */

  const _page = searchParams.get("_page");
  const _pageSize = searchParams.get("_pageSize");
  const _keyword = searchParams.get("_keyword");
  const _status = searchParams.get("_status");
  const _specialtyId = searchParams.get("_specialtyId");
  const _type = searchParams.get("_type");
  const isAllTab = !_type || _type === "all";

  const [selectedConsultationId, setSelectedConsultationId] =
    useState<string>("");

  const [openCancelDialog, setOpenCancelDialog] = useState(false);

  const [openCompleteDialog, setOpenCompleteDialog] = useState(false);

  const consultationQuery = useQuery<ConsultationResponse>({
    queryKey: [QUERY_KEY.table_list_consultation, _page, _pageSize, _keyword],

    queryFn: async () => {
      const res = await httpRequest<ConsultationResponse>({
        showMessageFailed: true,

        http: consultationServices.getConsultations({
          Page: Number(_page || 1),

          PageSize: Number(_pageSize || 10),

          Search: _keyword || "",

          SortBy: _specialtyId || undefined,

          Desc: true,
        }),
      });

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

  const { tabs: specialtyTabs } = useSpecialtyTabs(
    consultationQuery.data?.items ?? [],
  );

  const specialtyQuery = useQuery({
    queryKey: [QUERY_KEY.list_specialty_lookup],
    queryFn: async () => {
      const res = await httpRequest<SpecialtyItem[]>({
        http: specialtyServices.getSpecialty(),
        showMessageFailed: true,
      });

      return res || [];
    },
  });

  const consultationData = useMemo(() => {
    let data = consultationQuery.data?.items || [];

    // =========================
    // TAB CHUYÊN KHOA
    // =========================
    if (_type && _type !== "all") {
      data = data.filter((item) =>
        item.specialtyClinics?.some(
          (specialty) => specialty.specialtyId === _type,
        ),
      );
    }

    // =========================
    // FILTER CHUYÊN KHOA
    // =========================
    if (_specialtyId) {
      data = data.filter((item) =>
        item.specialtyClinics?.some(
          (specialty) => specialty.specialtyId === _specialtyId,
        ),
      );
    }

    // =========================
    // FILTER TRẠNG THÁI
    // =========================
    if (_status) {
      data = data.filter((item) => item.status === Number(_status));
    }

    return data;
  }, [consultationQuery.data, _type, _specialtyId, _status]); // Bỏ _keyword khỏi dependencies vì không dùng lọc client nữa

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

  useEffect(() => {
    if (!_type) {
      const params = new URLSearchParams(searchParams.toString());

      params.set("_type", "all");

      router.replace(`${pathname}?${params.toString()}`);
    }
  }, [_type, pathname, router, searchParams]);

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

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

    if (
      key === "_pageSize" ||
      key === "_keyword" ||
      key === "_status" ||
      key === "_specialtyId"
    ) {
      params.delete("_page");
    }

    const queryString = params.toString();

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

  const consultation = consultationQuery.data;

  // const specialtyTabs = useMemo(() => {
  //   const specialtyMap = new Map();

  //   consultation?.items?.forEach((consultationItem) => {
  //     consultationItem.specialtyClinics?.forEach((specialty) => {
  //       if (!specialtyMap.has(specialty.specialtyId)) {
  //         specialtyMap.set(specialty.specialtyId, {
  //           pathname: "/consultation",
  //           query: specialty.specialtyId,
  //           title: specialty.specialtyName,
  //         });
  //       }
  //     });
  //   });

  //   return [
  //     {
  //       pathname: "/consultation",
  //       query: "all",
  //       title: "Tất cả",
  //     },
  //     ...Array.from(specialtyMap.values()),
  //   ];
  // }, [consultation?.items]);

  const handleOpenCancel = (item: ConsultationItem) => {
    setSelectedConsultationId(item.id);

    setOpenCancelDialog(true);
  };

  const handleOpenComplete = (item: ConsultationItem) => {
    setSelectedConsultationId(item.id);

    setOpenCompleteDialog(true);
  };

  const handleCloseDialog = () => {
    setOpenCancelDialog(false);

    setOpenCompleteDialog(false);
  };

  const cancelConsultationMutation = useMutation({
    mutationFn: async () => {
      return await httpRequest({
        showMessageFailed: true,

        showMessageSuccess: true,

        msgSuccess: "Hủy phiên khám thành công!",

        http: consultationServices.cancelConsultations(selectedConsultationId),
      });
    },

    onSuccess() {
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEY.table_list_consultation],
      });

      handleCloseDialog();
    },
  });

  const completeConsultationMutation = useMutation({
    mutationFn: async () => {
      return await httpRequest({
        showMessageFailed: true,

        showMessageSuccess: true,

        msgSuccess: "Hoàn thành phiên khám thành công!",

        http: consultationServices.completeConsultations(
          selectedConsultationId,
        ),
      });
    },

    onSuccess() {
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEY.table_list_consultation],
      });

      handleCloseDialog();
    },
  });

  const handleConfirmCancel = () => {
    cancelConsultationMutation.mutate();
  };

  const handleConfirmComplete = () => {
    completeConsultationMutation.mutate();
  };

  return (
    <div>
      <div className="rounded-lg bg-white shadow mb-6 p-6">
        <TabNavLink query="_type" listHref={specialtyTabs} />
      </div>
      <div className="flex flex-col gap-4 rounded-lg bg-white shadow p-6">
        {/* HEADER */}
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold text-black">Phiên khám</h2>
          {isAllTab && (
            <CustomButton
              variant="midnightBlue"
              fullWidth={false}
              icon={<ClipboardPlus />}
              // onClick={handleOpenCreate}
              href="/consultation/create"
            >
              Tạo phiên khám
            </CustomButton>
          )}
        </div>

        {/* SEARCH */}
        <div
          className={clsx(
            "flex gap-4",
            isAllTab
              ? "flex-col lg:flex-row lg:items-center lg:justify-between"
              : "flex-col",
          )}
        >
          <div className="w-full lg:min-w-[400px]">
            <Search
              keyword={_keyword ?? ""}
              setKeyword={(value) => updateQuery("_keyword", value)}
              placeholder="Tìm kiếm phiên khám..."
            />
          </div>

          {isAllTab && (
            <div className="flex flex-col gap-4 sm:flex-row">
              <FilterCustom<string | null>
                name="Chuyên khoa"
                value={_specialtyId}
                onChange={(value) => updateQuery("_specialtyId", value ?? "")}
                listOption={
                  specialtyQuery.data?.map((item) => ({
                    uuid: item.id,
                    name: item.name,
                  })) || []
                }
              />

              <FilterCustom<number | null>
                name="Trạng thái"
                value={_status ? Number(_status) : null}
                onChange={(value) => updateQuery("_status", value ?? "")}
                listOption={[
                  {
                    uuid: TYPE_STATUS.Draft,
                    name: "Đang chờ khám",
                  },
                  {
                    uuid: TYPE_STATUS.InProgress,
                    name: "Đang khám tổng quát",
                  },
                  {
                    uuid: TYPE_STATUS.ToSpecialty,
                    name: "Chờ khám chuyên khoa",
                  },
                  {
                    uuid: TYPE_STATUS.PendingPrescription,
                    name: "Chờ nhận thuốc",
                  },
                  {
                    uuid: TYPE_STATUS.Completed,
                    name: "Hoàn thành",
                  },
                  {
                    uuid: TYPE_STATUS.Cancelled,
                    name: "Đã hủy",
                  },
                ]}
              />
            </div>
          )}
        </div>

        {/* TABLE */}
        <DataWrapper
          data={consultationData}
          loading={consultationQuery.isLoading}
          title="Không có dữ liệu"
          note="Vui lòng thử lại sau"
        >
          <Table
            rowKey={(item) => item.id}
            data={consultationData}
            column={[
              {
                title: "TÊN BỆNH NHÂN",
                render: (item: ConsultationItem) => (
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Link
                          href={`/patient/${item.patientId}`}
                          className="text-blue-500 hover:underline"
                        >
                          {item.patientName}
                        </Link>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p className="rounded-full border bg-gray-400 p-2">
                          Chi tiết bệnh nhân
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                ),
              },

              {
                title: "MÃ PHIÊN KHÁM",
                fixedLeft: true,
                render: (item: ConsultationItem) => {
                  const specialty = item.specialtyClinics.find(
                    (x) => x.specialtyId === _type,
                  );

                  const detailHref = isAllTab
                    ? `/consultation/${item.id}`
                    : `/consultation/${item.id}?_type=${specialty?.id ?? ""}`;

                  return (
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Link
                            href={detailHref}
                            className="text-blue-500 hover:underline"
                          >
                            {item.sessionCode}
                          </Link>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="rounded-full border bg-gray-400 p-2">
                            Chi tiết phiên khám
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  );
                },
              },

              {
                title: "NGÀY KHÁM",
                render: (item: ConsultationItem) => (
                  <span>
                    {item.visitDate
                      ? moment(item.visitDate).format("DD/MM/YYYY")
                      : "---"}
                  </span>
                ),
              },

              // 🔴 ẨN "DẤU HIỆU" khi KHÔNG PHẢI Tab All (!isAllTab)
              isAllTab && {
                title: "DẤU HIỆU",
                render: (item: ConsultationItem) => (
                  <span>{item.symptomsText || "---"}</span>
                ),
              },

              {
                title: "CHẨN ĐOÁN",
                render: (item: ConsultationItem) => {
                  if (!isAllTab) {
                    const specialty = item.specialtyClinics.find(
                      (x) => x.specialtyId === _type,
                    );
                    return <span>{specialty?.diagnosis || "---"}</span>;
                  }
                  return <span>{item.diagnosis || "---"}</span>;
                },
              },

              // 🔴 ẨN "DẤU HIỆU" khi KHÔNG PHẢI Tab All (!isAllTab)
              // !isAllTab && {
              //   title: "BÁC SĨ KHÁM",
              //   render: (item: ConsultationItem) => {
              //     const doctorNames = item.doctors?.join(", ");

              //     return <span>{doctorNames || "---"}</span>;
              //   },
              // },

              // 🔴 ẨN "KẾ HOẠCH ĐIỀU TRỊ" khi KHÔNG PHẢI Tab All (!isAllTab)
              isAllTab && {
                title: "KẾ HOẠCH ĐIỀU TRỊ",
                render: (item: ConsultationItem) => (
                  <span>{item.treatmentPlan || "---"}</span>
                ),
              },

              {
                title: isAllTab ? "GHI CHÚ BÁC SĨ" : "GHI CHÚ KHÁM",
                render: (item: ConsultationItem) => {
                  if (!isAllTab) {
                    const specialty = item.specialtyClinics.find(
                      (x) => x.specialtyId === _type,
                    );
                    return <span>{specialty?.specialtyNotes || "---"}</span>;
                  }
                  return <span>{item.doctorNotes || "---"}</span>;
                },
              },

              // 🔴 ẨN "THỦ THUẬT" khi LÀ Tab All (isAllTab)
              !isAllTab && {
                title: "THỦ THUẬT",
                render: (item: ConsultationItem) => {
                  const specialty = item.specialtyClinics.find(
                    (x) => x.specialtyId === _type,
                  );
                  return <span>{specialty?.procedureNotes || "---"}</span>;
                },
              },

              {
                title: "TRẠNG THÁI",
                render: (item: ConsultationItem) => {
                  if (!isAllTab) {
                    const specialty = item.specialtyClinics.find(
                      (x) => x.specialtyId === _type,
                    );

                    return (
                      <StateActive
                        stateActive={specialty?.specialtyStatus}
                        listState={[
                          {
                            state: 1,
                            text: "Mới được chỉ định",
                            textColor: "#92400E",
                            backgroundColor: "#FEF3C7",
                          },
                          {
                            state: 2,
                            text: "Đang khám",
                            textColor: "#1E3A8A",
                            backgroundColor: "#DBEAFE",
                          },
                          {
                            state: 3,
                            text: "Đã Hoàn thành",
                            textColor: "#166534",
                            backgroundColor: "#DCFCE7",
                          },
                        ]}
                      />
                    );
                  }

                  return (
                    <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",
                          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",
                        },
                      ]}
                    />
                  );
                },
              },

              {
                fixedRight: true,
                title: "ACTION",
                render: (item: ConsultationItem) => {
                  const isCancelled = item.status === TYPE_STATUS.Cancelled;
                  const isCompleted = item.status === TYPE_STATUS.Completed;
                  const isDisabled = isCancelled || isCompleted;

                  if (!isAllTab) {
                    const specialty = item.specialtyClinics.find(
                      (x) => x.specialtyId === _type,
                    );

                    if (!specialty) return null;

                    return (
                      <CustomButton
                        size="sm"
                        variant="midnightBlue"
                        disabled={isDisabled}
                        href={
                          !isDisabled
                            ? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialty.id}`
                            : undefined
                        }
                      >
                        Cập nhật
                      </CustomButton>
                    );
                  }

                  return (
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-2 w-full sm:w-auto">
                      <Popover.Root>
                        <Popover.Trigger asChild>
                          <button
                            disabled={isDisabled}
                            className={clsx(
                              "flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 shrink-0",
                              isDisabled
                                ? "cursor-not-allowed opacity-50"
                                : "hover:bg-gray-100",
                            )}
                          >
                            <Ellipsis size={20} />
                          </button>
                        </Popover.Trigger>

                        {!isDisabled && (
                          <Popover.Content
                            side="bottom"
                            align="end"
                            sideOffset={8}
                            className="z-50 min-w-[300px] rounded-xl border bg-white p-2 shadow-xl"
                          >
                            <div className="space-y-1">
                              {item.specialtyClinics.map((specialty) => (
                                <Link
                                  key={specialty.id}
                                  href={`/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialty.id}`}
                                  className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-blue-50"
                                >
                                  <Pencil size={15} />
                                  <span>{specialty.specialtyName}</span>
                                </Link>
                              ))}
                            </div>
                          </Popover.Content>
                        )}
                      </Popover.Root>

                      <CustomButton
                        size="sm"
                        variant="red"
                        disabled={isDisabled}
                        onClick={() => handleOpenCancel(item)}
                        className="w-full sm:w-auto"
                      >
                        Hủy
                      </CustomButton>

                      <CustomButton
                        size="sm"
                        variant="green"
                        disabled={isDisabled}
                        onClick={() => handleOpenComplete(item)}
                        className="w-full sm:w-auto"
                      >
                        Hoàn thành
                      </CustomButton>
                    </div>
                  );
                },
              },
            ].filter(Boolean)} // 💡 Lọc bỏ các giá trị false để ẩn cột
          />
        </DataWrapper>
        <Pagination
          total={consultationData.length}
          page={page}
          pageSize={pageSize}
          onSetPage={(value) => updateQuery("_page", value)}
          onSetPageSize={(value) => updateQuery("_pageSize", value)}
          dependencies={[_pageSize, _keyword, _specialtyId, _status]}
        />
      </div>

      {/* CANCEL DIALOG */}
      <CustomDialog
        open={openCancelDialog}
        title="Hủy phiên khám"
        note="Bạn có chắc chắn muốn hủy phiên khám này không?"
        type="error"
        onClose={handleCloseDialog}
        onSubmit={handleConfirmCancel}
        titleCancel="Đóng"
        titleSubmit="Xác nhận"
      />

      {/* COMPLETE DIALOG */}
      <CustomDialog
        open={openCompleteDialog}
        title="Hoàn thành phiên khám"
        note="Bạn có chắc chắn muốn hoàn thành phiên khám này không?"
        type="success"
        onClose={handleCloseDialog}
        onSubmit={handleConfirmComplete}
        titleCancel="Đóng"
        titleSubmit="Xác nhận"
      />
    </div>
  );
};

export default MainPageConsultation;