import { useState } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import { listTransferTargets, setIssuePinned, setIssuePlanning, setSubIssue, transferIssueTo } from "~/fns/planning";
import { convertIssueToDiscussion } from "~/fns/discussion-admin";
import { useAction } from "~/hooks/use-action";
import type { getIssuePlanning } from "~/fns/planning";
import { ProgressBar } from "./ProgressBar";
import { Button } from "~/ui/Button";
import { InlineSelect, inputClass } from "~/ui/Field";
import { LabelChip } from "~/ui/LabelChip";
import { cn } from "~/utils/cn";
import { SidebarSection } from "~/ui/Heading";

type Planning = Awaited<ReturnType<typeof getIssuePlanning>>;
type Props = { owner: string; repo: string; number: number; planning: Planning };

function Choice({
  label,
  value,
  options,
  disabled,
  onChange,
}: {
  label: string;
  value: string;
  options: Array<{ id: string; name: string }>;
  disabled: boolean;
  onChange: (value: string | null) => void;
}) {
  return (
    <InlineSelect
      label={label}
      value={value}
      disabled={disabled}
      onValueChange={(next) => onChange(next || null)}
      className="w-full"
      options={[{ value: "", label: "None" }, ...options.map((option) => ({ value: option.id, label: option.name }))]}
    />
  );
}

