frontend/src/App.js

import { useState, useEffect, useCallback, useRef } from 'react';
import { Sun, Moon, Download, RefreshCw, Menu, X, Settings, Send, FileText, Users, Cpu, Ban, Eye, EyeOff, Activity } from 'lucide-react';
import { useTheme } from './contexts/ThemeContext';
import { fetchModels, fetchModelStatuses, runComparisonStream, uploadCsvComparison, downloadHistory } from './utils/api';
import NeonModelSelector from './components/NeonModelSelector';
import ComparisonSelector from './components/ComparisonSelector';
import QueryInput from './components/QueryInput';
import ResultsArea from './components/ResultsArea';
import ModelStatusModal from './components/ModelStatusModal';
import './App.css';

function filterToOnlineModels(neonModels, comparisonProviders, statuses) {
  const onlineIds = new Set(
    (statuses || [])
      .filter((s) => s.status === 'online')
      .map((s) => s.model_id),
  );

  // If status check returned nothing (e.g. failed), keep the full list.
  if (!statuses || !statuses.length) {
    return { neonModels, comparisonProviders };
  }

  const filteredNeon = (neonModels || []).filter((m) => onlineIds.has(m.model_id));
  const filteredProviders = (comparisonProviders || [])
    .map((p) => ({
      ...p,
      models: (p.models || []).filter((m) => onlineIds.has(m.id)),
    }))
    .filter((p) => p.models.length > 0);

  return { neonModels: filteredNeon, comparisonProviders: filteredProviders };
}

