import React from 'react';
//import { useTestConnection } from '../../services/modelRegistryApi'; // Hook สำหรับ Test Connection
import { FaCheckCircle, FaExclamationTriangle, FaTrash, FaEdit } from 'react-icons/fa';
import { useDispatch } from 'react-redux';
import { addToast } from '../../features/toast/toastSlice';

// ----------------------------------------------------
// Helper Function: แสดง Badge สถานะ
// ----------------------------------------------------
const getStatusBadge = (status) => {
    const baseClass = "badge badge-sm";
    switch (status) {
        case 'ACTIVE': return <div className={`${baseClass} badge-success font-medium`}>ACTIVE</div>;
        case 'TESTING': return <div className={`${baseClass} badge-warning font-medium`}>TESTING</div>;
        case 'INACTIVE': return <div className={`${baseClass} badge-info font-medium`}>INACTIVE</div>;
        default: return <div className={`${baseClass} badge-neutral font-medium`}>N/A</div>;
    }
};

function ModelTable({ models, handleOpenEdit, handleDelete, deleteLoading }) {
    // ประกาศ useDispatch Hook
    const dispatch = useDispatch();

    // Hook สำหรับทดสอบการเชื่อมต่อ (Test Connection)
    // ใช้ Hook ตรงนี้ เพราะเป็น Logic ที่เกี่ยวข้องกับ Action ในตารางโดยตรง
    //const testConnectionMutation = useTestConnection();

    // 2. Logic การแสดงผลตาราง
    return (
        <table className="table w-full table-zebra table-pin-rows">
            {/* Table Head */}
            <thead>
            <tr>
                <th className='w-1/6'>Model/Version</th>
                <th className='w-1/4'>Base URL</th>
                <th>Developer</th>
                <th className='w-1/12'>Status</th>
                <th className='w-1/6'>Actions</th>
            </tr>
            </thead>

            {/* Table Body */}
            <tbody>
            {models.map((model) => (
                <tr className="hover:bg-base-300" key={model.id}>
                    <td className='font-semibold'>
                        {model.name}
                        <span className="badge badge-xs badge-ghost ml-2">{model.model_version}</span>
                    </td>
                    <td className='text-xs max-w-xs overflow-hidden truncate tooltip' data-tip={model.full_endpoint}>
                        {model.full_endpoint}
                    </td>
                    <td>{model.developer || 'N/A'}</td>
                    <td>{getStatusBadge(model.status)}</td>

                    {/* Actions (CRUD/Control) */}
                    <td className='flex space-x-1'>
                        {/* Edit/Update Button (Protected by RBAC in Backend) */}
                        <button
                            className="btn btn-outline btn-secondary btn-xs tooltip"
                            data-tip="Edit Model Metadata"
                            onClick={() => handleOpenEdit(model)}
                        >
                            <FaEdit className="w-3 h-3" />
                        </button>

                        {/* Test Connection Button */}
                        <button
                            className="btn btn-outline btn-info btn-xs tooltip"
                            data-tip="Test Connection"
                            onClick={()=>{}}
                        >
                        </button>

                        {/* Delete Button (Protected by RBAC in Backend) */}
                        <button
                            className="btn btn-outline btn-error btn-xs tooltip"
                            data-tip="Delete Model"
                            onClick={() => handleDelete(String(model.id))}
                            disabled={deleteLoading}
                        >
                            <FaTrash className="w-3 h-3" />
                        </button>
                    </td>
                </tr>
            ))}
            </tbody>
        </table>
    );
}

export default ModelTable;