import { createFileRoute } from "@tanstack/react-router";
import { deleteWebhook, listWebhooks, redeliverWebhook, saveWebhook } from "~/fns/settings";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const HTTP_OK_MAX = 300;

export const Route = createFileRoute("/$owner/$repo/settings/webhooks")({
  loader: ({ params }) => listWebhooks({ data: { owner: params.owner, repo: params.repo } }),
  component: WebhooksPage,
});

function WebhooksPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(saveWebhook);
  const remove = useAction(deleteWebhook);
  const redeliver = useAction(redeliverWebhook);

  return (
    <>
      <Panel title="Add webhook">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const form = new FormData(element);
            const events = data.availableEvents.filter((name) => form.get(`event-${name}`) === "on");
            const secret = String(form.get("secret") ?? "").trim();
            const ok = await save.run({
              data: {
                ...params,
                id: null,
                url: String(form.get("url") ?? ""),
                secret: secret || null,
                events: events.length ? events : ["push"],
                active: true,
              },
            });
            if (ok) element.reset();
          }}
        >
          <ErrorBanner message={save.error} />
          <TextField
            label="Payload URL"
            name="url"
            type="url"
            required
            placeholder="https://example.com/hooks/gitfor"
          />
          <TextField label="Secret" name="secret" hint="Signs payloads with X-Gitfor-Signature-256 (HMAC SHA-256)" />
          <fieldset className="grid grid-cols-2 gap-1.5 md:grid-cols-3">
            <legend className="mb-1 text-sm font-medium text-kumo-default">Events</legend>
            {data.availableEvents.map((name) => (
              <label key={name} className="flex items-center gap-2 text-sm text-kumo-default">
                <input
                  type="checkbox"
                  name={`event-${name}`}
                  defaultChecked={name === "push"}
                  className="accent-accent-500"
                />
                {name}
              </label>
            ))}
          </fieldset>
          <Button type="submit" variant="primary" pending={save.pending}>
            Add webhook
          </Button>
        </form>
      </Panel>
      {data.hooks.length === 0 ? (
        <Panel>
          <EmptyState title="No webhooks" icon="webhook" />
        </Panel>
      ) : (
        data.hooks.map((hook) => (
          <Panel
            key={hook.id}
            title={<span className="font-mono text-xs">{hook.url}</span>}
            actions={
              <Button size="sm" variant="danger" onClick={() => remove.run({ data: { ...params, id: hook.id } })}>
                Delete
              </Button>
            }
          >
            <div className="flex flex-wrap gap-1.5 px-4 pt-3">
              {hook.events.map((name) => (
                <Badge key={name}>{name}</Badge>
              ))}
              {hook.hasSecret && <Badge tone="success">signed</Badge>}
            </div>
            <ul className="divide-y divide-kumo-hairline p-2">
              {hook.deliveries.length === 0 && (
                <li className="px-2 py-2 text-xs text-kumo-subtle">No deliveries yet</li>
              )}
              {hook.deliveries.map((delivery) => (
                <li key={delivery.id} className="flex items-center gap-3 px-2 py-1.5 text-xs">
                  <Badge tone={delivery.status_code && delivery.status_code < HTTP_OK_MAX ? "success" : "danger"}>
                    {delivery.status_code ?? "error"}
                  </Badge>
                  <span className="text-kumo-default">{delivery.event}</span>
                  <span className="truncate text-kumo-subtle">{delivery.error}</span>
                  <span className="ml-auto text-kumo-subtle">
                    {delivery.duration_ms}ms · <RelativeTime timestamp={delivery.created_at} />
                  </span>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => redeliver.run({ data: { ...params, deliveryId: delivery.id } })}
                  >
                    Redeliver
                  </Button>
                </li>
              ))}
            </ul>
          </Panel>
        ))
      )}
    </>
  );
}