siftlode/frontend/src/components/ChannelAbout.tsx

import { useTranslation } from "react-i18next";
import { ExternalLink } from "lucide-react";
import type { ChannelDetail } from "../lib/api";
import { linkify } from "../lib/linkify";

// --- About-tab metadata helpers (shared by the channel page and the manager's About overlay) ---
function displayName(code: string, lang: string, type: "region" | "language"): string {
  try {
    return (
      new Intl.DisplayNames([lang], { type }).of(type === "region" ? code.toUpperCase() : code) ??
      code
    );
  } catch {
    return code;
  }
}
// YouTube keywords are ONE space-separated string with multi-word tags quoted: gaming "let's play".
function parseKeywords(s: string): string[] {
  return (s.match(/"[^"]+"|\S+/g) ?? []).map((k) => k.replace(/^"|"$/g, "")).filter(Boolean);
}
// topicCategories are Wikipedia URLs (…/wiki/Music) → a readable label, de-duplicated.
function topicLabels(urls: string[]): string[] {
  const seen = new Set<string>();
  for (const url of urls) {
    const seg = url.split("/wiki/")[1] ?? url.split("/").pop() ?? url;
    let label = seg;
    try {
      label = decodeURIComponent(seg);
    } catch {
      /* keep raw */
    }
    label = label.replace(/_/g, " ").trim();
    if (label) seen.add(label);
  }
  return [...seen];
}

/**
 * The channel "About" content — description, external links, and the enriched metadata
 * (country, language, topics, keywords). Shared by the channel detail page's About tab and the
 * Channel manager's About-column hover overlay, so both show exactly the same thing.
 */
export default function ChannelAboutContent({ ch }: { ch: ChannelDetail }) {
  const { t, i18n } = useTranslation();
  const topics = ch.topic_categories?.length ? topicLabels(ch.topic_categories) : [];
  const keywords = ch.keywords ? parseKeywords(ch.keywords) : [];
  const hasAboutDetails =
    !!ch.country || !!ch.default_language || topics.length > 0 || keywords.length > 0;

  return (
    <>
      {ch.description ? (
        <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
          {linkify(ch.description)}
        </p>
      ) : (
        <p className="text-sm text-muted">{t("channel.noDescription")}</p>
      )}
      {ch.external_links && ch.external_links.length > 0 && (
        <div className="mt-4 flex flex-wrap gap-2">
          {ch.external_links.map((l, i) => (
            <a
              key={i}
              href={l.url}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-1.5 text-sm text-accent hover:underline"
            >
              <ExternalLink className="w-3.5 h-3.5" />
              {l.title || l.url}
            </a>
          ))}
        </div>
      )}
      {hasAboutDetails && (
        <div className="mt-5 space-y-2.5 text-sm border-t border-border pt-4">
          {ch.country && (
            <div className="flex gap-2">
              <span className="text-muted w-24 shrink-0">{t("channel.country")}</span>
              <span className="inline-flex items-center gap-2">
                {/^[A-Za-z]{2}$/.test(ch.country) && (
                  // Real SVG flag (flag-icons) — Windows/Chrome don't render flag emoji.
                  <span
                    className={`fi fi-${ch.country.toLowerCase()} rounded-sm shrink-0`}
                    aria-hidden
                  />
                )}
                {displayName(ch.country, i18n.language, "region")}
              </span>
            </div>
          )}
          {ch.default_language && (
            <div className="flex gap-2">
              <span className="text-muted w-24 shrink-0">{t("channel.language")}</span>
              <span>{displayName(ch.default_language, i18n.language, "language")}</span>
            </div>
          )}
          {topics.length > 0 && (
            <div className="flex gap-2">
              <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.topics")}</span>
              <div className="flex flex-wrap gap-1.5">
                {/* Future search epic: these topic chips become clickable filters. */}
                {topics.map((tp) => (
                  <span key={tp} className="glass-card px-2 py-0.5 rounded-full text-xs">
                    {tp}
                  </span>
                ))}
              </div>
            </div>
          )}
          {keywords.length > 0 && (
            <div className="flex gap-2">
              <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.keywords")}</span>
              <div className="flex flex-wrap gap-1.5">
                {keywords.map((kw, i) => (
                  <span key={i} className="glass-card px-2 py-0.5 rounded-full text-xs">
                    {kw}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </>
  );
}