import { Box } from "@visulima/tui/components/box";
import { Cursor } from "@visulima/tui/components/cursor";
import { Newline } from "@visulima/tui/components/newline";
import { Spacer } from "@visulima/tui/components/spacer";
import { Static } from "@visulima/tui/components/static";
import { Text } from "@visulima/tui/components/text";
import { Transform } from "@visulima/tui/components/transform";
import { ConfirmInput } from "@visulima/tui/components/confirm-input";
import { FilePicker } from "@visulima/tui/components/file-picker";
import { Gradient } from "@visulima/tui/components/gradient";
import { Help } from "@visulima/tui/components/help";
import { MultiSelect } from "@visulima/tui/components/multi-select";
import { Paginator } from "@visulima/tui/components/paginator";
import { ProgressBar } from "@visulima/tui/components/progress-bar";
import { SelectInput } from "@visulima/tui/components/select-input";
import { Spinner } from "@visulima/tui/components/spinner";
import { Stopwatch } from "@visulima/tui/components/stopwatch";
import { Tab } from "@visulima/tui/components/tab";
import { Tabs } from "@visulima/tui/components/tabs";
import { TextInput } from "@visulima/tui/components/text-input";
import { Timer } from "@visulima/tui/components/timer";

import { BigText } from "@visulima/tui/components/big-text"; // requires: cfonts
import { Code } from "@visulima/tui/components/code"; // requires: shiki, @shikijs/langs, @shikijs/themes
import { DiffView } from "@visulima/tui/components/diff-view"; // requires: diff (+ shiki for syntax highlighting)
import { Markdown } from "@visulima/tui/components/markdown"; // requires: marked (+ shiki for code blocks)
import { Table } from "@visulima/tui/components/table"; // requires: @visulima/tabular

<Box
    flexDirection="row" // row | column | row-reverse | column-reverse
    flexGrow={1}
    flexShrink={1}
    width={40}
    height={10}
    minWidth={10}
    minHeight={4}
    padding={1}
    paddingX={2}
    margin={1}
    gap={1}
    alignItems="center"
    justifyContent="space-between"
    borderStyle="round" // single | double | round | bold | classic | singleDouble | doubleSingle
    borderColor="cyan"
    borderBackgroundColor="blue"
    borderTop={true}
    borderRight={true}
    borderBottom={true}
    borderLeft={true}
>
    {children}
</Box>

<Box
    overflow="scroll" // visible | hidden | scroll
    overflowX="hidden" // per-axis overflow control
    overflowY="scroll" // per-axis overflow control
    scrollTop={0} // vertical scroll position (rows)
    scrollLeft={0} // horizontal scroll position (columns)
    scrollbarThumbColor="gray" // scrollbar thumb color
    scrollbar={true} // show/hide scrollbar (default: true)
    height={10}
    width={40}
>
    {longContent}
</Box>

<Box overflow="scroll" height={15}>
    <Box sticky>
        <Text bold>Section A</Text>
    </Box>
    {sectionAContent}

    <Box sticky>
        <Text bold>Section B</Text>
    </Box>
    {sectionBContent}
</Box>

<Text
    color="cyan" // named, #rgb, #rrggbb, rgb(r,g,b), or ANSI index 0-255
    backgroundColor="blue"
    bold
    italic
    underline
    strikethrough
    dim
    inverse
>
    Hello world
</Text>

<Box>
    <Text>{prompt + value}</Text>
    <Cursor />
</Box>

<Box>
    <Text>{value.slice(0, cursorPos)}</Text>
    <Cursor />
    <Text>{value.slice(cursorPos)}</Text>
</Box>

const ref = useRef(null);

<Box ref={ref}>
    <Text>{content}</Text>
</Box>
<Cursor anchorRef={ref} x={5} y={1} />

import { Code } from "@visulima/tui/components/code";

<Code code='const x = "hello";' language="javascript" />
<Code code={source} language="python" showLineNumbers startLine={10} />

import { DiffView } from "@visulima/tui/components/diff-view";

