"use client";

import { useState, useEffect } from "react";

import { TextInput } from "@/components/ui/TextInput/TextInput";

import type { FormScreenDefinition, DefaultTexts } from "@/lib/funnel/types";
import { TemplateLayout } from "../layouts/TemplateLayout";
import { createTemplateLayoutProps } from "@/lib/funnel/templateHelpers";

interface FormTemplateProps {
  screen: FormScreenDefinition;
  formData: Record<string, string>;
  onFormDataChange: (data: Record<string, string>) => void;
  onContinue: () => void;
  canGoBack: boolean;
  onBack: () => void;
  screenProgress?: { current: number; total: number };
  defaultTexts?: DefaultTexts;
}

export function FormTemplate({
  screen,
  formData,
  onFormDataChange,
  onContinue,
  canGoBack,
  onBack,
  screenProgress,
  defaultTexts,
}: FormTemplateProps) {
  const [localFormData, setLocalFormData] = useState<Record<string, string>>(formData);
  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    setLocalFormData(formData);
  }, [formData]);

  useEffect(() => {
    onFormDataChange(localFormData);
  }, [localFormData, onFormDataChange]);

  const validateField = (fieldId: string, value: string): string | null => {
    const field = screen.fields.find(f => f.id === fieldId);
    if (!field) return null;

    if (field.required && !value.trim()) {
      return screen.validationMessages?.required?.replace('${field}', field.label || field.id) || `${field.label || field.id} is required`;
    }



    return null;
  };

  const handleFieldChange = (fieldId: string, value: string) => {
    setLocalFormData(prev => ({ ...prev, [fieldId]: value }));
    
    if (errors[fieldId]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[fieldId];
        return newErrors;
      });
    }
  };

  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    
    screen.fields.forEach(field => {
      const value = localFormData[field.id] || "";
      const error = validateField(field.id, value);
      if (error) {
        newErrors[field.id] = error;
      }
    });

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleContinue = () => {
    if (validateForm()) {
      onContinue();
    }
  };

  const isFormComplete = screen.fields.every(field => {
    const value = localFormData[field.id] || "";
    if (field.required) {
      return value.trim().length > 0;
    }
    return true;
  });

  const layoutProps = createTemplateLayoutProps(
    screen,
    { canGoBack, onBack },
    screenProgress,
    {
      preset: "left",
      actionButton: {
        // Правильная логика приоритетов для текста кнопки:
        // 1. screen.bottomActionButton.text (настройка экрана)
        // 2. defaultTexts.nextButton (глобальная настройка воронки) 
        // 3. "Next" (хардкод fallback)
        defaultText: screen.bottomActionButton?.text || defaultTexts?.nextButton || "Next",
        disabled: !isFormComplete,
        onClick: handleContinue,
      },
    }
  );

  return (
    <TemplateLayout {...layoutProps}>
      <div className="w-full mt-[22px] space-y-4">
        {screen.fields.map((field) => (
          <div key={field.id}>
            <TextInput
              label={field.label}
              placeholder={field.placeholder}
              type={field.type || "text"}
              value={localFormData[field.id] || ""}
              onChange={(e) => handleFieldChange(field.id, e.target.value)}
              aria-invalid={!!errors[field.id]}
              aria-errormessage={errors[field.id]}
            />
            {errors[field.id] && (
              <p className="text-destructive font-inter font-medium text-xs mt-1">
                {errors[field.id]}
              </p>
            )}
          </div>
        ))}
      </div>
    </TemplateLayout>
  );
}
