'use client';

import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
import { cn } from '@/lib/helper';

export interface TagInputProps {
  label?: string;
  bottomLabel?: string;
  name: string;
  value?: string;
  placeholder?: string;
  className?: {
    wrapper?: string;
    label?: string;
    inputWrapper?: string;
    input?: string;
  };
  isError?: boolean;
  isValid?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  required?: boolean;
  isLoading?: boolean;
  errorMessage?: string;
  onChange?: (value: string) => void;
}

const TagInput: React.FC<TagInputProps> = ({
  label,
  bottomLabel,
  name,
  value = '',
  placeholder,
  className,
  isError,
  isValid,
  errorMessage,
  disabled = false,
  readOnly = false,
  required = false,
  onChange,
}) => {
  const [tags, setTags] = useState<string[]>(value ? value.split(',') : []);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    if (value !== undefined && value !== tags.join(',')) {
      setTags(value ? value.split(',') : []);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      const newTag = inputValue.trim();
      if (newTag && !tags.includes(newTag)) {
        const updatedTags = [...tags, newTag];
        setTags(updatedTags);
        onChange?.(updatedTags.join(','));
      }
      setInputValue('');
    }
  };

  const handleRemoveTag = (tagToRemove: string) => {
    const updatedTags = tags.filter((t) => t !== tagToRemove);
    setTags(updatedTags);
    onChange?.(updatedTags.join(','));
  };

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <div
      className={cn(
        'w-full flex flex-col gap-2 text-start',
        className?.wrapper
      )}
    >
      {/* Label */}
      {label && (
        <label
          htmlFor={name}
          className={cn(
            'w-full text-sm font-normal leading-5',
            { 'text-error': isError },
            className?.label
          )}
        >
          {label}
          {required && (
            <>
              {' '}
              <span className='tooltip tooltip-error' data-tip='required'>
                <span className='text-error'> *</span>
              </span>
            </>
          )}
        </label>
      )}

      {/* Input wrapper */}
      <div
        className={cn(
          'flex flex-wrap items-start gap-2 border border-gray-400 rounded-md p-2 focus-within:ring-2 focus-within:ring-blue-500 min-h-[42px] transition-all',
          {
            'border-error': isError,
            'border-success!': isValid,
            'opacity-70 cursor-not-allowed': disabled,
          },
          className?.inputWrapper
        )}
        onClick={() => {
          // Fokuskan input saat area diklik
          const inputEl = document.getElementById(name);
          inputEl?.focus();
        }}
      >
        {tags.map((tag) => (
          <div
            key={tag}
            className={cn(
              'badge badge-primary gap-1 px-3 py-3 text-white flex items-center'
            )}
          >
            <span>{tag}</span>
            {!readOnly && (
              <button
                type='button'
                onClick={() => handleRemoveTag(tag)}
                className='ml-1 text-white hover:text-red-200 focus:outline-none'
              >
                ✕
              </button>
            )}
          </div>
        ))}

        {!readOnly && (
          <input
            type='text'
            id={name}
            name={name}
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            disabled={disabled}
            className={cn(
              'flex-1 min-w-[120px] border-none outline-none p-1 size-min',
              className?.input
            )}
          />
        )}
      </div>

      {/* Bottom label or error message */}
      {!isError && bottomLabel && (
        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
      )}
      {isError && (
        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
      )}
    </div>
  );
};

export default TagInput;
