import { cookies } from "next/headers"
import { redirect } from "next/navigation"
import { getCurrentUser } from "@/lib/auth"
import { prisma } from "@/lib/prisma"
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
import { Separator } from "@/components/ui/separator"
import { AppSidebar } from "@/components/app-sidebar"
import { SettingsInterface } from "@/components/settings-interface"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ClockTime } from "@/components/clock-time"

export default async function SettingsPage() {
  const cookieStore = await cookies()
  const token = cookieStore.get("auth-token")?.value
  const user = await getCurrentUser(token)

  if (!user) {
    redirect("/login")
  }

  const chats = await prisma.chat.findMany({
    where: { userId: user.id },
    orderBy: { updatedAt: "desc" },
    take: 20,
  })

  return (
    <SidebarProvider>
      {/* @ts-ignore */}
      <AppSidebar user={user} chats={chats} />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1 cursor-pointer" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <div className="flex items-center gap-2">
            <div className="flex size-10 items-center justify-center">
              <Avatar className="h-15 w-15 aspect-square rounded-lg flex items-center justify-center">
                <AvatarImage src="/G7AI_avatar_2_no_bg.png" className="w-full h-full"/>
                <AvatarFallback className="h-10 w-10 bg-primary aspect-square rounded-lg">
                  <span className="font-bold text-primary-foreground">G7</span>
                </AvatarFallback>
              </Avatar>
            </div>
            <span className="font-semibold">Settings</span>
          </div>
          <ClockTime />
        </header>
        <SettingsInterface user={user} />
      </SidebarInset>
    </SidebarProvider>
  )
}