import { ReactNode } from "react";
import { Link, useLocation } from "wouter";
import { useAuth } from "@/hooks/useAuth";
import { 
  Card, 
  CardContent 
} from "@/components/ui/card";
import {
  BarChart3,
  BookOpen,
  BookText,
  FileText,
  Users,
  PenSquare,
  Settings,
  LayoutDashboard,
  MessageCircle,
  BookMarked,
  Layers,
  AlertTriangle
} from "lucide-react";

// Since we don't have the Tabs component yet, we'll create a simplified nav menu
// In a full implementation, we would use shadcn Tabs

interface DashboardLayoutProps {
  children: ReactNode;
  title?: string;
}

export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayoutProps) {
  const { user, isLoading, canManageUsers, canManageContent, canReviewContent, canCreateContent } = useAuth();
  const [location] = useLocation();

  // If user doesn't have permissions, show error
  if (!isLoading && !(canCreateContent || canReviewContent || canManageContent || canManageUsers)) {
    return (
      <div className="max-w-[1200px] mx-auto px-4 md:px-6 py-8">
        <Card className="border-red-400 dark:border-red-600">
          <CardContent className="pt-6 flex flex-col items-center">
            <AlertTriangle className="h-12 w-12 text-red-500 mb-4" />
            <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
            <p className="text-muted-foreground mb-4 text-center">
              You don't have permission to access this area. Please contact an administrator if you believe this is an error.
            </p>
            <Link href="/" className="text-primary hover:underline">
              Return to Home
            </Link>
          </CardContent>
        </Card>
      </div>
    );
  }

  // Get dashboard items based on permissions
  const getDashboardNavItems = () => {
    const items = [
      { href: "/dashboard", label: "Overview", icon: <LayoutDashboard className="h-4 w-4 mr-2" /> },
    ];

    if (canCreateContent) {
      items.push(
        { href: "/dashboard/blog", label: "Blog Posts", icon: <FileText className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/works", label: "Literary Works", icon: <BookText className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/collections", label: "Collections", icon: <BookMarked className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/annotations", label: "Annotations", icon: <PenSquare className="h-4 w-4 mr-2" /> }
      );
    }

    if (canReviewContent) {
      items.push(
        { href: "/dashboard/analysis", label: "Analysis Results", icon: <BarChart3 className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/comments", label: "Comments", icon: <MessageCircle className="h-4 w-4 mr-2" /> }
      );
    }

    if (canManageContent) {
      items.push(
        { href: "/dashboard/translations", label: "Translations", icon: <BookOpen className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/authors", label: "Authors", icon: <Users className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/tags", label: "Tags", icon: <Layers className="h-4 w-4 mr-2" /> }
      );
    }

    if (canManageUsers) {
      items.push(
        { href: "/dashboard/users", label: "User Management", icon: <Users className="h-4 w-4 mr-2" /> },
        { href: "/dashboard/settings", label: "Settings", icon: <Settings className="h-4 w-4 mr-2" /> }
      );
    }

    return items;
  };

  const navItems = getDashboardNavItems();

  return (
    <div className="max-w-[1200px] mx-auto px-4 md:px-6 pt-6 pb-16">
      <div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-8">
        {/* Sidebar */}
        <div>
          <div className="sticky top-24">
            <div className="mb-8">
              <h1 className="text-2xl font-bold">Editorial Dashboard</h1>
              {isLoading ? (
                <div className="h-5 w-32 mt-1 bg-gray-200 animate-pulse rounded"></div>
              ) : (
                <p className="text-muted-foreground">
                  Welcome, {user?.displayName || user?.username}
                </p>
              )}
            </div>
            
            <div className="h-[calc(100vh-250px)] overflow-auto pr-4">
              <nav className="flex flex-col space-y-1">
                {navItems.map((item) => {
                  const isActive = location === item.href;
                  return (
                    <Link 
                      key={item.href} 
                      href={item.href}
                      className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
                        isActive 
                          ? "bg-primary/10 text-primary" 
                          : "text-muted-foreground hover:bg-muted hover:text-foreground"
                      }`}
                    >
                      {item.icon}
                      {item.label}
                    </Link>
                  );
                })}
              </nav>
            </div>
          </div>
        </div>

        {/* Main content */}
        <div>
          <div className="pb-4 mb-6 border-b">
            <h2 className="text-xl font-semibold">{title}</h2>
          </div>
          {isLoading ? (
            <div className="space-y-4">
              <div className="h-8 w-full bg-gray-200 animate-pulse rounded"></div>
              <div className="h-64 w-full bg-gray-200 animate-pulse rounded"></div>
            </div>
          ) : (
            children
          )}
        </div>
      </div>
    </div>
  );
}
