import { Eye, EyeOff } from 'lucide-react';

type ChannelTokenFieldProps = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  helpText?: string;
  disabled?: boolean;
  showSecret?: boolean;
  onToggleSecret?: () => void;
  showSecretLabel?: string;
  hideSecretLabel?: string;
  required?: boolean;
};

export default function ChannelTokenField({
  label,
  value,
  onChange,
  placeholder,
  helpText,
  disabled,
  showSecret,
  onToggleSecret,
  showSecretLabel,
  hideSecretLabel,
  required,
}: ChannelTokenFieldProps) {
  const isSecretField = typeof showSecret === 'boolean' && typeof onToggleSecret === 'function';

  return (
    <div className="space-y-3">
      <label className="block text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
        {label}
        {required ? <span className="ml-1 text-[#d14343]">*</span> : null}
      </label>

      <div className="flex items-center gap-3">
        <div className="min-w-0 flex-1">
          <input
            value={value}
            onChange={(event) => onChange(event.target.value)}
            placeholder={placeholder}
            disabled={disabled}
            autoComplete="off"
            type={isSecretField && !showSecret ? 'password' : 'text'}
            className="h-[56px] w-full rounded-[18px] border border-black/10 bg-[#fbf8f1] px-5 text-[15px] text-[#171717] outline-none transition-colors placeholder:text-[#98a2b3] focus:border-[#8ea8ff] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-100 dark:placeholder:text-gray-500"
          />
        </div>

        {isSecretField ? (
          <button
            type="button"
            onClick={onToggleSecret}
            disabled={disabled}
            className="inline-flex h-[56px] w-[56px] shrink-0 items-center justify-center rounded-[18px] border border-black/10 bg-[#fbf8f1] text-[#667085] transition-colors hover:bg-black/5 hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100"
            aria-label={showSecret ? (hideSecretLabel ?? 'Hide secret') : (showSecretLabel ?? 'Show secret')}
          >
            {showSecret ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
          </button>
        ) : null}
      </div>

      {helpText ? (
        <div className="text-[14px] leading-7 text-[#667085] dark:text-gray-400">{helpText}</div>
      ) : null}
    </div>
  );
}