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

// Define the available model options
const modelDropdown = {
  offlineModels: [
    'Offline Fast',
    'Offline Fast (FOSS)',
    'Offline Slow',
    'Offline Slow (FOSS)',
  ],

  onlineModels: [
    '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)',
  ],

  fossModels: [
    'Offline Fast (FOSS)',
    'Offline Slow (FOSS)',
    'Online (FOSS) (La Plateforme)',
  ],
};

const Models: React.FC = () => {
  // Initialize state with value from localStorage or default to ''
  const [radioSelection, setRadioSelection] = useState(() => localStorage.getItem('radioSelection') || '');

  useEffect(() => {
    const handleStorageChange = () => {
      setRadioSelection(localStorage.getItem('radioSelection') || '');
    };

    // Update dropdown immediately when localStorage changes internally or externally
    window.addEventListener('storage', handleStorageChange);

    // Cleanup listener on component unmount
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newModel = event.target.value;
    setRadioSelection(newModel);
    localStorage.setItem('radioSelection', newModel); // Update localStorage directly
  };

  // Determine the filtered models based on current radioSelection
  const filteredModels = (() => {
    switch (radioSelection) {
      case 'Offline':
        return modelDropdown.offlineModels; // Show only offline models
      case 'AI Online':
        return modelDropdown.onlineModels; // Show only online models
      case 'FOSS':
        return modelDropdown.fossModels; // Show only FOSS models
      default:
        return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
    }
  })();

  const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);

  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={radioSelection} onChange={handleModelChange}>
          {filteredModels.map((model) => (
            <option key={model} value={model}>
              {model}
            </option>
          ))}
        </select>
      </div>

      {/* Model Grid with Cards */}
      <div className="grid">
        {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
          <button key={category} className={`${category.toLowerCase()}-model model-box`}>
            <div className="overlay">
              <h3>{category}</h3>
              {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
        ))}
      </div>
    </div>
  </div> 
  );
};

export default Models;