"use client";

import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
    ArrowRightOnRectangleIcon,
    Bars3Icon,
    SunIcon,
    UserCircleIcon,
} from '@heroicons/react/24/outline';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
import useTheme from '@/hooks/useTheme';
import api from '@/lib/api';

interface HeaderProps {
    setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const Header = ({ setSidebarOpen }: HeaderProps) => {
    const { toggleTheme } = useTheme();
    const router = useRouter();
    const [user, setUser] = useState<{ name?: string, username?: string }>({ name: 'User' });

    useEffect(() => {
        api.get('/auth/me')
            .then((res) => setUser(res.data))
            .catch(() => setUser({ name: 'User' }));
    }, []);

    const handleSignOut = () => {
        api.post('/auth/logout')
            .catch(() => null)
            .finally(() => router.push('/login'));
    };

    return (
        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center justify-between border-b border-base-300 bg-base-100 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
            <div className="flex items-center gap-x-4">
                <button
                    type="button"
                    className="-m-2.5 p-2.5 text-base-content lg:hidden"
                    onClick={() => setSidebarOpen(true)}
                >
                    <span className="sr-only">Open sidebar</span>
                    <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                </button>
                <div className="h-6 w-px bg-base-300 lg:hidden" aria-hidden="true" />
            </div>

            <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
                <div className="relative flex flex-1"></div>
                <div className="flex items-center gap-x-4 lg:gap-x-6">

                    {/* Theme Toggle */}
                    <button
                        type="button"
                        className="-m-2.5 p-2.5 text-base-content hover:text-primary"
                        onClick={toggleTheme}
                    >
                        <span className="sr-only">Toggle theme</span>
                        <SunIcon className="h-6 w-6" aria-hidden="true" />
                    </button>

                    <div className="dropdown dropdown-end">
                        <div role="button" tabIndex={0} className="flex items-center gap-x-1 cursor-pointer">
                            <span className="text-sm font-semibold leading-6 text-base-content font-mono">{user.username || user.name}</span>
                            <ChevronDownIcon className="h-5 w-5 text-base-content/50" aria-hidden="true" />
                        </div>
                        <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li>
                                <Link href="/settings" className="flex items-center gap-x-2">
                                    <UserCircleIcon className="h-4 w-4" /> Profile
                                </Link>
                            </li>
                            <li>
                                <button onClick={handleSignOut} className="flex items-center gap-x-2 text-error">
                                    <ArrowRightOnRectangleIcon className="h-4 w-4" /> Logout
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Header;
