import { issueStateTone } from "~/ui/tones";
import { createFileRoute, Link } from "@tanstack/react-router";
import { getMilestone } from "~/fns/milestones";
import { ProgressBar } from "~/components/ProgressBar";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
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/milestones/$id")({
  loader: ({ params }) => getMilestone({ data: { owner: params.owner, repo: params.repo, id: params.id } }),
  component: MilestonePage,
});

function MilestonePage() {
  const { milestone, issues } = Route.useLoaderData();
  const params = Route.useParams();
  return (
    <div className="space-y-5">
      <header className="space-y-3 border-b border-kumo-hairline pb-4">
        <div className="flex items-center gap-3">
          <Heading size="xl">{milestone.title}</Heading>
          <Badge tone={issueStateTone(milestone.state)}>{milestone.state}</Badge>
        </div>
        <p className="text-sm text-kumo-subtle">
          {milestone.dueOn ? `Due ${new Date(milestone.dueOn).toLocaleDateString()}` : "No due date"}
        </p>
        <div className="max-w-md">
          <ProgressBar done={milestone.closedCount} total={milestone.openCount + milestone.closedCount} />
        </div>
        {milestone.description && <Markdown html={milestone.html} />}
      </header>
      <Panel title={`${issues.length} items`}>
        {issues.length === 0 ? (
          <EmptyState title="Nothing in this milestone yet" icon="milestone" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {issues.map((issue) => (
              <li key={issue.number} className="flex items-center gap-3 px-4 py-2.5 text-sm">
                <span className={issue.state === "open" ? "text-kumo-success" : "text-kumo-subtle"}>●</span>
                <Link
                  to={issue.isPull ? "/$owner/$repo/pull/$number" : "/$owner/$repo/issues/$number"}
                  params={{ owner: params.owner, repo: params.repo, number: String(issue.number) }}
                  className="min-w-0 flex-1 truncate text-kumo-default hover:text-accent-400"
                >
                  {issue.title}
                </Link>
                <span className="text-xs text-kumo-subtle">
                  #{issue.number} by {issue.author} · <RelativeTime timestamp={issue.updatedAt} />
                </span>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}