/**
 * Sidebar — Navigation für ATLAS Social Command Center
 * 
 * Sections:
 * - MISSION: War Room, Signale, Drafts, Kalender
 * - CONTENT: Kampagnen, Produkte, Freigaben, Analytics
 * - SYSTEM: Einstellungen
 */

import { Link } from 'wouter';
import {
  LayoutDashboard,
  Zap,
  FileEdit,
  Calendar,
  Megaphone,
  Package,
  CheckSquare,
  BarChart2,
  Settings,
} from 'lucide-react';

const ATLAS_LOGO_URL = '/manus-storage/32486_9677c375.png';

interface NavItem {
  label: string;
  path: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
}

const missionNav: NavItem[] = [
  { label: 'War Room', path: '/', icon: LayoutDashboard },
  { label: 'Signale', path: '/signals', icon: Zap },
  { label: 'Drafts', path: '/drafts', icon: FileEdit },
  { label: 'Kalender', path: '/calendar', icon: Calendar },
];

const contentNav: NavItem[] = [
  { label: 'Kampagnen', path: '/campaigns', icon: Megaphone },
  { label: 'Produkte', path: '/products', icon: Package },
  { label: 'Freigaben', path: '/approvals', icon: CheckSquare },
  { label: 'Analytics', path: '/analytics', icon: BarChart2 },
];

const systemNav: NavItem[] = [
  { label: 'Einstellungen', path: '/settings', icon: Settings },
];

interface SidebarProps {
  currentPath: string;
}

export function Sidebar({ currentPath }: SidebarProps) {
  return (
    <aside
      className="flex flex-col flex-shrink-0 overflow-hidden"
      style={{
        width: '160px',
        background: 'var(--atlas-navy)',
        borderRight: '1px solid var(--atlas-border)',
      }}
    >
      {/* Logo */}
      <div 
        className="flex flex-col items-center px-3 py-3 flex-shrink-0"
        style={{ borderBottom: '1px solid var(--atlas-border)' }}
      >
        <img
          src={ATLAS_LOGO_URL}
          alt="ATLAS OS"
          style={{ width: '48px', height: '48px', objectFit: 'contain' }}
        />
        <div 
          className="text-xs font-semibold mt-1 text-center"
          style={{ 
            fontFamily: 'var(--font-display)',
            color: 'var(--foreground)',
            fontSize: '0.75rem',
            letterSpacing: '0.02em'
          }}
        >
          Atlas Social
        </div>
      </div>
      
      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto atlas-scrollbar py-2">
        {/* Mission Section */}
        <div className="mb-2">
          <div className="atlas-section-header">Mission</div>
          {missionNav.map(item => (
            <NavLink key={item.path} item={item} currentPath={currentPath} />
          ))}
        </div>
        
        <div className="atlas-divider mx-2" />
        
        {/* Content Section */}
        <div className="my-2">
          <div className="atlas-section-header">Content</div>
          {contentNav.map(item => (
            <NavLink key={item.path} item={item} currentPath={currentPath} />
          ))}
        </div>
        
        <div className="atlas-divider mx-2" />
        
        {/* System Section */}
        <div className="mt-2">
          {systemNav.map(item => (
            <NavLink key={item.path} item={item} currentPath={currentPath} />
          ))}
        </div>
      </nav>
      
      {/* ATLAS STATUS */}
      <div 
        className="px-3 py-2 flex-shrink-0"
        style={{ borderTop: '1px solid var(--atlas-border)' }}
      >
        <div style={{ fontSize: '0.6rem', color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '4px' }}>
          ATLAS STATUS
        </div>
        <div className="flex items-center gap-1.5">
          <div className="atlas-status-dot online" />
          <span style={{ fontSize: '0.6875rem', color: 'var(--atlas-green)', fontFamily: 'var(--font-body)' }}>Systems Operational</span>
        </div>
      </div>

      {/* User Footer */}
      <div 
        className="px-3 py-2 flex-shrink-0"
        style={{ borderTop: '1px solid var(--atlas-border)' }}
      >
        <div className="flex items-center gap-2">
          <div 
            className="flex items-center justify-center rounded-full text-xs font-bold flex-shrink-0"
            style={{
              width: '28px',
              height: '28px',
              background: 'oklch(0.82 0.18 210 / 0.15)',
              color: 'var(--atlas-cyan)',
              fontFamily: 'var(--font-display)',
              border: '1px solid oklch(0.82 0.18 210 / 0.2)',
            }}
          >
            T
          </div>
          <div className="min-w-0">
            <div 
              className="text-xs font-medium truncate"
              style={{ color: 'var(--foreground)', fontFamily: 'var(--font-body)' }}
            >
              Torsten Hiss
            </div>
            <div 
              className="truncate"
              style={{ 
                fontSize: '0.6rem', 
                color: 'var(--muted-foreground)',
                fontFamily: 'var(--font-mono)'
              }}
            >
              Enterprise Plan
            </div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function NavLink({ item, currentPath }: { item: NavItem; currentPath: string }) {
  const isActive = item.path === '/' 
    ? currentPath === '/' 
    : currentPath.startsWith(item.path);
  
  const Icon = item.icon;
  
  return (
    <Link href={item.path}>
      <div className={`atlas-nav-item mx-1 ${isActive ? 'active' : ''}`}>
        <Icon size={14} />
        <span>{item.label}</span>
      </div>
    </Link>
  );
}