<DiffView oldText={original} newText={modified} />
<DiffView diff={unifiedDiffString} mode="split" />
<DiffView oldText={a} newText={b} oldLabel="v1.0" newLabel="v2.0" inlineDiff />

<DiffView oldText={oldCode} newText={newCode} language="typescript" />

import { FilePicker } from "@visulima/tui/components/file-picker";
<FilePicker
    onSelect={(entry) => console.log("Selected:", entry.path)}
    filter={{ extensions: [".ts", ".tsx"] }}
/>
<FilePicker
    initialPath="/home/user/projects"
    showSize
    showPermissions
    limit={15}
    onCancel={() => exit()}
/>

type FileEntry = {
    name: string;
    path: string;
    isDirectory: boolean;
    isHidden: boolean;
    size: number;
    permissions: string;
};

import { BigText } from "@visulima/tui/components/big-text";

<BigText text="Hello" />
<BigText text="Cool" font="chrome" colors={["red", "blue"]} />

import { Gradient } from "@visulima/tui/components/gradient";
import { Text } from "@visulima/tui/components/text";
<Gradient name="rainbow">
    <Text>Hello, World!</Text>
</Gradient>

<Gradient colors={["#ff0000", "#00ff00", "#0000ff"]}>
    <Text>Custom gradient</Text>
</Gradient>

import { Help } from "@visulima/tui/components/help";
import { useKeyBindings } from "@visulima/tui/hooks/use-key-bindings";
const { bindings } = useKeyBindings([
    { binding: { key: "q", description: "Quit" }, handler: () => exit() },
    { binding: { key: ["↑", "k"], description: "Up", group: "Navigation" }, handler: () => moveUp() },
]);

<Help bindings={bindings} />
<Help bindings={bindings} mode="full" />

q Quit · ↑/k Up · ↓/j Down · enter Select

Navigation          Actions
↑/k Up              enter Select
↓/j Down            q Quit

import { Link } from "@visulima/tui/components/link";
import { Text } from "@visulima/tui/components/text";
<Link url="https://example.com">
    <Text color="cyan">My Website</Text>
</Link>

// Custom fallback for unsupported terminals
<Link url="https://example.com" fallback={(text, url) => `[${text}](${url})`}>
    <Text>Docs</Text>
</Link>

import { Markdown } from "@visulima/tui/components/markdown";

<Markdown>{"# Hello World\n\nThis is **bold** and *italic*."}</Markdown>
<Markdown codeTheme="github-dark-default">{"```js\nconst x = 1;\n```"}</Markdown>

const [text, setText] = useState("");
// ... text grows as tokens arrive ...
<Markdown streaming>{text}</Markdown>;

<Newline />
<Newline count={2} />

<Box flexDirection="row">
    <Text>Left</Text>
    <Spacer />
    <Text>Right</Text>
</Box>

<Static items={completedTasks}>
    {(task) => (
        <Box key={task.id}>
            <Text color="green">✓ {task.name}</Text>
        </Box>
    )}
</Static>

<Transform transform={(s) => s.toUpperCase()}>
    <Text>hello world</Text>
</Transform>

<Spinner />
<Spinner type="dots" />
<Spinner type="wave" />

import { Stopwatch } from "@visulima/tui/components/stopwatch";
import { useRef } from "react";

const ref = useRef(null);

<Stopwatch ref={ref} autoStart />
<Stopwatch autoStart color="green" bold />
<Stopwatch format={(ms) => `${(ms / 1000).toFixed(1)}s`} />

ref.current.start(); // Start counting
ref.current.stop(); // Pause
ref.current.toggle(); // Toggle start/stop
ref.current.reset(); // Reset to 00:00 and stop
ref.current.lap(); // Capture current elapsed time

import { Timer } from "@visulima/tui/components/timer";
import { useRef } from "react";

const ref = useRef(null);

<Timer ref={ref} duration={60_000} autoStart />
<Timer duration={300_000} autoStart color="red" onTimeout={() => alert("Done!")} />

ref.current.start(); // Start countdown
ref.current.stop(); // Pause
ref.current.toggle(); // Toggle start/stop
ref.current.reset(); // Reset to original duration and stop

