"use client";

import Link from "next/link";
import {usePathname} from "next/navigation";
import {Bandage, ChevronRight, FileText, Globe, UtensilsCrossed} from "lucide-react";
import {Button} from "@/components/ui/button";

const settingsMenu = [
    {
        title: "翻译词库",
        icon: Globe,
        href: "/settings/translation",
    },
    {
        title: "导出设置",
        icon: FileText,
        href: "/settings/export",
    },
    {
        title: "大模型设置",
        icon: Bandage,
        href: "/settings/ai",
    },
];

export default function SettingsLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const pathname = usePathname();

    return (
        <div className="min-h-screen bg-background">
            <header className="border-b bg-card">
                <div className="mx-auto max-w-6xl px-4 py-4">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                                <UtensilsCrossed className="h-5 w-5"/>
                            </div>
                            <div>
                                <h1 className="text-xl font-semibold">食谱翻译工具</h1>
                                <p className="text-sm text-muted-foreground">设置</p>
                            </div>
                        </div>
                        <Link href="/">
                            <Button variant="ghost" size="sm">
                                返回首页
                            </Button>
                        </Link>
                    </div>
                </div>
            </header>

            <div className="mx-auto max-w-6xl px-4 py-8">
                <div className="flex gap-8">
                    {/* 左侧菜单 */}
                    <aside className="w-64 shrink-0">
                        <nav className="space-y-1">
                            {settingsMenu.map((item) => {
                                const Icon = item.icon;
                                const isActive = pathname === item.href;
                                return (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
                                            isActive
                                                ? "bg-primary text-primary-foreground"
                                                : "text-muted-foreground hover:bg-muted hover:text-foreground"
                                        }`}
                                    >
                                        <Icon className="h-4 w-4"/>
                                        {item.title}
                                        {isActive && <ChevronRight className="ml-auto h-4 w-4"/>}
                                    </Link>
                                );
                            })}
                        </nav>
                    </aside>

                    {/* 右侧内容 */}
                    <main className="flex-1 rounded-xl border bg-card p-6">
                        {children}
                    </main>
                </div>
            </div>
        </div>
    );
}