import type { Metadata } from 'next'
import './globals.css'
import ThemeToggle from './components/ThemeToggle'
import VersionDisplay from './components/VersionDisplay'

export const metadata: Metadata = {
  title: 'CHORUS Agent Configuration',
  description: 'Configure your CHORUS distributed agent orchestration platform',
  viewport: 'width=device-width, initial-scale=1',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="dark">
      <body className="min-h-screen bg-chorus-primary transition-colors duration-200">
        <div className="min-h-screen flex flex-col">
          <header className="bg-chorus-primary border-b border-chorus-border-subtle transition-colors duration-200">
            <div className="max-w-7xl mx-auto px-8 py-6">
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-4">
                  <div className="flex-shrink-0">
                    <img src="/assets/chorus-mobius-on-white.png" alt="CHORUS" className="w-10 h-10" />
                  </div>
                  <div>
                    <div className="flex items-center space-x-3">
                      <h1 className="heading-subsection">
                        CHORUS Agent Configuration
                      </h1>
                      <VersionDisplay />
                    </div>
                    <p className="text-small">
                      Distributed Agent Orchestration Platform
                    </p>
                  </div>
                </div>
                <div className="flex items-center space-x-6">
                  <div className="status-online">
                    System Online
                  </div>
                  <ThemeToggle />
                </div>
              </div>
            </div>
          </header>
          
          <main className="flex-1">
            {children}
          </main>
          
          <footer className="bg-chorus-primary border-t border-chorus-border-subtle transition-colors duration-200">
            <div className="max-w-7xl mx-auto px-8 py-6">
              <div className="flex justify-between items-center text-sm text-gray-400">
                <div>
                  © 2025 Chorus Services. All rights reserved.
                </div>
                <div className="flex space-x-6">
                  <a 
                    href="https://docs.chorus.services/agents" 
                    target="_blank"
                    className="btn-text"
                  >
                    Documentation
                  </a>
                  <a 
                    href="https://discord.gg/chorus-services" 
                    target="_blank"
                    className="btn-text"
                  >
                    Support
                  </a>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </body>
    </html>
  )
}
