import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import {
  changeAdvisoryState,
  commentOnAdvisory,
  editAdvisory,
  getAdvisory,
  updateAdvisoryCollaborator,
} from "~/fns/advisories";
import { useAction } from "~/hooks/use-action";
import { AdvisoryForm } from "~/components/security/AdvisoryForm";
import type { AdvisoryValues } from "~/components/security/AdvisoryForm";
import { SeverityBadge } from "~/components/security/SeverityBadge";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { Markdown } from "~/ui/Markdown";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/security/advisories/$ghsaId")({
  loader: ({ params }) => getAdvisory({ data: { owner: params.owner, repo: params.repo, ghsaId: params.ghsaId } }),
  component: AdvisoryPage,
});

type Advisory = Awaited<ReturnType<typeof getAdvisory>>;

const NEXT_STATES = {
  triage: [
    { state: "draft", label: "Accept as draft" },
    { state: "closed", label: "Close report" },
  ],
  draft: [
    { state: "published", label: "Publish advisory" },
    { state: "closed", label: "Close" },
  ],
  published: [{ state: "closed", label: "Withdraw" }],
  closed: [{ state: "draft", label: "Reopen as draft" }],
} as const;

const ECOSYSTEMS = new Set(["npm", "pip", "go", "cargo", "rubygems", "composer", "other"] as const);

function ecosystemValue(value: string | null): AdvisoryValues["ecosystem"] {
  for (const candidate of ECOSYSTEMS) if (candidate === value) return candidate;
  return null;
}

function toValues(advisory: Advisory): AdvisoryValues {
  return {
    title: advisory.title,
    description: advisory.description,
    severity: advisory.severity,
    cveId: advisory.cveId,
    cweIds: advisory.cweIds,
    ecosystem: ecosystemValue(advisory.ecosystem),
    packageName: advisory.packageName,
    affectedVersions: advisory.affectedVersions,
    patchedVersions: advisory.patchedVersions,
  };
}

function Details({ advisory }: { advisory: Advisory }) {
  const rows: Array<[string, string | null]> = [
    ["Package", advisory.packageName ? `${advisory.ecosystem ?? "other"} / ${advisory.packageName}` : null],
    ["Affected versions", advisory.affectedVersions],
    ["Patched versions", advisory.patchedVersions],
    ["CVE", advisory.cveId],
    ["CWE", advisory.cweIds],
  ];
  return (
    <dl className="grid gap-x-6 gap-y-2 p-4 text-sm sm:grid-cols-[160px_1fr]">
      {rows.map(([label, value]) => (
        <div key={label} className="contents">
          <dt className="text-kumo-subtle">{label}</dt>
          <dd className="font-mono text-kumo-default">{value ?? "—"}</dd>
        </div>
      ))}
    </dl>
  );
}

function Collaborators({ advisory }: { advisory: Advisory }) {
  const params = Route.useParams();
  const update = useAction(updateAdvisoryCollaborator);
  return (
    <Panel title="Collaborators">
      <div className="space-y-3 p-4">
        <p className="text-xs text-kumo-subtle">
          Invited people can read this private advisory and join the discussion.
        </p>
        <ErrorBanner message={update.error} />
        <ul className="space-y-1">
          {advisory.collaborators.map((name) => (
            <li key={name} className="flex items-center gap-2 text-sm text-kumo-default">
              <Avatar name={name} size="sm" />
              <span className="flex-1">{name}</span>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => update.run({ data: { ...params, username: name, add: false } })}
              >
                Remove
              </Button>
            </li>
          ))}
        </ul>
        <form
          className="flex items-end gap-2"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const username = String(new FormData(element).get("username") ?? "").trim();
            if (await update.run({ data: { ...params, username, add: true } })) element.reset();
          }}
        >
          <div className="flex-1">
            <TextField label="Add collaborator" name="username" placeholder="username" required />
          </div>
          <Button type="submit" pending={update.pending}>
            Add
          </Button>
        </form>
      </div>
    </Panel>
  );
}

