import React, { useState, useEffect, useRef } from "react";

export default function ModelInputBar({ loading, fetchModelStructure }) {
    // Single selection: user can pick one of several fetch options
    const options = [
        { label: "Not Sure", value: "none", default: "deepseek-ai/DeepSeek-V3.1" },
        { label: "Causal Language Models (e.g. GPT, LLaMA, Phi, Mistral)", value: "causal", default: "gpt2"},
        { label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked", default: "google-bert/bert-base-uncased" },
        { label: "Sequence Classification (text classification, sentiment analysis)", value: "sequence", default: "distilbert-base-uncased" },
        { label: "Token Classification (NER, POS tagging)", value: "token",  default: "dbmdz/bert-large-cased-finetuned-conll03-english" },
        { label: "Question Answering Models (e.g. BERT QA, RoBERTa QA)", value: "qa", default: "distilbert-base-uncased-distilled-squad" },
        { label: "Seq2Seq (encoder-decoder, e.g. T5, BART, MarianMT)", value: "s2s", default: "t5-base" },
        { label: "Vision models (image classification, CLIP vision tower, etc.)", value: "vision", default: "google/vit-base-patch16-224" },
        { label: "Vision-Language models (image-text models, Qwen-VL, etc.)", value: "vlm", default: "Qwen/Qwen3-VL-8B-Instruct" },
    ];

    const [modelName, setModelName] = useState("");
    const [selectedOption, setSelectedOption] = useState(options[0].value);
    const [placeholder, setPlaceholder] = useState(options[0].default);


    const handleFetch = () => {
        const name = modelName && modelName !== "" ? modelName : placeholder;
        fetchModelStructure(name, selectedOption);
    };

    const handelRadioChange = (e) => {
        setSelectedOption(e.target.value);
        const opt = options.find((o) => o.value === e.target.value);
        if (opt) {
            setPlaceholder(opt.default);
        }
    }

    return (
        <div className="flex flex-col gap-2 mb-4 w-full">
            {/* Responsive flex row/col for title and input/button */}
            <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full py-2">
                <h3 className="text-sm font-semibold text-slate-800 mb-2 whitespace-nowrap sm:mb-0">
                    Model Name:
                </h3>
                <div className="flex flex-1 gap-2">
                    <input
                        type="text"
                        value={modelName}
                        onChange={(e) => setModelName(e.target.value)}
                        placeholder={placeholder}
                        className="flex-1 px-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-300"
                        onKeyDown={(e) => {
                            if (e.key === "Enter") handleFetch();
                        }}
                        aria-label="Model name"
                    />
                    <button
                        onClick={handleFetch}
                        disabled={loading}
                        className={`model-name px-4 py-2 rounded-lg font-medium text-white ${
                            loading ? "bg-slate-400 cursor-wait" : "bg-sky-600 hover:bg-sky-700"
                        }`}
                    >
                        {loading ? "Loading..." : "View"}
                    </button>
                </div>
            </div>

            <div className="flex flex-col sm:flex-row sm:top gap-2 w-full py-2">
                <h3 className="text-sm font-semibold text-slate-800 mb-2 whitespace-nowrap sm:mb-0">Model Type:</h3>
                <div className="flex flex-wrap items-center gap-4 text-sm text-slate-700">
                    {options.map((option) => (
                        <label key={option.value} className="model-type flex items-center gap-2">
                            <input
                                type="radio"
                                name="fetchOption"
                                value={option.value}
                                checked={selectedOption === option.value}
                                onChange={handelRadioChange}
                                className="w-4 h-4"
                            />
                            <span>{option.label}</span>
                        </label>
                    ))}
                </div>
            </div>
        </div>
    );
}