"use client";

import * as React from "react";
import { useSession } from "next-auth/react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { GeneralSettings } from "@/components/settings/general-settings";
import { ModelsSettings } from "@/components/settings/models-settings";
import { UsersSettings } from "@/components/settings/users-settings";
import { AccountSettings } from "@/components/settings/account-settings";
import { StatsSettings } from "@/components/settings/stats-settings";
import { ToolsSettings } from "@/components/settings/tools-settings";
import { Button } from "@/components/ui/button";
import { ArrowLeft, PanelLeft } from "lucide-react";
import Link from "next/link";
import { useUIStore } from "@/lib/stores/ui-store";
import { ThemeToggle } from "@/components/theme-toggle";

export default function SettingsPage() {
  const { data: session } = useSession();
  const isAdmin = session?.user?.role === "admin";
  const toggleSidebar = useUIStore((s) => s.toggleSidebar);
  const [tab, setTab] = React.useState("general");

  return (
    <div className="flex h-full flex-col">
      <header className="flex h-14 items-center justify-between border-b border-border px-4">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon-sm" onClick={toggleSidebar} aria-label="Toggle sidebar">
            <PanelLeft />
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/chat">
              <ArrowLeft className="mr-1" />
              Back
            </Link>
          </Button>
          <span className="ml-2 font-serif text-lg">Settings</span>
        </div>
        <ThemeToggle />
      </header>

      <div className="scroll-area flex-1 overflow-y-auto">
        <div className="mx-auto w-full max-w-3xl px-6 py-8">
          <Tabs value={tab} onValueChange={setTab}>
            <TabsList>
              <TabsTrigger value="general">General</TabsTrigger>
              <TabsTrigger value="models">Models</TabsTrigger>
              <TabsTrigger value="tools">Tools</TabsTrigger>
              <TabsTrigger value="stats">Stats</TabsTrigger>
              {isAdmin && <TabsTrigger value="users">Users</TabsTrigger>}
              <TabsTrigger value="account">Account</TabsTrigger>
            </TabsList>
            <TabsContent value="general">
              <GeneralSettings />
            </TabsContent>
            <TabsContent value="models">
              <ModelsSettings />
            </TabsContent>
            <TabsContent value="tools">
              <ToolsSettings />
            </TabsContent>
            <TabsContent value="stats">
              <StatsSettings />
            </TabsContent>
            {isAdmin && (
              <TabsContent value="users">
                <UsersSettings />
              </TabsContent>
            )}
            <TabsContent value="account">
              <AccountSettings />
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  );
}