import { NavLink } from 'react-router';
import {
  LayoutDashboard,
  AppWindow,
  Search,
  CircleHelp,
} from 'lucide-react';
import { cn } from '@/lib/utils';

function getGreeting(): string {
  const hour = new Date().getHours();
  if (hour < 12) return 'Good Morning';
  if (hour < 18) return 'Good Afternoon';
  return 'Good Evening';
}

interface SidebarProps {
  userName?: string;
  botName?: string;
  backendStatus?: 'healthy' | 'restarting';
  onNavigate?: () => void;
}

export default function Sidebar({ userName, botName = 'Bloby', backendStatus = 'healthy', onNavigate }: SidebarProps) {
  const firstName = userName?.split(/\s+/)[0] || 'Human';
  return (
    <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
      {/* Logo */}
      <div className="flex items-center gap-2.5 mb-8">
        <img src="/morphy.png" alt={botName} className="h-7 w-auto" />
        <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{botName}</span>
      </div>

      {/* Greeting */}
      <div className="mb-10">
        <h1 className="text-4xl font-bold leading-[1.1]">
          {getGreeting()}{firstName ? ',' : ''}
        </h1>
        {firstName && (
          <h2
            className="text-4xl font-bold mt-0.5 tracking-tight leading-[1.08] w-fit"
            style={{
              backgroundImage: 'linear-gradient(to right, #0166FF, #009AFE, #4AEEFF)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}
          >
            {firstName}.
          </h2>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 space-y-0.5">
        <NavItem to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={onNavigate} />
        <NavItem to="/app1" icon={AppWindow} label="App 1" sub="Ask Bloby to create your first app and remove this placeholder" onNavigate={onNavigate} />
        <NavItem to="/research" icon={Search} label="Research" sub="Ask Bloby to research anything for you, maybe even daily" onNavigate={onNavigate} />
        <NavItem to="/whatelse" icon={CircleHelp} label="What Else?" sub="The sky is the limit, just ask and Bloby will do it!" onNavigate={onNavigate} />
      </nav>

      {/* Backend status */}
      <div className="rounded-xl bg-[#282828] px-3.5 py-2.5 flex items-center gap-2">
        <span
          className={`h-2 w-2 rounded-full shrink-0 ${
            backendStatus === 'healthy' ? 'bg-emerald-500' : 'bg-orange-400 animate-pulse'
          }`}
        />
        <span className="text-xs text-muted-foreground">
          Workspace: {backendStatus === 'healthy' ? 'Live' : 'Restarting'}
        </span>
      </div>
    </aside>
  );
}

function NavItem({
  to,
  icon: Icon,
  label,
  sub,
  onNavigate,
}: {
  to: string;
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  sub?: string;
  onNavigate?: () => void;
}) {
  return (
    <NavLink
      to={to}
      end
      onClick={onNavigate}
      className={({ isActive }) =>
        cn(
          'flex items-start gap-3 w-full px-3 py-2.5 rounded-lg text-sm transition-colors',
          isActive
            ? 'bg-sidebar-accent text-foreground font-medium'
            : 'text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50',
        )
      }
    >
      <Icon className="h-[18px] w-[18px] mt-0.5 shrink-0" />
      <div>
        {label}
        {sub && <p className="text-[10px] text-muted-foreground/50 font-normal leading-tight mt-0.5">{sub}</p>}
      </div>
    </NavLink>
  );
}