function SubIssues({ owner, repo, number, planning }: Props) {
  const [child, setChild] = useState("");
  const change = useAction(setSubIssue);
  const closed = planning.subIssues.filter((issue) => issue.state === "closed").length;
  return (
    <SidebarSection title="Sub-issues">
      {planning.subIssues.length > 0 && <ProgressBar done={closed} total={planning.subIssues.length} />}
      <ul className="space-y-1">
        {planning.subIssues.map((issue) => (
          <li key={issue.number} className="flex items-center gap-2">
            <span className={issue.state === "open" ? "text-kumo-success" : "text-kumo-subtle"}>●</span>
            <Link
              to="/$owner/$repo/issues/$number"
              params={{ owner, repo, number: String(issue.number) }}
              className="min-w-0 flex-1 truncate text-kumo-default hover:text-accent-400"
            >
              {issue.title} <span className="text-kumo-inactive">#{issue.number}</span>
            </Link>
            {planning.canMaintain && (
              <button
                type="button"
                aria-label={`Remove sub-issue #${issue.number}`}
                className="text-xs text-kumo-inactive hover:text-kumo-danger"
                onClick={() => change.run({ data: { owner, repo, number, child: issue.number, attach: false } })}
              >
                ×
              </button>
            )}
          </li>
        ))}
      </ul>
      {planning.subIssues.length === 0 && <p className="text-kumo-subtle">None</p>}
      {planning.canMaintain && (
        <form
          className="flex gap-1"
          onSubmit={async (event) => {
            event.preventDefault();
            const value = Number(child.replace(/^#/, ""));
            if (value > 0 && (await change.run({ data: { owner, repo, number, child: value, attach: true } })))
              setChild("");
          }}
        >
          <input
            aria-label="Sub-issue number"
            placeholder="#123"
            value={child}
            onChange={(event) => setChild(event.target.value)}
            className={cn(inputClass, "h-7 text-xs")}
          />
          <Button size="sm" type="submit" pending={change.pending}>
            Add
          </Button>
        </form>
      )}
      {change.error && <p className="text-xs text-kumo-danger">{change.error}</p>}
    </SidebarSection>
  );
}

function Transfer({ owner, repo, number }: Omit<Props, "planning">) {
  const navigate = useNavigate();
  const [targets, setTargets] = useState<string[] | null>(null);
  const transfer = useAction(transferIssueTo, { invalidate: false });
  if (!targets)
    return (
      <Button
        size="sm"
        variant="ghost"
        onClick={async () => setTargets(await listTransferTargets({ data: { owner, repo } }))}
      >
        Transfer issue
      </Button>
    );
  return (
    <div className="space-y-1 rounded-md border border-kumo-hairline p-2">
      <p className="text-xs text-kumo-subtle">Transfer to…</p>
      {targets.length === 0 && <p className="text-xs text-kumo-subtle">No other repositories you can write to.</p>}
      {targets.map((target) => (
        <button
          key={target}
          type="button"
          className="block w-full truncate text-left text-xs text-kumo-default hover:text-accent-400"
          onClick={async () => {
            if (!window.confirm(`Transfer this issue to ${target}? Labels and milestone are dropped.`)) return;
            const result = await transfer.run({ data: { owner, repo, number, target } });
            if (result)
              await navigate({
                to: "/$owner/$repo/issues/$number",
                params: { owner: result.owner, repo: result.repo, number: String(result.number) },
              });
          }}
        >
          {target}
        </button>
      ))}
      {transfer.error && <p className="text-xs text-kumo-danger">{transfer.error}</p>}
    </div>
  );
}

/** Milestone, type, parent/sub-issues, pinning, transfer and convert-to-discussion controls for an issue. */
export function IssuePlanningSidebar({ owner, repo, number, planning }: Props) {
  const navigate = useNavigate();
  const save = useAction(setIssuePlanning);
  const pin = useAction(setIssuePinned);
  const convert = useAction(convertIssueToDiscussion, { invalidate: false });
  const types = planning.types.map((type) => ({ id: type.id, name: type.name }));
  const milestones = planning.milestones.map((milestone) => ({ id: milestone.id, name: milestone.title }));
  if (planning.milestone && !milestones.some((option) => option.id === planning.milestone?.id))
    milestones.push({ id: planning.milestone.id, name: planning.milestone.title });
  return (
    <div className="space-y-4">
      <SidebarSection title="Type">
        {planning.canMaintain && types.length > 0 ? (
          <Choice
            label="Issue type"
            value={planning.type?.id ?? ""}
            options={types}
            disabled={save.pending}
            onChange={(typeId) => save.run({ data: { owner, repo, number, typeId } })}
          />
        ) : planning.type ? (
          <LabelChip name={planning.type.name} color={planning.type.color} />
        ) : planning.canMaintain ? (
          <p className="text-kumo-subtle">
            This repository has no issue types yet.{" "}
            <Link
              to="/$owner/$repo/settings/planning"
              params={{ owner, repo }}
              className="text-kumo-default underline-offset-2 hover:text-kumo-strong hover:underline"
            >
              Add types
            </Link>
          </p>
        ) : (
          <p className="text-kumo-subtle">None</p>
        )}
      </SidebarSection>
      <SidebarSection title="Milestone">
        {planning.canMaintain ? (
          <Choice
            label="Milestone"
            value={planning.milestone?.id ?? ""}
            options={milestones}
            disabled={save.pending}
            onChange={(milestoneId) => save.run({ data: { owner, repo, number, milestoneId } })}
          />
        ) : planning.milestone ? (
          <Link
            to="/$owner/$repo/milestones/$id"
            params={{ owner, repo, id: planning.milestone.id }}
            className="text-kumo-default hover:text-accent-400"
          >
            {planning.milestone.title}
          </Link>
        ) : (
          <p className="text-kumo-subtle">None</p>
        )}
        {save.error && <p className="text-xs text-kumo-danger">{save.error}</p>}
      </SidebarSection>
      {planning.parent && (
        <SidebarSection title="Parent issue">
          <Link
            to="/$owner/$repo/issues/$number"
            params={{ owner, repo, number: String(planning.parent.number) }}
            className="text-kumo-default hover:text-accent-400"
          >
            {planning.parent.title} <span className="text-kumo-inactive">#{planning.parent.number}</span>
          </Link>
        </SidebarSection>
      )}
      <SubIssues owner={owner} repo={repo} number={number} planning={planning} />
      {planning.canMaintain && (
        <div className="flex flex-col items-start gap-1">
          <Button
            size="sm"
            variant="ghost"
            pending={pin.pending}
            onClick={() => pin.run({ data: { owner, repo, number, pinned: !planning.pinned } })}
          >
            {planning.pinned ? "Unpin issue" : "Pin issue"}
          </Button>
          {pin.error && <p className="text-xs text-kumo-danger">{pin.error}</p>}
          <Transfer owner={owner} repo={repo} number={number} />
          <Button
            size="sm"
            variant="ghost"
            pending={convert.pending}
            onClick={async () => {
              if (!window.confirm("Convert this issue into a discussion? The issue will be closed and locked.")) return;
              const result = await convert.run({ data: { owner, repo, number } });
              if (result)
                await navigate({
                  to: "/$owner/$repo/discussions/$number",
                  params: { owner, repo, number: String(result.number) },
                });
            }}
          >
            Convert to discussion
          </Button>
          {convert.error && <p className="text-xs text-kumo-danger">{convert.error}</p>}
        </div>
      )}
    </div>
  );
}