import React from 'react';
import { useQuery } from '@tanstack/react-query';
import api from '../api/axios';
import { FaUserMd, FaUsers, FaCalendarAlt } from 'react-icons/fa';

// ฟังก์ชันสำหรับเรียก API แต่ละตัว
const fetchDoctorsCount = async () => {
    const { data } = await api.get('/doctors');
    return data.length; // นับจำนวนแพทย์
};

const fetchPatientsCount = async () => {
    const { data } = await api.get('/patients');
    return data.length; // นับจำนวนผู้ป่วย
};

const fetchConsultations = async () => {
    const { data } = await api.get('/consultations');
    // คุณอาจต้องกรองข้อมูลเพื่อหาจำนวนนัดหมายที่กำลังจะมาถึง
    // เช่น data.filter(c => new Date(c.date) > new Date()).length
    return data.length; // นับจำนวนการนัดหมายทั้งหมด
};

export default function DashboardPage() {
    // ใช้ useQuery แยกกันสำหรับแต่ละข้อมูล
    const { data: doctorsCount, isLoading: isDoctorsLoading, isError: isDoctorsError } = useQuery({
        queryKey: ['doctorsCount'],
        queryFn: fetchDoctorsCount,
    });

    const { data: patientsCount, isLoading: isPatientsLoading, isError: isPatientsError } = useQuery({
        queryKey: ['patientsCount'],
        queryFn: fetchPatientsCount,
    });

    const { data: consultationsCount, isLoading: isConsultationsLoading, isError: isConsultationsError } = useQuery({
        queryKey: ['consultationsCount'],
        queryFn: fetchConsultations,
    });

    if (isDoctorsLoading || isPatientsLoading || isConsultationsLoading) {
        return <div className="text-center p-8">กำลังโหลดข้อมูล...</div>;
    }

    if (isDoctorsError || isPatientsError || isConsultationsError) {
        return <div className="alert alert-error">เกิดข้อผิดพลาดในการโหลดข้อมูล</div>;
    }

    return (
        <div className="p-6">
            <h1 className="text-3xl font-bold mb-6">ภาพรวมระบบ</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {/* Card แสดงจำนวนแพทย์ */}
                <div className="stats shadow bg-white">
                    <div className="stat">
                        <div className="stat-figure text-primary">
                            <FaUserMd size={24} />
                        </div>
                        <div className="stat-title">จำนวนแพทย์</div>
                        <div className="stat-value text-primary">{doctorsCount}</div>
                    </div>
                </div>

                {/* Card แสดงจำนวนผู้ป่วย */}
                <div className="stats shadow bg-white">
                    <div className="stat">
                        <div className="stat-figure text-secondary">
                            <FaUsers size={24} />
                        </div>
                        <div className="stat-title">จำนวนผู้ป่วย</div>
                        <div className="stat-value text-secondary">{patientsCount}</div>
                    </div>
                </div>

                {/* Card แสดงจำนวนนัดหมาย */}
                <div className="stats shadow bg-white">
                    <div className="stat">
                        <div className="stat-figure text-accent">
                            <FaCalendarAlt size={24} />
                        </div>
                        <div className="stat-title">จำนวนนัดหมาย</div>
                        <div className="stat-value text-accent">{consultationsCount}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}