"use client";

import { useState, useCallback, useEffect, useRef, useLayoutEffect } from "react";
import { cn, debounce } from "@/lib/utils";
import { useCanvasStore } from "@/lib/store";
import type { FieldDefinition } from "@/lib/types";

interface CanvasFieldProps {
  canvasId: string;
  field: FieldDefinition;
  className?: string;
  inputClassName?: string;
  hideLabel?: boolean;
  autoResize?: boolean;
}

export function CanvasField({ canvasId, field, className, inputClassName, hideLabel, autoResize }: CanvasFieldProps) {
  const { getCanvas, updateCanvasField } = useCanvasStore();
  const canvasData = getCanvas(canvasId);
  const savedValue = canvasData?.fields[field.id] ?? "";

  const [value, setValue] = useState<string>(
    typeof savedValue === "string" ? savedValue : ""
  );

  // Sync with store when it changes externally (e.g., data loaded from Supabase)
  useEffect(() => {
    const newValue = typeof savedValue === "string" ? savedValue : "";
    setValue(newValue);
  }, [savedValue]);

  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useLayoutEffect(() => {
    if (!autoResize || !textareaRef.current) return;

    // Reset height to auto to allow shrinking
    textareaRef.current.style.height = "auto";
    // Set height to scrollHeight to fit content
    textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
  }, [value, autoResize]);


  // Debounced save to store
  const debouncedSave = useCallback(
    debounce((newValue: string) => {
      updateCanvasField(canvasId, field.id, newValue);
    }, 500),
    [canvasId, field.id, updateCanvasField]
  );

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
    debouncedSave(newValue);
  };

  if (field.type === "textarea") {
    return (
      <div className={cn("col-span-1", className)}>
        {!hideLabel && field.label && (
          <label className="block text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
            {field.label}
            {field.required && <span className="text-red-500 ml-1">*</span>}
          </label>
        )}
        <textarea
          ref={textareaRef}
          value={value}
          onChange={handleChange}
          placeholder={field.placeholder || (field.label ? `Entrez ${field.label.toLowerCase()}...` : "")}
          rows={field.rows || 4}
          maxLength={field.maxLength}
          className={cn(
            "w-full p-4 border border-canvas-border rounded-lg resize-none",
            "text-sm text-gray-800 placeholder:text-gray-400",
            "focus:outline-none focus:ring-2 focus:ring-week2/30 focus:border-week2",
            "transition-all duration-200 hover:border-gray-400",
            autoResize && "overflow-hidden",
            inputClassName
          )}
        />
      </div>
    );
  }

  if (field.type === "list") {
    return (
      <div className={cn("col-span-1", className)}>
        {!hideLabel && field.label && (
          <label className="block text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
            {field.label}
          </label>
        )}
        <textarea
          value={value}
          onChange={handleChange}
          placeholder="• Élément 1&#10;• Élément 2&#10;• Élément 3"
          rows={field.rows || 4}
          className={cn(
            "w-full p-4 border border-canvas-border rounded-lg resize-none",
            "text-sm text-gray-800 placeholder:text-gray-400 font-mono",
            "focus:outline-none focus:ring-2 focus:ring-week2/30 focus:border-week2",
            "transition-all duration-200 hover:border-gray-400",
            inputClassName
          )}
        />
      </div>
    );
  }

  // Default: text input
  return (
    <div className={cn("col-span-1", className)}>
      {!hideLabel && field.label && (
        <label className="block text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
          {field.label}
          {field.required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <input
        type="text"
        value={value}
        onChange={handleChange}
        placeholder={field.placeholder || (field.label ? `Entrez ${field.label.toLowerCase()}...` : "")}
        maxLength={field.maxLength}
        className={cn(
          "w-full p-3 border border-canvas-border rounded-lg",
          "text-sm text-gray-800 placeholder:text-gray-400",
          "focus:outline-none focus:ring-2 focus:ring-week2/30 focus:border-week2",
          "transition-all duration-200 hover:border-gray-400",
          inputClassName
        )}
      />
    </div>
  );
}