"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 }, // CORRECTED: id should match store ViewType 'history' not 'uploads'
    ];

    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 */}
                <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>
    );
}