import type { listAccountContainers } from "~/fns/containers";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { cn } from "~/utils/cn";
import { TextLink } from "~/ui/TextLink";
import { ProgressTrack, quotaTone } from "~/ui/ProgressTrack";

type Overview = Awaited<ReturnType<typeof listAccountContainers>>;
type Session = Overview["sessions"][number];
type Usage = NonNullable<Overview["usage"]>;

const SECONDS_PER_MINUTE = 60;
const FULL_PERCENT = 100;
const STOP_LABELS: Record<string, string> = {
  idle: "slept after idling",
  cap: "hit the session cap",
  quota: "hit the monthly quota",
  exited: "exited",
  restarted: "restarted",
  failed: "failed to start",
  stopped: "stopped",
  "stopped by admin": "stopped by an admin",
};

function minutesLabel(minutes: number): string {
  return minutes < 1 ? "<1 min" : `${Math.round(minutes)} min`;
}

export function ContainerUsageBar({ usage }: { usage: Usage }) {
  const quota = usage.hardCapSeconds ?? usage.includedSeconds;
  const used = Math.round(usage.usedSeconds / SECONDS_PER_MINUTE);
  const percent = quota > 0 ? Math.min(FULL_PERCENT, (usage.usedSeconds / quota) * FULL_PERCENT) : 0;
  return (
    <div className="space-y-1.5 px-4 py-3">
      <div className="flex items-baseline justify-between text-sm">
        <span className="text-kumo-default">Container minutes this month</span>
        <span className="text-kumo-subtle">
          {used} / {Math.round(quota / SECONDS_PER_MINUTE)} min
          {usage.hardCapSeconds === null && <span className="text-kumo-subtle"> included, overage billed</span>}
        </span>
      </div>
      <ProgressTrack percent={percent} tone={quotaTone(percent)} />
    </div>
  );
}

function SessionRow({
  session,
  showAccount,
  canStop,
  pending,
  onStop,
}: {
  session: Session;
  showAccount: boolean;
  canStop: boolean;
  pending: boolean;
  onStop: (id: string) => void;
}) {
  const running = session.stoppedAt === null;
  return (
    <li className="flex flex-wrap items-center gap-3 px-4 py-2.5" data-session={session.id}>
      <span
        aria-hidden
        className={cn("size-2 rounded-full", running ? "bg-success-500 animate-pulse" : "bg-gray-600")}
      />
      <span className="text-sm text-kumo-strong">
        {session.repoOwner && session.repoName ? (
          <TextLink to="/$owner/$repo" params={{ owner: session.repoOwner, repo: session.repoName }}>
            {session.repoOwner}/{session.repoName}
          </TextLink>
        ) : (
          <span className="text-kumo-subtle">deleted repository</span>
        )}
        <span className="text-kumo-subtle"> @ </span>
        <code className="font-mono text-xs text-accent-300">{session.branch}</code>
      </span>
      {showAccount && session.accountName && <Badge>{session.accountName}</Badge>}
      <Badge tone={running ? "success" : undefined}>
        {running ? "running" : (STOP_LABELS[session.stopReason ?? ""] ?? "stopped")}
      </Badge>
      <span className="text-xs text-kumo-subtle">
        started <RelativeTime timestamp={session.startedAt} />
      </span>
      {running && session.lastActivity !== null && (
        <span className="text-xs text-kumo-subtle">
          idle since <RelativeTime timestamp={session.lastActivity} />
        </span>
      )}
      <span className="ml-auto text-xs text-kumo-subtle">{minutesLabel(session.minutes)}</span>
      {running && canStop && (
        <Button size="sm" variant="danger" pending={pending} onClick={() => onStop(session.id)}>
          Stop
        </Button>
      )}
    </li>
  );
}

type Props = {
  overview: Overview | Omit<Overview, "account">;
  showAccount?: boolean;
  canStop: boolean;
  error: string | null;
  pending: boolean;
  onStop: (sessionId: string) => void;
};

/** Running and recent editor containers for one account or one repository, with Stop for admins. */
export function ContainerSessionList({ overview, showAccount = false, canStop, error, pending, onStop }: Props) {
  const running = overview.sessions.filter((session) => session.stoppedAt === null);
  const recent = overview.sessions.filter((session) => session.stoppedAt !== null);
  return (
    <div className="space-y-4">
      {!overview.enabled && (
        <p className="text-sm text-kumo-warning">Containers aren't enabled on this forge; nothing new can start.</p>
      )}
      {overview.enabled && !overview.allowed && (
        <p className="text-sm text-kumo-subtle" data-testid="containers-paid-only">
          Editor containers are available on paid plans. Upgrade on the{" "}
          <TextLink to="/settings/billing">billing page</TextLink> to run a terminal, tasks and port previews against a
          branch.
        </p>
      )}
      {overview.usage && (
        <Panel title="Usage">
          <ContainerUsageBar usage={overview.usage} />
        </Panel>
      )}
      <Panel title={`Running containers (${running.length})`}>
        <ErrorBanner message={error} />
        {running.length === 0 && !overview.allowed ? (
          <EmptyState title="No containers" icon="box">
            Available on paid plans.
          </EmptyState>
        ) : running.length === 0 ? (
          <EmptyState title="No containers running" icon="box">
            Containers sleep after {overview.idleMinutes} idle minutes and stop after {overview.capHours} hours.
          </EmptyState>
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {running.map((session) => (
              <SessionRow
                key={session.id}
                session={session}
                showAccount={showAccount}
                canStop={canStop}
                pending={pending}
                onStop={onStop}
              />
            ))}
          </ul>
        )}
      </Panel>
      <Panel title="Recent containers">
        {recent.length === 0 ? (
          <EmptyState title="No recent containers" icon="box" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {recent.map((session) => (
              <SessionRow
                key={session.id}
                session={session}
                showAccount={showAccount}
                canStop={false}
                pending={false}
                onStop={onStop}
              />
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}