"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { UserPlus } from "lucide-react";
import { Controller, useForm } from "react-hook-form";

import { useDashboardFormSubmit } from "@/app/dashboard/_components/use-dashboard-form-submit";
import { FormPageHeader, FormPanel, FormSaveBar } from "@/app/dashboard/_components/form";
import { FormField } from "@/components/form/form-field";
import { ErrorBanner } from "@/components/shared/error-banner";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { userFormDefaults, userFormSchema, type UserFormValues } from "./schema";

const LIST_HREF = "/dashboard/admins/users";
const CREATE_SUBMIT_HREF = "/dashboard/admins/users/create/submit";
const NO_GROUP_VALUE = "none";

type Props = {
  statuses: Record<string, string>;
  timezones: Record<string, string>;
  groups: Record<string, string>;
  defaultTimezone: string;
  loadErrorMessage?: string | null;
};

export function UserForm({
  statuses,
  timezones,
  groups,
  defaultTimezone,
  loadErrorMessage,
}: Props) {
  const statusEntries = Object.entries(statuses);
  const timezoneEntries = Object.entries(timezones);
  const groupEntries = Object.entries(groups);
  const defaultStatus = statusEntries[0]?.[0] ?? "active";

  const form = useForm<UserFormValues>({
    resolver: zodResolver(userFormSchema),
    defaultValues: userFormDefaults(defaultTimezone, defaultStatus),
  });

  const { isSaving, submit } = useDashboardFormSubmit<UserFormValues>({
    mode: "create",
    createUrl: CREATE_SUBMIT_HREF,
    // Update is not supported from this form; the type requires these but they're unused.
    updateUrl: CREATE_SUBMIT_HREF,
    listHref: LIST_HREF,
    saveFailMessage: "User could not be created.",
    messages: {
      createFail: "User could not be created.",
      createSuccess: "User created",
      updateFail: "User could not be created.",
      updateSuccess: "User created",
    },
  });

  const onSubmit = form.handleSubmit((values) =>
    submit({
      ...values,
      group_id: values.group_id === NO_GROUP_VALUE ? "" : values.group_id,
    }),
  );

  return (
    <form onSubmit={onSubmit} className="pb-4">
      <FormPageHeader
        backHref={LIST_HREF}
        breadcrumb={[
          { label: "Admins & Access", href: "/dashboard/admins/users" },
          { label: "Users", href: LIST_HREF },
          { label: "Create new" },
        ]}
        titleIcon={<UserPlus className="size-5 text-primary" />}
        title="Create user"
        description="Add a new backend operator account."
      />

      <ErrorBanner message={loadErrorMessage} className="mb-4" />

      <FormPanel title="Account details">
        <div className="grid gap-4 sm:grid-cols-2">
          <Controller
            name="first_name"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="First name" htmlFor="first_name" required error={fieldState.error}>
                <Input id="first_name" autoFocus {...field} />
              </FormField>
            )}
          />
          <Controller
            name="last_name"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="Last name" htmlFor="last_name" required error={fieldState.error}>
                <Input id="last_name" {...field} />
              </FormField>
            )}
          />
          <Controller
            name="email"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField
                label="Email"
                htmlFor="email"
                required
                error={fieldState.error}
                className="sm:col-span-2"
              >
                <Input id="email" type="email" {...field} />
              </FormField>
            )}
          />
          <Controller
            name="password"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="Password" htmlFor="password" required error={fieldState.error}>
                <Input id="password" type="password" autoComplete="new-password" {...field} />
              </FormField>
            )}
          />
          <Controller
            name="confirmPassword"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField
                label="Confirm password"
                htmlFor="confirmPassword"
                required
                error={fieldState.error}
              >
                <Input id="confirmPassword" type="password" autoComplete="new-password" {...field} />
              </FormField>
            )}
          />
          <Controller
            name="status"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="Status" htmlFor="status" required error={fieldState.error}>
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger id="status" className="w-full">
                    <SelectValue placeholder="Select status" />
                  </SelectTrigger>
                  <SelectContent>
                    {statusEntries.map(([value, label]) => (
                      <SelectItem key={value} value={value}>
                        {label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormField>
            )}
          />
          <Controller
            name="timezone"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="Timezone" htmlFor="timezone" required error={fieldState.error}>
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger id="timezone" className="w-full">
                    <SelectValue placeholder="Select timezone" />
                  </SelectTrigger>
                  <SelectContent>
                    {timezoneEntries.map(([value, label]) => (
                      <SelectItem key={value} value={value}>
                        {label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormField>
            )}
          />
          <Controller
            name="group_id"
            control={form.control}
            render={({ field, fieldState }) => (
              <FormField label="Group" htmlFor="group_id" error={fieldState.error}>
                <Select
                  value={field.value || NO_GROUP_VALUE}
                  onValueChange={field.onChange}
                >
                  <SelectTrigger id="group_id" className="w-full">
                    <SelectValue placeholder="No group" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={NO_GROUP_VALUE}>No group</SelectItem>
                    {groupEntries.map(([value, label]) => (
                      <SelectItem key={value} value={value}>
                        {label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormField>
            )}
          />
        </div>
      </FormPanel>

      <FormSaveBar
        cancelHref={LIST_HREF}
        isSaving={isSaving}
        saveLabel="Create user"
        onReset={() => form.reset(userFormDefaults(defaultTimezone, defaultStatus))}
      />
    </form>
  );
}