import { useTranslation } from "react-i18next";
import { Check } from "lucide-react";
import type { ManagedChannel } from "../lib/api";
import { formatNumber } from "../lib/format";
import Tooltip from "./ui/Tooltip";
import { isFullySynced } from "./channelSync";

// The Channels-manager cells that are components in their own right (they read i18n), split out of
// channelColumns so that file holds only the column factory and its predicates (Fast Refresh).

// The Stored count, with a "fully synced" ✓ charm to the left of the number when recent uploads and
// full history are both in — folding the retired Sync column's at-a-glance status into the value it
// describes. Full detail stays in the hover tooltip.
export function StoredCell({ c }: { c: ManagedChannel }) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  return (
    <span className="inline-flex items-center justify-end gap-1 text-muted tabular-nums">
      {isFullySynced(c) && (
        <Tooltip hint={t("channels.row.fullySyncedHint")}>
          <Check
            role="img"
            className="w-3.5 h-3.5 text-accent shrink-0 cursor-help"
            aria-label={t("channels.row.fullySynced")}
          />
        </Tooltip>
      )}
      {formatNumber(c.stored_videos, lang)}
    </span>
  );
}