import { Clock, BarChart3, Settings, Sun, Moon } from "lucide-react";
import { Button } from "@/components/atoms/Button";
import { useTheme } from "@/lib/theme";
import { useStore } from "@/lib/store";
import { Link, useLocation } from "wouter";

interface SidebarProps {
  className?: string;
  isMobile?: boolean;
  onNavigate?: () => void;
}

export function Sidebar({ className = "", isMobile = false, onNavigate }: SidebarProps) {
  const { theme, toggleTheme } = useTheme();
  const [location] = useLocation();
  const localSessions = useStore((state) => state.localSessions);

  // Calculate today's stats
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  const todaySessions = localSessions.filter(session => {
    const sessionDate = new Date(session.startedAt);
    sessionDate.setHours(0, 0, 0, 0);
    return sessionDate.getTime() === today.getTime();
  });

  const todayFocusSessions = todaySessions.filter(s => s.type === 'focus');
  const completedToday = todayFocusSessions.filter(s => s.completed);
  const completionRate = todayFocusSessions.length > 0 
    ? Math.round((completedToday.length / todayFocusSessions.length) * 100)
    : 0;

  const navItems = [
    { path: "/", icon: Clock, label: "Timer", testId: "nav-timer" },
    { path: "/history", icon: BarChart3, label: "History", testId: "nav-history" },
    { path: "/settings", icon: Settings, label: "Settings", testId: "nav-settings" },
  ];

  const isActive = (path: string) => {
    if (path === "/" && location === "/") return true;
    if (path !== "/" && location.startsWith(path)) return true;
    return false;
  };

  return (
    <aside className={`w-64 bg-card border-r border-border flex-shrink-0 sidebar-transition ${
      isMobile ? 'sidebar-mobile' : ''
    } ${className}`}>
      <div className="flex flex-col h-full">
        {/* Logo/Brand */}
        <div className="p-6 border-b border-border">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <Clock className="text-primary-foreground text-sm" />
            </div>
            <h1 className="text-xl font-semibold">Pomodorian</h1>
          </div>
        </div>

        {/* Navigation Menu */}
        <nav className="flex-1 p-4 space-y-2">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = isActive(item.path);
            
            return (
              <Link key={item.path} href={item.path}>
                <Button
                  variant={active ? "default" : "ghost"}
                  className={`w-full justify-start space-x-3 ${
                    active 
                      ? 'bg-primary text-primary-foreground' 
                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                  }`}
                  onClick={onNavigate}
                  data-testid={item.testId}
                >
                  <Icon className="w-5 h-5" />
                  <span>{item.label}</span>
                </Button>
              </Link>
            );
          })}
        </nav>

        {/* Theme Toggle & Stats */}
        <div className="p-4 border-t border-border space-y-4">
          {/* Quick Stats */}
          <div className="bg-muted rounded-lg p-3 text-sm">
            <div className="flex justify-between items-center mb-1">
              <span className="text-muted-foreground">Today's Sessions</span>
              <span className="font-medium" data-testid="stat-today-sessions">
                {todayFocusSessions.length}
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-muted-foreground">Completion Rate</span>
              <span className="font-medium text-chart-2" data-testid="stat-today-completion">
                {completionRate}%
              </span>
            </div>
          </div>

          {/* Theme Toggle */}
          <Button
            variant="ghost"
            className="w-full justify-between"
            onClick={toggleTheme}
            data-testid="button-theme-toggle"
          >
            <span className="flex items-center space-x-3">
              {theme === 'dark' ? (
                <Sun className="w-5 h-5" />
              ) : (
                <Moon className="w-5 h-5" />
              )}
              <span>{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
            </span>
            <div className={`w-10 h-6 rounded-full relative transition-colors ${
              theme === 'dark' ? 'bg-primary' : 'bg-secondary'
            }`}>
              <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
                theme === 'dark' ? 'translate-x-5' : 'translate-x-1'
              }`} />
            </div>
          </Button>
        </div>
      </div>
    </aside>
  );
}