"use client";

import React, { useEffect } from 'react';
import { useStore } from '@/lib/store';
import { Sparkles, LayoutGrid, Clock, Settings, User, Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';
import { useTheme } from '@/components/theme-provider';

export function Navbar() {
    const { currentView, setCurrentView, setSelectionMode } = useStore();
    const { theme, setTheme } = useTheme();

    const [mounted, setMounted] = React.useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    const toggleTheme = () => {
        setTheme(theme === 'dark' ? 'light' : 'dark');
    };

    const navItems = [
        { id: 'gallery', label: 'Create', icon: Sparkles },
        { id: 'library', label: 'Prompt Library', icon: LayoutGrid },
        { id: 'history', label: 'Uploads', icon: Clock },
    ];

    return (
        <>
            <div className="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-border shadow-soft md:hidden">
                {/* Visual Highlight Line */}
                <div className="h-0.5 w-full bg-gradient-to-r from-transparent via-primary/50 to-transparent" />

                <div className="flex items-center justify-between px-6 h-16 max-w-7xl mx-auto">
                    {/* Logo Area */}
                    <div className="flex items-center gap-3">
                        <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                            <Sparkles className="h-6 w-6" />
                        </div>
                        <span className="text-xl font-bold text-foreground tracking-tight">kv-pix</span>
                    </div>

                    {/* Center Navigation (Desktop) */}
                    <div className="hidden md:flex items-center gap-1 bg-muted/20 p-1 rounded-full border border-border/50">
                        {navItems.map((item) => (
                            <button
                                key={item.id}
                                onClick={() => {
                                    setCurrentView(item.id as any);
                                    if (item.id === 'history') setSelectionMode(null);
                                }}
                                className={cn(
                                    "flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all",
                                    currentView === item.id
                                        ? "bg-primary text-primary-foreground shadow-sm"
                                        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                                )}
                            >
                                <item.icon className="h-4 w-4" />
                                <span>{item.label}</span>
                            </button>
                        ))}
                    </div>

                    {/* Right Actions */}
                    <div className="flex items-center gap-2">
                        <button
                            onClick={toggleTheme}
                            className="p-2 text-muted-foreground hover:text-primary transition-colors"
                        >
                            {mounted ? (theme === 'dark' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />) : <div className="h-5 w-5" />}
                        </button>
                        <button
                            onClick={() => setCurrentView('settings')}
                            className={cn(
                                "p-2 transition-colors",
                                currentView === 'settings'
                                    ? "text-primary bg-primary/10 rounded-full"
                                    : "text-muted-foreground hover:text-primary"
                            )}
                        >
                            <Settings className="h-5 w-5" />
                        </button>
                        <div className="h-8 w-px bg-border mx-1" />
                        <button className="flex items-center gap-2 pl-1 pr-4 py-1.5 bg-card/50 hover:bg-secondary/20 border border-border/50 rounded-full transition-all group active:scale-95">
                            <div className="h-7 w-7 rounded-full bg-primary/20 flex items-center justify-center text-primary text-[10px] font-bold ring-2 ring-primary/10 group-hover:ring-primary/20 transition-all">
                                KV
                            </div>
                            <span className="text-xs font-semibold hidden sm:block text-foreground/80 group-hover:text-foreground">Khoa Vo</span>
                        </button>
                    </div>
                </div>
            </div>

        </>
    );
}