import { Box, Text } from "ink";
import { Spinner } from "@inkjs/ui";
import pkg from "../../package.json" with { type: "json" };
import { Banner } from "./banner";

export interface ServiceStatus {
  name: string;
  status: "pending" | "ready";
  port: number;
}

interface HeaderProps {
  services: ServiceStatus[];
  migrationsStatus: "pending" | "done";
  home: string;
  serverUrl: string | null;
}

function StatusIndicator({ status }: { status: "pending" | "ready" | "done" }) {
  if (status === "pending") {
    return <Spinner label="" />;
  }
  return <Text color="green">{"✓"}</Text>;
}

export function formatServiceLabel(svc: ServiceStatus): string {
  return `${svc.name}: ${svc.port || "...."}`;
}

export function Header({
  services,
  migrationsStatus,
  home,
  serverUrl,
}: HeaderProps) {
  return (
    <Box flexDirection="column" paddingBottom={1}>
      <Banner version={pkg.version} />

      <Box marginBottom={1}>
        <Text dimColor>{"─".repeat(80)}</Text>
      </Box>

      <Box>
        <Text dimColor>Home: {home}</Text>
      </Box>

      <Box gap={2}>
        {services.map((svc) => (
          <Box key={svc.name} gap={1}>
            <Text>{formatServiceLabel(svc)}</Text>
            <StatusIndicator status={svc.status} />
          </Box>
        ))}
        <Box gap={1}>
          <Text>Migrations</Text>
          <StatusIndicator status={migrationsStatus} />
        </Box>
      </Box>

      <Box>
        {serverUrl ? (
          <Text>
            Open in browser: <Text color="cyan">{serverUrl}</Text>
          </Text>
        ) : (
          <Text dimColor>Starting...</Text>
        )}
      </Box>
    </Box>
  );
}
