import Link from "next/link";
import { Card } from "@unlocalhosted/metalui";
import type { ReactNode } from "react";
import type { ForkParent, RepoRecord } from "@/lib/repos";
import { timeAgo } from "@/lib/format";
import { ClockIcon, HeartIcon, LockIcon, RepoIcon } from "./icons";
import { ForkedFrom, ForkLabel } from "./forks";
import { CardDescription, CardTitle } from "./metal";
import { RepoAvatar, VisibilityLabel } from "./ui";

export type RepoListItem = RepoRecord & { updatedAt: number; empty: boolean; parent: ForkParent | null; likes: number };

/**
 * Repositories as MetalUI cards: the title is the card's one link, so the whole plate goes to the
 * repository. `actions` adds controls to a card's footer (they sit above the link).
 */
export function RepoList({ repos, showOwner = true, actions }: { repos: RepoListItem[]; showOwner?: boolean; actions?: (repo: RepoListItem) => ReactNode }) {
  return (
    <ul className="grid gap-4 sm:grid-cols-2">
      {repos.map((r) => (
        <li key={r.id} className="flex">
          <Card className="w-full grid-rows-[auto_1fr_auto]">
            <div className="flex items-start gap-3">
              <RepoAvatar repo={r} size={40} />
              <div className="min-w-0 flex-1">
                <CardTitle render={<Link href={`/${r.owner}/${r.name}`} />} className="truncate">
                  {showOwner && <span className="font-normal text-ink3">{r.owner} / </span>}
                  {r.name}
                </CardTitle>
                <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
                  <VisibilityLabel visibility={r.visibility} />
                  {r.forkOf && <ForkLabel />}
                </div>
                {r.forkOf && <ForkedFrom parent={r.parent} className="mt-1.5 max-w-full" />}
              </div>
            </div>
            <CardDescription className={`mt-1.5 line-clamp-2 ${r.description ? "" : "text-ink3 italic"}`}>
              {r.description || "No description"}
            </CardDescription>
            <div className="rule-t mt-2 flex items-center gap-3 pt-2.5 type-readout text-ink3">
              <span className="flex items-center gap-1.5">
                <ClockIcon width={12} height={12} />
                {r.empty ? "Empty repository" : `Updated ${timeAgo(r.updatedAt)}`}
              </span>
              {r.likes > 0 && (
                <span className="flex items-center gap-1" title={`${r.likes} ${r.likes === 1 ? "like" : "likes"}`}>
                  <HeartIcon width={12} height={12} /> {r.likes}
                </span>
              )}
              {actions && <div className="relative z-1 ml-auto flex items-center gap-2">{actions(r)}</div>}
            </div>
          </Card>
        </li>
      ))}
    </ul>
  );
}

export function RepoIconFor({ visibility }: { visibility: "public" | "private" }) {
  return visibility === "private" ? <LockIcon className="text-ink3" /> : <RepoIcon className="text-ink3" />;
}