'use client';

import { useEffect, type RefObject } from 'react';
import { useT } from './ContentProvider';
import { PaperclipIcon, SendIcon } from './icons';
import { cx } from './ui';

// The textarea grows with its content up to this height (px), then scrolls.
const INPUT_MAX_HEIGHT = 160;

interface ChatInputProps {
  value: string;
  loading: boolean;
  textareaRef: RefObject<HTMLTextAreaElement | null>;
  onChange: (value: string) => void;
  onSubmit: () => void;
}

export function ChatInput({ value, loading, textareaRef, onChange, onSubmit }: ChatInputProps) {
  const t = useT();
  const inputActive = value.trim().length > 0 && !loading;

  // Auto-resize the textarea to fit its content (capped at INPUT_MAX_HEIGHT)
  useEffect(() => {
    const ta = textareaRef.current;
    if (!ta) return;
    ta.style.height = 'auto';
    ta.style.height = Math.min(ta.scrollHeight, INPUT_MAX_HEIGHT) + 'px';
  }, [value, textareaRef]);

  return (
    <div className="shrink-0 border-t border-line bg-page px-4 pt-2.5 pb-4">
      <div className="mx-auto max-w-chat">
        <div className="flex items-end gap-2 rounded-2xl border border-edge-input bg-surface py-2.5 pr-2.5 pl-3.5 transition-[border-color] [box-shadow:var(--shadow-input)] focus-within:border-accent/50">
          {/* Attachment icon */}
          <button className="mb-px flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent text-muted transition-[color] duration-120 hover:text-ink-2">
            <PaperclipIcon />
          </button>
          {/* Textarea */}
          <textarea
            ref={textareaRef}
            value={value}
            onChange={e => onChange(e.target.value)}
            onKeyDown={e => {
              // Enter sends; Shift+Enter inserts a newline. Ignore Enter while an IME is composing.
              if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); if (inputActive) onSubmit(); }
            }}
            placeholder={t('copy.inputPlaceholder')}
            rows={1}
            disabled={loading}
            className="flex-1 resize-none overflow-y-auto border-none bg-transparent px-0 py-1 font-[inherit] text-[16px] leading-[1.6] text-ink caret-accent outline-none placeholder:text-placeholder"
            style={{ maxHeight: INPUT_MAX_HEIGHT }}
          />
          {/* Send button */}
          <button
            onClick={onSubmit}
            disabled={!inputActive}
            className={cx('mb-px flex size-9 shrink-0 items-center justify-center rounded-[50%] border-0 transition-all', inputActive ? 'cursor-pointer bg-brand opacity-100 [box-shadow:var(--shadow-send)]' : 'cursor-not-allowed bg-line opacity-40 [box-shadow:none]')}
          >
            <SendIcon color="white" />
          </button>
        </div>
        {/* Bottom hint */}
        <p className="mt-2 select-none text-center text-[12px] text-muted">
          <kbd className="rounded border border-edge-strong bg-tint px-[5px] py-px font-code text-[12px] text-ink-3">{t('copy.keyEnter')}</kbd>
          {' '}{t('copy.hintSend')}
          <span className="mx-1.5 opacity-40">·</span>
          <kbd className="rounded border border-edge-strong bg-tint px-[5px] py-px font-code text-[12px] text-ink-3">{t('copy.keyShiftEnter')}</kbd>
          {' '}{t('copy.hintNewLine')}
          <span className="mx-2 opacity-40">·</span>
          {t('copy.inputFeatureHint')}
        </p>
      </div>
    </div>
  );
}