"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 } from "lucide-react";

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

import React, { 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";

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");

  /* =========================
        STATE
  ========================= */

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

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

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

  /* =========================
        GET LIST
  ========================= */

  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,
        }
      );
    },
  });

  /* =========================
        DATA
  ========================= */

  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 || [];

    if (_status) {
      data = data.filter((item) => item.status === Number(_status));
    }

    if (_specialtyId) {
      data = data.filter((item) =>
        item.specialtyClinics?.some(
          (specialty) => specialty.specialtyId === _specialtyId,
        ),
      );
    }

    return data;
  }, [consultationQuery.data, _status, _specialtyId]);

  /* =========================
        UPDATE QUERY
  ========================= */

  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 === "") {
      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);
  };

  /* =========================
        CLOSE POPUP
  ========================= */

  // const handleClosePopup = () => {
  //   const params = new URLSearchParams(searchParams.toString());

  //   params.delete("_create");

  //   params.delete("_update");

  //   const queryString = params.toString();

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

  /* =========================
        DIALOG
  ========================= */

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

    setOpenCancelDialog(true);
  };

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

    setOpenCompleteDialog(true);
  };

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

    setOpenCompleteDialog(false);
  };

  /* =========================
        CANCEL
  ========================= */

  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();
    },
  });

  /* =========================
        COMPLETE
  ========================= */

  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();
    },
  });

  /* =========================
        CONFIRM
  ========================= */

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

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

  return (
    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
      {/* HEADER */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-black">Phiên khám</h2>

        <CustomButton
          variant="midnightBlue"
          fullWidth={false}
          icon={<ClipboardPlus />}
          // onClick={handleOpenCreate}
          href="/consultation/create"
        >
          Tạo phiên khám
        </CustomButton>
      </div>

      {/* SEARCH */}
      <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>

        <FilterCustom<string | null>
          name="Chuyên khoa"
          value={_specialtyId}
          onChange={(value) => updateQuery("_specialtyId", value ?? "")}
          listOption={useMemo(() => {
            return (
              specialtyQuery.data?.map((item) => ({
                uuid: item.id,
                name: item.name,
              })) || []
            );
          }, [specialtyQuery.data])}
        />
        <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/kính",
            },
            {
              uuid: TYPE_STATUS.Completed,
              name: "Hoàn thành",
            },
            {
              uuid: TYPE_STATUS.Cancelled,
              name: "Đã hủy",
            },
          ]}
        />
      </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) => (
                <span>{item.patientName}</span>
              ),
            },

            {
              title: "MÃ PHIÊN KHÁM",
              fixedLeft: true,
              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: "CHUẨN ĐOÁN",

              render: (item: ConsultationItem) => (
                <span>{item.diagnosis || "---"}</span>
              ),
            },

            {
              title: "KẾ HOẠCH ĐIỀU TRỊ",

              render: (item: ConsultationItem) => (
                <span>{item.treatmentPlan || "---"}</span>
              ),
            },

            {
              title: "GHI CHÚ BÁC SĨ",

              render: (item: ConsultationItem) => (
                <span>{item.doctorNotes || "---"}</span>
              ),
            },
            {
              title: "CÁC CHUYÊN KHOA ĐANG CHỜ KHÁM",

              render: (item: ConsultationItem) => {
                const waitingSpecialties = item.specialtyClinics
                  ?.filter((specialty) => specialty.specialtyStatus === 1)
                  .map((specialty) => specialty.specialtyName)
                  .join(", ");

                return <span>{waitingSpecialties || "---"}</span>;
              },
            },
            {
              title: "CÁC CHUYÊN KHOA ĐÃ KHÁM",

              render: (item: ConsultationItem) => {
                const completedSpecialties = item.specialtyClinics
                  ?.filter((specialty) => specialty.specialtyStatus === 3)
                  .map((specialty) => specialty.specialtyName)
                  .join(", ");

                return <span>{completedSpecialties || "---"}</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",
                    },
                  ]}
                />
              ),
            },

            {
              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;

                // Tìm chuyên khoa có specialtyStatus = 1
                const specialtyClinicActive = item.specialtyClinics?.find(
                  (specialty) => specialty.specialtyStatus === 1,
                );

                return (
                  <div className="flex items-center gap-2">
                    {/* UPDATE */}
                    <CustomButton
                      size="sm"
                      disabled={isDisabled}
                      icon={
                        specialtyClinicActive ? undefined : (
                          <Pencil className="text-blue-400" />
                        )
                      }
                      href={
                        specialtyClinicActive
                          ? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialtyClinicActive.id}`
                          : `/consultation/update?_id=${item.id}`
                      }
                    >
                      {specialtyClinicActive
                        ? `Cập nhật ${specialtyClinicActive.specialtyName}`
                        : undefined}
                    </CustomButton>

                    {/* CANCEL */}
                    <CustomButton
                      size="sm"
                      variant="red"
                      disabled={isDisabled}
                      onClick={() => handleOpenCancel(item)}
                    >
                      Hủy
                    </CustomButton>

                    {/* COMPLETE */}
                    <CustomButton
                      size="sm"
                      variant="green"
                      disabled={isDisabled}
                      onClick={() => handleOpenComplete(item)}
                    >
                      Hoàn thành
                    </CustomButton>
                  </div>
                );
              },
            },
          ]}
        />
      </DataWrapper>
      <Pagination
        total={consultationData.length}
        page={page}
        pageSize={pageSize}
        onSetPage={(value) => updateQuery("_page", value)}
        onSetPageSize={(value) => updateQuery("_pageSize", value)}
        dependencies={[_pageSize, _keyword, _specialtyId, _status]}
      />

      {/* 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;