import type { AuthUser } from '@/auth/types';
import { Button } from './ui/button';
import { Separator } from './ui/separator';
import { LogOut, Home, Filter } from 'lucide-react';
import { logout } from '@/auth/authService';
import { clearPasskeyUser } from '@/auth/passkeyService';
import { HealthIndicator } from './HealthIndicator';
import { TaskIndicator } from './TaskIndicator';

interface HeaderProps {
    user: AuthUser;
    activeFilterCount?: number;
    taskID?: string | null;
    isLoading?: boolean;
    onToggleFilters?: () => void;
    showFilterToggle?: boolean;
    onTaskCancelled?: () => void;
}

export function Header({
    user,
    activeFilterCount = 0,
    taskID,
    onToggleFilters,
    showFilterToggle = false,
    onTaskCancelled,
}: HeaderProps) {
    const handleLogout = async () => {
        if (user.provider === 'passkey') {
            clearPasskeyUser();
            window.location.reload();
        } else {
            await logout();
        }
    };

    return (
        <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4">
            {/* Logo / Brand */}
            <div className="flex items-center gap-2">
                <Home className="h-5 w-5 text-primary" />
                <span className="font-semibold text-lg hidden sm:inline">Wrongmove</span>
            </div>

            <Separator orientation="vertical" className="h-6" />

            {/* Health Indicator */}
            <HealthIndicator />

            {/* Task Indicator */}
            <TaskIndicator taskID={taskID ?? null} onTaskCancelled={onTaskCancelled} />

            {/* Filter Toggle (mobile) */}
            {showFilterToggle && (
                <Button
                    variant="outline"
                    size="sm"
                    className="sm:hidden"
                    onClick={onToggleFilters}
                >
                    <Filter className="h-4 w-4" />
                    {activeFilterCount > 0 && (
                        <span className="ml-1 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full">
                            {activeFilterCount}
                        </span>
                    )}
                </Button>
            )}

            {/* Spacer */}
            <div className="flex-1" />

            {/* User Menu */}
            <div className="flex items-center gap-3">
                <span className="text-sm text-muted-foreground hidden md:inline">
                    {user.email}
                </span>
                <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleLogout}
                    className="gap-2"
                >
                    <LogOut className="h-4 w-4" />
                    <span className="hidden sm:inline">Logout</span>
                </Button>
            </div>
        </header>
    );
}