import { Link } from "@tanstack/react-router";
import { deleteRelease, deleteReleaseAsset, updateRelease } from "~/fns/releases";
import { useAction } from "~/hooks/use-action";
import { useReleaseAssetUpload } from "~/hooks/use-release-asset-upload";
import { Badge } from "~/ui/Badge";
import { formatBytes } from "~/lib/format";
import { Markdown } from "~/ui/Markdown";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import type { listReleases } from "~/fns/releases";
import { ExternalLink } from "~/ui/TextLink";

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

function AssetUpload({ owner, repo, releaseId }: { owner: string; repo: string; releaseId: string }) {
  const { upload, pending, error } = useReleaseAssetUpload(owner, repo, releaseId);
  return (
    <label className="inline-flex cursor-pointer items-center gap-2 text-xs text-accent-400 hover:underline">
      {pending ? "Uploading…" : "Upload asset"}
      <input
        type="file"
        className="sr-only"
        onChange={(event) => {
          const file = event.target.files?.[0];
          if (file) void upload(file);
        }}
      />
      {error && <span className="text-kumo-danger">{error}</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="warning">Draft</Badge>}
          {release.prerelease && <Badge tone="warning">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-kumo-subtle">
          {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-small mb-2 text-kumo-subtle">Assets</h3>
          <ul className="divide-y divide-kumo-hairline rounded-md border border-kumo-hairline">
            {release.assets.map((asset) => (
              <li key={asset.id} className="flex items-center gap-3 px-3 py-2 text-sm">
                <ExternalLink
                  href={`/${owner}/${repo}/releases/download/${encodeURIComponent(release.tag)}/${encodeURIComponent(asset.name)}`}
                >
                  {asset.name}
                </ExternalLink>
                <span className="ml-auto text-xs text-kumo-subtle">
                  {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">
              <ExternalLink href={`/${owner}/${repo}/archive/${release.tag}.tar.gz`} tone="subtle">
                Source code (tar.gz)
              </ExternalLink>
              {canWrite && (
                <span className="ml-auto">
                  <AssetUpload owner={owner} repo={repo} releaseId={release.id} />
                </span>
              )}
            </li>
          </ul>
        </div>
      </div>
    </Panel>
  );
}