import { render, Box, Text, useState, useInput, useApp, setTheme, darkTheme } from 'tuiuiu.js';

// ⚠️ IMPORTANT: Set theme BEFORE render() for proper input handling!
setTheme(darkTheme);

function Counter() {
  // useState persists across re-renders (it's a hook!)
  const [count, setCount] = useState(0);
  const { exit } = useApp();

  useInput((char, key) => {
    if (key.upArrow) setCount(c => c + 1);
    if (key.downArrow) setCount(c => c - 1);
    if (key.escape) exit();
  });

  return Box({ flexDirection: 'column', padding: 1, borderStyle: 'round' },
    Text({ color: 'cyan', bold: true }, '🐦 Tuiuiu Counter'),
    Text({ color: 'yellow', marginTop: 1 }, `Count: ${count()}`),
    Text({ color: 'gray', dim: true }, '↑/↓: change • Esc: exit')
  );
}

const { waitUntilExit } = render(Counter);
await waitUntilExit();

import {
  createWorkerExecutor,
  useApp,
} from 'tuiuiu.js';

const workerExecutor = createWorkerExecutor('./workers/task-runner.mjs', {
  workerName: 'app-task-runner',
});

const task = workerExecutor.submit({
  type: 'analyze',
  payload: { text: promptValue() },
});

const app = useApp();
task.subscribe((event) => {
  if (event.kind === 'progress') {
    app.enqueueExternalUpdate?.(() => {
      setStatus(String((event.payload as { status?: string }).status ?? 'working'));
    });
  }
});

const result = await task.result;
if (result.status === 'resolved') {
  setOutput(result.value);
} else if (result.status === 'rejected') {
  showError(result.error.message);
} else {
  showStatus(result.reason ?? 'cancelled');
}

task.cancel('superseded');
await workerExecutor.destroy();

import {
  createTaskBridge,
  createThreadBus,
} from 'tuiuiu.js';

const bridges = {
  analyzer: createTaskBridge('./workers/analyzer.mjs'),
  indexer: createTaskBridge('./workers/indexer.mjs'),
};

const bus = createThreadBus({ threads: bridges });

import { createTaskBridgePool } from 'tuiuiu.js';

const analyzerPool = createTaskBridgePool({
  modulePath: './workers/analyzer.mjs',
  poolSize: 4,
  scheduler: 'least-pending',
});

const handle = analyzerPool.submit({
  type: 'analyze',
  payload: { text: '...' },
});

import {
  createTaskBridge,
  createThreadBus,
} from 'tuiuiu.js';

const indexerBridge = createTaskBridge('./workers/indexer.mjs');
const bus = createThreadBus({
  threads: {
    analyzer: analyzerPool,
    indexer: indexerBridge,
  },
});

bus.subscribe((event) => {
  if (event.to === 'main') {
    console.log('main got:', event.type, event.payload);
  }
});

await analyzerPool.destroy();
await indexerBridge.destroy();
await bus.destroy();

import { createSignal, createEffect } from 'tuiuiu.js';

// createSignal at module level = shared/global state
const [count, setCount] = createSignal(0);
const doubled = () => count() * 2;

createEffect(() => console.log(`Count: ${count()}, Doubled: ${doubled()}`));

setCount(5); // → "Count: 5, Doubled: 10"

Box({
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: 2,
  padding: 1
},
  Text({ color: 'blue' }, 'Left'),
  Box({ flexGrow: 1 }),
  Text({ color: 'red' }, 'Right')
)

import { Select, Modal, DataTable, CommandPalette } from 'tuiuiu.js';

// Dropdown select
Select({
  items: [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
  ],
  onSelect: (item) => console.log(item)
});

// Command palette (⌘K style)
CommandPalette({
  commands: [
    { id: 'new', label: 'New File', shortcut: 'Ctrl+N' },
    { id: 'open', label: 'Open File', shortcut: 'Ctrl+O' },
  ],
  onSelect: (cmd) => handleCommand(cmd)
});

Box({
  borderStyle: 'round',
  onClick: () => console.log('Clicked!'),
  onMouseEnter: () => setHover(true),
  onMouseLeave: () => setHover(false),
  onScroll: (delta) => scrollBy(delta),
},
  Text({}, hover() ? '🔥 Hovering!' : 'Hover me')
)

import { BarChart, Sparkline, Gauge } from 'tuiuiu.js';

BarChart({
  data: [
    { label: 'Mon', value: 10 },
    { label: 'Tue', value: 25 },
    { label: 'Wed', value: 15 },
  ],
  color: 'cyan',
  showValues: true
});

Sparkline({ data: [1, 5, 2, 8, 3, 9], width: 20, style: 'braille' });

Gauge({ value: 75, max: 100, label: 'CPU', color: 'green' });

import { red, bold, compose, c, tpl } from 'tuiuiu.js/colors';

// Simple functions
console.log(red('Error!'));
console.log(bold('Important'));

// Composition
const errorStyle = compose(red, bold);
console.log(errorStyle('Critical failure!'));

// Chainable API
console.log(c.red.bold('Critical!'));
console.log(c.bgBlue.white('Info'));
console.log(c.hex('#ff6600')('Orange'));

// Template literal
console.log(tpl`{red Error:} Something went wrong`);

// Theme-aware colors
import { theme, tw } from 'tuiuiu.js/colors';
console.log(theme.primary('Action'));
console.log(tw.blue[500]('Tailwind Blue'));

// Import everything (convenient for development)
import { Box, Button, Modal } from 'tuiuiu.js';

// Import by layer (optimized bundles)
import { Box, Text } from 'tuiuiu.js/primitives';
import { Button, Spinner } from 'tuiuiu.js/atoms';
import { Select, Table } from 'tuiuiu.js/molecules';
import { Modal, DataTable } from 'tuiuiu.js/organisms';
import { AppShell, Page } from 'tuiuiu.js/templates';

// Core systems
import { createSignal, createEffect } from 'tuiuiu.js/core';
import { useState, useInput, useMouse } from 'tuiuiu.js/hooks';
import { render, renderOnce } from 'tuiuiu.js/app';

// Utilities & extras
import { measureText, getVisibleWidth } from 'tuiuiu.js/utils';
import { BarChart, Gauge } from 'tuiuiu.js/design-system';

import { createStore } from 'tuiuiu.js';

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
};

const store = createStore(reducer, { count: 0 });

store.subscribe(() => console.log(store.state()));
store.dispatch({ type: 'INCREMENT' });