app/frontend/src/components/UserSettings/UserInformation.tsx

import { zodResolver } from "@hookform/resolvers/zod"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { Pencil } from "lucide-react"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { UsersService, type UserUpdateMe } from "@/client"
import { UserAvatar } from "@/components/Common/UserAvatar"
import ChangePassword from "@/components/UserSettings/ChangePassword"
import DeleteConfirmation from "@/components/UserSettings/DeleteConfirmation"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { LoadingButton } from "@/components/ui/loading-button"
import useAuth from "@/hooks/useAuth"
import useCustomToast from "@/hooks/useCustomToast"
import { cn } from "@/lib/utils"
import { handleError } from "@/utils"

const formSchema = z.object({
  full_name: z.string().max(30).optional(),
  email: z.email({ message: "Invalid email address" }),
})

type FormData = z.infer<typeof formSchema>

/** Compact value row; the edit affordance appears on hover, focus or touch. */
const ReadOnlyField = ({
  label,
  value,
  onEdit,
}: {
  label: string
  value: string | undefined
  onEdit: () => void
}) => (
  <FormItem className="group flex flex-row items-center justify-between gap-3">
    <div className="min-w-0">
      <FormLabel className="text-xs text-muted-foreground">{label}</FormLabel>
      <p className={cn("truncate", !value && "text-muted-foreground")}>
        {value || "N/A"}
      </p>
    </div>
    <Button
      type="button"
      variant="ghost"
      size="icon-sm"
      aria-label={`Edit ${label.toLowerCase()}`}
      onClick={onEdit}
      className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100"
    >
      <Pencil className="size-4" />
    </Button>
  </FormItem>
)

const UserInformation = () => {
  const queryClient = useQueryClient()
  const { showSuccessToast, showErrorToast } = useCustomToast()
  const [editMode, setEditMode] = useState(false)
  const { user: currentUser } = useAuth()

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    mode: "onBlur",
    criteriaMode: "all",
    defaultValues: {
      full_name: currentUser?.full_name ?? undefined,
      email: currentUser?.email,
    },
  })

  const toggleEditMode = () => {
    setEditMode(!editMode)
  }

  const mutation = useMutation({
    mutationFn: (data: UserUpdateMe) =>
      UsersService.updateUserMe({ requestBody: data }),
    onSuccess: () => {
      showSuccessToast("User updated successfully")
      toggleEditMode()
    },
    onError: handleError.bind(showErrorToast),
    onSettled: () => {
      queryClient.invalidateQueries()
    },
  })

  const onSubmit = (data: FormData) => {
    const updateData: UserUpdateMe = {}

    // only include fields that have changed
    if (data.full_name !== currentUser?.full_name) {
      updateData.full_name = data.full_name
    }
    if (data.email !== currentUser?.email) {
      updateData.email = data.email
    }

    mutation.mutate(updateData)
  }

  const onCancel = () => {
    form.reset()
    toggleEditMode()
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Your profile details and sign-in</CardDescription>
        <CardAction className="flex flex-col items-end gap-2">
          <UserAvatar size={56} className="rounded-lg" />
          {currentUser?.is_superuser && <Badge>Admin</Badge>}
        </CardAction>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col gap-4"
          >
            <FormField
              control={form.control}
              name="full_name"
              render={({ field }) =>
                editMode ? (
                  <FormItem>
                    <FormLabel>Full name</FormLabel>
                    <FormControl>
                      <Input type="text" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                ) : (
                  <ReadOnlyField
                    label="Full name"
                    value={field.value}
                    onEdit={toggleEditMode}
                  />
                )
              }
            />

            <FormField
              control={form.control}
              name="email"
              render={({ field }) =>
                editMode ? (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input type="email" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                ) : (
                  <ReadOnlyField
                    label="Email"
                    value={field.value}
                    onEdit={toggleEditMode}
                  />
                )
              }
            />

            {editMode && (
              <div className="flex gap-3">
                <LoadingButton
                  type="submit"
                  loading={mutation.isPending}
                  disabled={!form.formState.isDirty}
                >
                  Save
                </LoadingButton>
                <Button
                  type="button"
                  variant="outline"
                  onClick={onCancel}
                  disabled={mutation.isPending}
                >
                  Cancel
                </Button>
              </div>
            )}
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex flex-wrap items-center gap-2 border-t pt-4">
        <ChangePassword />
        {/* A superuser deleting its own account would lock everyone out, so
            that is the one thing this card does not offer them. */}
        {!currentUser?.is_superuser && (
          <div className="ml-auto">
            <DeleteConfirmation />
          </div>
        )}
      </CardFooter>
    </Card>
  )
}

export default UserInformation