import React from 'react';
import { Bell, Settings, User, Plus, Search, Home, FileText, CheckCircle, LogOut } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Badge } from './ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarProvider, SidebarTrigger } from './ui/sidebar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';

interface LayoutProps {
  children: React.ReactNode;
  currentPage?: string;
  onNavigate?: (page: string) => void;
  onNewRequest?: () => void;
}

export function Layout({ children, currentPage = 'dashboard', onNavigate, onNewRequest }: LayoutProps) {
  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: Home },
    { id: 'my-requests', label: 'My Requests', icon: User },
    { id: 'open-requests', label: 'Open Requests', icon: FileText },
    { id: 'closed-requests', label: 'Closed Requests', icon: CheckCircle },
  ];

  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full bg-background">
        <Sidebar className="border-r border-sidebar-border">
          <SidebarHeader className="p-3 lg:p-4 border-b border-sidebar-border">
            <div className="flex items-center gap-2 lg:gap-3">
              <div className="w-8 h-8 lg:w-10 lg:h-10 bg-re-green rounded-lg flex items-center justify-center shrink-0">
                <div className="w-5 h-5 lg:w-6 lg:h-6 bg-re-gold rounded-full"></div>
              </div>
              <div className="min-w-0 flex-1">
                <h2 className="text-sm lg:text-base font-semibold text-sidebar-foreground truncate">Royal Enfield</h2>
                <p className="text-xs lg:text-sm text-sidebar-foreground/70 truncate">Approval Portal</p>
              </div>
            </div>
          </SidebarHeader>
          <SidebarContent className="p-2 lg:p-3">
            <SidebarMenu className="space-y-1 lg:space-y-2">
              {menuItems.map((item) => (
                <SidebarMenuItem key={item.id}>
                  <SidebarMenuButton
                    onClick={() => onNavigate?.(item.id)}
                    isActive={currentPage === item.id}
                    className="w-full justify-start text-sidebar-foreground hover:bg-sidebar-accent transition-colors text-sm lg:text-base"
                  >
                    <item.icon className="w-4 h-4 shrink-0" />
                    <span className="truncate">{item.label}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
            
            {/* Quick Action in Sidebar */}
            <div className="mt-4 lg:mt-6 p-2 lg:p-3 bg-re-green/10 rounded-lg border border-re-green/20">
              <Button
                onClick={onNewRequest}
                className="w-full bg-re-green hover:bg-re-green/90 text-white text-xs lg:text-sm"
                size="sm"
              >
                <Plus className="w-3 h-3 lg:w-4 lg:h-4 mr-1 lg:mr-2" />
                <span className="hidden sm:inline">Raise New Request</span>
                <span className="sm:hidden">New</span>
              </Button>
            </div>
          </SidebarContent>
        </Sidebar>

        <div className="flex-1 flex flex-col min-w-0">
          {/* Header */}
          <header className="h-14 lg:h-16 border-b border-border bg-card flex items-center justify-between px-3 lg:px-6 shrink-0">
            <div className="flex items-center gap-2 lg:gap-4 min-w-0 flex-1">
              <SidebarTrigger />
              <div className="relative max-w-xs lg:max-w-md flex-1 lg:flex-none">
                <Search className="absolute left-2 lg:left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-3 h-3 lg:w-4 lg:h-4" />
                <Input
                  placeholder="Search..."
                  className="pl-8 lg:pl-10 bg-input-background border-border w-full text-sm lg:text-base h-8 lg:h-10"
                />
              </div>
            </div>

            <div className="flex items-center gap-1 lg:gap-4 shrink-0">
              <Button
                onClick={onNewRequest}
                className="bg-re-green hover:bg-re-green/90 text-white gap-1 lg:gap-2 hidden md:flex text-sm lg:text-base"
                size="sm"
              >
                <Plus className="w-3 h-3 lg:w-4 lg:h-4" />
                <span className="hidden lg:inline">New Request</span>
                <span className="lg:hidden">New</span>
              </Button>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="relative shrink-0 h-8 w-8 lg:h-10 lg:w-10">
                    <Bell className="w-4 h-4 lg:w-5 lg:h-5" />
                    <Badge className="absolute -top-1 -right-1 w-4 h-4 lg:w-5 lg:h-5 rounded-full bg-destructive text-destructive-foreground text-xs flex items-center justify-center p-0">
                      3
                    </Badge>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-72 lg:w-80">
                  <div className="p-3 border-b">
                    <h4 className="font-semibold text-sm lg:text-base">Notifications</h4>
                  </div>
                  <div className="p-3 space-y-2">
                    <div className="text-sm">
                      <p className="font-medium">RE-REQ-001 needs approval</p>
                      <p className="text-muted-foreground text-xs">SLA expires in 2 hours</p>
                    </div>
                    <div className="text-sm">
                      <p className="font-medium">New comment on RE-REQ-003</p>
                      <p className="text-muted-foreground text-xs">From John Doe - 5 min ago</p>
                    </div>
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Avatar className="cursor-pointer shrink-0 h-8 w-8 lg:h-10 lg:w-10">
                    <AvatarImage src="" />
                    <AvatarFallback className="bg-re-green text-white text-xs lg:text-sm">JD</AvatarFallback>
                  </Avatar>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>
                    <User className="w-4 h-4 mr-2" />
                    Profile
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Settings className="w-4 h-4 mr-2" />
                    Settings
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <LogOut className="w-4 h-4 mr-2" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </header>

          {/* Main Content */}
          <main className="flex-1 p-3 lg:p-6 overflow-auto min-w-0">
            {children}
          </main>
        </div>
      </div>
    </SidebarProvider>
  );
}