'use client';

/**
 * OutboxAbandonedPanel — admin view of dead outbox events with re-drive action.
 */

import { useMemo, useState } from 'react';
import { useT, useLocale } from '@/lib/i18n/react';
import { RelativeTimeCell } from './RelativeTimeCell';
import { HydratedIsland } from '@/components/HydratedIsland';
import type { DehydratedState } from '@tanstack/react-query';
import type { Locale } from '@/lib/i18n';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { Spinner } from '@/components/ui/feedback/Spinner';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { TableSkeleton } from '@/components/ui/feedback/Skeleton';
import { Row } from '@/components/ui/layout/Row';
import { Stack } from '@/components/ui/layout/Stack';
import { AdminTable, type ColumnDef } from '@/components/ui/domain/admin/AdminTable';
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@/components/ui/overlays/AlertDialog';
import { useToast } from '@/components/ui/overlays/Toast';
import {
  useDeadOutbox,
  useRedriveOutbox,
  type OutboxDeadEventView,
} from './internals/useMonitorOutbox';
import { QueryBoundary } from '@platform-modules/ui-primitives';

function RedriveButton({ event }: { event: OutboxDeadEventView }) {
  const t = useT('adminMonitor');
  const tc = useT('common');
  const { toast } = useToast();
  const [confirmOpen, setConfirmOpen] = useState(false);
  const redrive = useRedriveOutbox(event.id);

  return (
    <>
      <Button
        variant="ghost"
        size="sm"
        disabled={redrive.isPending}
        onClick={() => setConfirmOpen(true)}
      >
        {redrive.isPending ? <Spinner variant="dots" size="sm" /> : t('outboxRedrive')}
      </Button>

      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogTitle>{t('outboxRedrive')}</AlertDialogTitle>
          <AlertDialogDescription>{t('outboxConfirmRedrive')}</AlertDialogDescription>
          <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
          <AlertDialogAction
            onClick={() =>
              redrive.mutate(undefined, {
                onSuccess: () => {
                  setConfirmOpen(false);
                  toast({ title: t('outboxRedriven'), tone: 'success' });
                },
                onError: () => {
                  setConfirmOpen(false);
                  toast({ title: t('saveError'), tone: 'danger' });
                },
              })
            }
          >
            {t('outboxRedrive')}
          </AlertDialogAction>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}

function OutboxAbandonedPanelInner() {
  const t = useT('adminMonitor');
  const { locale } = useLocale();
  const eventsQuery = useDeadOutbox();

  const columns = useMemo<ColumnDef<OutboxDeadEventView>[]>(
    () => [
      {
        key: 'id',
        label: t('outboxEventId'),
        render: (event) => <span className="font-mono text-xs">{event.id}</span>,
      },
      {
        key: 'eventType',
        label: t('outboxEventType'),
        render: (event) => (
          <Badge tone="danger" size="md">
            {event.eventType}
          </Badge>
        ),
      },
      { key: 'retryCount', label: t('outboxRetryCount') },
      {
        key: 'deadAt',
        label: t('outboxDeadAt'),
        render: (event) => (
          <RelativeTimeCell
            date={event.deadAt}
            locale={locale}
            className="text-text-muted text-xs"
          />
        ),
      },
      {
        key: 'lastError',
        label: t('outboxLastError'),
        render: (event) => (
          <span className="text-text-secondary block max-w-xs truncate">
            {event.lastError ?? '—'}
          </span>
        ),
      },
      {
        key: 'actions',
        label: '',
        align: 'end',
        interactive: true,
        render: (event) => (
          <Row justify="end">
            <RedriveButton event={event} />
          </Row>
        ),
      },
    ],
    [locale, t],
  );

  return (
    <Stack gap="4">
      <PageHeader title={t('outboxAbandonedTitle')} />

      <QueryBoundary
        query={eventsQuery}
        skeleton={<TableSkeleton rows={4} cols={6} />}
        errorFallback={() => <InlineNotice tone="danger" title={t('saveError')} />}
      >
        {(resolvedEvents) =>
          resolvedEvents.length === 0 ? (
            <EmptyState title={t('outboxAbandonedEmpty')} />
          ) : (
            <AdminTable<OutboxDeadEventView>
              columns={columns}
              rows={resolvedEvents}
              loading={false}
              columnControls={false}
              stickyHeader={false}
            />
          )
        }
      </QueryBoundary>
    </Stack>
  );
}

export function OutboxAbandonedPanel({
  locale,
  dehydratedState,
}: {
  locale?: Locale;
  dehydratedState?: DehydratedState;
}) {
  return (
    <HydratedIsland locale={locale} dehydratedState={dehydratedState}>
      <OutboxAbandonedPanelInner />
    </HydratedIsland>
  );
}