import { Link } from "react-router-dom";
import type { Resource } from "../api";
import { CategoryIcon } from "./CategoryIcon";
import { useI18n } from "../i18n";
import { resourceTypeLabel } from "../resourceTypeLabels";
import { formatDateYmd } from "../utils/format";

const LATEST_CARD_CLASS =
  "flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";

export function LatestUpdateRow({
  r,
  iconKey,
}: {
  r: Resource;
  iconKey: string;
}) {
  const { t } = useI18n();
  const dateStr = formatDateYmd(r.updatedAt);

  return (
    <Link to={`/resource/${r.id}`} className={LATEST_CARD_CLASS}>
      <div className="flex shrink-0 items-center justify-center pt-0.5">
        <CategoryIcon
          iconKey={iconKey}
          categorySlug={r.categorySlug}
          className="h-10 w-10 text-ark-gold"
        />
      </div>
      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
          {r.title}
        </div>
        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
          <span>{r.categoryName}</span>
          <span>
            {resourceTypeLabel(t, r.type)}
            <time className="mx-2 text-ark-muted" dateTime={r.updatedAt}>
              {dateStr}
            </time>
          </span>
        </div>
      </div>
    </Link>
  );
}

const comingSoonIconKeys = ["image", "film", "book", "gift", "folder"];

export function ComingSoonLatestUpdateRow({ index = 0 }: { index?: number }) {
  const iconKey = comingSoonIconKeys[index % comingSoonIconKeys.length];

  return (
    <article
      className={`${LATEST_CARD_CLASS} cursor-default opacity-95 hover:border-ark-line`}
      aria-label="即将到来"
    >
      <div className="flex shrink-0 items-center justify-center pt-0.5">
        <CategoryIcon iconKey={iconKey} className="h-10 w-10 text-ark-gold" />
      </div>
      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
          即将到来
        </div>
        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
          <span>更多内容准备中</span>
          <span>Coming soon</span>
        </div>
      </div>
    </article>
  );
}