"use client";

import { useEffect, useMemo } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Mail, Check } from "lucide-react";
import { cn } from "@/shared/lib/utils";
import { useRepositories } from "@/di/repository-provider";
import { useT } from "@/shared/i18n/client";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/presentation/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import {
  internalUserFormSchema,
  type InternalUserFormValues,
} from "@/shared/schemas/internal-user.schema";
import {
  INTERNAL_ROLE_CODES,
  INTERNAL_STATUS_TO_CODE,
  INTERNAL_USER_STATUSES,
  type InternalUserStatus,
} from "@/shared/constants/internal-users";
import type { InternalUser } from "@/domain/entities/internal-user";

interface InternalUserFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** null = invite mode, otherwise edit mode. */
  user: InternalUser | null;
  /** Default permission count per role code, used for the hint line. */
  roleCounts: Record<string, number>;
  onSuccess: () => void;
}

export default function InternalUserFormDialog({
  open,
  onOpenChange,
  user,
  roleCounts,
  onSuccess,
}: InternalUserFormDialogProps) {
  const t = useT();
  const container = useRepositories();
  const isEditing = !!user;

  const schema = useMemo(() => internalUserFormSchema(t), [t]);
  const form = useForm<InternalUserFormValues>({
    resolver: zodResolver(schema),
    defaultValues: { full_name: "", email: "", role: "support", status: "active" },
  });

  useEffect(() => {
    if (!open) return;
    if (user) {
      form.reset({
        full_name: user.full_name,
        email: user.email,
        role: user.role,
        status: user.status,
      });
    } else {
      form.reset({ full_name: "", email: "", role: "support", status: "active" });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, user]);

  const inviteMutation = useApiMutation(
    (payload: { full_name: string; email: string; role: string }) =>
      container.internalUserRepository.invite(payload),
    {
      successMessage: t.internalUsers.toasts.invited,
      onSuccess: () => {
        onOpenChange(false);
        onSuccess();
      },
    }
  );

  const updateMutation = useApiMutation(
    ({ id, payload }: { id: number; payload: { full_name: string; email: string; role: string; status: string } }) =>
      container.internalUserRepository.update(id, payload),
    {
      successMessage: t.internalUsers.toasts.updated,
      onSuccess: () => {
        onOpenChange(false);
        onSuccess();
      },
    }
  );

  const onSubmit = async (values: InternalUserFormValues) => {
    if (isEditing && user) {
      await updateMutation.mutate({
        id: user.id,
        payload: {
          full_name: values.full_name,
          email: values.email,
          role: values.role,
          status: INTERNAL_STATUS_TO_CODE[(values.status ?? user.status) as InternalUserStatus],
        },
      });
    } else {
      await inviteMutation.mutate({
        full_name: values.full_name,
        email: values.email,
        role: values.role,
      });
    }
  };

  const selectedRole = form.watch("role");
  const roleLabel = t.internalUsers.roleLabels[selectedRole] ?? selectedRole;
  const roleCount = roleCounts[selectedRole] ?? 0;
  const loading = inviteMutation.loading || updateMutation.loading;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>{isEditing ? t.internalUsers.edit.title : t.internalUsers.invite.title}</DialogTitle>
          <DialogDescription>
            {isEditing ? t.internalUsers.edit.subtitle : t.internalUsers.invite.subtitle}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="full_name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.internalUsers.form.fullName}</FormLabel>
                  <FormControl>
                    <Input {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.internalUsers.form.email}</FormLabel>
                  <FormControl>
                    <Input type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className={cn("grid gap-4", isEditing ? "grid-cols-2" : "grid-cols-1")}>
              <FormField
                control={form.control}
                name="role"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t.internalUsers.form.role}</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="w-full">
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {INTERNAL_ROLE_CODES.map((code) => (
                          <SelectItem key={code} value={code}>
                            {t.internalUsers.roleLabels[code]}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {isEditing && (
                <FormField
                  control={form.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t.internalUsers.form.status}</FormLabel>
                      <Select value={field.value} onValueChange={field.onChange}>
                        <FormControl>
                          <SelectTrigger className="w-full">
                            <SelectValue />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {INTERNAL_USER_STATUSES.map((code) => (
                            <SelectItem key={code} value={code}>
                              {t.internalUsers.statusLabels[code]}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}
            </div>

            <div className="rounded-lg bg-muted/60 px-3.5 py-2.5 text-xs leading-relaxed text-muted-foreground">
              {t.internalUsers.roleHint(roleLabel, roleCount)}
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                {t.common.cancel}
              </Button>
              <Button type="submit" disabled={loading}>
                {loading ? (
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                ) : isEditing ? (
                  <Check className="w-4 h-4 mr-2" />
                ) : (
                  <Mail className="w-4 h-4 mr-2" />
                )}
                {isEditing ? t.internalUsers.edit.submit : t.internalUsers.invite.submit}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}