import Link from 'next/link'
import { Shield, Database, ExternalLink, Code2 } from 'lucide-react'
import { SignOutButton } from '@/components/SignOutButton'
import { AppIcon } from './AppIcon'

interface NavbarProps {
  appName?: string
  appId?: string
  iconUrl?: string | null
}

export function Navbar({ appName, appId, iconUrl }: NavbarProps) {
  return (
    <header className="sticky top-0 z-40 border-b border-slate-800/80 bg-[#080B11]/80 backdrop-blur-xl">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
        {/* Brand & Breadcrumbs */}
        <div className="flex items-center gap-4">
          <Link href="/dashboard" className="flex items-center gap-2.5 group">
            <div className="w-8 h-8 bg-gradient-to-tr from-emerald-600 to-emerald-400 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:scale-105 transition-transform">
              <Shield className="w-4 h-4 text-slate-950 stroke-[2.4]" />
            </div>
            <span className="text-white font-bold text-base tracking-tight">ConfigVault</span>
          </Link>

          {appName && (
            <div className="flex items-center gap-2 text-sm">
              <span className="text-slate-600">/</span>
              <Link 
                href="/dashboard"
                className="text-slate-400 hover:text-slate-200 transition-colors text-xs font-medium"
              >
                Uygulamalar
              </Link>
              <span className="text-slate-600">/</span>
              <span className="inline-flex items-center gap-1.5 text-emerald-400 font-semibold text-xs px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20">
                <AppIcon name={appName} iconUrl={iconUrl} size="sm" className="w-4 h-4 rounded text-[10px]" />
                <span>{appName}</span>
              </span>
            </div>
          )}
        </div>

        {/* Right tools & status */}
        <div className="flex items-center gap-3">
          <div className="hidden sm:flex items-center gap-2 px-2.5 py-1 rounded-full bg-slate-900/80 border border-slate-800 text-[11px] text-slate-400">
            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
            <span>PostgreSQL Aktif</span>
          </div>

          <div className="h-4 w-[1px] bg-slate-800 hidden sm:block" />

          <SignOutButton />
        </div>
      </div>
    </header>
  )
}