"use client";

import React from "react";
import { useParams, useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";

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

import { ArrowLeft } from "lucide-react";

import consultationServices, {
  ConsultationDetail,
} from "@/services/consultationServices";

import StateActive from "@/components/customs/StateActive";

const DetailConsultation = () => {
  const params = useParams();
  const router = useRouter();

  const consultationId = params?.id as string;

  const consulDetailQuery = useQuery<ConsultationDetail>({
    queryKey: [QUERY_KEY.chi_tiet_phien_kham, consultationId],

    enabled: !!consultationId,

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

        http: consultationServices.detailConsultations(consultationId),
      });

      return (
        res || {
          id: "",
          patientId: "",
          sessionCode: "",
          visitDate: "",
          status: 1,
          chiefComplaint: null,
          symptomsText: null,
          vitalSigns: null,
          diagnosis: null,
          treatmentPlan: null,
          doctorNotes: null,
          createdBy: "",
          isDeleted: false,
        }
      );
    },
  });

  const consultation = consulDetailQuery.data;

  if (consulDetailQuery.isLoading) {
    return <div>Đang tải dữ liệu...</div>;
  }

  if (!consultation) {
    return <div>Không tìm thấy dữ liệu phiên khám</div>;
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
        <div className="flex flex-col gap-6">
          {/* HEADER */}
          <div className="flex items-center gap-3">
            <ArrowLeft
              onClick={() => router.back()}
              className="cursor-pointer"
            />

            <h2 className="text-[28px] font-semibold text-[#111827]">
              Chi tiết phiên khám
            </h2>
          </div>

          {/* CONTENT */}
          <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
            {/* ID PHIÊN KHÁM */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                ID PHIÊN KHÁM
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.id}
              </p>
            </div>

            {/* MÃ PHIÊN KHÁM */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                MÃ PHIÊN KHÁM
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.sessionCode}
              </p>
            </div>

            {/* NGÀY GIỜ KHÁM */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                NGÀY, GIỜ KHÁM
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.visitDate}
              </p>
            </div>

            {/* TRIỆU CHỨNG */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">DẤU HIỆU</p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.symptomsText || "---"}
              </p>
            </div>

            {/* KHIẾU NẠI CHÍNH */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                KHIẾU NẠI CHÍNH
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.chiefComplaint || "---"}
              </p>
            </div>

            {/* DẤU HIỆU SINH TỒN */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                DẤU HIỆU SINH TỒN
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.vitalSigns || "---"}
              </p>
            </div>

            {/* CHẨN ĐOÁN */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                CHUẨN ĐOÁN
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.diagnosis || "---"}
              </p>
            </div>

            {/* KẾ HOẠCH ĐIỀU TRỊ */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                KẾ HOẠCH ĐIỀU TRỊ
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.treatmentPlan || "---"}
              </p>
            </div>

            {/* GHI CHÚ BÁC SĨ */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                GHI CHÚ BÁC SĨ
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.doctorNotes || "---"}
              </p>
            </div>

            {/* NGƯỜI TẠO */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                NGƯỜI TẠO
              </p>

              <p className="text-[15px] font-medium text-[#202939]">
                {consultation.createdBy || "---"}
              </p>
            </div>

            {/* TRẠNG THÁI */}
            <div className="space-y-1">
              <p className="text-[14px] font-medium text-[#697586]">
                TRẠNG THÁI
              </p>

              <StateActive
                stateActive={consultation.status}
                listState={[
                  {
                    state: TYPE_STATUS.Draft,
                    text: "Đang chờ",
                    textColor: "#000",
                    backgroundColor: "#FFE4C4",
                  },

                  {
                    state: TYPE_STATUS.InProgress,
                    text: "Đang thực hiện",
                    textColor: "#000",
                    backgroundColor: "#ff3300",
                  },

                  {
                    state: TYPE_STATUS.Completed,
                    text: "Hoàn thành",
                    textColor: "#000",
                    backgroundColor: "#3d69eb",
                  },
                  {
                    state: TYPE_STATUS.Cancelled,
                    text: "Đã hủy",
                    textColor: "#000",
                    backgroundColor: "#cccc",
                  },
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DetailConsultation;