gitfor/platform

import { useState } from "react";
import { compactInputClass } from "~/ui/Field";
import { adminResumeHosting, adminSuspendHosting } from "~/fns/admin";
import type { getAdminOverview } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";

type Hosting = Awaited<ReturnType<typeof getAdminOverview>>["hosting"];

/** Suspend or resume every Site of an account, and see whether the daily ceiling tripped. */
export function HostingControls({ hosting }: { hosting: Hosting }) {
  const [name, setName] = useState("");
  const suspend = useAction(adminSuspendHosting);
  const resume = useAction(adminResumeHosting);
  return (
    <Panel title="Hosting">
      <div className="space-y-3 p-4 text-sm">
        {hosting.ceilingHit && (
          <Callout tone="danger">Dynamic sites hit today's platform ceiling and answer 503 until midnight UTC.</Callout>
        )}
        <ErrorBanner message={suspend.error ?? resume.error} />
        <form
          className="flex flex-wrap items-center gap-2"
          onSubmit={async (event) => {
            event.preventDefault();
            if (!name.trim() || !window.confirm(`Stop every site of ${name}?`)) return;
            await suspend.run({ data: { name: name.trim() } });
            setName("");
          }}
        >
          <input
            aria-label="Account name"
            className={compactInputClass()}
            placeholder="account name"
            value={name}