import React, { useState } from 'react';
// Import Components ย่อยจากโฟลเดอร์ components/
import ModelSelector from '../../components/ModelSelector';
import FileUploadAndSubmit from '../../components/FileUploadAndSubmit';
import ResultDisplay from '../../components/ResultDisplay';

// Import Hooks จากโฟลเดอร์ services/
//import { useActiveModelList } from '../../services/modelRegistryApi';
import { useRunInferenceMutation } from '../../services/inferenceApi';

export default function InferenceRun() {
    // 1. Hooks สำหรับดึงข้อมูลและเรียกใช้งาน AI
    //const { data: activeModels, isLoading } = useActiveModelList();
    const { mutateAsync: runInference, isPending } = useRunInferenceMutation();

    // 2. State สำหรับ Component
    const [selectedModelId] = useState('');
    const [file, setFile] = useState(null);
    const [result, setResult] = useState(null);

    // 3. Logic เมื่อกดปุ่ม Submit
    const handleSubmit = async (e) => {
        e.preventDefault();
        setResult(null); // เคลียร์ผลลัพธ์เก่า

        if (!selectedModelId || !file) return alert('กรุณาเลือก Model และอัปโหลดไฟล์');

        const formData = new FormData();
        formData.append('file', file);

        try {
            // เรียก Mutation Hook: ส่ง modelId แทน targetUrl
            const res = await runInference({
                formData,
                modelId: selectedModelId // Backend คาดหวัง String ใน URL Path
            });
            setResult(res);
        } catch (error) {
            // Error handling ถูกจัดการด้วย Toast ใน Hook แล้ว
            console.error('Inference run failed in page component:', error);
        }
    };

    return (
        <div className="p-6 max-w-3xl mx-auto">
            <h2 className="text-2xl font-bold mb-4">AI Inference (Run)</h2>
            <p className="mb-6 text-gray-500">เลือก Model ที่ต้องการ และอัปโหลดไฟล์เพื่อสั่งรันการประมวลผล</p>

            {/* Component 1: ตัวเลือก Model */}

            {/* Component 2: อัปโหลดไฟล์และปุ่ม Submit */}
            <FileUploadAndSubmit
                file={file}
                setFile={setFile}
                isPending={isPending}
                onSubmit={handleSubmit}
                selectedModelId={selectedModelId}
            />

            {/* Component 3: แสดงผลลัพธ์ */}
            <ResultDisplay result={result} />
        </div>
    );
}