import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import {
  listSites,
  resolveRelatedSites,
  resolveSocialLinks,
} from "yt-dlp-transcript-common/lib/site";
import {
  AI_DOC_URL,
  PROJECT_NAME,
  PROJECT_URL,
} from "yt-dlp-transcript-common/lib/project";
import { ICON_PALETTES } from "yt-dlp-transcript-common/lib/brand";
import { BrandMark } from "yt-dlp-transcript-common/components/BrandMark";
import { SocialLinks } from "yt-dlp-transcript-common/components/SocialLinks";
import { currentSite } from "../lib/site";
import { instanceMode } from "../lib/mode";
import { hasArchives } from "../lib/archives";
import { isCitedSite } from "yt-dlp-transcript-common/lib/siteSchema";

export default function Footer() {
  const site = currentSite();
  // A cited site (site.json `search: false`) has no archives to download
  // and nothing for an AI to read; its footer keeps the rest.
  const cited = instanceMode() === "site" && isCitedSite(site);
  const showArchives = !cited && hasArchives();
  const socialLinks = resolveSocialLinks(site, getSettings());
  // The whole pool is present at build time, so siblings (other sites with a
  // siteUrl) resolve here; single-site installs get an empty list and the
  // related-sites block is omitted entirely. On the hub this build-time family
  // list is irrelevant (its "family" is the runtime shelf), so it's omitted.
  const related =
    instanceMode() === "site" ? resolveRelatedSites(site, listSites()) : [];
  return (
    <footer className="mt-auto border-t border-border bg-muted/30 pb-safe">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between text-sm text-muted-foreground">
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          {/* The "Downloads" eyebrow labels the two links that may follow it, so
              it is conditional on at least one existing. It used to be
              unconditional because a `code.tar.gz` link always sat behind it —
              every archive shipped its own copy of the source. That is now the
              project site's job (one snapshot, one place, one checksum), and
              leaving the label behind would caption an empty space on a site
              with neither archives nor a PWA. */}
          {(showArchives || site.pwa) && (
            <span className="font-mono text-xs uppercase tracking-[0.14em]">
              Downloads
            </span>
          )}
          {/* Transcript & live-chat archive zips, generated per build. Shown only
              when this build actually produced servable archives. */}
          {showArchives && (
            <a
              href="/downloads"
              className="underline underline-offset-2 hover:text-foreground transition-colors"
            >
              Transcripts &amp; chat
            </a>
          )}
          {/* The Offline (PWA download) entry point only shows on sites that
              opt into shipping an installable, offline-capable PWA (site.json
              `pwa: true`). Default-off keeps it hidden until configured. */}
          {site.pwa && (
            <a
              href="/offline/"
              className="underline underline-offset-2 hover:text-foreground transition-colors"
            >
              Offline
            </a>
          )}
          {/* The dot parts the downloads from the rest, so it shows only when
              there is something before it. */}
          {(showArchives || site.pwa) && (
            <span aria-hidden="true" className="text-muted-foreground/50">
              ·
            </span>
          )}
          {/* The homepage's AI and MCP doc, in the same tab (release 16). */}
          {!cited && (
            <a
              href={AI_DOC_URL}
              className="underline underline-offset-2 hover:text-foreground transition-colors"
            >
              Use with AI
            </a>
          )}
          {/* Changelog lives here, not in the header (release 14). */}
          <a
            href="/changelog"
            className="underline underline-offset-2 hover:text-foreground transition-colors"
          >
            Changelog
          </a>
        </div>
        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
          {/* "Built with Archilyzer" — deliberately NOT gated on instanceMode()
              (being identical on every deployment is the point), NOT dependent
              on a configured hubUrl (that is the operator's family link, a
              different thing), and NOT target="_blank": the header's Archilyzer
              link navigates in the same tab, and only the social icons open new
              ones.
              "Built with" sits OUTSIDE the anchor so the accessible name is
              exactly "Archilyzer" — and so does the parent mark before it,
              which is decorative (aria-hidden) and the same on every site. */}
          <span className="inline-flex items-center gap-1.5 text-xs">
            <BrandMark palette={ICON_PALETTES.archilyzer} className="size-4 shrink-0" />
            <span>
              Built with{" "}
              <a
                href={PROJECT_URL}
                className="underline underline-offset-2 hover:text-foreground transition-colors"
              >
                {PROJECT_NAME}
              </a>
            </span>
          </span>
          {/* The operator's social links, every one of them (the header shows
              at most four): the shared row, its keys and focus ring. */}
          <SocialLinks links={socialLinks} placement="footer" />
        </div>
      </div>
      {related.length > 0 && (
        <nav
          aria-label="Related sites"
          className="max-w-6xl mx-auto px-4 sm:px-6 pb-4 -mt-1 flex flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-muted-foreground/80"
        >
          {related.map((group, gi) => (
            <div
              key={group.label ?? `group-${gi}`}
              className="flex flex-wrap items-baseline gap-x-2 gap-y-1"
            >
              {group.label && (
                <span className="font-mono uppercase tracking-[0.14em] text-muted-foreground/70">
                  {group.label}
                </span>
              )}
              <ul className="flex flex-wrap items-baseline gap-x-2 gap-y-1 list-none">
                {group.sites.map((s, si) => (
                  <li key={s.siteId} className="flex items-baseline gap-x-2">
                    {si > 0 && <span aria-hidden="true">·</span>}
                    <a
                      href={s.url}
                      rel="noopener noreferrer"
                      className="hover:text-brand transition-colors"
                    >
                      {s.title}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      )}
    </footer>
  );
}