'use client';

import * as React from 'react';
import { cn } from '@/shared/lib/utils';
import { Button } from '@/features/shared/components/ui/button';
import { useTranslations } from 'next-intl';

/**
 * EN: ChatInput component props interface
 * VI: Interface cho props của component ChatInput
 */
export interface ChatInputProps {
  /**
   * EN: Current input value / VI: Giá trị input hiện tại
   */
  value?: string;
  /**
   * EN: Callback when input value changes / VI: Callback khi giá trị input thay đổi
   */
  onChange?: (value: string) => void;
  /**
   * EN: Callback when send button is clicked or Enter is pressed / VI: Callback khi nút send được click hoặc Enter được nhấn
   */
  onSend?: (message: string) => void;
  /**
   * EN: Callback when attach file button is clicked / VI: Callback khi nút attach file được click
   */
  onAttachFile?: () => void;
  /**
   * EN: Placeholder text / VI: Text placeholder
   */
  placeholder?: string;
  /**
   * EN: Disabled state / VI: Trạng thái vô hiệu hóa
   */
  disabled?: boolean;
  /**
   * EN: Loading state - shows spinner on send button / VI: Trạng thái loading - hiển thị spinner trên nút send
   */
  loading?: boolean;
  /**
   * EN: Maximum height for textarea before scrolling / VI: Chiều cao tối đa cho textarea trước khi scroll
   */
  maxHeight?: number;
  /**
   * EN: Minimum height for textarea / VI: Chiều cao tối thiểu cho textarea
   */
  minHeight?: number;
  /**
   * EN: Additional CSS classes / VI: Các class CSS bổ sung
   */
  className?: string;
}

/**
 * EN: ChatInput component - Textarea input with auto-resize, attach file button, and send button
 * VI: Component ChatInput - Textarea input với auto-resize, nút attach file và nút send
 *
 * Features:
 * - Auto-resize textarea based on content
 * - Keyboard shortcuts: Enter to send, Shift+Enter for new line
 * - Attach file button (optional)
 * - Send button with loading state
 * - Follows design system theme colors
 *
 * Tính năng:
 * - Textarea tự động thay đổi kích thước dựa trên nội dung
 * - Phím tắt: Enter để gửi, Shift+Enter để xuống dòng
 * - Nút attach file (tùy chọn)
 * - Nút send với trạng thái loading
 * - Tuân theo màu sắc của design system
 *
 * @example
 * ```tsx
 * <ChatInput
 *   value={message}
 *   onChange={setMessage}
 *   onSend={handleSend}
 *   onAttachFile={handleAttachFile}
 *   placeholder="Type your message..."
 * />
 * ```
 */
