import { TaleLogo } from '@tale/ui/logo';
import {
  type FooterColumn,
  SiteFooter as SiteFooterShell,
} from '@tale/ui/site-footer';
import { Link } from '@tanstack/react-router';
import type { ReactNode } from 'react';

import { GithubIcon } from '@/app/components/icons/github-icon';
import { ExternalLink } from '@/app/components/layout/external-link';
import {
  LocalizedLink,
  type LocalizedRoutePath,
} from '@/app/components/layout/localized-link';
import { EXTERNAL_LINKS } from '@/lib/external-links';
import { useT } from '@/lib/i18n/client';
import { useCurrentLocale } from '@/lib/i18n/use-current-locale';
import type { LegalSlug } from '@/lib/legal/slugs';

const linkClass = 'text-fg-muted hover:text-fg-base text-sm transition-colors';

function RouteLink({
  to,
  children,
}: {
  to: LocalizedRoutePath;
  children: ReactNode;
}) {
  return (
    <LocalizedLink to={to} className={linkClass}>
      {children}
    </LocalizedLink>
  );
}

function HashLink({
  to,
  hash,
  children,
}: {
  to: LocalizedRoutePath;
  hash: string;
  children: ReactNode;
}) {
  return (
    <LocalizedLink to={to} hash={hash} className={linkClass}>
      {children}
    </LocalizedLink>
  );
}

function LegalLink({
  slug,
  children,
}: {
  slug: LegalSlug;
  children: ReactNode;
}) {
  const locale = useCurrentLocale();
  return (
    <Link
      to={locale === 'en' ? '/legal/$slug' : '/$lang/legal/$slug'}
      params={locale === 'en' ? { slug } : { lang: locale, slug }}
      className={linkClass}
    >
      {children}
    </Link>
  );
}

export function SiteFooter() {
  const { t } = useT('footer');
  const { t: tAddress } = useT('address');

  const columns: FooterColumn[] = [
    {
      heading: t('product'),
      links: [
        <HashLink key="features" to="/" hash="features">
          {t('features')}
        </HashLink>,
        <RouteLink key="pricing" to="/pricing">
          {t('pricing')}
        </RouteLink>,
        <RouteLink key="hardwarePricing" to="/hardware-pricing">
          {t('hardwarePricing')}
        </RouteLink>,
        <RouteLink key="contact" to="/contact">
          {t('contact')}
        </RouteLink>,
      ],
    },
    {
      heading: t('resources'),
      links: [
        <ExternalLink
          key="aiTraining"
          href={EXTERNAL_LINKS.aiTraining}
          className={linkClass}
        >
          {t('aiTraining')}
        </ExternalLink>,
      ],
    },
    {
      heading: t('legal'),
      links: [
        <ExternalLink
          key="serviceAgreement"
          href={EXTERNAL_LINKS.softwareTerms}
          className={linkClass}
        >
          {t('serviceAgreement')}
        </ExternalLink>,
        <ExternalLink
          key="hardwareAgreement"
          href={EXTERNAL_LINKS.hardwareTerms}
          className={linkClass}
        >
          {t('hardwareAgreement')}
        </ExternalLink>,
        <LegalLink key="privacyPolicy" slug="privacy-policy">
          {t('privacyPolicy')}
        </LegalLink>,
        <LegalLink key="termsOfService" slug="terms-of-service">
          {t('termsOfService')}
        </LegalLink>,
        <LegalLink key="processingAgreement" slug="data-processing-agreement">
          {t('processingAgreement')}
        </LegalLink>,
        <LegalLink
          key="technicalOrganizationalMeasures"
          slug="technical-organizational-measures"
        >
          {t('technicalOrganizationalMeasures')}
        </LegalLink>,
      ],
    },
  ];

  return (
    <SiteFooterShell
      logo={
        <LocalizedLink
          to="/"
          aria-label={t('homeAriaLabel')}
          className="text-fg-base"
        >
          <TaleLogo />
        </LocalizedLink>
      }
      address={
        <address
          className="not-italic"
          style={{ lineHeight: 1.4286, letterSpacing: '-0.14px' }}
        >
          {tAddress('company')}
          <br />
          {tAddress('street')}
          <br />
          {tAddress('city')}
          <br />
          {tAddress('country')}
          <br />
          <ExternalLink
            href={EXTERNAL_LINKS.vatCheck}
            className="hover:text-fg-base underline transition-colors"
          >
            {tAddress('vatId')}
          </ExternalLink>
        </address>
      }
      brandTrailing={
        <a
          href={EXTERNAL_LINKS.github}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={t('githubAriaLabel')}
          className="text-fg-muted hover:text-fg-base focus-visible:ring-fg-base/60 focus-visible:ring-offset-bg-base inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
        >
          <GithubIcon className="h-6 w-6" />
        </a>
      }
      columns={columns}
      copyrightLines={[t('copyright', { year: new Date().getFullYear() })]}
      llmsTxtUrl="/llms.txt"
      llmsTxtLabel={t('llmsTxtLabel')}
      llmsFullTxtUrl="/llms-full.txt"
      llmsFullTxtLabel={t('llmsFullTxtLabel')}
      themeSwitcherVariant="segmented"
      languageSwitcherShowFlag={false}
    />
  );
}