function Discussion({ advisory }: { advisory: Advisory }) {
  const params = Route.useParams();
  const comment = useAction(commentOnAdvisory);
  const [body, setBody] = useState("");
  return (
    <Panel title="Private discussion">
      <ul className="divide-y divide-kumo-hairline">
        {advisory.comments.map((item) => (
          <li key={item.id} className="space-y-2 px-4 py-3">
            <div className="flex items-center gap-2 text-xs text-kumo-subtle">
              <Avatar name={item.author ?? "ghost"} size="sm" />
              <span className="font-medium text-kumo-default">{item.author ?? "ghost"}</span>
              <RelativeTime timestamp={item.createdAt} />
            </div>
            <Markdown html={item.html} />
          </li>
        ))}
      </ul>
      {advisory.canComment && (
        <form
          className="space-y-2 border-t border-kumo-hairline p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            if (await comment.run({ data: { ...params, body } })) setBody("");
          }}
        >
          <ErrorBanner message={comment.error} />
          <MarkdownEditor value={body} onChange={setBody} owner={params.owner} repo={params.repo} />
          <Button type="submit" variant="primary" pending={comment.pending} disabled={!body.trim()}>
            Comment
          </Button>
        </form>
      )}
    </Panel>
  );
}

function AdvisoryPage() {
  const advisory = Route.useLoaderData();
  const params = Route.useParams();
  const [editing, setEditing] = useState(false);
  const edit = useAction(editAdvisory);
  const transition = useAction(changeAdvisoryState);
  const isPrivate = advisory.state !== "published";

  return (
    <>
      <div className="space-y-2">
        <div className="flex flex-wrap items-center gap-2">
          <Heading>{advisory.title}</Heading>
          <SeverityBadge severity={advisory.severity} />
          <Badge tone={isPrivate ? "warning" : "success"}>{advisory.state}</Badge>
        </div>
        <p className="text-xs text-kumo-subtle">
          <span className="font-mono">{advisory.ghsaId}</span> · {advisory.source === "report" ? "reported" : "opened"}{" "}
          by {advisory.author ?? "ghost"} <RelativeTime timestamp={advisory.createdAt} />
          {advisory.publishedAt && (
            <>
              {" "}
              · published <RelativeTime timestamp={advisory.publishedAt} />
            </>
          )}
        </p>
      </div>
      {advisory.canManage && (
        <div className="flex flex-wrap gap-2">
          {NEXT_STATES[advisory.state].map((next) => (
            <Button
              key={next.state}
              size="sm"
              variant={next.state === "published" ? "primary" : next.state === "closed" ? "danger" : "secondary"}
              pending={transition.pending}
              onClick={() => transition.run({ data: { ...params, state: next.state } })}
            >
              {next.label}
            </Button>
          ))}
          <Button size="sm" variant="ghost" onClick={() => setEditing((value) => !value)}>
            {editing ? "Cancel editing" : "Edit"}
          </Button>
        </div>
      )}
      <ErrorBanner message={transition.error} />
      {editing ? (
        <Panel title="Edit advisory">
          <AdvisoryForm
            owner={params.owner}
            repo={params.repo}
            initial={toValues(advisory)}
            submitLabel="Save changes"
            pending={edit.pending}
            error={edit.error}
            onSubmit={async (values) => {
              if (await edit.run({ data: { ...params, advisory: values } })) setEditing(false);
            }}
          />
        </Panel>
      ) : (
        <>
          <Panel title="Affected products">
            <Details advisory={advisory} />
          </Panel>
          <Panel title="Description">
            <Markdown html={advisory.descriptionHtml} className="p-5" />
          </Panel>
        </>
      )}
      {(isPrivate || advisory.canManage) && <Discussion advisory={advisory} />}
      {advisory.canManage && isPrivate && <Collaborators advisory={advisory} />}
    </>
  );
}