import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import type { SettingsDoc } from "@/models/Settings";

const SOCIAL_LABELS: Record<string, string> = {
  instagram: "Instagram",
  twitter: "X / Twitter",
  tiktok: "TikTok",
  twitch: "Twitch",
  youtube: "YouTube",
  discord: "Discord",
};

export function SiteFooter({ settings }: { settings: SettingsDoc }) {
  const common = useTranslations("common");
  const nav = useTranslations("nav");
  const legal = useTranslations("legal");

  const social = Object.entries(settings.socialLinks || {}).filter(
    ([key, url]) => key !== "email" && url
  );

  // Kein border-top am <footer>: Footer und Inhalt darüber teilen sich
  // denselben --rk-bg-Hintergrund, eine graue Trennlinie sah "nach
  // Website-Baukasten" aus (Till, 09.09.2026). Der pt-16-Abstand reicht.
  return (
    <footer className="mt-auto px-6 pt-16 pb-12">
      <div className="max-w-5xl mx-auto flex flex-col items-center gap-6 text-center">
        <p className="rk-wordmark text-sm tracking-[0.2em]">{common("siteName")}</p>
        <p className="text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)]">
          📍 {common("locationLine")}
        </p>

        {social.length > 0 && (
          <nav className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)]">
            {social.map(([key, url]) => (
              <a
                key={key}
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-[var(--rk-ink)] transition-colors"
              >
                {SOCIAL_LABELS[key] ?? key}
              </a>
            ))}
          </nav>
        )}

        <nav className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)]">
          <Link href="/conventions" className="hover:text-[var(--rk-ink)] transition-colors">
            {nav("conventions")}
          </Link>
          <Link href="/blog" className="hover:text-[var(--rk-ink)] transition-colors">
            {nav("blog")}
          </Link>
          <Link href="/agb" className="hover:text-[var(--rk-ink)] transition-colors">
            {nav("agb")}
          </Link>
          <Link href="/datenschutz" className="hover:text-[var(--rk-ink)] transition-colors">
            {nav("datenschutz")}
          </Link>
          {settings.legal?.impressumUrl && (
            <a
              href={settings.legal.impressumUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-[var(--rk-ink)] transition-colors"
            >
              {legal("impressumTitle")}
            </a>
          )}
        </nav>

        <p className="text-xs text-[var(--rk-ink-muted)]">© {new Date().getFullYear()} Rakku. {legal("rightsReserved")}</p>
      </div>
    </footer>
  );
}