/**
 * BottomNav — Mobile Bottom Navigation
 * Zeigt die 5 wichtigsten Seiten als Icons
 * "Mehr" öffnet das volle Menü
 */

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

interface BottomNavProps {
  currentPath: string;
}

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

export function BottomNav({ currentPath }: BottomNavProps) {
  return (
    <nav
      className="fixed bottom-0 left-0 right-0 flex items-center justify-around"
      style={{
        background: 'var(--atlas-surface)',
        borderTop: '1px solid var(--atlas-border)',
        height: '60px',
        zIndex: 50,
        paddingBottom: 'env(safe-area-inset-bottom)',
      }}
    >
      {primaryNav.map(item => {
        const isActive = item.path === '/'
          ? currentPath === '/'
          : currentPath.startsWith(item.path);
        const Icon = item.icon;

        return (
          <Link key={item.path} href={item.path}>
            <div
              className="flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-lg transition-all"
              style={{
                minWidth: '56px',
                color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
                background: isActive ? 'oklch(0.82 0.18 210 / 0.08)' : 'transparent',
              }}
            >
              <Icon size={20} />
              <span
                style={{
                  fontSize: '0.6rem',
                  fontFamily: 'var(--font-body)',
                  letterSpacing: '0.02em',
                  fontWeight: isActive ? 600 : 400,
                }}
              >
                {item.label}
              </span>
              {isActive && (
                <div
                  className="absolute bottom-0 rounded-full"
                  style={{
                    width: '4px',
                    height: '4px',
                    background: 'var(--atlas-cyan)',
                    boxShadow: '0 0 6px var(--atlas-cyan)',
                  }}
                />
              )}
            </div>
          </Link>
        );
      })}
    </nav>
  );
}
