'use client';

import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
import { Footer } from '@/components/design-system/footer';
import { Navbar } from '@/components/design-system/navbar';
import { TickerStrip } from '@/components/design-system/ticker-strip';
import type { TickerItem } from '@/components/design-system/ticker-strip';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { useTheme } from '@/components/providers/theme-provider';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
import { Link, useRouter } from '@/i18n/navigation';
import { useAuthStore } from '@/lib/auth-store';

/** Render adapter — bridges design-system <Navbar/> and <Footer/> to next-intl's <Link>. */
function renderLink({
  href,
  children,
  className,
  onClick,
}: {
  href: string;
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
}) {
  return (
    <Link href={href as '/'} className={className} onClick={onClick}>
      {children}
    </Link>
  );
}

export default function PublicLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuthStore();
  const { theme, toggleTheme } = useTheme();
  const t = useTranslations();

  const dashboardHref = user?.role === 'ADMIN' ? '/admin' : '/dashboard';

  const handleLogout = async () => {
    await logout();
    router.push('/');
  };

  const navLinks = [
    {
      href: '/',
      label: t('nav.home'),
      isActive: pathname === '/' || !!pathname.match(/^\/(vi|en)\/?$/),
    },
    {
      href: '/search',
      label: t('nav.search'),
      isActive: pathname.includes('/search'),
    },
    {
      href: '/du-an',
      label: t('nav.projects'),
      isActive: pathname.includes('/du-an'),
    },
    {
      href: '/khu-cong-nghiep',
      label: t('nav.industrialParks'),
      isActive: pathname.includes('/khu-cong-nghiep'),
    },
    {
      href: '/chuyen-nhuong',
      label: t('nav.transfer'),
      isActive: pathname.includes('/chuyen-nhuong'),
    },
    {
      href: '/pricing',
      label: t('nav.pricing'),
      isActive: pathname.includes('/pricing'),
    },
  ];

  const tickerItems: TickerItem[] = [
    { id: 'q1', label: 'Quận 1', changePercent: 2.4, direction: 'up' },
    { id: 'q2', label: 'Thành phố Thủ Đức', changePercent: -0.8, direction: 'down' },
    { id: 'q3', label: 'Quận 3', changePercent: 1.1, direction: 'up' },
    { id: 'q7', label: 'Quận 7', changePercent: 3.2, direction: 'up' },
    { id: 'binhthanh', label: 'Bình Thạnh', changePercent: 0.0, direction: 'neutral' },
    { id: 'thuduc', label: 'Thành phố Thủ Đức', changePercent: 1.7, direction: 'up' },
    { id: 'tanbinhdistrict', label: 'Tân Bình', changePercent: -1.3, direction: 'down' },
    { id: 'phuninh', label: 'Phú Nhuận', changePercent: 0.5, direction: 'up' },
  ];

  const footerLinkGroups = [
    {
      title: t('footer.propertyTypes'),
      links: [
        { label: t('propertyTypes.APARTMENT'), href: '/search?propertyType=APARTMENT' },
        { label: t('propertyTypes.HOUSE'), href: '/search?propertyType=HOUSE' },
        { label: t('propertyTypes.VILLA'), href: '/search?propertyType=VILLA' },
        { label: t('propertyTypes.LAND'), href: '/search?propertyType=LAND' },
      ],
    },
    {
      title: t('footer.areas'),
      links: [
        { label: 'TP. Hồ Chí Minh', href: '/search?city=Hồ Chí Minh' },
        { label: 'Hà Nội', href: '/search?city=Hà Nội' },
        { label: 'Đà Nẵng', href: '/search?city=Đà Nẵng' },
        { label: 'Nha Trang', href: '/search?city=Nha Trang' },
      ],
    },
    {
      title: t('footer.support'),
      links: [
        { label: t('nav.pricing'), href: '/pricing' },
        { label: t('common.login'), href: '/login' },
        { label: t('common.register'), href: '/register' },
      ],
    },
  ];

  return (
    <div className="min-h-screen w-full overflow-x-clip bg-background">
      {/* Ticker strip */}
      <div className="h-ticker-bar w-full min-w-0 overflow-hidden border-b border-border bg-background-elevated">
        <TickerStrip items={tickerItems} />
      </div>

      <Navbar
        brand={t('common.goodgo')}
        links={navLinks}
        user={user}
        dashboardHref={dashboardHref}
        notifications={<NotificationBell />}
        languageSwitcher={<LanguageSwitcher />}
        theme={theme}
        onToggleTheme={toggleTheme}
        onLogout={handleLogout}
        renderLink={renderLink}
        labels={{
          login: t('common.login'),
          register: t('common.register'),
          dashboard: t('common.dashboard'),
          admin: t('common.admin'),
          profile: t('common.profile'),
          logout: t('common.logout'),
          openMenu: t('nav.openMenu'),
          closeMenu: t('nav.closeMenu'),
          darkMode: t('dashboard.darkMode'),
          lightMode: t('dashboard.lightMode'),
          mainNav: t('nav.mainNav'),
        }}
      />

      <main id="main-content" role="main">
        {children}
      </main>

      <CompareFloatingBar />

      <Footer
        brand={t('common.goodgo')}
        description={t('footer.description')}
        linkGroups={footerLinkGroups}
        copyright={t('common.allRightsReserved')}
        contact={{
          address: 'TP. Hồ Chí Minh, Việt Nam',
          phone: '1900 xxxx',
          email: 'support@goodgo.vn',
        }}
        socials={[
          { platform: 'facebook', href: '#' },
          { platform: 'youtube', href: '#' },
        ]}
        renderLink={renderLink}
      />
    </div>
  );
}