import React, { useRef, useState } from 'react';
import { ArrowUpIcon, PlusIcon, SquareIcon } from 'lucide-react';

import {
  isTouchKeyboard,
  sendsOnEnter,
} from '../../../lib/copilot/composer-keys';
import { useAutoGrow } from '../../../lib/hooks/use-auto-grow';
import type { ICopilotThinkingMode } from '../../../service/copilot/copilot.interface';
import { BARE_FIELD } from '../bare-field';
import { cn } from '../cn';
import { ThinkingSelect } from '../ThinkingSelect';

/** How tall the box grows before it scrolls inside itself. Past this the
 *  composer would be eating the conversation it belongs to. */
const MAX_COMPOSER_HEIGHT = 200;

/** Past this many characters the box says how long the question is. */
const COUNTER_THRESHOLD = 1500;

/** The ring every control in the composer shows on keyboard focus. */
const FOCUS_RING =
  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#e0379f]/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background';

/** Said once, under the box, where it is read before every question. */
const FALLIBILITY_NOTICE =
  'Recomaze can make mistakes. Check anything that matters.';

/**
 * HQ's question box: one input for everything the copilot can do, with the
 * thinking toggle and what an answer costs under it. Escape stops an answer
 * that is still being written.
 *
 * @param props - Component props.
 * @param props.onSend - Send the typed question.
 * @param props.onStop - Stop the answer being written.
 * @param props.isStreaming - An answer is being written.
 * @param props.thinking - The thinking mode picked.
 * @param props.onThinking - Pick another.
 * @param props.placeholder - What the empty box says.
 * @param props.compact - The tighter box docked under a conversation.
 * @return The composer.
 */
export function HomeComposer({
  onSend,
  onStop,
  isStreaming,
  thinking,
  onThinking,
  placeholder,
  compact = false,
}: {
  onSend: (text: string) => void;
  onStop: () => void;
  isStreaming: boolean;
  thinking: ICopilotThinkingMode;
  onThinking: (mode: ICopilotThinkingMode) => void;
  placeholder: string;
  compact?: boolean;
}): React.ReactElement {
  const [text, setText] = useState<string>('');
  const [isFocused, setIsFocused] = useState<boolean>(false);
  const boxRef = useRef<HTMLTextAreaElement>(null);
  useAutoGrow(boxRef, text, MAX_COMPOSER_HEIGHT);

  const asked: string = text.trim();
  const canSend: boolean = asked !== '' && !isStreaming;

  const submit = (event: React.FormEvent): void => {
    event.preventDefault();
    if (!canSend) return;
    setText('');
    onSend(asked);
  };

  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>): void => {
    if (event.key === 'Escape' && isStreaming) {
      event.preventDefault();
      onStop();
      return;
    }
    if (sendsOnEnter(event, isTouchKeyboard())) submit(event);
  };

  return (
    <form
      onSubmit={submit}
      className={cn(
        'rounded-2xl border border-border bg-surface-raised transition focus-within:border-brand/60 focus-within:ring-1 focus-within:ring-brand/25',
        compact ? 'p-2' : 'p-3'
      )}
    >
      <textarea
        ref={boxRef}
        value={text}
        rows={compact ? 1 : 2}
        placeholder={placeholder}
        aria-label="Ask the copilot"
        onChange={event => setText(event.target.value)}
        onKeyDown={onKeyDown}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        className={cn(
          'block max-h-[200px] w-full resize-none overflow-y-auto bg-transparent px-2 py-1.5 text-[15px] leading-[1.5] text-foreground placeholder:text-text-light focus:outline-none',
          BARE_FIELD
        )}
      />

      <div className="flex items-center justify-between gap-2 pt-1">
        <div className="flex min-w-0 items-center gap-2">
          <ThinkingSelect
            value={thinking}
            onChange={onThinking}
            className="flex-row-reverse"
          />
          {/* Said while the box is focused and still empty: a hint that
              stays up while someone types is one they have stopped reading. */}
          {isFocused && text === '' && !isStreaming && !isTouchKeyboard() && (
            <span className="hidden truncate text-[11px] text-text-light @3xl:inline">
              Enter to send · Shift+Enter for a new line
            </span>
          )}
        </div>

        <div className="flex shrink-0 items-center gap-2">
          {text.length > COUNTER_THRESHOLD && (
            <span className="text-[11px] tabular-nums text-text-light">
              {text.length.toLocaleString()}
            </span>
          )}
          {isStreaming ? (
            <button
              type="button"
              onClick={onStop}
              aria-label="Stop"
              title="Stop (Esc)"
              className={cn(
                'flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-surface-active text-foreground transition active:scale-95',
                FOCUS_RING
              )}
            >
              <SquareIcon className="h-3.5 w-3.5 fill-current" />
            </button>
          ) : (
            <button
              type="submit"
              disabled={!canSend}
              aria-label="Send"
              className={cn(
                'flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-linear-to-br from-[#e0379f] to-[#7b3fe4] text-white shadow-lg shadow-brand/30 transition hover:opacity-90 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100',
                FOCUS_RING
              )}
            >
              <ArrowUpIcon className="h-4 w-4" />
            </button>
          )}
        </div>
      </div>
      <p className="mt-2 text-center text-[11px] leading-4 text-text-light">
        {FALLIBILITY_NOTICE}
      </p>
    </form>
  );
}

/**
 * The questions under the composer. Each one is a real question the copilot
 * can answer from this account's own data, and tapping it is the first
 * message of the conversation.
 *
 * @param props - Component props.
 * @param props.prompts - The questions to offer.
 * @param props.onPick - Send one.
 * @param props.isBusy - An answer is being written.
 * @param props.cost - What asking one costs, shown on each.
 * @return The list.
 */
export function StarterPrompts({
  prompts,
  onPick,
  isBusy = false,
  cost,
}: {
  prompts: readonly string[];
  onPick: (prompt: string) => void;
  isBusy?: boolean;
  /** What asking one costs: a tap sends it. */
  cost?: string;
}): React.ReactElement {
  return (
    <div className="divide-y divide-border-light">
      {prompts.map((prompt: string) => (
        <button
          key={prompt}
          type="button"
          onClick={() => onPick(prompt)}
          disabled={isBusy}
          className={cn(
            'group flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg px-2 py-2.5 text-left text-sm text-foreground transition hover:bg-surface-raised disabled:cursor-not-allowed disabled:opacity-40',
            FOCUS_RING
          )}
        >
          <span>{prompt}</span>
          <span className="flex shrink-0 items-center gap-2">
            {cost && <span className="text-xs text-text-muted">{cost}</span>}
            <PlusIcon className="h-4 w-4 shrink-0 text-text-muted transition group-hover:text-foreground" />
          </span>
        </button>
      ))}
    </div>
  );
}