import { ProgressBar } from "@visulima/tui/components/progress-bar";
<ProgressBar percent={0.5} />
<ProgressBar percent={0.75} color="green" left={10} right={5} />
<ProgressBar percent={1} character="▓" rightPad />

<Box>
    <Text>Progress: </Text>
    <ProgressBar percent={0.6} left={10} right={5} color="cyan" />
    <Text> 60%</Text>
</Box>

import { Slider } from "@visulima/tui/components/slider";
<Slider defaultValue={50} onChange={(v) => console.log(v)} />
<Slider defaultValue={22} min={10} max={40} step={1} accentColor="red" width={30} />
<Slider defaultValue={60} orientation="vertical" width={8} />

const [value, setValue] = useState(50);
<Slider value={value} onChange={setValue} />;

import { Box } from "@visulima/tui/components/box";
import { ConsoleOverlay } from "@visulima/tui/components/console-overlay";
<Box flexDirection="column" height="100%">
    <Box flexGrow={1}>{/* main app content */}</Box>
    <ConsoleOverlay dock="bottom" height={6} />
</Box>;

import { ConfirmInput } from "@visulima/tui/components/confirm-input";
import { Text } from "@visulima/tui/components/text";
<Text>Do you want to continue? </Text>
<ConfirmInput
    onConfirm={() => console.log("Confirmed!")}
    onCancel={() => console.log("Cancelled.")}
/>

import { MultiSelect } from "@visulima/tui/components/multi-select";
const options = [
    { label: "TypeScript", value: "ts" },
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "py" },
];

<MultiSelect options={options} onSubmit={(values) => console.log("Selected:", values)} />;

import { TextInput } from "@visulima/tui/components/text-input";
<TextInput placeholder="Enter your name..." onSubmit={(value) => console.log("Name:", value)} />;

<TextInput mask onSubmit={(password) => authenticate(password)} />

<TextInput suggestions={["react", "react-dom", "react-native"]} onSubmit={install} />

import { Textarea } from "@visulima/tui/components/textarea";
<Textarea
    placeholder="Write something..."
    rows={8}
    showLineNumbers
    onChange={(value) => console.log(value)}
    onSubmit={(value) => console.log("Submitted:", value)}
/>;

<Textarea rows={3} maxRows={15} placeholder="Grows from 3 to 15 rows..." />

<Textarea showLineNumbers defaultValue={"function hello() {\n  return 'world';\n}"} rows={5} />

import { SelectInput } from "@visulima/tui/components/select-input";
const items = [
    { label: "TypeScript", value: "ts" },
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "py" },
];

<SelectInput items={items} onSelect={(item) => console.log(item.value)} />;

const items = [
    { label: "Build", value: "build", action: () => runBuild() },
    { label: "Test", value: "test", action: () => runTests() },
    { label: "Deploy", value: "deploy", action: () => deploy() },
];

<SelectInput items={items} initialIndex={0} />;

const items = [
    { label: "Cut", value: "cut" },
    { label: "Copy", value: "copy" },
    { label: "Paste", value: "paste" },
    { isSeparator: true },
    { label: "Select All", value: "selectAll" },
];

<SelectInput items={items} initialIndex={0} />;

{ isSeparator: true, label: "── Advanced ──" }

import type { SelectInputEntry, SelectInputSeparator } from "@visulima/tui/components/select-input";
const items: SelectInputEntry<string>[] = [{ label: "Option A", value: "a" }, { isSeparator: true }, { label: "Option B", value: "b" }];

<SelectInput items={items} onHighlight={(item) => console.log("Browsing:", item.label)} />

const [selectedIndex, setSelectedIndex] = useState(0);

<SelectInput
    items={items}
    index={selectedIndex}
    onHighlight={(item, idx) => setSelectedIndex(idx)}
    onSelect={(item) => console.log("Selected:", item.value)}
/>;

<SelectInput items={longList} limit={5} />

<SelectInput items={items} accentColor="green" defaultColor="gray" />

<Box>
    <SelectInput items={leftItems} initialIndex={0} isFocused={leftActive} />
    <SelectInput items={rightItems} initialIndex={0} isFocused={!leftActive} />
