// @design-system: admin/StripeAdminDrilldown
// Modal overlay for admin Stripe drill-down into a vendor's Connect account.

'use client';

import { useState, useEffect, useId } from 'react';
import { loadConnectAndInitialize } from '@stripe/connect-js/pure';
import type { StripeConnectInstance } from '@stripe/connect-js/pure';
import {
  ConnectComponentsProvider,
  ConnectPayouts,
  ConnectPayments,
} from '@stripe/react-connect-js';
import { X } from 'lucide-react';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import { useT } from '@/lib/i18n/react';
import { IconButton } from '@/components/ui/primitives/IconButton';
import { Dialog, DialogContent, DialogTitle, DialogHeader } from '@/components/ui/overlays/Dialog';

// ─── Types ────────────────────────────────────────────────────────────────────

export interface StripeAdminDrilldownProps {
  vendorId: string;
  vendorName: string;
  publishableKey: string;
  onClose: () => void;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function StripeAdminDrilldown({
  vendorId,
  vendorName,
  publishableKey,
  onClose,
}: StripeAdminDrilldownProps) {
  const t = useT('admin_settlements');
  const titleId = useId();

  const [instance, setInstance] = useState<StripeConnectInstance | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function init() {
      setLoading(true);
      setLoadError(null);
      try {
        const connectInstance = loadConnectAndInitialize({
          publishableKey,
          fetchClientSecret: async () => {
            const res = await fetch('/api/admin/stripe-session', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'x-csrf-token': getCsrfToken(),
              },
              body: JSON.stringify({ vendorId }),
            });
            if (!res.ok) {
              const json = (await res.json().catch((err) => {
                captureCaught(err, { scope: 'StripeAdminDrilldown.fetchClientSecret.parse' });
                return {};
              })) as Record<string, unknown>;
              throw new Error((json.error as string) || `HTTP ${res.status}`);
            }
            const data = (await res.json()) as { clientSecret: string };
            return data.clientSecret;
          },
        });
        if (!cancelled) {
          setInstance(connectInstance);
        }
      } catch (err) {
        captureCaught(err instanceof Error ? err : new Error(String(err)), {
          scope: 'StripeAdminDrilldown.init',
        });
        if (!cancelled) {
          setLoadError(err instanceof Error ? err.message : String(err));
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void init();
    return () => {
      cancelled = true;
    };
  }, [vendorId, publishableKey]);

  return (
    <Dialog open onOpenChange={(isOpen) => !isOpen && onClose()}>
      <DialogContent
        className="flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden p-0"
        aria-labelledby={titleId}
      >
        {/* Header */}
        <DialogHeader className="flex flex-row items-center justify-between border-b px-6 py-4">
          <div>
            <DialogTitle id={titleId} className="text-heading-sm font-semibold">
              {t('stripe_drilldown_title')}
            </DialogTitle>
            <p className="text-body-sm text-muted mt-0.5">{vendorName}</p>
          </div>
          <IconButton
            aria-label={t('stripe_drilldown_close')}
            variant="ghost"
            size="sm"
            shape="square"
            onClick={onClose}
            className="text-muted hover:text-foreground transition-colors focus-visible:outline-2"
          >
            <X width={16} height={16} strokeWidth={2} aria-hidden="true" />
          </IconButton>
        </DialogHeader>

        {/* Body */}
        <div className="flex-1 overflow-y-auto px-6 py-6">
          {loading && <p className="text-muted text-center">{t('stripe_loading')}</p>}

          {loadError && (
            <p role="alert" className="text-danger-600 text-center text-sm">
              {loadError}
            </p>
          )}

          {!loading && !loadError && !instance && (
            <p className="text-muted text-center text-sm">{t('stripe_not_connected')}</p>
          )}

          {instance && (
            <ConnectComponentsProvider connectInstance={instance}>
              <div className="flex flex-col gap-8">
                <section aria-label={t('stripe_payouts_section')}>
                  <ConnectPayouts />
                </section>
                <section aria-label={t('stripe_payments_section')}>
                  <ConnectPayments />
                </section>
              </div>
            </ConnectComponentsProvider>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}