"use client";

import React, { useEffect, useMemo, useCallback } from "react";
import { 
  useServerActionForm,
  EntityFormWrapper,
  ServerActionForm,
  FormActions,
  TextField,
  EmailField,
  SelectField,
  TextAreaField
} from "../../dashboard/entity-detail/shared";
import { attributeConfig, attributeSchema } from "../../dashboard/entity-detail/entities/attribute/AttributeConfig";
import { getEntityActions } from "@/lib/action-mappers";
import type { z } from "zod";

type AttributeFormData = z.infer<typeof attributeSchema>;

interface AttributeFormProps {
  initialData?: Partial<AttributeFormData> & { id?: number | string };
  onSave?: () => void;
  onCancel?: () => void;
  onDataChange?: () => void;
}

export function AttributeForm({ 
  initialData, 
  onSave, 
  onCancel,
  onDataChange
}: AttributeFormProps) {
  const entityActions = getEntityActions('attribute');
  
  const getMappedValues = useCallback((data: any) => ({
    name: data?.name || "",
    type: (data?.type as any) || "text",
    required: data?.required || "false",
    is_filterable: data?.is_filterable || data?.isFilterable || "false",
    code: data?.code || "",
    description: data?.description || "",
  }), []);

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

  const { form, isPending, onSubmit, handleSubmit, reset } = useServerActionForm({
    schema: attributeSchema,
    defaultValues: mappedValues,
    serverAction: async (data: AttributeFormData) => {
      // Match the backend action which expects only name string
      if (initialData?.id) {
        return await entityActions.update(initialData.id as number, data.name as any);
      } else {
        return await entityActions.create(data.name as any);
      }
    },
    onSuccess: () => {
      onSave?.();
      onDataChange?.();
    },
    successMessage: initialData?.id ? "Attribut erfolgreich aktualisiert" : "Attribut erfolgreich erstellt",
    errorMessage: "Fehler beim Speichern des Attributs",
  });

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

  const handleDelete = async () => {
    if (!initialData?.id) return;
    
    if (confirm(`Möchten Sie das Attribut "${initialData.name}" wirklich löschen?`)) {
      try {
        await entityActions.delete(initialData.id as number);
        onSave?.();
        onDataChange?.();
      } catch (error) {
        console.error('Delete error:', error);
      }
    }
  };

  const typeOptions = [
    { value: "text", label: "Text" },
    { value: "number", label: "Zahl" },
    { value: "boolean", label: "Ja/Nein" },
    { value: "select", label: "Auswahlliste" },
    { value: "multiselect", label: "Mehrfachauswahl" },
  ];

  return (
    <EntityFormWrapper
      title={initialData?.id ? "Attribut bearbeiten" : "Neues Attribut"}
      description={
        initialData?.id 
          ? "Aktualisieren Sie die Informationen des Attributs."
          : "Erstellen Sie ein neues Attribut."
      }
    >
      <ServerActionForm
        form={form}
        isPending={isPending}
        onSubmit={onSubmit}
        handleSubmit={handleSubmit}
      >
        {attributeConfig.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 gap-4">
              {section.fields.map((fieldKey) => {
                const field = attributeConfig.fields[fieldKey];
                
                if (!field) return null;
                
                switch (field.key) {
                  case 'name':
                    return (
                      <TextField
                        key={field.key}
                        form={form}
                        name="name"
                        label={field.label}
                        placeholder={field.placeholder}
                        required={field.required}
                        description={field.helpText}
                      />
                    );
                    
                  case 'type':
                    return (
                      <SelectField
                        key={field.key}
                        form={form}
                        name="type"
                        label={field.label}
                        placeholder={field.placeholder}
                        required={field.required}
                        description={field.helpText}
                        options={typeOptions}
                      />
                    );
                    
                  case 'description':
                    return (
                      <TextAreaField
                        key={field.key}
                        form={form}
                        name="description"
                        label={field.label}
                        placeholder={field.placeholder}
                        required={field.required}
                        description={field.helpText}
                        rows={3}
                      />
                    );
                    
                  default:
                    return null;
                }
              })}
            </div>
          </div>
        ))}

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