import React from 'react';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { Activity, BookOpen, Rocket, Terminal, Code2, Globe, Wifi, Settings, ExternalLink } from 'lucide-react';
import { ThemeToggle } from '@/components/ThemeToggle';
import { Button } from '@/components/ui/button';

const navigation = [
  {
    title: 'Getting Started',
    items: [
      { title: 'Introduction', href: '/docs', icon: BookOpen },
      { title: 'Quick Start', href: '/docs/quick-start', icon: Rocket },
    ]
  },
  {
    title: 'Installation',
    items: [
      { title: 'CLI', href: '/docs/cli', icon: Terminal },
      { title: 'Configuration', href: '/docs/configuration', icon: Settings },
    ]
  },
  {
    title: 'Integration',
    items: [
      { title: 'TypeScript SDK', href: '/docs/sdk', icon: Code2 },
      { title: 'Status Widgets', href: '/docs/widgets', icon: Globe },
    ]
  },
  {
    title: 'Features',
    items: [
      { title: 'Network Detector', href: '/docs/detector', icon: Wifi },
    ]
  },
];

const DocsLayout = () => {
  const location = useLocation();

  return (
    <div className="h-screen flex flex-col bg-background overflow-hidden">
      {/* Header */}
      <header className="shrink-0 z-50 w-full border-b border-border bg-background">
        <div className="flex h-14 items-center px-4 md:px-6">
          <Link to="/" className="flex items-center gap-2 mr-6 group">
            <Activity className="h-5 w-5 text-emerald-500 group-hover:text-emerald-400 transition-colors" />
            <span className="text-base font-semibold tracking-tight text-foreground">uptime.link</span>
          </Link>
          <div className="flex items-center gap-1 text-sm text-muted-foreground">
            <span>/</span>
            <span className="font-medium text-foreground">Documentation</span>
          </div>
          <div className="ml-auto flex items-center gap-3">
            <a
              href="https://community.foss.global"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors hidden md:flex items-center gap-1"
            >
              Community
              <ExternalLink className="h-3 w-3" />
            </a>
            <a
              href="https://code.foss.global/uptime.link/uptime.link"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors hidden md:flex items-center gap-1"
            >
              Source
              <ExternalLink className="h-3 w-3" />
            </a>
            <ThemeToggle />
            <Button size="sm" className="h-8" asChild>
              <a href="https://uptime.link">Dashboard</a>
            </Button>
          </div>
        </div>
      </header>

      {/* Content area with independent scrolling */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar - independent scroll */}
        <aside className="hidden md:flex flex-col w-64 border-r border-border shrink-0 overflow-hidden">
          <div className="flex-1 overflow-y-auto py-6 px-4">
            <nav className="space-y-6">
              {navigation.map((section) => (
                <div key={section.title}>
                  <h4 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2 px-2">
                    {section.title}
                  </h4>
                  <ul className="space-y-1">
                    {section.items.map((item) => {
                      const Icon = item.icon;
                      const isActive = location.pathname === item.href;
                      return (
                        <li key={item.href}>
                          <Link
                            to={item.href}
                            className={cn(
                              "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
                              isActive
                                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-medium"
                                : "text-muted-foreground hover:text-foreground hover:bg-muted"
                            )}
                          >
                            <Icon className="h-4 w-4" />
                            {item.title}
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              ))}
            </nav>

            {/* Community CTA */}
            <div className="mt-8 p-4 rounded-lg border border-border bg-muted/30">
              <h4 className="text-sm font-semibold text-foreground mb-1">Need Help?</h4>
              <p className="text-xs text-muted-foreground mb-3">
                Join our community for support and discussions.
              </p>
              <Button variant="outline" size="sm" className="w-full" asChild>
                <a href="https://community.foss.global">
                  Visit Community
                  <ExternalLink className="ml-2 h-3 w-3" />
                </a>
              </Button>
            </div>
          </div>
        </aside>

        {/* Main content - independent scroll */}
        <main className="flex-1 overflow-y-auto">
          <div className="max-w-4xl mx-auto px-4 md:px-8 py-8 md:py-12">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
};

export default DocsLayout;