// @design-system: layout/SiteFooter
'use client';

import { useState, useEffect } from 'react';
import { getT } from '@/lib/i18n';
import { usePrefsStore } from '@/lib/i18n/store';
import { MDLogo } from '@/components/ui/icons/MDLogo';
import type { Locale } from '@/lib/i18n';

const LINK_CLASS =
  'text-text-link hover:text-brand-primary-900 focus-visible:outline-brand-primary-600 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2';

const COL_HEADING_CLASS = 'text-text-primary mb-4 text-base font-[number:var(--font-weight-bold)]';

function FooterLinkList({ links }: { links: { href: string; label: string }[] }) {
  return (
    <ul className="flex flex-col items-center gap-2">
      {links.map(({ href, label }) => (
        <li key={href}>
          <a href={href} className={LINK_CLASS}>
            {label}
          </a>
        </li>
      ))}
    </ul>
  );
}

export function SiteFooter({ initialLocale }: { initialLocale: Locale }) {
  const [locale, setLocale] = useState<Locale>(initialLocale);

  // Keep in sync with Zustand for live language toggle after mount.
  // initialLocale prop drives SSR + first hydration render — no Zustand read on server.
  useEffect(() => {
    return usePrefsStore.subscribe((state) => setLocale(state.locale));
  }, []);

  const t = getT(locale, 'footer');

  const accountLinks = [
    { href: '/profile', label: t('link_profile') },
    { href: '/settings', label: t('link_settings') },
    { href: '/wishlist', label: t('link_wishlist') },
    { href: '/cases', label: t('link_cases') },
    { href: '/whats-left', label: t('link_whats_left') },
    { href: '/support/tickets', label: t('link_support') },
  ];

  const customerLinks = [
    { href: '/', label: t('link_home') },
    { href: '/search', label: t('link_search') },
    { href: '/deals', label: t('link_deals') },
    { href: '/stores', label: t('link_stores') },
    { href: '/club', label: t('link_club') },
  ];

  const companyLinks = [
    { href: '/about', label: t('link_about') },
    { href: '/faq', label: t('link_faq') },
    { href: '/accessibility', label: t('link_accessibility') },
    { href: '/legal/privacy', label: t('link_privacy') },
    { href: '/legal/terms', label: t('link_terms') },
    { href: '/contact', label: t('link_contact') },
    { href: '/tags', label: t('link_tags') },
  ];

  const vendorLinks = [{ href: '/vendor/register', label: t('link_vendor_register') }];

  const affiliateLinks = [
    { href: '/affiliate-program', label: t('link_affiliate_program') },
    { href: '/refer', label: t('link_refer') },
  ];

  return (
    <footer data-site-footer className="text-text-primary w-full bg-[var(--color-surface-app)]">
      <div className="mx-auto max-w-6xl px-4 py-12">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:gap-12">
          {/* Col 1 — Brand + Businesses + Affiliates (start = rightmost in RTL) */}
          <div className="flex flex-col items-center gap-2 text-center">
            <MDLogo size={56} />
            <p className="text-text-primary text-lg font-[number:var(--font-weight-bold)]">
              {t('brand_name')}
            </p>
            <p className="text-text-muted text-sm">{t('tagline')}</p>

            <div className="mt-4 flex flex-col items-center">
              <p className={COL_HEADING_CLASS}>{t('col_vendors')}</p>
              <FooterLinkList links={vendorLinks} />
            </div>

            <div className="mt-4 flex flex-col items-center">
              <p className={COL_HEADING_CLASS}>{t('col_partners')}</p>
              <FooterLinkList links={affiliateLinks} />
            </div>
          </div>

          {/* Col 3 — My Account */}
          <div className="flex flex-col items-center text-center">
            <p className={COL_HEADING_CLASS}>{t('col_account')}</p>
            <FooterLinkList links={accountLinks} />
          </div>

          {/* Col 4 — Customers */}
          <div className="flex flex-col items-center text-center">
            <p className={COL_HEADING_CLASS}>{t('col_customers')}</p>
            <FooterLinkList links={customerLinks} />
          </div>

          {/* Col 5 — Company (end = leftmost in RTL) */}
          <div className="flex flex-col items-center text-center">
            <p className={COL_HEADING_CLASS}>{t('col_company')}</p>
            <FooterLinkList links={companyLinks} />
          </div>
        </div>

        {/* Bottom bar */}
        <div className="text-text-muted border-border-subtle mt-10 border-t pt-6 text-center text-xs">
          {t('copyright')}
        </div>
      </div>
    </footer>
  );
}