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}
            onChange={(event) => setName(event.target.value)}
          />
          <Button type="submit" variant="danger" size="sm" pending={suspend.pending}>
            Suspend hosting
          </Button>
        </form>
        {hosting.suspensions.length === 0 ? (
          <EmptyState title="No accounts have hosting suspended" icon="server" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {hosting.suspensions.map((row) => (
              <li key={row.accountId} className="flex items-center gap-3 py-2">
                <TextLink to="/$owner" params={{ owner: row.name }}>
                  {row.name}
                </TextLink>
                <span className="text-kumo-subtle">
                  suspended <RelativeTime timestamp={row.suspendedAt} />
                </span>
                <Button
                  className="ml-auto"
                  size="sm"
                  pending={resume.pending}
                  onClick={() => void resume.run({ data: { accountId: row.accountId } })}
                >
                  Resume
                </Button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </Panel>
  );
}