"use client";

import type { ReactNode, RefObject } from "react";

type Props = {
  input: string;
  setInput: (v: string) => void;
  send: () => void;
  stop: () => void;
  busy: boolean;
  summariesReady: boolean;
  // Why the chat cannot ask at all, shown as one line under the box (the box is
  // disabled). Set on the hub when it has no archives, or every one is switched
  // off.
  blocked?: ReactNode;
  hasKey: boolean;
  markdownOn: boolean;
  setMarkdownOn: (v: boolean) => void;
  textareaRef?: RefObject<HTMLTextAreaElement | null>;
};

export function Composer(props: Props) {
  const {
    input,
    setInput,
    send,
    stop,
    busy,
    summariesReady,
    blocked,
    hasKey,
    markdownOn,
    setMarkdownOn,
    textareaRef,
  } = props;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        send();
      }}
      // Below lg the messages ride the document scroll, so the composer is
      // pinned to the bottom of the viewport — the question box is the point of
      // the page and should never be a scroll away. `-mx-4 px-4` lets its
      // background span the padded column it sits in.
      className="flex flex-col gap-2 max-lg:sticky max-lg:bottom-0 max-lg:z-10 max-lg:-mx-4 max-lg:border-t max-lg:border-border max-lg:bg-background max-lg:px-4 max-lg:pt-2 max-lg:pb-[calc(0.5rem+env(safe-area-inset-bottom,0px))]"
    >
      <textarea
        ref={textareaRef}
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          // Enter sends; Shift+Enter inserts a newline.
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            send();
          }
        }}
        rows={2}
        placeholder={
          blocked
            ? undefined
            : summariesReady
              ? "Ask about the transcripts… (Enter to send · Shift+Enter for a new line)"
              : "Loading transcripts…"
        }
        disabled={!summariesReady || !!blocked}
        // text-base below md: iOS zooms the page on focus for anything under
        // 16px, and it never zooms back out.
        onFocus={(e) => e.currentTarget.scrollIntoView({ block: "end" })}
        className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-base md:text-sm text-foreground"
      />
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="submit"
          disabled={busy || !summariesReady || !!blocked || !input.trim() || !hasKey}
          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-brand-strong disabled:opacity-50"
        >
          {busy ? "Thinking…" : "Ask"}
        </button>
        {busy && (
          <button
            type="button"
            onClick={stop}
            className="rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground"
          >
            Stop
          </button>
        )}
        {blocked ? (
          <span role="status" data-testid="ask-blocked" className="text-xs text-muted-foreground">
            {blocked}
          </span>
        ) : (
          !hasKey && (
            <span className="text-xs text-muted-foreground">
              Set an API key above to start.
            </span>
          )
        )}
        {/* Formatted / Plain escape hatch for Markdown rendering. */}
        <label className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
          <input
            type="checkbox"
            checked={markdownOn}
            onChange={(e) => setMarkdownOn(e.target.checked)}
          />
          Format answers
        </label>
      </div>
    </form>
  );
}