"use client";

import * as React from "react";
import Link from "next/link";

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

import { useDashboardFormSubmit } from "@/app/dashboard/_components/use-dashboard-form-submit";
import {
  CUSTOMER_STATUSES,
  PHONE_COUNTRIES,
  TIMEZONES,
} from "@/app/dashboard/customers/_components/customer-form/constants";
import { FormField } from "@/components/form/form-field";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { MIN_PASSWORD_LENGTH } from "@/config/password-policy";

type GroupOption = {
  group_id: number;
  name: string;
};

type UserCreateFormProps = {
  tenant: string;
  groups: GroupOption[];
};

const schema = z
  .object({
    first_name: z.string().trim().min(1, "First name is required"),
    last_name: z.string(),
    email: z.string().trim().email("Enter a valid email address"),
    confirm_email: z.string().trim().email("Confirm the email address"),
    password: z
      .string()
      .min(MIN_PASSWORD_LENGTH, `Password must be at least ${MIN_PASSWORD_LENGTH} characters`),
    confirm_password: z.string().min(1, "Confirm the password"),
    group_id: z.string().min(1, "User group is required"),
    status: z.string().min(1, "Status is required"),
    phone_country: z.string(),
    phone: z.string().trim().min(1, "Phone is required"),
    timezone: z.string().min(1, "Timezone is required"),
  })
  .refine((values) => values.email === values.confirm_email, {
    path: ["confirm_email"],
    message: "Email confirmation does not match",
  })
  .refine((values) => values.password === values.confirm_password, {
    path: ["confirm_password"],
    message: "Password confirmation does not match",
  });

type FormValues = z.infer<typeof schema>;

const defaults: FormValues = {
  first_name: "",
  last_name: "",
  email: "",
  confirm_email: "",
  password: "",
  confirm_password: "",
  group_id: "",
  status: "active",
  phone_country: "AE",
  phone: "",
  timezone: "UTC",
};

function sanitizePhone(value: string) {
  return value.replace(/\D/g, "");
}

