"use client";

import { useEffect, useRef, useState, FormEvent } from "react";
import { SendHorizonal, Square } from "lucide-react";

interface Props {
  onSend: (text: string) => void;
  disabled?: boolean;
  isStreaming: boolean;
  onStop: () => void;
}

export default function ChatInput({
  onSend,
  disabled,
  isStreaming,
  onStop,
}: Props) {
  const [value, setValue] = useState("");
  const [isFocused, setIsFocused] = useState(false);
  const ref = useRef<HTMLTextAreaElement>(null);

  const canSend = value.trim().length > 0 && !disabled && !isStreaming;

  useEffect(() => {
    if (!ref.current) return;
    ref.current.style.height = "auto";
    ref.current.style.height = Math.min(ref.current.scrollHeight, 140) + "px";
  }, [value]);

  const submit = (e?: FormEvent) => {
    e?.preventDefault();
    if (!canSend) return;

    onSend(value.trim());
    setValue("");

    if (ref.current) {
      ref.current.style.height = "auto";
    }
  };

  return (
    <form
      onSubmit={submit}
      className="sticky bottom-0 border-t bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80 px-4 py-3"
    >
      <div
        className={`rounded-xl border bg-white px-3 py-2 shadow-sm transition-all duration-200 ${
          isFocused
            ? "border-[var(--ye-primary)] ring-4 ring-blue-100"
            : "border-slate-200"
        } ${disabled ? "opacity-90" : ""}`}
      >
        <div className="flex items-end gap-2">
          <textarea
            ref={ref}
            rows={1}
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            placeholder="Send a message..."
            className="max-h-36 min-h-[24px] flex-1 resize-none bg-transparent py-1 text-sm leading-6 text-slate-800 outline-none placeholder:text-slate-400"
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                submit();
              }
            }}
          />

          {isStreaming ? (
            <button
              type="button"
              onClick={onStop}
              className="flex h-10 w-10 items-center justify-center rounded-full bg-red-500 text-white transition-colors hover:bg-red-600 flex-shrink-0 shadow-sm"
              aria-label="Stop streaming"
              title="Stop response"
            >
              <Square className="h-4 w-4 fill-current" />
            </button>
          ) : (
            <button
              type="submit"
              disabled={!canSend}
              className={`flex h-10 w-10 items-center justify-center rounded-full transition-all flex-shrink-0 shadow-sm ${
                canSend
                  ? "bg-[var(--ye-primary)] text-white hover:brightness-110"
                  : "bg-slate-200 text-slate-400 cursor-not-allowed"
              }`}
              aria-label="Send message"
              title="Send"
            >
              <SendHorizonal className="h-4 w-4" />
            </button>
          )}
        </div>

        <div className="mt-2 flex items-center justify-between px-1">
          <p className="text-[11px] text-slate-400">
            Press <span className="font-medium">Enter</span> to send,{" "}
            <span className="font-medium">Shift + Enter</span> for a new line
          </p>

          {/* {disabled && !isStreaming ? (
            <div className="flex items-center gap-1 text-[11px] text-amber-600">
              <Loader2 className="h-3 w-3" />
              <span>Waiting for category</span>
            </div>
          ) : null} */}
        </div>
      </div>
    </form>
  );
}