import { useTerminalDimensions } from "@opentui/react";
import MCP from "./tabs/MCP";
import { theme } from "./lib/theme";

export function App() {
  const { width, height } = useTerminalDimensions();

  return (
    <box
      width={width}
      height={height}
      bg={theme.bg}
      fg={theme.fg}
      flexDirection="column"
    >
      {/* header bar */}
      <box height={1} bg={theme.card} paddingX={1}>
        <text bold fg={theme.accent}>zo-tui</text>
        <text fg={theme.fgMuted}>  —  </text>
        <text fg={theme.fgDim} dim>Zo MCP Terminal UI</text>
        <text right fg={theme.fgMuted} dim>api.zo.computer/mcp</text>
      </box>

      {/* status bar */}
      <box height={1} bg={theme.card} paddingX={1}>
        <text fg={theme.fgMuted} dim>↑↓ navigate · Enter select · Esc back · ZO_CLIENT_IDENTITY_TOKEN</text>
        <text right fg={theme.fgMuted} dim>{width}×{height}</text>
      </box>

      {/* main content */}
      <box flexGrow={1} flexDirection="column">
        <MCP />
      </box>
    </box>
  );
}
