import * as React from 'react';
import { cn } from '../../shared/utils';

/**
 * A single link rendered inside a footer column or the legal links row.
 */
export interface MarketingFooterLink {
  label: string;
  href: string;
}

/**
 * A labeled group of links rendered as one column of the footer.
 */
export interface MarketingFooterColumn {
  heading: string;
  links: MarketingFooterLink[];
}

export interface MarketingFooterProps {
  /** Logo slot — pass a rendered logo element (e.g. `<XerticaLogo />`). */
  logo: React.ReactNode;
  /** Short description shown under the logo in the first column. */
  tagline?: string;
  /** Link columns rendered alongside the logo column. */
  columns: MarketingFooterColumn[];
  /** Small print links (Privacy, Terms, etc.) shown on the bottom row. */
  legalLinks?: MarketingFooterLink[];
  /** Copyright text shown on the bottom row. */
  copyright?: string;
  className?: string;
}

/** Maps logo column + link columns to a static grid-cols class so Tailwind's JIT scanner can find it (capped at 6). */
const gridColsClasses: Record<number, string> = {
  2: 'md:grid-cols-2',
  3: 'md:grid-cols-3',
  4: 'md:grid-cols-4',
  5: 'md:grid-cols-5',
  6: 'md:grid-cols-6',
};

/**
 * Multi-column site footer for public marketing pages.
 *
 * @description
 * Pairs with `MarketingNavbar` to bookend a marketing page: a logo/tagline
 * cell followed by an arbitrary number of link columns, plus a bottom bar
 * with copyright and legal links.
 *
 * @ai-rules
 * 1. Pass the logo as a rendered node via the `logo` prop — do not couple this file to any specific logo component.
 * 2. Pass at most 5 `columns` — the logo cell plus columns are capped at a 6-column desktop grid.
 * 3. `legalLinks` and `copyright` are optional; the bottom row still renders with just whichever is provided.
 */
export function MarketingFooter({
  logo,
  tagline,
  columns,
  legalLinks,
  copyright,
  className,
}: MarketingFooterProps) {
  const resolvedCols = Math.min(Math.max(columns.length + 1, 2), 6);

  return (
    <footer className={cn('border-t border-border bg-card', className)}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className={cn('grid grid-cols-2 gap-8 py-12', gridColsClasses[resolvedCols])}>
          <div className="col-span-2 md:col-span-1">
            <div className="flex items-center">{logo}</div>
            {tagline && <p className="mt-3 max-w-xs text-sm text-muted-foreground">{tagline}</p>}
          </div>

          {columns.map(column => (
            <div key={column.heading}>
              <h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">{column.heading}</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                {column.links.map(link => (
                  <li key={link.href}>
                    <a href={link.href} className="transition-colors hover:text-foreground">
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="flex flex-col items-center justify-between gap-4 border-t border-border pt-6 pb-8 text-xs text-muted-foreground md:flex-row">
          {copyright && <p>{copyright}</p>}

          {legalLinks && legalLinks.length > 0 && (
            <ul className="flex flex-wrap items-center gap-4">
              {legalLinks.map(link => (
                <li key={link.href}>
                  <a href={link.href} className="transition-colors hover:text-foreground">
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </footer>
  );
}