import type { Metadata } from "next";
import "./globals.css";
import ThemeToggle from "./components/ThemeToggle";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Oxylab Apps | Premium Software Directory",
  description: "Discover a curated directory of high-performance web applications, browser extensions, and native desktop utilities crafted by Oxylab.",
  keywords: ["oxylab", "apps", "software directory", "chrome extensions", "web tools", "productivity apps"],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                try {
                  var theme = localStorage.getItem('theme');
                  if (!theme) {
                    var match = window.matchMedia('(prefers-color-scheme: dark)');
                    theme = match.matches ? 'dark' : 'light';
                  }
                  document.documentElement.setAttribute('data-theme', theme);
                } catch (e) {}
              })();
            `,
          }}
        />
      </head>
      <body>
        {/* Navigation Bar */}
        <header className="nav-header glass-panel">
          <div className="container nav-container">
            <Link href="/" className="logo-area">
              <div className="logo-icon">O</div>
              <span className="logo-text">Oxy<span className="logo-sub">lab</span></span>
            </Link>
            
            <nav className="nav-links">
              <Link href="/" className="nav-link">Explore</Link>
              <a href="https://github.com/oxylab" target="_blank" rel="noopener noreferrer" className="nav-link">GitHub</a>
              <a href="mailto:support@oxylab.app" className="nav-link">Support</a>
            </nav>
            
            <div className="nav-actions">
              <ThemeToggle />
              <Link href="/admin/login" className="btn-admin">
                Admin Panel
              </Link>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="main-content">
          {children}
        </main>

        {/* Footer */}
        <footer className="footer-area">
          <div className="container footer-container">
            <div className="footer-brand">
              <span className="logo-text">Oxy<span className="logo-sub">lab</span></span>
              <p className="footer-desc">Building elegant digital solutions for developers, designers, and creators.</p>
            </div>
            
            <div className="footer-links-group">
              <div className="footer-col">
                <h4>Products</h4>
                <Link href="/?type=web">Web Apps</Link>
                <Link href="/?type=chrome-extension">Extensions</Link>
                <Link href="/?type=desktop">Desktop Apps</Link>
              </div>
              <div className="footer-col">
                <h4>Company</h4>
                <a href="https://oxylab.app/about">About Us</a>
                <a href="https://oxylab.app/blog">Blog</a>
                <a href="mailto:contact@oxylab.app">Contact</a>
              </div>
            </div>
            
            <div className="footer-bottom">
              <p>&copy; {new Date().getFullYear()} Oxylab. All rights reserved.</p>
              <div className="footer-socials">
                <a href="https://twitter.com/oxylab" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                </a>
                <a href="https://github.com/oxylab" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                </a>
              </div>
            </div>
          </div>
        </footer>

        {/* Global Styles for Navigation and Footer */}
        <style dangerouslySetInnerHTML={{ __html: `
          .nav-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            z-index: 100;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border);
            background: var(--nav-bg);
          }
          
          .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          
          .logo-area {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -0.5px;
          }
          
          .logo-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 18px;
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
          }
          
          .logo-sub {
            color: var(--accent);
          }
          
          .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
          }
          
          .nav-link {
            font-size: 14px;
            font-weight: 500;
            color: var(--secondary);
          }
          
          .nav-link:hover {
            color: var(--accent);
          }
          
          .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
          }
          
          .btn-admin {
            font-size: 13px;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: var(--radius-full);
            background: var(--primary);
            color: var(--background);
            border: 1px solid var(--primary);
            transition: var(--transition);
          }
          
          .btn-admin:hover {
            background: transparent;
            color: var(--primary);
          }
          
          .main-content {
            margin-top: 70px;
            min-height: calc(100vh - 70px - 320px);
            padding-bottom: 64px;
          }
          
          /* Footer Styles */
          .footer-area {
            background: var(--card-bg);
            border-top: 1px solid var(--border);
            padding: 64px 0 32px 0;
            margin-top: auto;
          }
          
          .footer-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 48px;
          }
          
          .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 16px;
          }
          
          .footer-desc {
            font-size: 14px;
            color: var(--muted);
            max-width: 320px;
            line-height: 1.6;
          }
          
          .footer-links-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
          }
          
          .footer-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
          }
          
          .footer-col h4 {
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 4px;
          }
          
          .footer-col a {
            font-size: 14px;
            color: var(--muted);
          }
          
          .footer-col a:hover {
            color: var(--accent);
            padding-left: 2px;
          }
          
          .footer-bottom {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--border);
            padding-top: 32px;
            margin-top: 16px;
            font-size: 13px;
            color: var(--muted);
          }
          
          .footer-socials {
            display: flex;
            align-items: center;
            gap: 16px;
          }
          
          .footer-socials a {
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: var(--radius-full);
            border: 1px solid var(--border);
            transition: var(--transition);
          }
          
          .footer-socials a:hover {
            color: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);
          }

          @media (max-width: 768px) {
            .nav-links {
              display: none;
            }
            .footer-container {
              grid-template-columns: 1fr;
              gap: 32px;
            }
            .footer-links-group {
              grid-template-columns: 1fr 1fr;
            }
            .footer-bottom {
              flex-direction: column;
              gap: 16px;
              text-align: center;
            }
          }
        ` }} />
      </body>
    </html>
  );
}
