import React from "react";
import SectionTitle from "./SectionTitle";
import {API_URL} from "@/constants";
import {cookies} from "next/headers";
export interface DashboardCounts {
  department: {
    members: number;
  };
  patients: number;
  onlineCases: {
    completed: number;
    pending: number;
  };
  staff: {
    coordinators: number;
    admins: number;
    doctors: number;
  };
}

async function getData() {
  try {
    const res = await fetch(`${API_URL}/statistics/data`, {
      method: "GET",
      credentials: "include",
      cache: "no-cache",
      headers: {
        Cookie: (await cookies()).toString(),
      },
    });

    const data = await res.json();
    return data;
  } catch  {
    // throw new Error("failed to get data");
    return {}
  }
}
export default async function DashboardStatistics() {
  const fetchedData = await getData();
  const {data} = fetchedData || {};
  return (
    <>
      <section className="bg-white border border-neutral-200 p-10 rounded-lg space-y-8">
        <div className="space-y-6">
          <SectionTitle label="آمار و اطلاعات دپارتمان" />
          <div className="flex items-center flex-wrap justify-start gap-6 mt-10">
            {data?.department && (
              <>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">اعضای دپارتمان</span>
                  <span className="text-sm">
                    {Number(data?.department?.members).toLocaleString("fa-IR")}
                  </span>
                </div>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">پزشکان دپارتمان</span>
                  <span className="text-sm">
                    {Number(data?.department?.doctors).toLocaleString("fa-IR")}
                  </span>
                </div>
              </>
            )}
        
          </div>
        </div>
        <div className="space-y-6">
          <SectionTitle label="آمار و اطلاعات کاربران سایت" />
          <div className="flex items-center flex-wrap justify-start gap-6 mt-10">
            {data?.staff && (
              <>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">کارشناسان سایت</span>
                  <span className="text-sm">
                    {Number(data?.staff?.coordinators).toLocaleString("fa-IR")}
                  </span>
                </div>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">ادمین های سایت </span>
                  <span className="text-sm">
                    {Number(data?.staff?.admins).toLocaleString("fa-IR")}
                  </span>
                </div>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">پزشکان سایت</span>
                  <span className="text-sm">
                    {Number(data?.staff?.doctors).toLocaleString("fa-IR")}
                  </span>
                </div>
              </>
            )}
          </div>
        </div>
        <div className="space-y-6">
          <SectionTitle label="آمار و اطلاعات درمانی" />
          <div className="flex items-center flex-wrap justify-start gap-6 mt-10">
            
            {data?.patients && (
              <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                <span className="text-sm font-semibold">تعداد کل بیماران</span>
                <span className="text-sm">
                  {Number(data?.patients?.numbers).toLocaleString("fa-IR")}
                </span>
              </div>
            )}
            {data?.onlineCases && (
              <>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">
                    {" "}
                    پذیرش های کامل شده
                  </span>
                  <span className="text-sm">
                    {Number(data?.onlineCases?.completed).toLocaleString(
                      "fa-IR"
                    )}
                  </span>
                </div>
                <div className="border border-neutral-200 p-4 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all rounded-lg">
                  <span className="text-sm font-semibold">
                    {" "}
                    پذیرش های درحال انجام
                  </span>
                  <span className="text-sm">
                    {Number(data?.onlineCases?.pending).toLocaleString("fa-IR")}
                  </span>
                </div>
              </>
            )}
          
          </div>
        </div>
      </section>
    </>
  );
}
