import { createFileRoute } from "@tanstack/react-router"
import { motion } from "motion/react"

import Appearance from "@/components/UserSettings/Appearance"
import RemoteAccess from "@/components/UserSettings/RemoteAccess"
import UserInformation from "@/components/UserSettings/UserInformation"
import useAuth from "@/hooks/useAuth"
import { listStagger, slideUp } from "@/lib/motion"

export const Route = createFileRoute("/_layout/settings")({
  component: UserSettings,
  head: () => ({
    meta: [
      {
        title: "Settings - Fluksio",
      },
    ],
  }),
})

function UserSettings() {
  const { user: currentUser } = useAuth()

  if (!currentUser) {
    return null
  }

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="font-display text-3xl font-semibold">Settings</h1>
        <p className="max-w-2xl text-sm text-muted-foreground">
          Manage your account settings and preferences
        </p>
      </div>

      {/* Panels rather than tabs, the way the portal does it: there are few
          enough of these to read at once, and hiding four behind a tab bar was
          navigation over three cards. Changing a password and deleting an
          account belong to the account, so they live in that card's footer. */}
      <motion.div
        className="grid items-start gap-6 lg:grid-cols-2"
        variants={listStagger}
        initial="hidden"
        animate="visible"
      >
        <motion.div variants={slideUp}>
          <UserInformation />
        </motion.div>
        <motion.div variants={slideUp}>
          <Appearance />
        </motion.div>
        {/* Whether this whole instance can be reached from outside is not
            a personal preference, so it only exists for an operator. */}
        {currentUser.is_superuser && (
          <motion.div variants={slideUp}>
            <RemoteAccess />
          </motion.div>
        )}
      </motion.div>
    </div>
  )
}