import { useState } from "react";
import { adminDisable, adminEnable } from "~/fns/admin";
import type { getAdminOverview } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { 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 Accounts = Awaited<ReturnType<typeof getAdminOverview>>["disabledAccounts"];

const REASON_LABELS: Record<string, string> = { payment_dispute: "payment dispute", admin: "admin" };
const INPUT = "rounded-md border border-kumo-line bg-kumo-base px-2 py-1 text-kumo-strong";

/** Disabled accounts with their reason, plus disable (with a note) and re-enable. */
export function DisabledAccounts({ accounts }: { accounts: Accounts }) {
  const [name, setName] = useState("");
  const [note, setNote] = useState("");
  const disable = useAction(adminDisable);
  const enable = useAction(adminEnable);
  return (
    <Panel title="Disabled accounts">
      <div className="space-y-3 p-4 text-sm">
        <ErrorBanner message={disable.error ?? enable.error} />
        <form
          className="flex flex-wrap items-center gap-2"
          onSubmit={async (event) => {
            event.preventDefault();
            const target = name.trim();
            if (!target || !window.confirm(`Disable ${target}? Sign-in, tokens, billing and hosting all stop.`)) return;
            await disable.run({ data: { name: target, note: note.trim() || null } });
            setName("");
            setNote("");
          }}
        >
          <input
            aria-label="Account name"
            className={INPUT}
            placeholder="account name"
            value={name}
            onChange={(event) => setName(event.target.value)}
          />
          <input
            aria-label="Note"
            className={INPUT}
            placeholder="note (optional)"
            maxLength={500}
            value={note}
            onChange={(event) => setNote(event.target.value)}
          />
          <Button type="submit" variant="danger" size="sm" pending={disable.pending}>
            Disable account
          </Button>
        </form>
        {accounts.length === 0 ? (
          <EmptyState title="No accounts are disabled" icon="server" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {accounts.map((row) => (
              <li key={row.id} className="flex flex-wrap items-center gap-3 py-2">
                <TextLink to="/$owner" params={{ owner: row.name }}>
                  {row.name}
                </TextLink>
                <span className="text-kumo-subtle">{REASON_LABELS[row.reason] ?? row.reason}</span>
                <span className="text-kumo-subtle">
                  <RelativeTime timestamp={row.disabledAt} />
                </span>
                {row.note && <span className="text-kumo-subtle">{row.note}</span>}
                <Button
                  className="ml-auto"
                  size="sm"
                  pending={enable.pending}
                  onClick={() => {
                    if (window.confirm(`Re-enable ${row.name}? Hosting resumes; subscriptions stay cancelled.`)) {
                      void enable.run({ data: { accountId: row.id } });
                    }
                  }}
                >
                  Re-enable
                </Button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </Panel>
  );
}