import Link from "next/link";
import { ExternalLink } from "lucide-react";
import { gitConfig } from "@/lib/shared";
import { externalRelForOutboundHref } from "@/src/utils/outbound-link-rel";
import Wordmark from "@/src/components/Wordmark";
import styles from "./Footer.module.scss";

type FooterLink = {
  label: string;
  href: string;
};

type FooterColumn = {
  heading: string;
  links: FooterLink[];
};

const COLUMNS: FooterColumn[] = [
  {
    heading: "Documentation",
    links: [
      { label: "Introduction", href: "/docs/getting-started" },
      { label: "Guides", href: "/guides/guide-agentic-ai-red-teaming" },
    ],
  },
  {
    heading: "Articles You Must Read",
    links: [
      {
        label: "How to jailbreak LLMs",
        href: "https://www.confident-ai.com/blog/how-to-jailbreak-llms-one-step-at-a-time",
      },
      {
        label: "OWASP Top 10 for LLMs",
        href: "https://www.confident-ai.com/blog/owasp-top-10-2025-for-llm-applications-risks-and-mitigation-techniques",
      },
      {
        label: "The comprehensive LLM safety guide",
        href: "https://www.confident-ai.com/blog/the-comprehensive-llm-safety-guide-navigate-ai-regulations-and-best-practices-for-llm-safety",
      },
      {
        label: "LLM evaluation metrics",
        href: "https://www.confident-ai.com/blog/llm-evaluation-metrics-everything-you-need-for-llm-evaluation",
      },
    ],
  },
  {
    heading: "Red Teaming Community",
    links: [
      { label: "GitHub", href: "https://github.com/confident-ai/deepteam" },
      { label: "Discord", href: "https://discord.gg/3SEyvpgu2f" },
      { label: "Newsletter", href: "https://confident-ai.com/blog" },
    ],
  },
];

const isExternal = (href: string) => /^https?:\/\//i.test(href);

const GithubMark = ({ className }: { className?: string }) => (
  <svg
    className={className}
    viewBox="0 0 24 24"
    fill="currentColor"
    aria-hidden="true"
  >
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
  </svg>
);

const FooterLinkItem = ({ link }: { link: FooterLink }) => {
  const external = isExternal(link.href);
  const content = (
    <>
      {link.label}
      {external ? (
        <ExternalLink className={styles.externalIcon} aria-hidden="true" />
      ) : null}
    </>
  );

  return (
    <li>
      {external ? (
        <a
          href={link.href}
          target="_blank"
          rel={externalRelForOutboundHref(link.href)}
        >
          {content}
        </a>
      ) : (
        <Link href={link.href}>{content}</Link>
      )}
    </li>
  );
};

const Footer = () => {
  return (
    <footer className={styles.footer}>
      <div className={styles.shell}>
        <div className={styles.inner}>
          <div className={styles.brand}>
            {/* Inline SVG wordmark: the lettering follows the theme via
             *  `currentColor` while the trailing dot keeps the brand
             *  pink. A CSS mask (the old approach) would flatten both to
             *  a single color. */}
            <Wordmark className={styles.logo} />
            <p className={styles.tagline}>
              Open-source LLM red teaming framework. Apache 2.0 licensed.
            </p>
            <a
              className={styles.starButton}
              href={`https://github.com/${gitConfig.user}/${gitConfig.repo}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <GithubMark className={styles.starIcon} />
              <span>Star us on GitHub</span>
            </a>
            <span>
              &copy; {new Date().getFullYear()} Confident AI Inc. Made with{" "}
              <span className={styles.heart} aria-hidden="true">
                ❤️
              </span>{" "}
              and confidence.
            </span>
          </div>

          <nav className={styles.columns} aria-label="Footer">
            {COLUMNS.map((column) => (
              <div key={column.heading} className={styles.column}>
                <h4 className={styles.heading}>{column.heading}</h4>
                <ul className={styles.list}>
                  {column.links.map((link) => (
                    <FooterLinkItem key={link.label} link={link} />
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>
      </div>
    </footer>
  );
};

export default Footer;