'use client';

import { useChatStore } from '@/store/chatStore';
import { useAuthStore } from '@/store/authStore';
import { Search, Moon, Sun, Hash, Users } from 'lucide-react';
import { useRouter } from 'next/navigation';

export function TopBar() {
  const { activeChannel } = useChatStore();
  const { isDarkMode, toggleDarkMode } = useAuthStore();
  const router = useRouter();

  return (
    <div className="h-14 flex items-center justify-between px-4 border-b border-vault-border/30 bg-vault-darker/50 backdrop-blur-xl">
      <div className="flex items-center gap-3">
        {activeChannel ? (
          <>
            <Hash className="w-5 h-5 text-vault-muted" />
            <h2 className="font-semibold text-sm">{activeChannel.name}</h2>
            {activeChannel.description && (
              <>
                <span className="text-vault-muted/30">|</span>
                <span className="text-xs text-vault-muted hidden sm:block">{activeChannel.description}</span>
              </>
            )}
          </>
        ) : (
          <h2 className="font-semibold text-sm">DrevStudio Vault</h2>
        )}
      </div>

      <div className="flex items-center gap-2">
        <button
          onClick={() => router.push('/workspace/search')}
          className="flex items-center gap-2 glass px-3 py-1.5 rounded-lg text-xs text-vault-muted hover:text-vault-text transition-all duration-200"
        >
          <Search className="w-3.5 h-3.5" />
          <span className="hidden sm:inline">Search...</span>
          <kbd className="hidden md:inline text-[10px] text-vault-muted/50 bg-vault-surface px-1.5 py-0.5 rounded">Ctrl+K</kbd>
        </button>

        <button
          onClick={toggleDarkMode}
          className="p-2 rounded-lg text-vault-muted hover:text-vault-text hover:bg-vault-surface/50 transition-all duration-200"
        >
          {isDarkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
        </button>
      </div>
    </div>
  );
}