// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Floating Input Bar
// Figma-exact: Fixed bottom-center, 512px wide, 56px tall
// DD rules: Enter to send, auto-resize, mousedown preload, 44px targets
// ═══════════════════════════════════════════════════════════════════

import {
  useState,
  useRef,
  useEffect,
  useCallback,
  type KeyboardEvent,
  type ChangeEvent,
} from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, ArrowUp } from "lucide-react";
import { cn } from "@/lib/utils";
import { spring, press } from "@/lib/motion";

// ── Types ──────────────────────────────────────────────────────────

interface FloatingInputProps {
  onSubmit: (text: string) => void;
  isGenerating?: boolean;
  disabled?: boolean;
}

// ── Constants ──────────────────────────────────────────────────────

const MIN_CHARS = 3;
const MAX_CHARS = 2000;
const CHAR_WARN_THRESHOLD = 1500;
const BASE_HEIGHT = 56;
const LINE_HEIGHT = 20;
const MAX_LINES = 4;
const TEXTAREA_PADDING_Y = 18; // top + bottom padding inside textarea
const MAX_TEXTAREA_HEIGHT = LINE_HEIGHT * MAX_LINES;

// ── Component ──────────────────────────────────────────────────────

export function FloatingInput({
  onSubmit,
  isGenerating = false,
  disabled = false,
}: FloatingInputProps) {
  const [value, setValue] = useState("");
  const [error, setError] = useState<string | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const errorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const trimmed = value.trim();
  const canSend = trimmed.length >= MIN_CHARS && !isGenerating && !disabled;
  const charCount = value.length;
  const showCharCount = charCount >= CHAR_WARN_THRESHOLD;
  const isOverLimit = charCount > MAX_CHARS;

  // Auto-focus on mount
  useEffect(() => {
    if (textareaRef.current && !isGenerating && !disabled) {
      textareaRef.current.focus();
    }
  }, [isGenerating, disabled]);

  // Auto-resize textarea
  const resizeTextarea = useCallback(() => {
    const el = textareaRef.current;
    if (!el) return;
    // Reset height to measure scrollHeight accurately
    el.style.height = "0px";
    const scrollHeight = el.scrollHeight;
    const clampedHeight = Math.min(scrollHeight, MAX_TEXTAREA_HEIGHT + TEXTAREA_PADDING_Y);
    el.style.height = `${clampedHeight}px`;
  }, []);

  useEffect(() => {
    resizeTextarea();
  }, [value, resizeTextarea]);

  // Clear error after flash
  const flashError = useCallback((msg: string) => {
    setError(msg);
    if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
    errorTimeoutRef.current = setTimeout(() => setError(null), 3000);
  }, []);

  // Cleanup timeout on unmount
  useEffect(() => {
    return () => {
      if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
    };
  }, []);

  const handleSubmit = useCallback(() => {
    if (!canSend) return;
    if (isOverLimit) {
      flashError(`Message too long (${charCount}/${MAX_CHARS})`);
      return;
    }
    onSubmit(trimmed);
    setValue("");
    // Reset textarea height after clearing
    requestAnimationFrame(() => {
      if (textareaRef.current) {
        textareaRef.current.style.height = "auto";
      }
    });
  }, [canSend, isOverLimit, trimmed, onSubmit, flashError, charCount]);

  const handleKeyDown = useCallback(
    (e: KeyboardEvent<HTMLTextAreaElement>) => {
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        handleSubmit();
      }
    },
    [handleSubmit]
  );

  const handleChange = useCallback(
    (e: ChangeEvent<HTMLTextAreaElement>) => {
      const newValue = e.target.value;
      // Enforce max chars (allow paste but truncate)
      if (newValue.length > MAX_CHARS) {
        setValue(newValue.slice(0, MAX_CHARS));
        flashError(`Maximum ${MAX_CHARS} characters`);
        return;
      }
      setValue(newValue);
      if (error) setError(null);
    },
    [error, flashError]
  );

  // DD rule: mousedown starts preloading for perceived speed
  const handleSendMouseDown = useCallback(() => {
    // Preload signal: in a real app this would start prefetching AI endpoint
    // For now, placeholder for the pattern
  }, []);

  const isInputDisabled = isGenerating || disabled;
  const hasError = error !== null;

  return (
    <div
      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex flex-col items-center"
      style={{ width: "min(512px, calc(100vw - 48px))" }}
    >
      {/* Error message above bar */}
      <AnimatePresence>
        {hasError && (
          <motion.div
            initial={{ opacity: 0, y: 4 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 4 }}
            transition={spring.snappy}
            className="mb-2 px-3 py-1.5 bg-destructive/10 text-destructive text-[13px] font-medium"
          >
            {error}
          </motion.div>
        )}
      </AnimatePresence>

      {/* Character count (shown at 1500+) */}
      <AnimatePresence>
        {showCharCount && !hasError && (
          <motion.div
            initial={{ opacity: 0, y: 4 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 4 }}
            transition={spring.snappy}
            className={cn(
              "mb-2 px-2 py-0.5 text-[12px] font-medium tabular-nums",
              isOverLimit
                ? "bg-destructive/10 text-destructive"
                : "bg-black/[0.04] text-foreground/40"
            )}
          >
            {charCount}/{MAX_CHARS}
          </motion.div>
        )}
      </AnimatePresence>

      {/* Input bar */}
      <motion.div
        layout
        transition={spring.snappy}
        className={cn(
          "w-full bg-white",
          "flex items-end px-[10px] py-[10px]",
          "transition-all duration-150",
          // Border emphasis
          // Border
          hasError
            ? "border border-destructive/30"
            : "border border-black/[0.08]",
          // Focus-within glow (not during generation)
          !isGenerating && !hasError && "focus-within:border-brand/30"
        )}
        style={{ minHeight: `${BASE_HEIGHT}px` }}
      >
        {/* Plus button — 36px circle, muted/disabled (future attachments) */}
        <button
          className={cn(
            "w-9 h-9 rounded-full flex items-center justify-center shrink-0",
            "text-foreground/25 transition-colors",
            "hover:text-foreground/40 hover:bg-black/[0.03]",
            "cursor-default"
          )}
          tabIndex={-1}
          aria-label="Attach (coming soon)"
          disabled
        >
          <Plus className="w-[18px] h-[18px]" strokeWidth={1.5} />
        </button>

        {/* Textarea — auto-resize, max 4 lines before scroll */}
        <textarea
          ref={textareaRef}
          value={value}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          placeholder={
            isGenerating ? "Planning now..." : "What do you have in mind?"
          }
          disabled={isInputDisabled}
          rows={1}
          className={cn(
            "flex-1 bg-transparent resize-none",
            "text-[14px] text-foreground leading-5",
            "placeholder:text-foreground/30",
            "focus:outline-none",
            "px-2 py-[8px]",
            "scrollbar-hide",
            // Pulse animation during generation
            isGenerating && "animate-pulse"
          )}
          style={{
            maxHeight: `${MAX_TEXTAREA_HEIGHT + TEXTAREA_PADDING_Y}px`,
            overflowY: "auto",
          }}
          aria-label="Project description"
        />

        {/* Send button — 36px circle */}
        <motion.button
          onClick={handleSubmit}
          onMouseDown={handleSendMouseDown}
          disabled={!canSend}
          className={cn(
            "w-9 h-9 rounded-full flex items-center justify-center shrink-0",
            "transition-colors duration-150",
            canSend
              ? "bg-[#1E2025] text-white hover:bg-[#32353D]"
              : "bg-black/[0.04] text-foreground/20"
          )}
          aria-label="Send"
          {...(canSend ? press : {})}
        >
          <ArrowUp className="w-4 h-4" strokeWidth={2} />
        </motion.button>
      </motion.div>
    </div>
  );
}
FloatingInput

Source Code
