import { X, Home, Star, Search, Briefcase, HandHeart, GraduationCap, School, User, Building, Hammer, House, Lightbulb, Users, Box, DollarSign, CreditCard, Car, Heart, Calendar, FileText, HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

interface SidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

const fundingCategories = [
  { icon: Star, label: "New Applications", color: "text-yellow-600" },
  { icon: Search, label: "Search" },
  { icon: Briefcase, label: "Business" },
  { icon: HandHeart, label: "Community Assistance" },
  { icon: GraduationCap, label: "Education - Students" },
  { icon: School, label: "EDU - Schools", indent: true },
  { icon: User, label: "EDU - Teachers", indent: true },
  { icon: Building, label: "Home Buyers" },
  { icon: Hammer, label: "Home Repairs" },
  { icon: House, label: "Housing" },
  { icon: Lightbulb, label: "Inventions" },
  { icon: Users, label: "Minorities / Demographic" },
  { icon: Box, label: "Misc" },
  { icon: DollarSign, label: "Non-Profit" },
  { icon: CreditCard, label: "Personal Assistance" },
];

const applicationTools = [
  { icon: FileText, label: "Application Vault" },
  { icon: Calendar, label: "Deadline Calendar" },
  { icon: FileText, label: "App Organizer" },
  { icon: Heart, label: "Favorites", badge: "12" },
  { icon: Search, label: "Alerts" },
];

export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
  return (
    <>
      {/* Mobile Overlay */}
      {isOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={onClose} />
      )}
      
      {/* Sidebar */}
      <aside className={cn(
        "fixed left-0 top-16 h-[calc(100vh-4rem)] w-80 bg-card border-r border-border z-50 transition-transform duration-300",
        "lg:translate-x-0 lg:z-30",
        isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
      )}>
        <div className="flex items-center justify-between p-4 border-b border-border lg:hidden">
          <h2 className="font-semibold">Navigation</h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>
        
        <ScrollArea className="h-full">
          <div className="p-4 space-y-6">
            {/* Home */}
            <div>
              <Button variant="ghost" className="w-full justify-start gap-3 mb-4">
                <Home className="h-5 w-5" />
                Home
              </Button>
            </div>

            {/* Funding Categories */}
            <div>
              <div className="bg-primary text-primary-foreground p-3 rounded-lg mb-3">
                <h3 className="font-semibold text-center">Funding Categories</h3>
              </div>
              
              <div className="space-y-1">
                {fundingCategories.map((category, index) => (
                  <Button
                    key={index}
                    variant="ghost"
                    className={cn(
                      "w-full justify-start gap-3 h-auto py-2",
                      category.indent && "ml-6"
                    )}
                  >
                    <category.icon className={cn("h-4 w-4", category.color)} />
                    <span className="text-sm">{category.label}</span>
                  </Button>
                ))}
              </div>
            </div>

            {/* Application Assistance */}
            <div>
              <div className="bg-primary text-primary-foreground p-3 rounded-lg mb-3">
                <h3 className="font-semibold text-center">Application Assistance</h3>
              </div>
              
              <div className="space-y-1">
                {applicationTools.map((tool, index) => (
                  <Button
                    key={index}
                    variant="ghost"
                    className="w-full justify-start gap-3 h-auto py-2 relative"
                  >
                    <tool.icon className="h-4 w-4" />
                    <span className="text-sm">{tool.label}</span>
                    {tool.badge && (
                      <span className="absolute right-2 bg-yellow-400 text-primary text-xs px-2 py-0.5 rounded-full">
                        {tool.badge}
                      </span>
                    )}
                  </Button>
                ))}
              </div>
            </div>

            {/* Grant Expert */}
            <div>
              <div className="bg-primary text-primary-foreground p-3 rounded-lg mb-3">
                <h3 className="font-semibold text-center">Grant Expert</h3>
              </div>
              
              <div className="space-y-1">
                <Button variant="ghost" className="w-full justify-start gap-3 h-auto py-2">
                  <DollarSign className="h-4 w-4" />
                  <span className="text-sm">Professional Grant Services</span>
                </Button>
                <Button variant="ghost" className="w-full justify-start gap-3 h-auto py-2">
                  <Users className="h-4 w-4" />
                  <span className="text-sm">Tele-Seminars</span>
                </Button>
                <Button variant="ghost" className="w-full justify-start gap-3 h-auto py-2">
                  <HelpCircle className="h-4 w-4" />
                  <span className="text-sm">Ask a Question</span>
                </Button>
              </div>
            </div>
          </div>
        </ScrollArea>
      </aside>
    </>
  );
};