import { useApp, useCursor, useFocus, useFocusManager, useInput, useMouse, usePaste, useScrollable, useTextInput } from "@visulima/tui/react";

useInput((input, key) => {
    if (key.upArrow) moveUp();
    if (key.downArrow) moveDown();
    if (key.return) submit();
    if (key.escape) cancel();
    if (key.ctrl && input === "c") exit();
});

usePaste((text) => {
    handlePaste(text);
});

usePaste(handler, { isActive: false });

import { useClipboard } from "@visulima/tui";

const { copy, isSupported } = useClipboard();
copy("Hello, clipboard!");

const { copy } = useClipboard({ target: "p" }); // primary selection (X11)

import { writeOsc52, clearOsc52, isOsc52Supported } from "@visulima/tui";

if (isOsc52Supported()) {
    writeOsc52(process.stdout, "text to copy", "c");
}

import { useTextBuffer } from "@visulima/tui";

const buffer = useTextBuffer("initial\ntext");

buffer.insert("hello");
buffer.newline();
buffer.moveCursor("up");
buffer.undo();

import { useTextSelection } from "@visulima/tui";

const ref = useRef(null);
const { selectedText, selectAll, clearSelection } = useTextSelection(ref, {
    copyOnSelect: true,
    onSelectionChange: (text) => console.log("Selected:", text),
});

return (
    <Box ref={ref}>
        <Text>Selectable content</Text>
    </Box>
);

import { useColorBlindness } from "@visulima/tui";

const { transformColor } = useColorBlindness({ mode: "deuteranopia" });
<Text color={transformColor("#ff0000")}>This text</Text>;

import { useConsoleCapture } from "@visulima/tui";

const { entries, clear } = useConsoleCapture({ maxEntries: 100 });

import { useScrollAcceleration } from "@visulima/tui";

const { handleScroll } = useScrollAcceleration({
    onScroll: (delta) => scrollViewRef.current?.scrollBy(delta),
});

import { useScrollInput } from "@visulima/tui";

const { isFocused } = useScrollInput({
    scrollBy: (delta) => ref.current?.scrollBy(delta),
    scrollToTop: () => ref.current?.scrollToTop(),
    scrollToBottom: () => ref.current?.scrollToBottom(),
    viewportHeight: 20,
    vimBindings: true,
});

import { createLinkedScrollGroup } from "@visulima/tui";

const group = createLinkedScrollGroup();

// In each linked component:
const { ref, onScroll } = group.useLinkedScroll();
// Attach ref and onScroll to your ScrollView

import { useTerminalPalette } from "@visulima/tui";

const { palette, isLoading, isSupported } = useTerminalPalette();
if (palette?.background) {
    console.log("Terminal background:", palette.background);
}

useMouse((event) => {
    // event.button: left | right | middle | scrollUp | scrollDown
    // event.x, event.y are 0-based terminal coordinates
    if (event.button === "left") onClick(event.x, event.y);
});

const { value, cursor, clear } = useTextInput({
    onSubmit: (v) => send(v),
});

return (
    <Text>
        {value.slice(0, cursor)}
        <Text inverse>{value[cursor] ?? " "}</Text>
        {value.slice(cursor + 1)}
    </Text>
);

const viewportHeight = 20;
const scroll = useScrollable({
    viewportHeight,
    contentHeight: items.length,
});

useInput((_input, key) => {
    if (key.upArrow) scroll.scrollUp();
    if (key.downArrow) scroll.scrollDown();
    if (key.pageUp) scroll.scrollBy(-10);
    if (key.pageDown) scroll.scrollBy(10);
    if (key.home) scroll.scrollToTop();
    if (key.end) scroll.scrollToBottom();
});

const visible = items.slice(scroll.offset, scroll.offset + viewportHeight);

const { isFocused, focus } = useFocus({ id: "search", autoFocus: true });

const { focusNext, focusPrevious, focus, activeId, enableFocus, disableFocus } = useFocusManager();

const { exit, quit } = useApp();

const { columns, rows } = useWindowSize();

const { write } = useStdout();
const { write: writeErr } = useStderr();

write("log line\n");
writeErr("warning\n");

const { stdin, setRawMode, isRawModeSupported } = useStdin();

const ref = useRef(null);
const { width, height, left, top, hasMeasured } = useBoxMetrics(ref);

return <Box ref={ref}>...</Box>;

const { x, y, width, height } = measureElement(ref.current);

import {
    getBoundingBox, // scroll-aware absolute position
    getInnerWidth, // width excluding borders
    getInnerHeight, // height excluding borders
    getScrollHeight, // total scrollable content height
    getScrollWidth, // total scrollable content width
    getScrollTop, // current vertical scroll position
    getScrollLeft, // current horizontal scroll position
    ResizeObserver, // observe element size changes
} from "@visulima/tui";

