'use client'

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { CalendarDays, Users, Home, Settings, Building2, CreditCard, LogOut, Receipt } from "lucide-react"

interface MainNavProps extends React.HTMLAttributes<HTMLElement> {
    onNavClick?: () => void
    user?: {
        name: string | null
        email: string | null
    }
}

export function MainNav({
    className,
    onNavClick,
    user,
    ...props
}: MainNavProps) {
    const pathname = usePathname()

    const routes = [
        {
            href: "/dashboard",
            label: "Genel Bakış",
            icon: Home,
            active: pathname === "/dashboard",
        },
        {
            href: "/dashboard/calendar",
            label: "Takvim",
            icon: CalendarDays,
            active: pathname === "/dashboard/calendar",
        },
        {
            href: "/dashboard/reservations",
            label: "Rezervasyonlar",
            icon: CreditCard,
            active: pathname.startsWith("/dashboard/reservations"),
        },
        {
            href: "/dashboard/customers",
            label: "Müşteriler",
            icon: Users,
            active: pathname.startsWith("/dashboard/customers"),
        },
        {
            href: "/dashboard/halls",
            label: "Salonlar",
            icon: Building2,
            active: pathname.startsWith("/dashboard/halls"),
        },
        {
            href: "/dashboard/expenses",
            label: "Giderler",
            icon: Receipt,
            active: pathname.startsWith("/dashboard/expenses"),
        },
        {
            href: "/dashboard/settings",
            label: "Ayarlar",
            icon: Settings,
            active: pathname.startsWith("/dashboard/settings"),
        },
    ]

    const displayName = user?.name || user?.email?.split('@')[0] || 'Kullanıcı'
    const displayEmail = user?.email || ''
    const initial = displayName.charAt(0).toUpperCase()

    return (
        <nav
            className={cn("flex flex-col space-y-2 py-4", className)}
            {...props}
        >
            <div className="px-4 mb-6">
                <h2 className="text-2xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
                    WeddingOS
                </h2>
                <p className="text-xs text-muted-foreground mt-1">Premium Salon Yönetimi</p>
            </div>

            <div className="flex-1 px-2 space-y-1">
                {routes.map((route) => (
                    <Link key={route.href} href={route.href} onClick={onNavClick}>
                        <Button
                            variant={route.active ? "secondary" : "ghost"}
                            className={cn(
                                "w-full justify-start transition-all duration-200",
                                route.active
                                    ? "bg-primary/10 text-primary hover:bg-primary/20 font-semibold shadow-sm"
                                    : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
                            )}
                        >
                            <route.icon className={cn("mr-3 h-5 w-5", route.active ? "text-primary" : "text-muted-foreground")} />
                            {route.label}
                        </Button>
                    </Link>
                ))}
            </div>

            <div className="px-4 mt-auto pt-4 border-t">
                <div className="flex items-center gap-3 mb-4 p-2 rounded-lg bg-muted/50">
                    <div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
                        {initial}
                    </div>
                    <div className="flex-1 overflow-hidden">
                        <p className="text-sm font-medium truncate">{displayName}</p>
                        <p className="text-xs text-muted-foreground truncate">{displayEmail}</p>
                    </div>
                </div>
            </div>
        </nav>
    )
}