import { Link, useRouter } from "@tanstack/react-router";
import { useState } from "react";
import { deleteRelease, deleteReleaseAsset, updateRelease } from "~/fns/releases";
import { useAction } from "~/hooks/use-action";
import { Badge, formatBytes, Markdown, Panel, RelativeTime } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { ErrorBanner } from "./ui/Field";
import type { listReleases } from "~/fns/releases";

type Release = Awaited<ReturnType<typeof listReleases>>["releases"][number];

function AssetUpload({ owner, repo, releaseId }: { owner: string; repo: string; releaseId: string }) {
  const router = useRouter();
  const [state, setState] = useState<{ status: "idle" | "uploading" } | { status: "error"; message: string }>({
    status: "idle",
  });
  return (
    <label className="inline-flex cursor-pointer items-center gap-2 text-xs text-accent-400 hover:underline">
      {state.status === "uploading" ? "Uploading…" : "Upload asset"}
      <input
        type="file"
        className="sr-only"
        onChange={async (event) => {
          const file = event.target.files?.[0];
          if (!file) return;
          setState({ status: "uploading" });
          const response = await fetch(
            `/${owner}/${repo}/releases/${releaseId}/assets?name=${encodeURIComponent(file.name)}`,
            {
              method: "POST",
              headers: { "x-gitfor-csrf": "1", "content-type": file.type || "application/octet-stream" },
              body: file,
            },
          );
          if (!response.ok) setState({ status: "error", message: await response.text() });
          else {
            setState({ status: "idle" });
            await router.invalidate();
          }
        }}
      />
      {state.status === "error" && <span className="text-red-400">{state.message}</span>}
    </label>
  );
}

export function ReleaseCard({
  owner,
  repo,
  release,
  canWrite,
}: {
  owner: string;
  repo: string;
  release: Release;
  canWrite: boolean;
}) {
  const publish = useAction(updateRelease);
  const remove = useAction(deleteRelease);
  const removeAsset = useAction(deleteReleaseAsset);
  return (
    <Panel
      title={
        <div className="flex flex-wrap items-center gap-2">
          <Link
            to="/$owner/$repo/releases"
            params={{ owner, repo }}
            search={{ tag: release.tag }}
            className="text-lg font-semibold text-white hover:text-accent-400"
          >
            {release.name}
          </Link>
          {release.draft && <Badge tone="amber">Draft</Badge>}
          {release.prerelease && <Badge tone="accent">Pre-release</Badge>}
          <Badge className="font-mono">{release.tag}</Badge>
        </div>
      }
      actions={
        canWrite && (
          <>
            {release.draft && (
              <Button
                size="sm"
                variant="primary"
                pending={publish.pending}
                onClick={() =>
                  publish.run({
                    data: {
                      owner,
                      repo,
                      id: release.id,
                      name: release.name,
                      body: release.body,
                      draft: false,
                      prerelease: release.prerelease,
                    },
                  })
                }
              >
                Publish
              </Button>
            )}
            <Button
              size="sm"
              variant="danger"
              pending={remove.pending}
              onClick={() =>
                window.confirm(`Delete release ${release.name}?`) &&
                remove.run({ data: { owner, repo, id: release.id, deleteTag: false } })
              }
            >
              Delete
            </Button>
          </>
        )
      }
    >
      <div className="space-y-4 p-5">
        <ErrorBanner message={publish.error ?? remove.error} />
        <p className="text-xs text-gray-500">
          {release.author.name} released <RelativeTime timestamp={release.publishedAt ?? release.createdAt} /> ·{" "}
          {release.targetSha.slice(0, 7)}
        </p>
        {release.body.trim() && <Markdown html={release.html} />}
        <div>
          <h3 className="label-caps mb-2 text-gray-500">Assets</h3>
          <ul className="divide-y divide-gray-800 rounded-md border border-gray-800">
            {release.assets.map((asset) => (
              <li key={asset.id} className="flex items-center gap-3 px-3 py-2 text-sm">
                <a
                  href={`/${owner}/${repo}/releases/download/${encodeURIComponent(release.tag)}/${encodeURIComponent(asset.name)}`}
                  className="text-accent-400 hover:underline"
                >
                  {asset.name}
                </a>
                <span className="ml-auto text-xs text-gray-500">
                  {formatBytes(asset.size)} · {asset.download_count} downloads
                </span>
                {canWrite && (
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => removeAsset.run({ data: { owner, repo, id: asset.id } })}
                  >
                    ✕
                  </Button>
                )}
              </li>
            ))}
            <li className="flex gap-4 px-3 py-2 text-sm">
              <a href={`/${owner}/${repo}/archive/${release.tag}.tar.gz`} className="text-gray-300 hover:underline">
                Source code (tar.gz)
              </a>
              {canWrite && (
                <span className="ml-auto">
                  <AssetUpload owner={owner} repo={repo} releaseId={release.id} />
                </span>
              )}
            </li>
          </ul>
        </div>
      </div>
    </Panel>
  );
}