'use client';

import { lazy, Suspense } from 'react';
import type { DehydratedState } from '@tanstack/react-query';
import { HydratedIsland } from '@/components/HydratedIsland';
import { TooltipProvider } from '@/components/ui/overlays/Tooltip/Tooltip';
import type { Locale } from '@/lib/i18n';
import type { SystemOverviewStats } from '@/server/admin/resources/system/overview';
import type { OutboxPanelProps } from './panels/OutboxPanel';
import type { AuditPanelProps } from './panels/AuditPanel';
import type { HealthFindingRowData } from '@/components/ui/domain/admin/HealthFindingRow';
import type { EmailLogPanelProps } from './panels/EmailLogPanel';

const OverviewPanel = lazy(() =>
  import('./panels/OverviewPanel').then(({ OverviewPanel: Component }) => ({ default: Component })),
);
const OutboxPanel = lazy(() =>
  import('./panels/OutboxPanel').then(({ OutboxPanel: Component }) => ({ default: Component })),
);
const AuditPanel = lazy(() =>
  import('./panels/AuditPanel').then(({ AuditPanel: Component }) => ({ default: Component })),
);
const HealthPanel = lazy(() =>
  import('./panels/HealthPanel').then(({ HealthPanel: Component }) => ({ default: Component })),
);
const EmailLogPanel = lazy(() =>
  import('./panels/EmailLogPanel').then(({ EmailLogPanel: Component }) => ({ default: Component })),
);
const AddressCachePanel = lazy(() =>
  import('./panels/AddressCachePanel').then(({ AddressCachePanel: Component }) => ({
    default: Component,
  })),
);
const MonitoringPanel = lazy(() =>
  import('./panels/MonitoringPanel').then(({ MonitoringPanel: Component }) => ({
    default: Component,
  })),
);

type Tab =
  | 'overview'
  | 'outbox'
  | 'audit'
  | 'health'
  | 'email-log'
  | 'address-cache'
  | 'monitoring';

export interface SystemRouteIslandProps {
  tab: Tab;
  locale: Locale;
  overview: SystemOverviewStats;
  outbox: Pick<OutboxPanelProps, 'initialEvents' | 'initialTotal' | 'initialPage'>;
  audit: Pick<AuditPanelProps, 'initialEntries' | 'initialTotal' | 'initialPage'>;
  findings: HealthFindingRowData[];
  emailLog: Pick<EmailLogPanelProps, 'isProd' | 'initialEmails' | 'initialTotal'>;
  addressCacheDehydrated?: DehydratedState;
  monitoringChannelsDehydrated?: DehydratedState;
  monitoringChecksDehydrated?: DehydratedState;
  monitoringDlqDehydrated?: DehydratedState;
  monitoringOutboxDeadDehydrated?: DehydratedState;
}

function SystemRoutePanel(props: SystemRouteIslandProps) {
  const { tab, locale } = props;
  switch (tab) {
    case 'overview':
      return <OverviewPanel locale={locale} {...props.overview} />;
    case 'outbox':
      return <OutboxPanel locale={locale} {...props.outbox} />;
    case 'audit':
      return <AuditPanel locale={locale} {...props.audit} />;
    case 'health':
      return <HealthPanel locale={locale} initialFindings={props.findings} />;
    case 'email-log':
      return <EmailLogPanel locale={locale} {...props.emailLog} />;
    case 'address-cache':
      return <AddressCachePanel locale={locale} dehydratedState={props.addressCacheDehydrated} />;
    case 'monitoring':
      return (
        <MonitoringPanel
          locale={locale}
          channelsDehydrated={props.monitoringChannelsDehydrated}
          checksDehydrated={props.monitoringChecksDehydrated}
          dlqDehydrated={props.monitoringDlqDehydrated}
          outboxDeadDehydrated={props.monitoringOutboxDeadDehydrated}
        />
      );
  }
}

export function SystemRouteIsland(props: SystemRouteIslandProps) {
  return (
    <HydratedIsland locale={props.locale}>
      <TooltipProvider delayDuration={200}>
        <Suspense fallback={null}>
          <SystemRoutePanel {...props} />
        </Suspense>
      </TooltipProvider>
    </HydratedIsland>
  );
}