// src/pages/Guide/UserGuide.jsx
import React from 'react';
import { FaUpload, FaFlask, FaDatabase, FaServer, FaBook } from 'react-icons/fa';
import TitleCard from '../../components/TitleCard';

export default function UserGuide() {
    return (
        <TitleCard
            title="คู่มือการใช้งาน (Reference Guide)"
            topMargin="mt-0"
            TopSideButtons={<FaBook className="w-5 h-5 text-warning" />}
        >
            {/* SINGLE COLUMN LAYOUT */}
            <main className="w-full">
                <div className="prose max-w-none">

                    {/* ภาพรวม */}
                    <section id="overview" className="pb-4 mb-6 scroll-mt-28">
                        <h2 className="text-2xl font-bold">ภาพรวมระบบ DDO Console</h2>
                        <p className="mt-2">
                            DDO Console ถูกออกแบบมาเพื่อเป็น <b>MLOps Gateway</b> สำหรับจัดการวงจรชีวิต
                            ของ AI Model ทางการแพทย์ (Medical Imaging AI) โดยเฉพาะ...
                        </p>
                    </section>

                    {/* Model Registry */}
                    <section id="registry" className="pb-4 mb-6 scroll-mt-28">
                        <h2 className="text-2xl font-bold flex items-center">
                            <FaDatabase className="mr-3 text-warning" /> 1. Model Registry & Control
                        </h2>

                        <ul className="list-disc list-inside space-y-2 ml-4 text-sm text-base-content/90">
                            <li>ไปที่เมนู <b>"Model Registry & Control"</b></li>
                            <li><b>การลงทะเบียน:</b> ต้องกรอก Base URL และ Inference Path</li>
                        </ul>
                    </section>

                    {/* Inference */}
                    <section id="inference" className="pb-4 mb-6 scroll-mt-28">
                        <h2 className="text-2xl font-bold flex items-center">
                            <FaFlask className="mr-3 text-info" /> 2. AI Inference (Run)
                        </h2>

                        <ul className="list-disc list-inside space-y-2 ml-4 text-sm text-base-content/90">
                            <li><b>เลือก Model:</b> ต้องเลือกเฉพาะ Model ที่เป็น <b>ACTIVE</b></li>
                            <li><b>อัปโหลดไฟล์:</b> รองรับไฟล์ภาพ NIfTI (.nii)</li>
                        </ul>
                    </section>

                    {/* การเตรียม Model */}
                    <section id="deployment" className="pb-4 mb-6 scroll-mt-28">
                        <h2 className="text-2xl font-bold flex items-center">
                            <FaUpload className="mr-3 text-success" /> 3. การเตรียม Model (Deployment)
                        </h2>

                        <ul className="list-disc list-inside space-y-2 ml-4 text-sm text-base-content/90">
                            <li><b>การจัดเก็บ:</b> ไฟล์โมเดลต้องอยู่ใน MinIO bucket <b>'models'</b></li>
                            <li><b>FastAPI:</b> ต้องมี Health Check (GET)</li>
                        </ul>
                    </section>

                    {/* การตรวจสอบสถานะ */}
                    <section id="ops" className="pb-8 mb-6 scroll-mt-28">
                        <h2 className="text-2xl font-bold flex items-center">
                            <FaServer className="mr-3 text-primary" /> 4. การตรวจสอบสถานะระบบ (System Ops)
                        </h2>

                        <p className="mt-4 text-sm text-base-content/90 ml-4">
                            ใช้เมนู <b>"สถานะระบบ (Health)"</b> เพื่อตรวจสอบความพร้อมของ infrastructure และ Model ACTIVE
                        </p>
                    </section>

                </div>
            </main>
        </TitleCard>
    );
}