</Box>

import { Box } from "@visulima/tui/components/box";
import { Text } from "@visulima/tui/components/text";
const CustomIndicator = ({ isSelected, isFocused, accentColor }) => (
    <Box marginRight={1}>
        <Text color={isSelected ? accentColor : undefined} dimColor={!isFocused}>
            {isSelected ? "→" : " "}
        </Text>
    </Box>
);

const CustomItem = ({ label, isSelected, isFocused, accentColor, defaultColor }) => (
    <Text bold={isSelected} color={isSelected ? accentColor : defaultColor} dimColor={isSelected && !isFocused}>
        {label}
    </Text>
);

<SelectInput items={items} indicatorComponent={CustomIndicator} itemComponent={CustomItem} />;

import { Tab } from "@visulima/tui/components/tab";
import { Tabs } from "@visulima/tui/components/tabs";
<Tabs onChange={(name, tab) => console.log("Active:", name)}>
    <Tab name="files">Files</Tab>
    <Tab name="search">Search</Tab>
    <Tab name="settings">Settings</Tab>
</Tabs>;

const [active, setActive] = useState("files");

<Tabs value={active} onChange={(name) => setActive(name)}>
    <Tab name="files">Files</Tab>
    <Tab name="search">Search</Tab>
</Tabs>;

<Tabs flexDirection="column" onChange={handleChange}>
    <Tab name="a">Alpha</Tab>
    <Tab name="b">Beta</Tab>
</Tabs>

<Tabs colors={{ activeTab: { color: "cyan", backgroundColor: "white" } }} onChange={handleChange}>
    <Tab name="one">One</Tab>
    <Tab name="two">Two</Tab>
</Tabs>

import { Table } from "@visulima/tui/components/table";

const data = [
    { name: "Alice", age: 30, city: "NYC" },
    { name: "Bob", age: 25, city: "LA" },
];

<Table data={data} />
<Table data={data} borderStyle="rounded" padding={2} />

<Table data={data} columns={[{ key: "name", header: "Full Name", width: 20, align: "left" }, { key: "age", header: "Years", align: "right" }, "city"]} />

<Table data={data} borderStyle="rounded" />
<Table data={data} borderStyle="ascii" />
<Table data={data} borderStyle="none" />

<Table
    data={data}
    formatCell={(value, column, rowIndex) => {
        if (column === "name") return String(value).toUpperCase();
        return String(value ?? "");
    }}
    formatHeader={(column) => column.toUpperCase()}
    skeleton="N/A"
/>

import { Badge } from "@visulima/tui/components/badge";
<Badge>new</Badge>
<Badge color="red">error</Badge>
<Badge color="green">success</Badge>

import { StatusMessage } from "@visulima/tui/components/status-message";
<StatusMessage variant="success">Build completed</StatusMessage>
<StatusMessage variant="error">Connection failed</StatusMessage>
<StatusMessage variant="warning">Disk space low</StatusMessage>
<StatusMessage variant="info">3 updates available</StatusMessage>

import { Alert } from "@visulima/tui/components/alert";
<Alert variant="info">Check the docs for details.</Alert>
<Alert variant="warning" title="Deprecation Notice">
    This API will be removed in v3.
</Alert>

import { UnorderedList } from "@visulima/tui/components/unordered-list";
<UnorderedList items={[{ label: "TypeScript" }, { label: "JavaScript" }, { label: "Python", children: [{ label: "Django" }, { label: "Flask" }] }]} />;

import { OrderedList } from "@visulima/tui/components/ordered-list";
<OrderedList
    items={[
        { label: "Install dependencies" },
        { label: "Configure", children: [{ label: "Create config file" }, { label: "Set environment variables" }] },
        { label: "Deploy" },
    ]}
/>;

import { Box } from "@visulima/tui/components/box";
import { Paginator } from "@visulima/tui/components/paginator";
import { Text } from "@visulima/tui/components/text";
<Paginator items={allItems} pageSize={5}>
    {(pageItems, meta) => (
        <Box flexDirection="column">
            {pageItems.map((item, i) => (
                <Text key={i}>{item}</Text>
            ))}
        </Box>
    )}
