"use client"

import Link from "next/link";
import React from 'react';
import {CheckCircle2, CreditCard, LayoutGrid, LogOut, SettingsIcon} from "lucide-react";
import {usePathname} from "next/navigation";

function Header() {
    return (
        <header className="sticky top-0 z-30 border-b border-border/60 bg-background/85 backdrop-blur-md">
            <div className="container mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 md:px-6">
                <div className="flex min-w-0 items-center gap-2 sm:gap-5">
                    <Link
                        href="/dashboard"
                        className="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight">
                        <div
                            className="inline-flex h-7 w-7 items-center justify-center rounded bg-foreground text-[11px] font-bold text-background">
                            S
                        </div>
                        <span className="hidden sm:inline">StoreAI</span>
                    </Link>
                    <span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
                    <NavTabs/>
                </div>

                <div className="flex shrink-0 items-center gap-3">
                    <Link href="/dashboard/billing"
                          className={`inline-flex h-7 items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-medium transition-colors border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100`}>
                        <CheckCircle2 className="h-3 w-3"/>
                        测试
                    </Link>
                    <span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
                    <UserMenu/>
                </div>
            </div>
        </header>
    );
}


/**
 * 导航栏
 */
const NavTabs = () => {
    const pathname = usePathname();
    const tabs = [
        {href: "/dashboard", label: "Dashboard", icon: LayoutGrid},
        {href: "/dashboard/settings", label: "Settings", icon: SettingsIcon},
        {href: "/dashboard/billing", label: "Billing", icon: CreditCard},
    ];
    return (
        <nav className="flex items-center gap-0.5" aria-label="Dashboard navigation">
            {tabs.map(item => {
                const Icon = item.icon;
                const isActive = pathname.startsWith(item.href);

                return (
                    <Link
                        key={item.href}
                        href={item.href}
                        className={`relative inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors sm:px-3 sm:text-sm ${
                            isActive
                                ? "text-foreground"
                                : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
                        }`}>
                        <Icon className="h-3.5 w-3.5"/>
                        <span className="hidden sm:inline">{item.label}</span>
                        {isActive && (
                            <span
                                aria-hidden="true"
                                className="absolute -bottom-3.25 left-2 right-2 h-0.5 rounded-t-full bg-foreground"
                            />
                        )}
                    </Link>
                );
            })}
        </nav>
    );
};


/**
 * 用户信息
 */
const UserMenu = () => {
    return (
        <div className="flex items-center gap-2">
            <div className="hidden max-w-50 truncate text-xs text-muted-foreground md:inline">
                112@qq.com
            </div>
            <div
                className="cursor-pointer inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                title="Sign out">
                <LogOut className="h-3 w-3"/>
                <span className="hidden sm:inline">Sign out</span>
            </div>
        </div>
    );
};


export default Header