'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { Logo } from '@/components/brand/logo';
import { cn } from '@/lib/utils';
import { SellerQueryProvider } from './providers';
import { SellerTopBar } from '@/components/seller/seller-top-bar';
import { useAuthStore } from '@/stores/auth';
import { useSelectedMembership } from '@/lib/stores/store-context';
import type { StoreCapability } from '@alqove/api-client';

const navItems: { href: string; label: string }[] = [
  { href: '/seller',          label: 'Dashboard' },
  { href: '/seller/inbox',    label: 'Inbox' },
  { href: '/seller/listings', label: 'Listings' },
  { href: '/seller/orders',   label: 'Orders' },
  { href: '/seller/returns', label: 'Returns' },
  { href: '/seller/payouts',  label: 'Payouts' },
  { href: '/seller/statements', label: 'Statements' },
  { href: '/seller/reviews', label: 'Reviews' },
  { href: '/seller/team', label: 'Team' },
  { href: '/seller/schedule', label: 'Schedule' },
  { href: '/seller/timesheets', label: 'Timesheets' },
  { href: '/seller/payroll', label: 'Payroll' },
  { href: '/seller/settings/schedule', label: 'Schedule settings' },
  { href: '/seller/settings', label: 'Settings' },
];

// Enumerate real routes; a new page must explicitly declare its capability.
const marketplaceRoutes = [
  /^\/seller$/,
  /^\/seller\/(inbox|payouts|statements|reviews|returns)$/,
  /^\/seller\/inbox\/messages$/,
  /^\/seller\/(listings|orders)(\/[^/]+)?$/,
  /^\/seller\/settings(\/(store|shipping|payments|notifications|site))?$/,
];

function routeCapability(pathname: string): StoreCapability | null {
  if (pathname === '/seller/team') return 'team.view';
  if (pathname === '/seller/schedule') return 'schedule.manage';
  if (pathname === '/seller/timesheets') return 'timesheets.approve';
  if (pathname === '/seller/payroll') return 'payroll.export';
  if (pathname === '/seller/settings/schedule') return 'settings.schedule';
  return marketplaceRoutes.some((route) => route.test(pathname)) ? 'store.admin' : null;
}

export default function SellerLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, isLoading, memberships, selectStore, commandGeneration } = useAuthStore();
  const membership = useSelectedMembership();
  const requiredCapability = routeCapability(pathname);
  const allowed = !!requiredCapability && !!membership?.capabilities.includes(requiredCapability);

  useEffect(() => {
    if (isLoading) return;
    if (!user) {
      router.replace('/login');
      return;
    }
    if (!membership && pathname !== '/seller/no-store') {
      router.replace('/seller/no-store');
    } else if (membership && !allowed && pathname !== '/seller/no-store') {
      router.replace('/staff');
    }
  }, [isLoading, user, membership, allowed, pathname, router]);

  // Bypass the shell entirely on the no-store landing page.
  if (pathname === '/seller/no-store') {
    return <>{children}</>;
  }

  if (isLoading || !user || !membership || !allowed) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-ink/60">
        Loading…
      </div>
    );
  }

  const topBarLabel = membership.store_name ?? 'Seller dashboard';

  return (
    <SellerQueryProvider key={`${commandGeneration}:${user.id}:${membership.store_id}:${membership.capabilities.join(',')}`}>
      <div className="flex min-h-screen">
        <aside className="w-64 shrink-0 border-r border-forest/10 bg-white p-6">
          <Link href="/seller" className="block">
            <Logo height={24} />
          </Link>
          <p className="mt-0.5 text-xs text-forest/50">Seller Dashboard</p>
          {memberships && memberships.length > 1 && (
            <label className="mt-4 block text-sm text-forest">
              Store
              <select className="mt-1 w-full rounded border border-forest/20 bg-white p-2" value={membership.store_id} onChange={(event) => selectStore(event.target.value)}>
                {memberships.map((entry) => <option key={entry.store_id} value={entry.store_id}>{entry.store_name ?? entry.store_id}</option>)}
              </select>
            </label>
          )}
          <nav className="mt-8 flex flex-col gap-1">
            {navItems.filter((item) => {
              const capability = item.href === '/seller/team' ? 'team.manage' : routeCapability(item.href);
              return capability !== null && membership.capabilities.includes(capability);
            }).map((item) => {
              const isActive =
                pathname === item.href ||
                (item.href !== '/seller' && pathname.startsWith(item.href));
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    'rounded px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'border-l-2 border-terracotta bg-terracotta/10 text-terracotta'
                      : 'text-forest/70 hover:bg-forest/5 hover:text-forest',
                  )}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <div className="flex flex-1 flex-col">
          <SellerTopBar storeName={topBarLabel} />
          <main className="flex-1 bg-bone p-8">{children}</main>
        </div>
      </div>
    </SellerQueryProvider>
  );
}