"use client";

import React, { useEffect, useMemo, useCallback } from "react";
import {
  EntityFormWrapper,
  ServerActionForm,
  FormActions,
  TextField,
  EmailField,
  SelectField,
  useServerActionForm,
} from "../../dashboard/entity-detail/shared";
import {
  userConfig,
  userSchema,
} from "../../dashboard/entity-detail/entities/user/UserConfig";
import { useAction } from "@/hooks/useAction";
import { createUser, updateUser, deleteUser } from "@/actions/user";
import type { z } from "zod";
import { toast } from "sonner";

type UserFormData = z.infer<typeof userSchema>;

interface UserFormProps {
  initialData?: Partial<UserFormData> & { id?: string };
  onSave?: () => void;
  onCancel?: () => void;
  onDataChange?: () => void;
}

export function UserForm({
  initialData,
  onSave,
  onCancel,
  onDataChange,
}: UserFormProps) {
  const { execute: executeDelete, isLoading: isDeleting } =
    useAction(deleteUser);

  const getMappedValues = useCallback(
    (data: any) => ({
      firstName: data?.firstName || data?.firstname || "",
      lastName: data?.lastName || data?.lastname || "",
      email: data?.email || "",
      role: data?.role || "",
      is_active: (data?.isActive ?? data?.is_active ?? true).toString() as
        | "true"
        | "false",
      password: "",
    }),
    [],
  );

  const mappedValues = useMemo(
    () => getMappedValues(initialData),
    [initialData, getMappedValues],
  );

  const { form, onSubmit, isPending, handleSubmit, reset } =
    useServerActionForm({
      schema: userSchema,
      defaultValues: mappedValues,
      serverAction: async (data) => {
        const actionData = {
          firstname: data.firstName,
          lastname: data.lastName,
          email: data.email,
          role: data.role as any,
        };

        if (initialData?.id) {
          return await updateUser({ id: initialData.id, data: actionData });
        } else {
          return await createUser({
            ...actionData,
            password: data.password || "temporary-password-change-me",
          });
        }
      },
      onSuccess: () => {
        toast.success(
          initialData?.id ? "Benutzer aktualisiert" : "Benutzer erstellt",
        );
        onSave?.();
        onDataChange?.();
      },
    });

  // Sync form with initialData when it changes
  useEffect(() => {
    reset(mappedValues);
  }, [mappedValues, reset]);

  const handleDelete = async () => {
    if (!initialData?.id) return;

    if (
      confirm(
        `Möchten Sie den Benutzer "${(initialData as any).firstName || (initialData as any).firstname || ""}" wirklich löschen?`,
      )
    ) {
      const result = await executeDelete({ id: initialData.id });
      if (result?.success) {
        toast.success("Benutzer gelöscht");
        onSave?.();
        onDataChange?.();
      }
    }
  };

  return (
    <EntityFormWrapper
      title={initialData?.id ? "Benutzer bearbeiten" : "Neuer Benutzer"}
      description={
        initialData?.id
          ? "Aktualisieren Sie die Informationen des Benutzers."
          : "Erstellen Sie einen neuen Benutzer."
      }
    >
      <ServerActionForm
        form={form}
        isPending={isPending || isDeleting}
        onSubmit={onSubmit}
        handleSubmit={handleSubmit}
      >
        {userConfig.formSections?.map((section, sectionIndex) => (
          <div key={sectionIndex} className="space-y-4">
            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
              {section.title}
            </h3>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {section.fields.map((fieldKey) => {
                const field = userConfig.fields[fieldKey];
                if (!field) return null;

                switch (field.key) {
                  case "firstName":
                  case "lastName":
                  case "password":
                    return (
                      <TextField
                        key={field.key}
                        form={form}
                        name={field.key}
                        label={field.label}
                        placeholder={field.placeholder}
                        required={field.required}
                        type={field.key === "password" ? "password" : "text"}
                      />
                    );
                  case "email":
                    return (
                      <EmailField
                        key={field.key}
                        form={form}
                        name="email"
                        label={field.label}
                        placeholder={field.placeholder}
                        required={field.required}
                      />
                    );
                  case "role":
                    return (
                      <SelectField
                        key={field.key}
                        form={form}
                        name="role"
                        label={field.label}
                        options={field.options || []}
                      />
                    );
                  default:
                    return null;
                }
              })}
            </div>
          </div>
        ))}

        <FormActions
          isPending={isPending}
          onCancel={onCancel}
          submitLabel={initialData?.id ? "Aktualisieren" : "Erstellen"}
          showDelete={!!initialData?.id}
          onDelete={handleDelete}
        />
      </ServerActionForm>
    </EntityFormWrapper>
  );
}