export function UserCreateForm({ tenant, groups }: UserCreateFormProps) {
  const listHref = `/customer/${tenant}/admin/users`;
  const [avatarName, setAvatarName] = React.useState("");
  const avatarInput = React.useRef<HTMLInputElement>(null);

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: defaults,
  });

  const { isSaving, submit } = useDashboardFormSubmit<FormValues>({
    mode: "create",
    createUrl: `${listHref}/create/submit`,
    updateUrl: "",
    listHref,
    saveFailMessage: "User could not be created.",
    messages: {
      createFail: "User could not be created.",
      updateFail: "User could not be updated.",
      createSuccess: "User created successfully.",
      updateSuccess: "User updated.",
    },
  });

  const errors = form.formState.errors;

  return (
    <form onSubmit={form.handleSubmit(submit)} className="flex min-h-full flex-col">
      <header className="mb-5 flex flex-wrap items-center justify-between gap-3 border-b pb-4">
        <div>
          <div className="flex items-center gap-2">
            <UserPlus className="size-5 text-primary" />
            <h1 className="text-xl font-semibold tracking-tight">Create User</h1>
          </div>
          <p className="mt-1 text-sm text-muted-foreground">
            Add a sub-user and assign a permission group, status, and contact details.
          </p>
        </div>
        <Button asChild type="button" variant="destructive" size="sm">
          <Link href={listHref}>
            <ArrowLeft />
            Cancel
          </Link>
        </Button>
      </header>

      <div className="space-y-5 pb-24">
        <section className="grid gap-4 rounded-lg border bg-card p-4 md:grid-cols-2">
          <FormField label="First Name" htmlFor="first_name" required error={errors.first_name}>
            <Input id="first_name" className="h-9" {...form.register("first_name")} />
          </FormField>
          <FormField label="Last Name" htmlFor="last_name" error={errors.last_name}>
            <Input id="last_name" className="h-9" {...form.register("last_name")} />
          </FormField>

          <FormField label="Email" htmlFor="email" required error={errors.email}>
            <Input
              id="email"
              type="email"
              className="h-9"
              autoComplete="email"
              {...form.register("email")}
            />
          </FormField>
          <FormField
            label="Confirm Email"
            htmlFor="confirm_email"
            required
            error={errors.confirm_email}
          >
            <Input
              id="confirm_email"
              type="email"
              className="h-9"
              autoComplete="email"
              {...form.register("confirm_email")}
            />
          </FormField>

          <FormField label="Password" htmlFor="password" required error={errors.password}>
            <Input
              id="password"
              type="password"
              className="h-9"
              placeholder="Password"
              autoComplete="new-password"
              {...form.register("password")}
            />
          </FormField>
          <FormField
            label="Confirm Password"
            htmlFor="confirm_password"
            required
            error={errors.confirm_password}
          >
            <Input
              id="confirm_password"
              type="password"
              className="h-9"
              placeholder="Confirm password"
              autoComplete="new-password"
              {...form.register("confirm_password")}
            />
          </FormField>

          <div className="grid gap-4 md:col-span-2 md:grid-cols-3">
            <FormField label="User Group" htmlFor="group_id" required error={errors.group_id}>
              <Controller
                name="group_id"
                control={form.control}
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="group_id" className="h-9 w-full">
                      <SelectValue placeholder="Select group" />
                    </SelectTrigger>
                    <SelectContent>
                      {groups.map((group) => (
                        <SelectItem key={group.group_id} value={String(group.group_id)}>
                          {group.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>

            <FormField label="Status" htmlFor="status" required error={errors.status}>
              <Controller
                name="status"
                control={form.control}
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="status" className="h-9 w-full">
                      <SelectValue placeholder="Select status" />
                    </SelectTrigger>
                    <SelectContent>
                      {CUSTOMER_STATUSES.map((status) => (
                        <SelectItem key={status.value} value={status.value}>
                          {status.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>

            <FormField label="Phone" htmlFor="phone" required error={errors.phone}>
              <Controller
                name="phone"
                control={form.control}
                render={({ field: phoneField }) => (
                  <InputGroup>
                    <InputGroupAddon align="inline-start" className="border-r">
                      <Controller
                        name="phone_country"
                        control={form.control}
                        render={({ field }) => (
                          <Select value={field.value} onValueChange={field.onChange}>
                            <SelectTrigger className="h-7 w-28 border-0 bg-transparent shadow-none">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {PHONE_COUNTRIES.map((country) => (
                                <SelectItem key={country.code} value={country.code}>
                                  {country.flag} {country.dial}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        )}
                      />
                    </InputGroupAddon>
                    <InputGroupInput
                      id="phone"
                      placeholder="50 123 4567"
                      value={phoneField.value}
                      onChange={(event) => phoneField.onChange(sanitizePhone(event.target.value))}
                    />
                  </InputGroup>
                )}
              />
            </FormField>
          </div>

          <FormField
            label="Timezone"
            htmlFor="timezone"
            required
            error={errors.timezone}
            className="md:col-span-2"
          >
            <Controller
              name="timezone"
              control={form.control}
              render={({ field }) => (
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger id="timezone" className="h-9 w-full">
                    <SelectValue placeholder="Select timezone" />
                  </SelectTrigger>
                  <SelectContent>
                    {TIMEZONES.map((timezone) => (
                      <SelectItem key={timezone.value} value={timezone.value}>
                        {timezone.label === "UTC" ? "(GMT-00:00) UTC" : timezone.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            />
          </FormField>

          <FormField label="Avatar" htmlFor="avatar" className="md:col-span-2">
            <input
              ref={avatarInput}
              id="avatar"
              type="file"
              accept=".png,.jpg,.jpeg"
              className="sr-only"
              onChange={(event) => setAvatarName(event.target.files?.[0]?.name ?? "")}
            />
            <div className="flex min-h-16 items-center rounded-md border border-dashed px-3 py-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => avatarInput.current?.click()}
              >
                <Upload />
                {avatarName || "Browse"}
              </Button>
            </div>
          </FormField>
        </section>
      </div>

      <footer className="sticky bottom-0 z-20 mt-auto flex justify-end border-t bg-background/95 px-4 py-3 shadow-[0_-4px_20px_-10px_rgba(0,0,0,0.3)] backdrop-blur">
        <Button type="submit" disabled={isSaving}>
          <Save />
          {isSaving ? "Saving…" : "Save changes"}
        </Button>
      </footer>
    </form>
  );
}