'use client';

import { useRouter } from 'next/navigation';
import { Home, Terminal, Shield, Moon, Sun } from 'lucide-react';
import { getProjectName, getAppVersion, isDev, getNodeEnv } from '@/utils/environment';
import { useThemeStore } from '@/store/theme.store';

export function DeveloperNavbar() {
  const router = useRouter();
  const projectName = getProjectName();
  const version = getAppVersion();
  const env = getNodeEnv();
  const { mode, toggle } = useThemeStore();

  const envColorMap: Record<string, string> = {
    development: 'bg-emerald-500/15 text-emerald-500 border-emerald-500/30',
    production: 'bg-red-500/15 text-red-500 border-red-500/30',
    test: 'bg-amber-500/15 text-amber-600 border-amber-500/30',
  };

  const envColor = envColorMap[env] ?? 'bg-slate-500/15 text-slate-500 border-slate-500/30';

  return (
    <nav className="sticky top-0 z-50 border-b border-line bg-surface-overlay backdrop-blur-xl">
      <div className="mx-auto flex max-w-[1600px] items-center justify-between px-4 py-3">
        {/* Left section */}
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-500/15 text-primary-600">
            <Terminal className="h-4 w-4" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-sm font-semibold text-ink">{projectName}</span>
              <span className="rounded bg-surface-raised px-1.5 py-0.5 text-[10px] font-mono text-ink-muted">
                v{version}
              </span>
            </div>
            <p className="text-[10px] text-ink-faint font-mono">
              Developer Testing Portal
            </p>
          </div>
        </div>

{/* Center - Navigation */}
        <div className="hidden md:flex items-center gap-1">
          <button
            onClick={() => router.push('/')}
            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-ink-muted hover:bg-surface-raised hover:text-ink transition-colors"
          >
            <Home className="h-3.5 w-3.5" />
            Home
          </button>
          <span className="text-ink-faint">/</span>
          <span className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-primary-600 bg-primary-500/10">
            <Shield className="h-3.5 w-3.5" />
            Start
          </span>
        </div>

        {/* Right section */}
        <div className="flex items-center gap-2">
          <button
            onClick={toggle}
            aria-label="Toggle theme"
            className="flex h-8 w-8 items-center justify-center rounded-lg border border-line bg-surface text-ink-muted hover:bg-surface-raised hover:text-ink transition-colors"
          >
            {mode === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          </button>
          <span className={`flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[10px] font-mono font-medium ${envColor}`}>
            <span className={`h-1.5 w-1.5 rounded-full ${
              env === 'development' ? 'bg-emerald-400' :
              env === 'production' ? 'bg-red-400' :
              'bg-amber-400'
            }`} />
            {env}
          </span>
          {!isDev() && (
            <span className="rounded-lg bg-red-500/10 border border-red-500/20 px-2 py-1 text-[10px] font-mono text-red-400">
              LOCKED
            </span>
          )}
        </div>
      </div>
    </nav>
  );
}