import React from 'react';
import TitleCard from '../../components/TitleCard';
import { useSystemHealth } from '../../services/healthApi';
import { FaTimesCircle, FaSyncAlt, FaCheckCircle } from 'react-icons/fa';

// Imports Components ย่อย
import InfraStatusCard from '../../components/Health/InfraStatusCard';
import ModelEndpointsStatus from '../../components/Health/ModelEndpointList';


export default function SystemHealth() {
    const { data, isLoading, isError, isFetching } = useSystemHealth();

    // ตรวจสอบสถานะภาพรวม
    const overallStatus = data?.status || (isError ? 'Error' : 'Loading');
    const overallColor = overallStatus === 'Healthy' ? 'alert-success' : overallStatus === 'Degraded' ? 'alert-warning' : 'alert-error';
    const lastChecked = data?.last_checked ? new Date(data.last_checked).toLocaleTimeString() : 'N/A';

    if (isError) {
        return <TitleCard title="สถานะระบบ" topMargin="mt-0">
            <p className="text-error p-4">ไม่สามารถเชื่อมต่อกับ Health API ได้ (Backend อาจหยุดทำงาน)</p>
        </TitleCard>
    }

    return (
        <TitleCard
            title="สถานะระบบ (Health Check)"
            topMargin="mt-0"
            TopSideButtons={isFetching ? <FaSyncAlt className="animate-spin text-primary" title="Refreshing..." /> : null}
        >

            {/* 1. สถานะภาพรวม */}
            <div className={`alert ${overallColor} text-base-content mb-6 shadow-lg`}>
                <span className="font-bold text-lg flex items-center space-x-3">
                    {overallStatus === 'Healthy' ? <FaCheckCircle /> : <FaTimesCircle />}
                    <span>สถานะภาพรวม: {overallStatus}</span>
                </span>
            </div>

            {/* 2. Infrastructure Services Card */}
            {data?.services && <InfraStatusCard serviceData={data.services} />}

            {/* 3. Model Endpoint List */}
            {data?.services?.model_endpoints && <ModelEndpointsStatus modelData={data.services.model_endpoints} />}

            {/* เวลาตรวจสอบ */}
            <p className="text-xs text-gray-500 mt-6">
                {isLoading && !data ? "กำลังตรวจสอบสถานะครั้งแรก..." : `อัปเดตล่าสุด: ${lastChecked}`}
            </p>
        </TitleCard>
    );
}