"use client";

import * as React from "react";
import { TagInput, Tag } from "emblor";
import { cn } from "@/lib/utils";
import { TagIcon } from "lucide-react";

export interface TagsInputProps {
  value: string[];
  onChange: (tags: string[]) => void;
  placeholder?: string;
  suggestions?: string[];
  disabled?: boolean;
  className?: string;
  tagIcon?: boolean;
}

const TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>(
  ({ value = [], onChange, placeholder = "Add tags...", suggestions = [], disabled, className, tagIcon }, ref) => {
    const [tags, setTags] = React.useState<Tag[]>(
      value.map((tag, index) => ({ id: index.toString(), text: tag }))
    );
    const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(null);

    // Convert string array to Tag array when value prop changes
    React.useEffect(() => {
      const newTags = value.map((tag, index) => ({ id: index.toString(), text: tag }));
      setTags(newTags);
    }, [value]);

    const handleTagsChange = React.useCallback((newTags: Tag[]) => {
      onChange(newTags.map(tag => tag.text));
    }, [onChange]);

    return (
      <div ref={ref} className={cn("", className)} data-tag-input>
        {tagIcon && <TagIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4 z-10" />}
        <TagInput
          tags={tags}
          setTags={(newTags) => {
            setTags(newTags);
            if (typeof newTags !== 'function') {
              handleTagsChange(newTags);
            }
          }}
          placeholder={placeholder}
          activeTagIndex={activeTagIndex}
          setActiveTagIndex={setActiveTagIndex}
          disabled={disabled}
          styleClasses={{
            inlineTagsContainer: "flex flex-wrap gap-1 p-1",
            tag: {
              body: "bg-secondary text-secondary-foreground hover:bg-secondary/80 px-2 py-1 rounded-md text-sm flex items-center gap-1 ml-3",
              closeButton: "ml-1 hover:bg-secondary-foreground/20 rounded-full p-0.5"
            },
            input: "flex-1 bg-transparent border-0 outline-none focus:outline-none min-w-[100px] placeholder:text-muted-foreground",
            tagPopover: {
              popoverTrigger: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
              popoverContent: "w-60 p-0 bg-popover text-popover-foreground shadow-md border rounded-md"
            }
          }}
          autocompleteOptions={suggestions.map(suggestion => ({ id: suggestion, text: suggestion }))}
          enableAutocomplete={suggestions.length > 0}
          restrictTagsToAutocompleteOptions={false}
          validateTag={(tag) => tag.length > 0}
          delimiterList={[","]}
          showCount={false}
          placeholderWhenFull="Maximum tags reached"
          sortTags={false}
          usePopoverForTags={false}
          truncate={35}
          minTags={0}
          maxTags={20}
        />
      </div>
    );
  }
);

TagsInput.displayName = "TagsInput";

export { TagsInput }; 