import { cn } from '@tale/ui/cn';
import type { ReactNode } from 'react';

import { LanguageSwitcher } from './language-switcher';
import { SiteContainer } from './site-container';
import { ThemeSwitcher } from './theme-switcher';

export interface FooterColumn {
  heading: string;
  /**
   * Each link is rendered as-is. Callers wrap their preferred link
   * component (LocalizedLink, anchor, TanStack Link) and pass it as a
   * ReactNode so footer styling stays consistent without baking in
   * routing assumptions.
   */
  links: ReactNode[];
}

interface SiteFooterProps {
  /** Logo + home link slot. Required in the columned (marketing) layout,
   *  optional in the compact bottom-bar variant. */
  logo?: ReactNode;
  /** Optional `<address>` or any structured contact info. Only shown
   *  when there are columns — the compact variant omits it. */
  address?: ReactNode;
  /** Optional slot rendered in the brand column beneath the address.
   *  Marketing uses it for the GitHub icon link; docs leaves it empty. */
  brandTrailing?: ReactNode;
  /** Up to three columns of links shown to the right of the logo. When
   *  empty, the footer collapses to a single bottom bar. */
  columns?: FooterColumn[];
  /** Lines rendered in the bottom-bar copyright slot. */
  copyrightLines: string[];
  /**
   * Trailing content in the bottom bar (typically GitHub icon link, etc.).
   * The language and theme switchers are rendered automatically.
   */
  bottomTrailing?: ReactNode;
  /**
   * If provided, renders an `llms.txt` link in the bottom bar so LLM
   * tooling can pick up the site's plain-text index.
   */
  llmsTxtUrl?: string;
  /** Localized label for the `llms.txt` link. */
  llmsTxtLabel?: string;
  /**
   * Optional companion to `llmsTxtUrl` for sites that also publish a
   * full-content `llms-full.txt`. Rendered next to the `llms.txt` link
   * with identical styling.
   */
  llmsFullTxtUrl?: string;
  /** Localized label for the `llms-full.txt` link. */
  llmsFullTxtLabel?: string;
  /**
   * Override the inner content-width container. Defaults to the marketing
   * SiteContainer frame; docs pages pass a custom class to align with
   * their wider content layout.
   */
  containerClassName?: string;
  /** Visual variant for the embedded theme switcher. Marketing uses
   *  `'segmented'` to render the inline pill control; docs keeps the
   *  default dropdown menu. */
  themeSwitcherVariant?: 'menu' | 'segmented';
  /** Forwards to the embedded language switcher. Marketing passes
   *  `false` to hide the trigger flag per design; docs leaves it on. */
  languageSwitcherShowFlag?: boolean;
}

/**
 * Marketing/docs footer shell shared between `services/web` and
 * `services/docs`. Owns the visual structure (logo column + link
 * columns + bottom bar) and ships the language and theme switchers in
 * the bottom bar; callers supply link components for each column so the
 * footer stays routing-agnostic.
 */
export function SiteFooter({
  logo,
  address,
  brandTrailing,
  columns = [],
  copyrightLines,
  bottomTrailing,
  llmsTxtUrl,
  llmsTxtLabel = 'llms.txt',
  llmsFullTxtUrl,
  llmsFullTxtLabel = 'llms-full.txt',
  containerClassName,
  themeSwitcherVariant,
  languageSwitcherShowFlag,
}: SiteFooterProps) {
  const columnCount = columns.length;
  const compact = columnCount === 0;
  const gridCols =
    columnCount === 1
      ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-[minmax(180px,1fr)_minmax(0,1fr)] lg:grid-cols-[minmax(220px,1fr)_minmax(0,1fr)]'
      : columnCount === 2
        ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-[minmax(180px,1fr)_repeat(2,minmax(0,1fr))] lg:grid-cols-[minmax(220px,1fr)_repeat(2,minmax(0,1fr))]'
        : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-[minmax(180px,1fr)_repeat(3,minmax(0,1fr))] lg:grid-cols-[minmax(220px,1fr)_repeat(3,minmax(0,1fr))]';

  const llmLinkClass =
    'text-fg-muted hover:text-fg-base focus-visible:ring-fg-base/60 focus-visible:ring-offset-bg-base rounded-sm px-2 py-1 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none';
  const switcherRow = (
    <div className="flex flex-wrap items-center gap-2">
      {llmsTxtUrl ? (
        <a href={llmsTxtUrl} className={llmLinkClass}>
          {llmsTxtLabel}
        </a>
      ) : null}
      {llmsFullTxtUrl ? (
        <a href={llmsFullTxtUrl} className={llmLinkClass}>
          {llmsFullTxtLabel}
        </a>
      ) : null}
      <LanguageSwitcher showFlag={languageSwitcherShowFlag} />
      <ThemeSwitcher variant={themeSwitcherVariant} />
      {bottomTrailing}
    </div>
  );

  return (
    <footer className="border-border-base bg-bg-base dark:bg-bg-elevated border-t print:hidden">
      {compact ? (
        <SiteContainer className={containerClassName}>
          {/* Bottom-bar-only variant. Renders just the copyright + the
              language/theme/llms switchers on a single line so the docs
              chrome stays minimal beneath every page. */}
          <div className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between">
            <div
              className="text-fg-muted text-sm"
              style={{ letterSpacing: '-0.084px', lineHeight: 1.4286 }}
            >
              {copyrightLines.map((line, i) => (
                // oxlint-disable-next-line react/no-array-index-key -- copyright line order is stable
                <p key={i}>{line}</p>
              ))}
            </div>
            {switcherRow}
          </div>
        </SiteContainer>
      ) : (
        <>
          <SiteContainer className={containerClassName}>
            <div
              className={cn('grid gap-8 py-10 md:gap-12 md:py-16', gridCols)}
            >
              <div className="text-fg-muted flex flex-col gap-4 text-sm sm:col-span-2 md:col-span-1">
                {logo}
                {address}
                {brandTrailing}
              </div>

              {columns.map((col) => (
                <nav
                  key={col.heading}
                  aria-label={col.heading}
                  className="flex flex-col gap-4"
                >
                  <h3
                    className="text-fg-base text-base font-medium"
                    style={{ letterSpacing: '-0.16px' }}
                  >
                    {col.heading}
                  </h3>
                  <ul role="list" className="flex flex-col gap-[14px]">
                    {col.links.map((link, i) => (
                      // oxlint-disable-next-line react/no-array-index-key -- link order is stable
                      <li key={i}>{link}</li>
                    ))}
                  </ul>
                </nav>
              ))}
            </div>
          </SiteContainer>

          <div className="border-border-base border-t">
            <SiteContainer className={containerClassName}>
              <div className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between">
                <div
                  className="text-fg-muted text-sm"
                  style={{ letterSpacing: '-0.084px', lineHeight: 1.4286 }}
                >
                  {copyrightLines.map((line, i) => (
                    // oxlint-disable-next-line react/no-array-index-key -- copyright line order is stable
                    <p key={i}>{line}</p>
                  ))}
                </div>
                {switcherRow}
              </div>
            </SiteContainer>
          </div>
        </>
      )}
    </footer>
  );
}
