'use client';

import type { DehydratedState } from '@tanstack/react-query';
import { useLayoutEffect } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { useT } from '@/lib/i18n/react';
import { VendorDashboardSkeleton } from '@/components/ui/feedback/Skeleton/VendorDashboardSkeleton';
import { ErrorState } from '@/components/ui/feedback/ErrorState';
import { Button } from '@/components/ui/primitives/Button';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { useVendorDashboardData } from '@/features/vendor-dashboard/useVendorDashboardData';
import { VendorWelcome } from './VendorWelcome';
import { VendorPendingActiveDashboard } from './VendorPendingActiveDashboard';
import { VendorRejectedScreen } from './VendorRejectedScreen';
import { VendorFrozen } from './VendorFrozen';
import { VendorBanned } from './VendorBanned';
import { VendorDashboard } from '../vendor-dashboard/VendorDashboard';
import { useBrowserHref } from '@/lib/hooks/useHydrated';

function VendorWelcomeWrapperInner() {
  const tError = useT('error');
  const tWelcome = useT('vendor_welcome');
  const tCommon = useT('common');
  const href = useBrowserHref();

  useLayoutEffect(() => {
    document.getElementById('vendor-dashboard-static-skeleton')?.remove();
  }, []);

  const { data, isLoading, isError } = useVendorDashboardData();
  const showSkeleton = isLoading && !data;

  if (showSkeleton) return <VendorDashboardSkeleton />;

  if (isError && !data) {
    return (
      <VendorShell variant="centered" showTopbar>
        <ErrorState
          title={tError('title')}
          description={tWelcome('error_network')}
          action={
            <Button
              type="button"
              variant="secondary"
              size="sm"
              onClick={() => {
                window.location.reload();
              }}
            >
              {tCommon('retry')}
            </Button>
          }
        />
      </VendorShell>
    );
  }

  const vendor = data?.vendor;

  if (!vendor) return <VendorDashboardSkeleton />;

  switch (vendor.accountState) {
    case 'PENDING_FIRST_APPROVAL':
      return (
        <VendorPendingActiveDashboard
          state="PENDING_FIRST_APPROVAL"
          businessName={vendor.businessName}
          flagReason={vendor.flagReason}
        />
      );

    case 'PENDING_PROCESSOR':
      return (
        <VendorPendingActiveDashboard
          state="PENDING_PROCESSOR"
          businessName={vendor.businessName}
          flagReason={vendor.flagReason}
        />
      );

    case 'REJECTED':
      return <VendorRejectedScreen rejectReason={vendor.rejectReason} />;

    case 'ACTIVE': {
      const skipWelcome =
        new URL(href || 'https://multideal.invalid/').searchParams.get('skipWelcome') === '1';
      if (data.hasAnyDeals || skipWelcome) {
        return <VendorDashboard />;
      }
      return <VendorWelcome />;
    }

    case 'FROZEN':
      return <VendorFrozen />;

    case 'BANNED':
      return <VendorBanned />;

    default:
      return <VendorWelcome />;
  }
}

export interface VendorWelcomeWrapperProps {
  dehydratedState?: DehydratedState;
}

export function VendorWelcomeWrapper({ dehydratedState }: VendorWelcomeWrapperProps) {
  return (
    <HydratedIsland dehydratedState={dehydratedState}>
      <VendorWelcomeWrapperInner />
    </HydratedIsland>
  );
}