"use client";

import { useEffect, useRef } from "react";
import { X } from "lucide-react";
import { cn } from "@/shared/lib/utils";
import type { SubjectTemplate } from "../services/subject-template-service";

interface SubjectTemplateInputProps {
  template: SubjectTemplate;
  fieldValues: Record<string, string>;
  onFieldChange: (fieldId: string, value: string) => void;
  onClear: () => void;
}

export function SubjectTemplateInput({
  template,
  fieldValues,
  onFieldChange,
  onClear,
}: SubjectTemplateInputProps) {
  const firstFieldRef = useRef<HTMLInputElement>(null);

  // Auto-focus first field on mount
  useEffect(() => {
    const timer = setTimeout(() => firstFieldRef.current?.focus(), 50);
    return () => clearTimeout(timer);
  }, []);

  let fieldRendered = 0;

  return (
    <div
      className={cn(
        "flex flex-wrap items-baseline gap-0.5",
        "min-h-9 w-full rounded-md border border-input bg-transparent px-3 py-1.5",
        "text-sm shadow-xs mt-1",
      )}
    >
      {template.tokens.map((token, i) => {
        if (token.type === "static") {
          return (
            <span
              key={`s${i}`}
              className="whitespace-nowrap text-muted-foreground"
            >
              {token.value}
            </span>
          );
        }

        const field = token.field!;
        const isFirst = fieldRendered === 0;
        fieldRendered++;

        return (
          <input
            key={field.id}
            ref={isFirst ? firstFieldRef : undefined}
            value={fieldValues[field.id] ?? ""}
            onChange={(e) => onFieldChange(field.id, e.target.value)}
            placeholder={field.placeholder}
            className={cn(
              "border-b-2 border-dashed border-primary/40 bg-transparent",
              "text-sm font-medium text-foreground",
              "px-1 py-0 outline-none",
              "focus:border-primary focus:border-solid",
              "placeholder:text-muted-foreground/50 placeholder:italic placeholder:text-xs",
              field.width,
            )}
          />
        );
      })}
      <button
        type="button"
        onClick={onClear}
        className="ml-auto shrink-0 text-muted-foreground hover:text-foreground transition-colors"
        title="Renunță la șablon"
      >
        <X className="h-3.5 w-3.5" />
      </button>
    </div>
  );
}