App.tsx

import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Incident, CountyStats, ConnectionState } from './types';
import { parseLogText } from './services/geminiService';
import { PostgresMonitorService } from './services/postgresMonitorService';
import TacticalTicker from './components/TacticalTicker';
import CountyCard from './components/CountyCard';
import LogUploader from './components/LogUploader';
import { Radio, Database, DatabaseZap, List, AlertTriangle, Settings, X } from 'lucide-react';

const App: React.FC = () => {
  const [incidents, setIncidents] = useState<Incident[]>([]);
  const [connectionStatus, setConnectionStatus] = useState<ConnectionState>(ConnectionState.DISCONNECTED);
  const [isProcessingText, setIsProcessingText] = useState(false);
  const [keywords, setKeywords] = useState<string>("Fire, Medical, Police, Traffic, Collision, Structure Fire, Shooting, Stabbing, Rescue");
  const [isConfigOpen, setIsConfigOpen] = useState(false);
  
  // Use a ref to hold the service instance to prevent recreation on renders
  const dbMonitorRef = useRef<PostgresMonitorService | null>(null);

  // Initialize service on mount
  useEffect(() => {
    dbMonitorRef.current = new PostgresMonitorService(
      (newIncident) => {
        setIncidents(prev => [newIncident, ...prev]);
      },
      (status) => {
        switch(status) {
          case 'CONNECTED': setConnectionStatus(ConnectionState.CONNECTED); break;
          case 'CONNECTING': setConnectionStatus(ConnectionState.CONNECTING); break;
          case 'DISCONNECTED': setConnectionStatus(ConnectionState.DISCONNECTED); break;
          case 'ERROR': setConnectionStatus(ConnectionState.ERROR); break;
        }
      }
    );

    return () => {
      if (dbMonitorRef.current) {
        dbMonitorRef.current.stop();
      }
    };
  }, []);

  const toggleDbMonitor = () => {
    if (connectionStatus === ConnectionState.CONNECTED || connectionStatus === ConnectionState.CONNECTING) {
      dbMonitorRef.current?.stop();
    } else {
      dbMonitorRef.current?.start(keywords);
    }
  };

  const handleTextProcess = async (text: string) => {
    setIsProcessingText(true);
    try {
      const newIncidents = await parseLogText(text);
      setIncidents(prev => [...newIncidents, ...prev]);
    } catch (e) {
      alert("Failed to parse log.");
    } finally {
      setIsProcessingText(false);
    }
  };

  // Derive county stats dynamically from the incidents list
  const countyStats = useMemo(() => {
    const stats = new Map<string, CountyStats>();
    
    // Process oldest to newest to find "lastActive" correctly, although incidents is stored newest first.
    // Let's iterate normally; incidents[0] is newest.
    
    incidents.forEach(inc => {
      const normalizedName = inc.county.trim();
      const existing = stats.get(normalizedName);
      
      if (existing) {
        stats.set(normalizedName, {
          ...existing,
          count: existing.count + 1,
          // Since incidents are ordered Newest -> Oldest, the first one we see for a county is the latest
        });
      } else {
        stats.set(normalizedName, {
          name: normalizedName,
          count: 1,
          lastActive: inc.timestamp
        });
      }
    });

    return Array.from(stats.values()).sort((a, b) => b.name === 'CareFlight' ? -1 : a.name.localeCompare(b.name));
  }, [incidents]);

  return (
    <div className="min-h-screen p-6 pb-20 relative z-10">
      
      {/* Config Modal */}
      {isConfigOpen && (
        <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
            <div className="bg-black border border-green-500 p-6 w-full max-w-md shadow-[0_0_20px_rgba(0,255,0,0.2)] relative">
                <button 
                    onClick={() => setIsConfigOpen(false)}
                    className="absolute top-2 right-2 text-green-500 hover:text-white transition-colors"
                >
                    <X size={24} />
                </button>
                <h2 className="text-xl font-bold text-green-400 mb-4 uppercase tracking-widest flex items-center gap-2">
                    <Settings size={20} /> System Configuration
                </h2>
                
                <div className="mb-4">
                    <label className="block text-xs text-green-600 uppercase font-bold mb-2">
                        Surveillance Keywords (Comma Separated)
                    </label>
                    <textarea 
                        value={keywords}
                        onChange={(e) => setKeywords(e.target.value)}
                        className="w-full h-32 bg-green-900/10 border border-green-700 text-green-300 text-sm p-3 focus:outline-none focus:border-green-400 resize-none font-mono"
                        placeholder="e.g. Fire, Medical, Police..."
                    />
                    <p className="text-[10px] text-green-700 mt-2 uppercase tracking-wide">
                        System will only flag incidents matching these terms during database analysis.
                    </p>
                </div>

                <div className="flex justify-end">
                    <button 
                        onClick={() => setIsConfigOpen(false)}
                        className="bg-green-900/30 text-green-400 border border-green-500 px-4 py-2 text-sm uppercase font-bold hover:bg-green-500 hover:text-black transition-all tracking-widest"
                    >
                        Save Configuration
                    </button>
                </div>
            </div>
        </div>
      )}

      {/* Header */}
      <header className="flex flex-col md:flex-row justify-between items-center mb-8 border-b-2 border-green-600 pb-4">
        <div className="flex items-center gap-4 mb-4 md:mb-0">
          <div className="w-12 h-12 border-2 border-green-500 rounded-full flex items-center justify-center bg-black glow-box relative">
             <Radio size={24} className={`text-green-500 ${connectionStatus === ConnectionState.CONNECTED ? 'animate-pulse' : ''}`} />
             {connectionStatus === ConnectionState.CONNECTED && (
                <span className="absolute -top-1 -right-1 flex h-3 w-3">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                </span>
             )}
          </div>
          <div>
            <h1 className="text-3xl font-bold tracking-widest text-white glow-text uppercase">HomeGrown Alerts CAD</h1>
            <p className="text-xs text-green-600 font-bold tracking-[0.3em] uppercase">Tactical Command Interface v2.0</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
           <div className="text-right hidden md:block">
              <div className="text-xs text-green-800 uppercase font-bold">System Status</div>
              <div className={`text-sm font-bold ${connectionStatus === ConnectionState.CONNECTED ? 'text-green-400' : 'text-gray-500'}`}>
                {connectionStatus}
              </div>
           </div>
           
           <button 
             onClick={() => setIsConfigOpen(true)}
             disabled={connectionStatus === ConnectionState.CONNECTED}
             className={`
               p-2 border-2 border-green-500/50 text-green-500 hover:bg-green-500/20 hover:border-green-500 transition-all
               ${connectionStatus === ConnectionState.CONNECTED ? 'opacity-50 cursor-not-allowed' : ''}
             `}
             title="Configure Keywords"
           >
              <Settings size={20} />
           </button>

           <button 
             onClick={toggleDbMonitor}
             className={`
               border-2 px-6 py-2 font-bold uppercase tracking-widest flex items-center gap-2 transition-all
               ${connectionStatus === ConnectionState.CONNECTED 
                 ? 'border-red-500 text-red-500 hover:bg-red-500/20 shadow-[0_0_10px_#ff0000]' 
                 : 'border-green-500 text-green-500 hover:bg-green-500/20 shadow-[0_0_10px_#00ff00]'}
             `}
           >
             {connectionStatus === ConnectionState.CONNECTED ? <DatabaseZap size={18} /> : <Database size={18} />}
             {connectionStatus === ConnectionState.CONNECTED ? 'Stop Monitor' : 'Start Monitor'}
           </button>
        </div>
      </header>

      {/* Ticker */}
      <TacticalTicker incidents={incidents} />

      {/* Input Section */}
      <LogUploader onProcess={handleTextProcess} isProcessing={isProcessingText} />

      {/* Main Grid Layout */}
      <main className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        
        {/* Left Column: Stats Grid (Takes 3/4 space on large screens) */}
        <section className="lg:col-span-3">
          <div className="flex items-center gap-2 mb-4">
            <List className="text-green-500" />
            <h2 className="text-lg font-bold text-white uppercase tracking-wider border-b border-green-500/30 flex-grow">
              Active Sectors (Counties)
            </h2>
          </div>

          {countyStats.length === 0 ? (
            <div className="h-64 border border-dashed border-green-800 flex items-center justify-center text-green-800 uppercase tracking-widest">
              No Data Available - Waiting for Input
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {countyStats.map(stat => (
                <CountyCard 
                  key={stat.name} 
                  stats={stat} 
                  latestIncident={incidents.find(i => i.county.trim() === stat.name)} 
                />
              ))}
            </div>
          )}
        </section>

        {/* Right Column: Recent Log Feed */}
        <section className="lg:col-span-1 border-l border-green-900 pl-0 lg:pl-6">
          <div className="flex items-center gap-2 mb-4">
            <AlertTriangle className="text-green-500" />
            <h2 className="text-lg font-bold text-white uppercase tracking-wider border-b border-green-500/30 flex-grow">
              Incident Log
            </h2>
          </div>

          <div className="h-[600px] overflow-y-auto pr-2 space-y-3 custom-scrollbar">
            {incidents.length === 0 && (
               <div className="text-xs text-green-900 text-center mt-10">Waiting for data stream...</div>
            )}
            {incidents.map((inc) => (
              <div key={inc.id} className="bg-green-900/10 border border-green-800 p-3 text-xs hover:bg-green-900/20 transition-colors">
                <div className="flex justify-between text-green-500 font-bold mb-1">
                  <span>{inc.timestamp}</span>
                  <span className={`uppercase ${inc.county === 'CareFlight' ? 'text-red-400' : 'text-green-400'}`}>
                    {inc.county}
                  </span>
                </div>
                <div className="text-white font-bold mb-1 uppercase tracking-wider">{inc.type}</div>
                <div className="text-green-300 opacity-80">{inc.description}</div>
              </div>
            ))}
          </div>
        </section>

      </main>

      <footer className="fixed bottom-0 left-0 right-0 bg-black border-t border-green-900 p-2 text-center text-[10px] text-green-800 uppercase tracking-[0.5em] z-50">
        System Active // Monitoring Frequencies // Secure Connection
      </footer>
    </div>
  );
};

export default App;