import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { deleteMilestone, listMilestones, saveMilestone } from "~/fns/milestones";
import { useAction } from "~/hooks/use-action";
import { ProgressBar } from "~/components/ProgressBar";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { Button, buttonClass } from "~/ui/Button";
import { TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";

export const Route = createFileRoute("/$owner/$repo/milestones/")({
  validateSearch: z.object({ state: z.enum(["open", "closed"]).optional() }),
  loaderDeps: ({ search }) => search,
  loader: ({ params, deps }) =>
    listMilestones({ data: { owner: params.owner, repo: params.repo, state: deps.state ?? "open" } }),
  component: MilestonesPage,
});

function dueDate(value: FormDataEntryValue | null): number | null {
  const text = String(value ?? "");
  return text ? new Date(`${text}T00:00:00Z`).getTime() : null;
}

function NewMilestone({ owner, repo, onClose }: { owner: string; repo: string; onClose: () => void }) {
  const save = useAction(saveMilestone);
  return (
    <Panel title="New milestone">
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const ok = await save.run({
            data: {
              owner,
              repo,
              id: null,
              title: String(form.get("title") ?? ""),
              description: String(form.get("description") ?? ""),
              dueOn: dueDate(form.get("due")),
              state: "open",
            },
          });
          if (ok) onClose();
        }}
      >
        <ErrorBanner message={save.error} />
        <TextField label="Title" name="title" required autoFocus />
        <TextField label="Due date" name="due" type="date" />
        <TextAreaField label="Description" name="description" rows={3} />
        <div className="flex gap-2">
          <Button type="submit" variant="primary" pending={save.pending}>
            Create milestone
          </Button>
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
        </div>
      </form>
    </Panel>
  );
}

function MilestonesPage() {
  const { milestones, canMaintain } = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  const state = search.state ?? "open";
  const save = useAction(saveMilestone);
  const remove = useAction(deleteMilestone);
  const [creating, setCreating] = useState(false);

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        {(["open", "closed"] as const).map((item) => (
          <Link
            key={item}
            to="/$owner/$repo/milestones"
            params={params}
            search={{ state: item }}
            className={cn(buttonClass(item === state ? "secondary" : "ghost", "sm"), "capitalize")}
          >
            {item}
          </Link>
        ))}
        {canMaintain && !creating && (
          <div className="ml-auto">
            <Button variant="primary" size="sm" onClick={() => setCreating(true)}>
              New milestone
            </Button>
          </div>
        )}
      </div>
      {canMaintain && creating && (
        <NewMilestone owner={params.owner} repo={params.repo} onClose={() => setCreating(false)} />
      )}
      <ErrorBanner message={save.error ?? remove.error} />
      <Panel title={`${milestones.length} ${state} milestones`}>
        {milestones.length === 0 ? (
          <EmptyState title="No milestones" icon="milestone">
            Milestones group issues and pull requests toward a goal.
          </EmptyState>
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {milestones.map((milestone) => (
              <li key={milestone.id} className="grid gap-4 px-4 py-4 md:grid-cols-[1fr_260px]">
                <div className="min-w-0 space-y-1">
                  <Link
                    to="/$owner/$repo/milestones/$id"
                    params={{ ...params, id: milestone.id }}
                    className="text-base font-medium text-kumo-strong hover:text-accent-400"
                  >
                    {milestone.title}
                  </Link>
                  <p className="text-xs text-kumo-subtle">
                    {milestone.dueOn ? `Due ${new Date(milestone.dueOn).toLocaleDateString()}` : "No due date"}
                  </p>
                  {milestone.description && (
                    <p className="line-clamp-2 text-sm text-kumo-subtle">{milestone.description}</p>
                  )}
                </div>
                <div className="space-y-2">
                  <ProgressBar done={milestone.closedCount} total={milestone.openCount + milestone.closedCount} />
                  {canMaintain && (
                    <div className="flex gap-1">
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() =>
                          save.run({
                            data: {
                              ...params,
                              id: milestone.id,
                              title: milestone.title,
                              description: milestone.description,
                              dueOn: milestone.dueOn,
                              state: milestone.state === "open" ? "closed" : "open",
                            },
                          })
                        }
                      >
                        {milestone.state === "open" ? "Close" : "Reopen"}
                      </Button>
                      <Button
                        size="sm"
                        variant="danger"
                        onClick={() =>
                          window.confirm(`Delete milestone ${milestone.title}?`) &&
                          remove.run({ data: { ...params, id: milestone.id } })
                        }
                      >
                        Delete
                      </Button>
                    </div>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}