import { StatusBadge } from '@/components/foundation/StatusBadge';
import { DemoTrigger } from '@/components/integrations/DemoTrigger';
import { localizedPath, type Locale } from '@/lib/localization/config';
import type { ShellMessages } from '@/lib/localization/messages';
import styles from './SiteFooter.module.css';

interface SiteFooterProps {
  locale: Locale;
  messages: ShellMessages;
  demoEnabled: boolean;
}

function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
  return <a href={`${localizedPath('home', locale)}#${hash}`}>{children}</a>;
}

function PendingRouteLink({
  locale,
  routeId,
  label,
  pending,
}: {
  locale: Locale;
  routeId: 'login' | 'privacy' | 'terms' | 'accessibility';
  label: string;
  pending: string;
}) {
  return (
    <a className={styles.legalLink} href={localizedPath(routeId, locale)}>
      <span>{label}</span>
      <StatusBadge>{pending}</StatusBadge>
    </a>
  );
}

function PendingItem({ label, pending }: { label: string; pending: string }) {
  return (
    <span className={styles.pendingItem} aria-disabled="true">
      <span>{label}</span>
      <StatusBadge>{pending}</StatusBadge>
    </span>
  );
}

export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
  const footer = messages.footer;
  const year = new Date().getUTCFullYear();

  return (
    <footer className={styles.footer} aria-label={footer.landmarkLabel}>
      <div className={styles.inner}>
        <div className={styles.brandColumn}>
          <div className={styles.brand}>
            <span aria-hidden="true" className={styles.mark}>
              RDG
            </span>
            <span>RentalDriveGo</span>
          </div>
          <p className={styles.tagline}>{footer.tagline}</p>
          <p className={styles.releaseNotice}>{footer.releaseNotice}</p>
        </div>

        <div className={styles.groups}>
          <section className={styles.group} aria-labelledby="footer-product">
            <h2 id="footer-product">{footer.groups.product}</h2>
            <ul>
              <li>
                <HashLink locale={locale} hash="workflow">
                  {footer.links.workflow}
                </HashLink>
              </li>
              <li>
                <HashLink locale={locale} hash="modules">
                  {footer.links.modules}
                </HashLink>
              </li>
              <li>
                <HashLink locale={locale} hash="pricing">
                  {footer.links.pricing}
                </HashLink>
              </li>
              <li>
                <HashLink locale={locale} hash="faq">
                  {footer.links.faq}
                </HashLink>
              </li>
            </ul>
          </section>

          <section className={styles.group} aria-labelledby="footer-company">
            <h2 id="footer-company">{footer.groups.company}</h2>
            <ul>
              <li>
                <PendingItem label={footer.links.contact} pending={footer.pending} />
              </li>
              <li>
                <DemoTrigger
                  label={footer.links.demo}
                  source="footer"
                  size="small"
                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
                />
              </li>
            </ul>
          </section>

          <section className={styles.group} aria-labelledby="footer-account">
            <h2 id="footer-account">{footer.groups.account}</h2>
            <ul>
              <li>
                <PendingRouteLink
                  locale={locale}
                  routeId="login"
                  label={footer.links.login}
                  pending={footer.pending}
                />
              </li>
            </ul>
          </section>

          <section className={styles.group} aria-labelledby="footer-legal">
            <h2 id="footer-legal">{footer.groups.legal}</h2>
            <ul>
              <li>
                <PendingRouteLink
                  locale={locale}
                  routeId="privacy"
                  label={footer.links.privacy}
                  pending={footer.pending}
                />
              </li>
              <li>
                <PendingRouteLink
                  locale={locale}
                  routeId="terms"
                  label={footer.links.terms}
                  pending={footer.pending}
                />
              </li>
              <li>
                <PendingRouteLink
                  locale={locale}
                  routeId="accessibility"
                  label={footer.links.accessibility}
                  pending={footer.pending}
                />
              </li>
            </ul>
          </section>
        </div>

        <div className={styles.bottom}>
          <span>
            {footer.copyrightPrefix} {year} RentalDriveGo
          </span>
        </div>
      </div>
    </footer>
  );
}
