import { Link, NavLink, useLocation } from 'react-router-dom';
import { useIsMobile } from '@/hooks/use-mobile';
import { 
  Home, 
  ListFilter, 
  Receipt, 
  Target, 
  Calendar, 
  CreditCard,
  MessageSquareText,
  Users,
  Menu,
  X
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

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

const getNavLinkClass = (isActive: boolean) => {
  return cn(
    "group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-secondary hover:text-foreground",
    isActive ? "bg-secondary text-foreground" : "text-muted-foreground"
  );
};

export default function Sidebar({ isOpen, onClose }: SidebarProps) {
  const isMobile = useIsMobile();
  const location = useLocation();

  return (
    <aside className={cn(
      "flex h-full w-64 flex-col border-r bg-background shadow-sm",
      isMobile ? 'fixed left-0 top-0 z-50 w-full transition-all duration-300' : 'relative'
    )}>
      <div className="flex items-center justify-between px-4 py-2">
        <Link to="/" className="flex items-center space-x-2 font-semibold">
          <span>FinDash</span>
        </Link>
        {isMobile && (
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        )}
      </div>
      
      <div className="scrollbar-thin h-full space-y-4 py-4 overflow-y-auto">
        <div className="px-3 py-2">
          <div className="space-y-1">
            <NavLink 
              to="/" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <Home className="mr-2 h-4 w-4" />
              <span>Dashboard</span>
            </NavLink>
            <NavLink 
              to="/transacoes" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <Receipt className="mr-2 h-4 w-4" />
              <span>Transações</span>
            </NavLink>
            <NavLink 
              to="/cartoes" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <CreditCard className="mr-2 h-4 w-4" />
              <span>Cartões de Crédito</span>
            </NavLink>
            <NavLink 
              to="/categorias" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <ListFilter className="mr-2 h-4 w-4" />
              <span>Categorias</span>
            </NavLink>
            <NavLink 
              to="/metas" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <Target className="mr-2 h-4 w-4" />
              <span>Metas</span>
            </NavLink>
            <NavLink 
              to="/calendario" 
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <Calendar className="mr-2 h-4 w-4" />
              <span>Calendário</span>
            </NavLink>
          </div>
        </div>
        
        <div className="px-3 py-2">
          <h2 className="mb-2 px-3 text-sm font-semibold tracking-tight">
            WhatsApp
          </h2>
          <div className="space-y-1">
            <NavLink 
              to="/whatsapp"
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <MessageSquareText className="mr-2 h-4 w-4" />
              <span>Enviar Mensagem</span>
            </NavLink>
            <NavLink 
              to="/gruposwhatsapp"
              className={({ isActive }) => getNavLinkClass(isActive)}
              onClick={isMobile ? onClose : undefined}
            >
              <Users className="mr-2 h-4 w-4" />
              <span>Grupos</span>
            </NavLink>
          </div>
        </div>
      </div>
    </aside>
  );
}