import { Routes, Route, Link, useLocation } from "react-router-dom";
import { useState, useEffect } from "react";
import MySQLMySQLMigrator from "./components/MySQLMySQLMigrator";
import PostgreSQLPostgreSQLMigrator from "./components/PostgreSQLPostgreSQLMigrator";
import PostgreSQLS3Migrator from "./components/PostgreSQLS3Migrator";
import S3S3Migrator from "./components/S3S3Migrator";

export default function App() {
  const [darkMode, setDarkMode] = useState(() => {
    const saved = localStorage.getItem('darkMode');
    return saved ? JSON.parse(saved) : true; // Default to dark mode
  });

  const location = useLocation();

  useEffect(() => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
    if (darkMode) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [darkMode]);

  const navItems = [
    { path: "/mysql-mysql", label: "MySQL → MySQL", icon: "🗄️" },
    { path: "/psql-psql", label: "PostgreSQL → PostgreSQL", icon: "🐘" },
    { path: "/psql-s3", label: "PostgreSQL → S3", icon: "☁️" },
    { path: "/s3-s3", label: "S3 → S3", icon: "📦" },
  ];

  return (
    <div className="min-h-screen bg-black dark:bg-black text-gray-900 dark:text-white transition-colors">
      <div className="container mx-auto px-4 py-8 max-w-6xl">
        {/* Header */}
        <header className="bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 mb-8 border border-red-600 glow-red">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-3xl font-bold text-red-600 dark:text-red-500">
                Universal Database Migrator
              </h1>
              <p className="text-gray-400 dark:text-white mt-2">
                Seamlessly migrate your databases across platforms
              </p>
            </div>
            <button
              onClick={() => setDarkMode(!darkMode)}
              className="px-4 py-2 bg-red-600 dark:bg-red-700 text-white rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition-colors shadow-lg"
            >
              {darkMode ? "☀️ Light" : "🌙 Dark"}
            </button>
          </div>
        </header>

        {/* Navigation */}
        <nav className="bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 mb-8 border border-red-600 glow-red">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {navItems.map((item) => (
              <Link
                key={item.path}
                to={item.path}
                className={`block p-4 rounded-lg border-2 transition-all ${
                  location.pathname === item.path
                    ? "border-red-500 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-white"
                    : "border-gray-600 dark:border-gray-700 hover:border-red-300 dark:hover:border-red-600 hover:bg-gray-800 dark:hover:bg-gray-700"
                }`}
              >
                <div className="text-center">
                  <div className="text-3xl mb-2">{item.icon}</div>
                  <div className="text-sm font-medium">{item.label}</div>
                </div>
              </Link>
            ))}
          </div>
        </nav>

        {/* Main Content */}
        <main className="bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 border border-red-600 glow-red">
          <Routes>
            <Route path="/mysql-mysql" element={<MySQLMySQLMigrator />} />
            <Route path="/psql-psql" element={<PostgreSQLPostgreSQLMigrator />} />
            <Route path="/psql-s3" element={<PostgreSQLS3Migrator />} />
            <Route path="/s3-s3" element={<S3S3Migrator />} />
            <Route
              path="/"
              element={
                <div className="text-center py-12">
                  <div className="text-6xl mb-4">🚀</div>
                  <h2 className="text-2xl font-bold mb-4">Welcome to Universal Migrator</h2>
                  <p className="text-gray-600 dark:text-gray-400">
                    Choose a migration type from the navigation above to get started.
                  </p>
                </div>
              }
            />
          </Routes>
        </main>
      </div>
    </div>
  );
}