</Paginator>;

type PageMeta = {
    currentPage: number;
    totalPages: number;
    startIndex: number;
    endIndex: number;
    isFirstPage: boolean;
    isLastPage: boolean;
};

const [page, setPage] = useState(0);
<Paginator items={data} pageSize={10} page={page} onChange={setPage}>
    {(items) => <MyList items={items} />}
</Paginator>;

import { TreeView } from "@visulima/tui/components/tree-view";
import type { TreeNode } from "@visulima/tui/components/tree-view";
const data: TreeNode[] = [
    {
        id: "src",
        label: "src",
        children: [
            { id: "src/index.ts", label: "index.ts" },
            {
                id: "src/components",
                label: "components",
                children: [{ id: "src/components/App.tsx", label: "App.tsx" }],
            },
        ],
    },
    { id: "package.json", label: "package.json" },
];

<TreeView data={data} defaultExpanded="all" />;

type TreeNode<T = Record<string, unknown>> = {
    id: string; // unique across the whole tree
    label: string; // display text
    data?: T; // arbitrary user data
    children?: TreeNode<T>[]; // child nodes
    isParent?: boolean; // show expand indicator even with no children (for async loading)
};

<TreeView
    data={data}
    defaultExpanded="all"
    renderNode={({ node, state }) => (
        <Box gap={1}>
            <Text dimColor>{"  ".repeat(state.depth)}</Text>
            <Text color={state.isFocused ? "blue" : undefined}>
                {state.hasChildren ? (state.isExpanded ? "📂" : "📁") : "📄"} {node.label}
            </Text>
        </Box>
    )}
/>

const data: TreeNode[] = [{ id: "root", label: "Remote Files", isParent: true }];

<TreeView
    data={data}
    loadChildren={async (node) => {
        const response = await fetch(`/api/files/${node.id}`);
        return response.json();
    }}
    onLoadError={(nodeId, error) => console.error(`Failed to load ${nodeId}:`, error)}
/>;

<TreeView data={largeTree} defaultExpanded="all" visibleNodeCount={15} />

import { useTreeView, useTreeViewState } from "@visulima/tui/components/tree-view";
function CustomTree({ data }) {
    const state = useTreeViewState({ data, selectionMode: "single" });
    useTreeView({ state, selectionMode: "single" });

    return (
        <Box flexDirection="column">
            {state.viewportNodes.map(({ node, state: nodeState }) => (
                <Text key={node.id} color={nodeState.isFocused ? "blue" : undefined}>
                    {"  ".repeat(nodeState.depth)}
                    {nodeState.isExpanded ? "▾" : nodeState.hasChildren ? "▸" : " "} {node.label}
                </Text>
            ))}
        </Box>
    );
}

import { treeViewTheme } from "@visulima/tui/components/tree-view";
// treeViewTheme.styles.label({ isFocused: true, isSelected: false })
// => { color: "blue" }

<Accordion items={[{ id: "one", title: "Section 1", content: <Text>Body</Text> }]} />

<AnimatePresence>
    {visible && (
        <Transition key="banner" preset="slide-down">
            <Text>Saved!</Text>
        </Transition>
    )}
</AnimatePresence>

<ApprovalPrompt tool="bash" risk="high" params={{ cmd: "rm -rf /" }} onDecision={resolve} />

<AreaChart series={[{ name: "load", data: [1, 4, 2, 5, 3] }]} />

<BarChart
    data={[
        { value: 12, label: "Mon" },
        { value: 8, label: "Tue" },
    ]}
/>

<BlinkDot color="green" /> Connected

<Breadcrumb items={[{ label: "Home" }, { label: "Settings" }, { label: "Profile" }]} />

<Button onPress={() => save()} autoFocus>
    Save
</Button>

<Calendar onSubmit={(d) => setDate(d)} autoFocus />

<Canvas width={20} height={5} version={frame} draw={(ctx) => ctx.setCell(0, 0, "█", { color: "cyan" })} />