import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import Dashboard from './pages/Dashboard';
import GalacticMap from './pages/GalacticMap';
import SpeciesArchive from './pages/SpeciesArchive';
import CommsCenter from './pages/CommsCenter';
import { getDb } from './lib/db';

const App = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isDbReady, setIsDbReady] = useState(false);

  // Initialize DB Tables for 'lived-in' feel
  useEffect(() => {
    const initDb = async () => {
      try {
        const db = await getDb();
        await db.query(`
          CREATE TABLE IF NOT EXISTS transmissions (
            id SERIAL PRIMARY KEY,
            sender TEXT,
            message TEXT,
            timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
          )
        `);
        // Seed initial data if empty
        const count = await db.query('SELECT COUNT(*) FROM transmissions');
        if (parseInt(count.rows[0].count) === 0) {
          await db.query("INSERT INTO transmissions (sender, message) VALUES ('Zog from Nebula 9', 'The soup at Sector 7 is too spicy.')");
          await db.query("INSERT INTO transmissions (sender, message) VALUES ('Xylar the Watcher', 'Humanity has discovered flavored water. Fascinating.')");
          await db.query("INSERT INTO transmissions (sender, message) VALUES ('Gleep Glop', 'Selling slightly used warp core. No refunds.')");
        }
        setIsDbReady(true);
      } catch (err) {
        console.error("DB Init Error:", err);
      }
    };
    initDb();
  }, []);

  const renderContent = () => {
    switch (activeTab) {
      case 'dashboard': return <Dashboard />;
      case 'map': return <GalacticMap />;
      case 'species': return <SpeciesArchive />;
      case 'comms': return <CommsCenter isDbReady={isDbReady} />;
      default: return <Dashboard />;
    }
  };

  return (
    <div className="min-h-screen bg-[#1a0b2e] text-[#e0e0e0] font-mono overflow-x-hidden selection:bg-[#ff00ff] selection:text-white">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;700;800&display=swap');
        
        body {
          font-family: 'Space Mono', monospace;
        }
        
        h1, h2, h3, h4 {
          font-family: 'Syne', sans-serif;
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #1a0b2e; }
        ::-webkit-scrollbar-thumb { 
          background: linear-gradient(180deg, #ff00ff, #00ffff); 
          border-radius: 5px; 
          border: 2px solid #1a0b2e;
        }
        ::-webkit-scrollbar-thumb:hover { background: #d946ef; }

        /* Psychedelic Background Animation */
        .psychedelic-bg {
          background: radial-gradient(circle at 50% 50%, rgba(76, 29, 149, 0.4), rgba(15, 23, 42, 0));
          animation: pulse-glow 8s infinite alternate;
        }
        @keyframes pulse-glow {
          0% { transform: scale(1); opacity: 0.5; }
          100% { transform: scale(1.2); opacity: 0.8; }
        }

        .trippy-border {
          border: 2px solid transparent;
          background-image: linear-gradient(#1a0b2e, #1a0b2e), linear-gradient(to right, #ff00ff, #00ffff, #ffff00);
          background-origin: border-box;
          background-clip: content-box, border-box;
        }
      `}</style>

      <div className="fixed inset-0 pointer-events-none psychedelic-bg z-0"></div>
      
      <div className="relative z-10 flex flex-col md:flex-row min-h-screen">
        <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
        <main className="flex-1 p-4 md:p-8 overflow-y-auto max-h-screen">
          <div className="max-w-7xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
             {renderContent()}
          </div>
        </main>
      </div>
    </div>
  );
};

export default App;