// ResizeObserver example
const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
        console.log(`Size changed: ${entry.contentRect.width}x${entry.contentRect.height}`);
    }
});
observer.observe(ref.current);

const { setCursorPosition } = useCursor();

const prompt = "> ";
setCursorPosition({ x: stringWidth(prompt + text), y: 1 });

return (
    <Box flexDirection="column">
        <Text>Header</Text>
        <Text>
            {prompt}
            {text}
        </Text>
    </Box>
);

import { useAnimation, Text } from "@visulima/tui";

const Spinner = () => {
    const { frame } = useAnimation({ interval: 80 });
    const characters = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

    return <Text>{characters[frame % characters.length]}</Text>;
};

const Pulse = () => {
    const { time } = useAnimation({ interval: 50 });
    const brightness = Math.sin((time / 1000) * Math.PI * 2);
    const width = Math.round((brightness + 1) * 10);

    return <Text color="cyan">{"█".repeat(width)}</Text>;
};

import { useState } from "react";
import { Text, useAnimation, useInput } from "@visulima/tui";

const PausableCounter = () => {
    const [paused, setPaused] = useState(false);
    const { frame } = useAnimation({ interval: 100, isActive: !paused });

    useInput((input) => {
        if (input === " ") setPaused((prev) => !prev);
    });

    return (
        <Text>
            Frame: {frame} {paused ? "(paused)" : ""}
        </Text>
    );
};

import { Text, useAnimation, useInput } from "@visulima/tui";

const Flash = () => {
    const { frame, reset } = useAnimation({ interval: 100 });

    useInput((input) => {
        if (input === "r") reset();
    });

    return <Text>{frame < 10 ? "Flash!" : "Press r to flash again"}</Text>;
};

import { useRef } from "react";
import { Box, Text, useAnimation } from "@visulima/tui";

const BouncingDot = () => {
    const posRef = useRef(0);
    const velRef = useRef(0.05);
    const { delta } = useAnimation({ interval: 16 });

    posRef.current += velRef.current * delta;

    if (posRef.current > 40 || posRef.current < 0) {
        velRef.current *= -1;
        posRef.current = Math.max(0, Math.min(40, posRef.current));
    }

    return <Text>{" ".repeat(Math.round(posRef.current))}●</Text>;
};

const Dashboard = () => {
    const { frame: fast } = useAnimation({ interval: 80 });
    const { frame: slow } = useAnimation({ interval: 500 });

    const spinner = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
    const dots = [".  ", ".. ", "..."];

    return (
        <Box flexDirection="column">
            <Text>
                {spinner[fast % spinner.length]} Loading
                {dots[slow % dots.length]}
            </Text>
        </Box>
    );
};

import { useTimer } from "@visulima/tui";

const { remaining, isRunning, isFinished, start, stop, toggle, reset } = useTimer({
    duration: 60_000,
    interval: 1000,
    onTimeout: () => console.log("Time's up!"),
});

import { useStopwatch } from "@visulima/tui";

const { elapsed, isRunning, start, stop, toggle, reset, lap, laps } = useStopwatch({
    interval: 100,
    autoStart: true,
});

import { useKeyBindings, Help } from "@visulima/tui";

const { bindings } = useKeyBindings([
    { binding: { key: "q", description: "Quit" }, handler: () => exit() },
    { binding: { key: ["upArrow", "k"], description: "Move up", group: "Navigation" }, handler: () => moveUp() },
    { binding: { key: "ctrl+s", description: "Save" }, handler: () => save() },
    { binding: { key: "escape", description: "Cancel", enabled: false }, handler: () => cancel() },
]);

<Help bindings={bindings} />

type KeyBinding = {
    key: string | readonly string[];
    description: string;
    enabled?: boolean;   // default: true
    group?: string;      // for Help grouping
};

const isEnabled = useIsScreenReaderEnabled();

import { useTreeViewState } from "@visulima/tui";

const state = useTreeViewState({
    data: treeNodes,
    selectionMode: "single",
    defaultExpanded: "all",
    visibleNodeCount: 20,
    onFocusChange: (id) => console.log("focused:", id),
    onExpandChange: (ids) => console.log("expanded:", ids),
    onSelectChange: (ids) => console.log("selected:", ids),
});

import { useTreeViewState, useTreeView } from "@visulima/tui";

const state = useTreeViewState({ data, selectionMode: "none" });

useTreeView({
    state,
    selectionMode: "none",
    isDisabled: false,
    loadChildren: async (node) => fetchChildren(node.id),
    onLoadError: (nodeId, err) => console.error(err),
});