"use client";

import React from 'react';
import { useStore } from '@/lib/store';
import { Sparkles, LayoutGrid, Clock, Settings, User } from 'lucide-react';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';

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

    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 bg-background/80 backdrop-blur-xl border-b border-border">
                {/* Yellow Accent Line */}
                <div className="h-1 w-full bg-primary" />

                <div className="flex items-center justify-between px-4 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-secondary/50 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-secondary"
                                )}
                            >
                                <item.icon className="h-4 w-4" />
                                <span>{item.label}</span>
                            </button>
                        ))}
                    </div>

                    {/* Right Actions */}
                    <div className="flex items-center gap-2">
                        <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-3 py-1 bg-card hover:bg-secondary border border-border rounded-full transition-colors">
                            <div className="h-7 w-7 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xs font-bold">
                                KV
                            </div>
                            <span className="text-sm font-medium hidden sm:block">Khoa Vo</span>
                        </button>
                    </div>
                </div>
            </div>

            {/* Mobile Bottom Navigation */}
            <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#18181B]/90 backdrop-blur-xl border-t border-white/10 safe-area-bottom">
                <div className="flex items-center justify-around h-16 px-2">
                    {navItems.map((item) => (
                        <button
                            key={item.id}
                            onClick={() => {
                                setCurrentView(item.id as any);
                                if (item.id === 'history') setSelectionMode(null);
                            }}
                            className={cn(
                                "flex flex-col items-center justify-center gap-1 p-2 rounded-xl transition-all w-16",
                                currentView === item.id
                                    ? "text-primary"
                                    : "text-white/40 hover:text-white/80"
                            )}
                        >
                            <div className={cn(
                                "p-1.5 rounded-full transition-all",
                                currentView === item.id ? "bg-primary/10" : "bg-transparent"
                            )}>
                                <item.icon className="h-5 w-5" />
                            </div>
                            <span className="text-[10px] font-medium">{item.label}</span>
                        </button>
                    ))}
                    {/* Settings Item for Mobile */}
                    <button
                        onClick={() => setCurrentView('settings')}
                        className={cn(
                            "flex flex-col items-center justify-center gap-1 p-2 rounded-xl transition-all w-16",
                            currentView === 'settings'
                                ? "text-primary"
                                : "text-white/40 hover:text-white/80"
                        )}
                    >
                        <div className={cn(
                            "p-1.5 rounded-full transition-all",
                            currentView === 'settings' ? "bg-primary/10" : "bg-transparent"
                        )}>
                            <Settings className="h-5 w-5" />
                        </div>
                        <span className="text-[10px] font-medium">Settings</span>
                    </button>
                </div>
            </div>
        </>
    );
}