function App() {
  const { theme, toggleTheme } = useTheme();
  const [neonModels, setNeonModels] = useState([]);
  const [comparisonProviders, setComparisonProviders] = useState([]);
  const [selectedNeon, setSelectedNeon] = useState([]);
  const [selectedComparison, setSelectedComparison] = useState([]);
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modelsLoading, setModelsLoading] = useState(true);
  const [statusChecking, setStatusChecking] = useState(false);
  const [modelStatuses, setModelStatuses] = useState([]);
  const [modelStatusOpen, setModelStatusOpen] = useState(false);
  const [error, setError] = useState(null);
  const sessionIdRef = useRef(`session-${Date.now()}-${Math.random().toString(36).slice(2)}`);
  const [hasHistory, setHasHistory] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [csvMode, setCsvMode] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [personaTarget, setPersonaTarget] = useState('neon-only');
  const [showPersonaPrompt, setShowPersonaPrompt] = useState(false);
  const [showPrePromptIndicator, setShowPrePromptIndicator] = useState(false);
  const settingsRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (settingsRef.current && !settingsRef.current.contains(e.target)) {
        setSettingsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const applyStatusFilter = useCallback((rawNeon, rawProviders, statuses) => {
    const { neonModels: filteredNeon, comparisonProviders: filteredProviders } =
      filterToOnlineModels(rawNeon, rawProviders, statuses);
    setNeonModels(filteredNeon);
    setComparisonProviders(filteredProviders);
    setSelectedNeon((prev) => prev.filter((s) => filteredNeon.some((m) => m.model_id === s.model_id)));
    const onlineComparisonIds = new Set(filteredProviders.flatMap((p) => p.models.map((m) => m.id)));
    setSelectedComparison((prev) => prev.filter((id) => onlineComparisonIds.has(id)));
  }, []);

  const checkModelStatuses = useCallback(async (rawNeon, rawProviders) => {
    setStatusChecking(true);
    try {
      const data = await fetchModelStatuses();
      const statuses = data.statuses || [];
      setModelStatuses(statuses);
      applyStatusFilter(rawNeon, rawProviders, statuses);
    } catch (e) {
      console.warn('Model status check failed; keeping full model list:', e);
      setModelStatuses([]);
      setNeonModels(rawNeon || []);
      setComparisonProviders(rawProviders || []);
    } finally {
      setStatusChecking(false);
    }
  }, [applyStatusFilter]);

  const loadModels = useCallback(async () => {
    setModelsLoading(true);
    setError(null);
    try {
      const data = await fetchModels();
      const rawNeon = data.neon_models || [];
      const rawProviders = data.comparison_providers || [];
      // Show unfiltered list briefly while status check runs, then filter.
      setNeonModels(rawNeon);
      setComparisonProviders(rawProviders);
      setModelsLoading(false);
      await checkModelStatuses(rawNeon, rawProviders);
    } catch (e) {
      setError(`Failed to load models: ${e.message}`);
      setModelsLoading(false);
    }
  }, [checkModelStatuses]);

  useEffect(() => { loadModels(); }, [loadModels]);

  const handleRefreshStatuses = async () => {
    try {
      const data = await fetchModels();
      const rawNeon = data.neon_models || [];
      const rawProviders = data.comparison_providers || [];
      await checkModelStatuses(rawNeon, rawProviders);
    } catch (e) {
      setError(`Failed to refresh model status: ${e.message}`);
    }
  };

  const handleQuery = async (query) => {
    if (!selectedNeon.length) {
      setError('Please select at least one Neon model');
      return;
    }
    setLoading(true);
    setError(null);

    const resultEntry = { query, groups: [], timestamp: Date.now() };
    setResults(prev => [resultEntry, ...prev]);
    const resultIndex = 0;

    try {
      await runComparisonStream(
        query,
        selectedNeon,
        selectedComparison,
        sessionIdRef.current,
        (groupMeta) => {
          setResults(prev => {
            const updated = [...prev];
            const entry = { ...updated[resultIndex] };
            entry.groups = [...entry.groups, {
              neon_model_id: groupMeta.neon_model_id,
              neon_persona: groupMeta.neon_persona,
              system_prompt: groupMeta.system_prompt || '',
              query: groupMeta.query,
              responses: [],
            }];
            updated[resultIndex] = entry;
            return updated;
          });
        },
        (response) => {
          setResults(prev => {
            const updated = [...prev];
            const entry = { ...updated[resultIndex] };
            entry.groups = entry.groups.map((g, gi) => {
              if (gi !== response.group_index) return g;
              return { ...g, responses: [...g.responses, response] };
            });
            updated[resultIndex] = entry;
            return updated;
          });
        },
        () => {
          setHasHistory(true);
        },
        personaTarget,
      );
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  const handleCsvUpload = async (file) => {
    if (!selectedNeon.length) {
      setError('Please select at least one Neon model');
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const blob = await uploadCsvComparison(file, selectedNeon, selectedComparison, personaTarget);
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `comparison_${new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-')}.csv`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  const handleDownloadHistory = async () => {
    try {
      const blob = await downloadHistory(sessionIdRef.current);
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `comparison_${new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-')}.csv`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      setError('No history to download yet');
    }
  };

  return (
    <div className="app">
      <header className="app-header">
        <div className="header-left">
          <button className="icon-btn sidebar-toggle" onClick={() => setSidebarOpen(o => !o)} title="Toggle model selection">
            {sidebarOpen ? <X size={18} /> : <Menu size={18} />}
          </button>
          <a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="header-brand-link" aria-label="Neon.ai">
            <img src={`${process.env.PUBLIC_URL}/neon-logo.png`} alt="Neon.ai" className="app-logo" />
          </a>
          <h1 className="app-title"><a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="app-title-link">Neon.ai</a> LLM Comparison Tool</h1>
        </div>
        <div className="header-right">
          <button className="icon-btn" onClick={loadModels} title="Refresh models">
            <RefreshCw size={18} className={modelsLoading || statusChecking ? 'spin' : ''} />
          </button>
          {hasHistory && (
            <button className="icon-btn" onClick={handleDownloadHistory} title="Download session history as CSV">
              <Download size={18} />
            </button>
          )}
          <button className="icon-btn" onClick={toggleTheme} title="Toggle theme">
            {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
          </button>
          <div className="settings-wrapper" ref={settingsRef}>
            <button className="icon-btn" onClick={() => setSettingsOpen(o => !o)} title="Settings">
              <Settings size={18} />
            </button>
            {settingsOpen && (
              <div className="settings-dropdown">
                <div className="settings-section">
                  <span className="settings-label">Query Mode</span>
                  <button
                    className={`settings-option ${!csvMode ? 'active' : ''}`}
                    onClick={() => setCsvMode(false)}
                  >
                    <Send size={14} /> Single Query
                  </button>
                  <button
                    className={`settings-option ${csvMode ? 'active' : ''}`}
                    onClick={() => setCsvMode(true)}
                  >
                    <FileText size={14} /> CSV Batch
                  </button>
                </div>
                <div className="settings-section">
                  <span className="settings-label">Pre-prompt</span>
                  <button
                    className={`settings-option ${personaTarget === 'all' ? 'active' : ''}`}
                    onClick={() => setPersonaTarget('all')}
                  >
                    <Users size={14} /> All models
                  </button>
                  <button
                    className={`settings-option ${personaTarget === 'neon-only' ? 'active' : ''}`}
                    onClick={() => setPersonaTarget('neon-only')}
                  >
                    <Cpu size={14} /> Neon.ai models only
                  </button>
                  <button
                    className={`settings-option ${personaTarget === 'none' ? 'active' : ''}`}
                    onClick={() => setPersonaTarget('none')}
                  >
                    <Ban size={14} /> No models
                  </button>
                </div>
                <div className="settings-section">
                  <span className="settings-label">Display</span>
                  <button
                    className={`settings-option ${showPersonaPrompt ? 'active' : ''}`}
                    onClick={() => setShowPersonaPrompt(v => !v)}
                  >
                    {showPersonaPrompt ? <Eye size={14} /> : <EyeOff size={14} />} Show pre-prompt text
                  </button>
                  <button
                    className={`settings-option ${showPrePromptIndicator ? 'active' : ''}`}
                    onClick={() => setShowPrePromptIndicator(v => !v)}
                  >
                    {showPrePromptIndicator ? <Eye size={14} /> : <EyeOff size={14} />} Show pre-prompt status
                  </button>
                </div>
                <div className="settings-section">
                  <button
                    className="settings-option"
                    onClick={() => {
                      setSettingsOpen(false);
                      setModelStatusOpen(true);
                    }}
                  >
                    <Activity size={14} /> Model Status
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </header>

      <main className="app-main">
        <div className={`sidebar-overlay ${sidebarOpen ? 'visible' : ''}`} onClick={() => setSidebarOpen(false)} />
        <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
          <h2 className="sidebar-title">AI Models</h2>
          <NeonModelSelector
            models={neonModels}
            selected={selectedNeon}
            onSelectionChange={setSelectedNeon}
            loading={modelsLoading || statusChecking}
          />
          <ComparisonSelector
            providers={comparisonProviders}
            selected={selectedComparison}
            onSelectionChange={setSelectedComparison}
            loading={modelsLoading || statusChecking}
          />
        </aside>

        <section className="content">
          <div className="content-hint content-hint-desktop">
            <p className="content-hint-lead">Ready to Compare?</p>
            <p className="content-hint-body">Pick at least one Neon.ai model in the sidebar, add comparison models, then enter a question and click Compare.</p>
          </div>
          <div className="content-hint content-hint-mobile">
            <p className="content-hint-lead">Ready to Compare?</p>
            <p className="content-hint-body">Pick at least one Neon.ai model using the menu on the upper left, add comparison models, then enter a question and click Compare.</p>
          </div>
          <QueryInput
            onQuery={handleQuery}
            onCsvUpload={handleCsvUpload}
            loading={loading}
            csvMode={csvMode}
            selectedNeon={selectedNeon}
            selectedComparison={selectedComparison}
            comparisonProviders={comparisonProviders}
          />

          {error && (
            <div className="error-banner">
              {error}
              <button onClick={() => setError(null)}>&times;</button>
            </div>
          )}

          <ResultsArea
            results={results}
            multipleNeon={selectedNeon.length > 1}
            comparisonModelOrder={selectedComparison}
            comparisonProviders={comparisonProviders}
            showPersonaPrompt={showPersonaPrompt}
            showPrePromptIndicator={showPrePromptIndicator}
          />
        </section>
      </main>
      <footer className="app-footer">
        Copyright Neon.ai. All rights reserved.{' '}
        <a href="https://www.neon.ai/contact" target="_blank" rel="noopener noreferrer">Patents and licensing</a>
      </footer>

      {modelStatusOpen && (
        <ModelStatusModal
          statuses={modelStatuses}
          loading={statusChecking}
          onClose={() => setModelStatusOpen(false)}
          onRefresh={handleRefreshStatuses}
        />
      )}
    </div>
  );
}

export default App;