import React, { useState, useEffect } from 'react';

  // Define the available model options
  const modelOptions = [
    'Offline Fast',
    'Offline Fast (FOSS)',
    'Offline Slow',
    'Offline Slow (FOSS)',
    'Online (La Plateforme)',
    'Online (FOSS) (La Plateforme)',
    'Online Cheap (OpenAI)',
    'Online Expensive (OpenAI)',
    'Online Cheap (Anthropic)',
    'Online Expensive (Anthropic)',
    'Online Cheap (Google)',
    'Online Expensive (Google)',
  ];

  // Define the properties passed to the Models component
  interface ModelsProps {
    selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
  }

  const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
    // State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast'
    const [selectedModel, setSelectedModel] = useState<string>(() => {
      return localStorage.getItem('selectedModel') || 'Offline Fast';
    });

    // Handle changes in the selected model from the dropdown
    const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
      const newModel = event.target.value;
      setSelectedModel(newModel);
    };

    // Utility function to check if a model is an offline model
    const isOfflineModel = (model: string) => {
      return model.includes('Offline');
    };

    // Utility function to check if a model is an online model
    const isOnlineModel = (model: string) => {
      return model.includes('Online');
    };

    // Save selected model to localStorage whenever it changes
    useEffect(() => {
      localStorage.setItem('selectedModel', selectedModel);
    }, [selectedModel]);

    // Filter models based on the selected privacy option (Offline, AI Online, None)
    const filteredModels = modelOptions.filter((model) => {
      if (selectedOption === 'Offline') {
        return !isOnlineModel(model);  // Hide online models
      } else if (selectedOption === 'AI Online') {
        return !isOfflineModel(model);  // Hide offline models
      } else {
        return true;  // Show all models for "None"
      }
    });

    return (
      <div className="model-background">
        <div className="models">
          <div className="title">
            <h3>Different AI models</h3>
          </div>

          {/* Model Selection Dropdown */}
          <div className="model-dropdown">
            <label htmlFor="model-select">Select AI Model:</label>
            <select id="model-select" value={selectedModel} onChange={handleModelChange}>
              {filteredModels.map((model) => (
                <option key={model} value={model}>
                  {model}
                </option>
              ))}
            </select>
          </div>

          {/* Model Grid with Cards */}
          <div className="grid">
            <button className="code-model model-box">
              <div className="overlay">
                <h3>Code</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="math-model model-box">
              <div className="overlay">
                <h3>Math</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="language-model model-box">
              <div className="overlay">
                <h3>Language</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="character-model model-box">
              <div className="overlay">
                <h3>Character</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="financial-model model-box">
              <div className="overlay">
                <h3>Finance</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="weather-model model-box">
              <div className="overlay">
                <h3>Weather</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="time-planner-model model-box">
              <div className="overlay">
                <h3>Time</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="image-model model-box">
              <div className="overlay">
                <h3>Image</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay"> 
                <h3>Custom1</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay"> 
                <h3>Custom2</h3>
                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
              </div>
            </button>
          </div>
        </div>
      </div>
    );
  };

  export default Models;