import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLocation,
} from "@remix-run/react";
import { useState, useEffect } from "react";
import styles from "./styles.css?url";
import { PowerWidget } from "./components/PowerWidget";
import { HeaderWidgets } from "./components/HeaderWidgets";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
        <meta name="theme-color" content="#0a0e1a" />
        <meta name="description" content="Dangerous Pi - Proxmark3 Management Interface" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  const location = useLocation();
  const [theme, setTheme] = useState<"auto" | "dark" | "light">("dark");

  // Initialize theme (default to dark, honor system preference if available)
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme") as "auto" | "dark" | "light" | null;

    if (savedTheme) {
      setTheme(savedTheme);
      document.documentElement.setAttribute("data-theme", savedTheme);
    } else {
      // Default to dark for Dangerous Things cyberpunk aesthetic
      setTheme("dark");
      document.documentElement.setAttribute("data-theme", "dark");
    }
  }, []);

  const toggleTheme = () => {
    const themes: Array<"auto" | "dark" | "light"> = ["dark", "auto", "light"];
    const currentIndex = themes.indexOf(theme);
    const nextTheme = themes[(currentIndex + 1) % themes.length];

    setTheme(nextTheme);
    localStorage.setItem("theme", nextTheme);
    document.documentElement.setAttribute("data-theme", nextTheme);
  };

  const navLinks = [
    { to: "/", label: "Dashboard", icon: "◈" },
    { to: "/commands", label: "Commands", icon: "▶" },
    { to: "/settings", label: "Settings", icon: "⚙" },
    { to: "/updates", label: "Updates", icon: "🔄" },
    { to: "/logs", label: "Logs", icon: "≡" },
  ];

  return (
    <>
      <header className="header">
        <div className="header-content">
          <a href="/" className="logo">
            <div className="logo-icon"></div>
            <span>Dangerous Pi</span>
          </a>

          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
            <PowerWidget />
            <button
              onClick={toggleTheme}
              className="btn-secondary"
              style={{ minWidth: "44px", padding: "0.5rem" }}
              aria-label="Toggle theme"
              title={`Current theme: ${theme}`}
            >
              {theme === "dark" ? "◐" : theme === "light" ? "○" : "◑"}
            </button>
          </div>
        </div>
      </header>

      {/* Header Widgets - Notifications from system and plugins */}
      <HeaderWidgets />

      {/* Desktop Navigation - Hidden on mobile */}
      <nav className="nav" style={{ display: "none" }}>
        {navLinks.map((link) => (
          <a
            key={link.to}
            href={link.to}
            className={`nav-link ${location.pathname === link.to ? "active" : ""}`}
          >
            <span style={{ fontSize: "1.25rem" }}>{link.icon}</span>
            <span>{link.label}</span>
          </a>
        ))}
      </nav>

      <main className="main">
        <Outlet />
      </main>

      {/* Mobile Bottom Navigation */}
      <nav className="nav">
        {navLinks.map((link) => (
          <a
            key={link.to}
            href={link.to}
            className={`nav-link ${location.pathname === link.to ? "active" : ""}`}
          >
            <span style={{ fontSize: "1.5rem" }}>{link.icon}</span>
            <span>{link.label}</span>
          </a>
        ))}
      </nav>

      <style>{`
        @media (min-width: 768px) {
          .nav:first-of-type {
            display: flex !important;
            position: static;
            border: none;
            background: transparent;
            padding: 1rem 0;
            max-width: 1280px;
            margin: 0 auto;
            justify-content: center;
          }

          .nav:last-of-type {
            display: none;
          }

          body {
            padding-bottom: 0;
          }
        }
      `}</style>
    </>
  );
}
