import { ClockIcon, DatabaseIcon, GitBranchIcon, TagIcon } from 'lucide-react';
import { Contributors } from '#/components/molecules/contributors.jsx';
import { RepoGauges } from '#/components/molecules/repo-gauges.jsx';
import { bytes, timeAgo } from '#/lib/format.js';
import { branchRefs, repoSize, tagRefs } from '#/lib/git.js';

/** One fact about the repository: an icon, a number, and what it counts. */
function Fact({ Icon, value, label }) {
  return (
    <li className="flex items-center gap-2 text-[12.5px] text-muted-foreground">
      <Icon className="size-3.5 shrink-0 text-faint" />
      <span className="font-semibold text-foreground tabular-nums">
        {value}
      </span>
      <span>{label}</span>
    </li>
  );
}

/**
 * What the repository is, beside its files: the description, what it is
 * written in and how lately it was worked on, and what it holds. The column
 * a forge calls About. It reads once, at the root; inside a directory the
 * listing pane carries the gauges instead.
 * @param {{record: Record<string, unknown>, repo: string, refName: string, space?: string}} props
 */
export function RepoAbout({ record, repo, refName, space }) {
  const branches = branchRefs(record).length;
  const tags = tagRefs(record).length;
  const description =
    typeof record.description === 'string' ? record.description : '';
  const updatedAt =
    typeof record.updatedAt === 'string' ? record.updatedAt : '';

  return (
    <div className="flex flex-col gap-5">
      <div>
        <h2 className="font-semibold text-[14px] text-foreground">About</h2>
        <p className="mt-2 text-[13.5px] text-muted-foreground leading-relaxed">
          {description || <span className="text-faint">No description.</span>}
        </p>
      </div>

      <RepoGauges repo={repo} refName={refName} space={space} />

      <ul className="flex flex-col gap-2 border-border border-t pt-4">
        <Fact
          Icon={GitBranchIcon}
          value={branches}
          label={branches === 1 ? 'branch' : 'branches'}
        />
        {tags > 0 && (
          <Fact
            Icon={TagIcon}
            value={tags}
            label={tags === 1 ? 'tag' : 'tags'}
          />
        )}
        <Fact Icon={DatabaseIcon} value={bytes(repoSize(record))} label="" />
        {updatedAt && (
          <Fact Icon={ClockIcon} value={timeAgo(updatedAt)} label="" />
        )}
      </ul>

      <Contributors repo={repo} refName={refName} space={space} />
    </div>
  );
}