export function ChatInput({
  value: externalValue,
  onChange,
  onSend,
  onAttachFile,
  placeholder,
  disabled = false,
  loading = false,
  maxHeight = 200,
  minHeight = 44,
  className,
}: ChatInputProps) {
  // EN: Translation hook / VI: Hook translation
  const t = useTranslations();
  const defaultPlaceholder = placeholder || t('chat.typeMessage');
  // EN: Reference to textarea element for auto-resize / VI: Reference đến element textarea cho auto-resize
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);

  // EN: Internal state for uncontrolled mode / VI: State nội bộ cho chế độ uncontrolled
  const [internalValue, setInternalValue] = React.useState('');

  // EN: Use external value if provided, otherwise use internal state / VI: Sử dụng external value nếu có, nếu không dùng internal state
  const value = externalValue !== undefined ? externalValue : internalValue;

  // EN: Handle textarea input change / VI: Xử lý thay đổi input textarea
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newValue = e.target.value;

    // EN: Update internal state if uncontrolled / VI: Cập nhật internal state nếu uncontrolled
    if (externalValue === undefined) {
      setInternalValue(newValue);
    }

    onChange?.(newValue);

    // EN: Auto-resize textarea / VI: Tự động thay đổi kích thước textarea
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      const scrollHeight = textareaRef.current.scrollHeight;
      const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
      textareaRef.current.style.height = `${newHeight}px`;
    }
  };

  // EN: Handle keyboard shortcuts / VI: Xử lý phím tắt
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // EN: Enter to send (unless Shift is pressed for new line) / VI: Enter để gửi (trừ khi nhấn Shift để xuống dòng)
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  // EN: Handle send message / VI: Xử lý gửi tin nhắn
  const handleSend = () => {
    const trimmedValue = value.trim();
    if (trimmedValue && !disabled && !loading && onSend) {
      onSend(trimmedValue);
      // EN: Reset textarea height after sending / VI: Đặt lại chiều cao textarea sau khi gửi
      if (textareaRef.current) {
        textareaRef.current.style.height = `${minHeight}px`;
      }
      // EN: Clear internal state if uncontrolled / VI: Xóa internal state nếu uncontrolled
      if (externalValue === undefined) {
        setInternalValue('');
      }
      // EN: Clear input value (expecting parent to handle this via onChange) / VI: Xóa giá trị input (kỳ vọng parent xử lý qua onChange)
      onChange?.('');
    }
  };

  // EN: Adjust textarea height on mount and when value changes / VI: Điều chỉnh chiều cao textarea khi mount và khi value thay đổi
  React.useEffect(() => {
    if (textareaRef.current) {
      // EN: Reset height to auto to get accurate scrollHeight / VI: Đặt lại chiều cao về auto để lấy scrollHeight chính xác
      textareaRef.current.style.height = 'auto';
      const scrollHeight = textareaRef.current.scrollHeight;
      const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
      textareaRef.current.style.height = `${newHeight}px`;
    }
  }, [value, minHeight, maxHeight]);

  // EN: Check if send button should be enabled / VI: Kiểm tra xem nút send có nên được kích hoạt không
  const canSend = value.trim().length > 0 && !disabled && !loading;

  return (
    <div
      className={cn(
        'flex items-end gap-2 w-full',
        'border-t border-border-primary bg-bg-secondary',
        'p-4',
        // EN: Mobile: Sticky bottom / VI: Mobile: Sticky bottom
        'max-md:sticky max-md:bottom-0 max-md:z-10',
        // EN: Mobile: Safe area padding for iOS / VI: Mobile: Safe area padding cho iOS
        'max-md:pb-[env(safe-area-inset-bottom)]',
        className
      )}
    >
      {/* EN: Attach file button / VI: Nút attach file */}
      {onAttachFile && (
        <button
          type="button"
          onClick={onAttachFile}
          disabled={disabled}
          className={cn(
            'flex-shrink-0',
            // EN: Mobile: Minimum 44px touch target / VI: Mobile: Touch target tối thiểu 44px
            'w-10 h-10 md:w-10 md:h-10',
            'min-w-[44px] min-h-[44px]',
            'flex items-center justify-center',
            'rounded-md',
            'text-text-tertiary hover:text-text-secondary',
            'hover:bg-bg-tertiary active:bg-bg-elevated',
            'transition-colors duration-[150ms]',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary focus-visible:ring-offset-2',
            disabled && 'opacity-50 cursor-not-allowed'
          )}
          aria-label={t('chat.attachFile')}
        >
          <svg
            className="w-5 h-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.122 2.122l7.81-7.81"
            />
          </svg>
        </button>
      )}

      {/* EN: Textarea input / VI: Textarea input */}
      <div className="flex-1 relative">
        <textarea
          ref={textareaRef}
          value={value}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          disabled={disabled}
          placeholder={defaultPlaceholder}
          rows={1}
          className={cn(
            'w-full',
            'px-4 py-3',
            'bg-bg-tertiary',
            'border border-border-primary rounded-lg',
            'text-text-primary placeholder:text-text-tertiary',
            'resize-none',
            'overflow-y-auto',
            'focus-visible:outline-none',
            'focus-visible:border-accent-primary',
            'focus-visible:ring-2 focus-visible:ring-accent-primary focus-visible:ring-offset-2',
            'focus-visible:shadow-[0_0_20px_rgba(59,130,246,0.3)]',
            'transition-all duration-[150ms]',
            'text-base',
            disabled && 'cursor-not-allowed opacity-50',
            // EN: Custom scrollbar styling / VI: Styling scrollbar tùy chỉnh
            'scrollbar-thin scrollbar-thumb-border-secondary scrollbar-track-transparent',
            'hover:scrollbar-thumb-border-secondary'
          )}
          style={{
            minHeight: `${minHeight}px`,
            maxHeight: `${maxHeight}px`,
          }}
          aria-label={t('chat.messageInput')}
          aria-describedby="chat-input-help"
        />
        {/* EN: Hidden helper text for screen readers / VI: Text hướng dẫn ẩn cho screen readers */}
        <span id="chat-input-help" className="sr-only">
          {t('chat.sendHelp')}
        </span>
      </div>

      {/* EN: Send button / VI: Nút send */}
      <Button
        type="button"
        onClick={handleSend}
        isDisabled={!canSend}
        isLoading={loading}
        variant="primary"
        size="md"
        className={cn(
          'flex-shrink-0',
          'w-10 h-10 p-0',
          // EN: Mobile: Minimum 44px touch target / VI: Mobile: Touch target tối thiểu 44px
          'min-w-[44px] min-h-[44px]',
          'rounded-lg',
          // EN: Adjust button styles for square shape / VI: Điều chỉnh styles cho button hình vuông
          !canSend && 'opacity-50 cursor-not-allowed'
        )}
        aria-label={t('chat.send')}
      >
        {!loading && (
          <svg
            className="w-5 h-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
            />
          </svg>
        )}
      </Button>
    </div>
  );
}
