/**
 * PromoCodesList — vendor promo-codes list island.
 *
 * Fetches from /api/vendor/promo-codes (vendor-scoped; no funder column).
 * No funder column, no scope='all', no vendor selector — vendor-funded always.
 */

'use client';
import { ErrorState } from '@/components/ui/feedback/ErrorState';
import { QueryBoundary } from '@platform-modules/ui-primitives';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { HydratedIsland } from '@/components/HydratedIsland';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { Table } from '@/components/ui/primitives/Table';
import { TableSkeleton, SkeletonGuard } from '@/components/ui/feedback/Skeleton';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';
import { useLocale, useT } from '@/lib/i18n/react';
import { formatDate } from '@/lib/format';
import { useToast } from '@/components/ui/overlays/Toast/useToast';
import { getCsrfToken } from '@/lib/csrf';
import { formatPromoValue, promoStatusTone, formatPromoStatus } from '@/lib/promo-formatters';
import { type PromoKind } from '@/lib/enums/promo-kind';
import { type PromoStatus } from '@/lib/enums/promo-status';
import type { DashboardPrefetchDescriptor } from '@/lib/query/prefetch-registry';

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

interface ApiPromoCode {
  id: string;
  code: string;
  kind: PromoKind;
  valueBps: number | null;
  valueAmount: number | null;
  bogoBuy: number | null;
  bogoGetFree: number | null;
  status: PromoStatus;
  redemptionCount: number;
  totalCap: number | null;
  validFrom: string | null;
  validUntil: string | null;
  description: string | null;
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

function kindLabel(kind: ApiPromoCode['kind'], t: (key: string) => string): string {
  if (kind === 'percentage') return t('admin.form.kind_percentage');
  if (kind === 'fixed_amount') return t('admin.form.kind_fixed');
  return t('admin.form.kind_bogo');
}

// ─── Hook ─────────────────────────────────────────────────────────────────────

function useVendorPromoCodes() {
  return useQuery<ApiPromoCode[]>({
    queryKey: VENDOR_PROMO_CODES_QUERY_KEY,
    queryFn: fetchVendorPromoCodes,
    staleTime: 30_000,
  });
}

export const VENDOR_PROMO_CODES_QUERY_KEY = ['vendor-promo-codes'] as const;

export async function fetchVendorPromoCodes(): Promise<ApiPromoCode[]> {
  const res = await fetch('/api/vendor/promo-codes');
  if (!res.ok) throw new Error('Failed to load promo codes');
  const json = (await res.json()) as { ok: boolean; codes: ApiPromoCode[] };
  return json.codes ?? [];
}

export const VENDOR_PROMO_CODES_PREFETCH_DESCRIPTOR: DashboardPrefetchDescriptor = {
  href: '/vendor/promo-codes',
  queryKey: VENDOR_PROMO_CODES_QUERY_KEY,
  queryFn: fetchVendorPromoCodes,
  staleTime: 30_000,
};

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

function PromoCodesListInner() {
  const t = useT('promo_codes') as (key: string) => string;
  const tCommon = useT('common');
  const { locale } = useLocale();
  const { toast } = useToast();
  const qc = useQueryClient();
  const promoCodesQuery = useVendorPromoCodes();
  const [deletingId, setDeletingId] = useState<string | null>(null);

  const archiveMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch(`/api/vendor/promo-codes/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrfToken() },
        body: JSON.stringify({ status: 'archived' }),
      });
      if (!res.ok) throw new Error('Archive failed');
    },
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ['vendor-promo-codes'] });
      setDeletingId(null);
      toast({ title: t('admin.archived_ok'), tone: 'success' });
    },
    onError: () => {
      setDeletingId(null);
      toast({ title: t('admin.archived_error'), tone: 'danger' });
    },
  });

  return (
    <VendorShell variant="dashboard" currentPath="/vendor/promo-codes">
      <main id="main" className="px-4 py-6 lg:px-8">
        {/* Header */}
        <div className="mb-6 flex items-center justify-end gap-4">
          <Button
            variant="primary"
            size="sm"
            onClick={() => {
              window.location.href = '/vendor/promo-codes/new';
            }}
          >
            {t('vendor.new_code')}
          </Button>
        </div>

        {/* Vendor note */}
        <p className="text-text-muted mb-4 text-sm">{t('vendor.note')}</p>

        <QueryBoundary
          query={promoCodesQuery}
          skeleton={
            <div aria-busy="true" role="status" data-testid="instant-skeleton:vendor-promo-codes">
              <span className="sr-only">{t('loading')}</span>
              <SkeletonGuard delay={0}>
                <TableSkeleton rows={5} cols={3} />
              </SkeletonGuard>
            </div>
          }
          errorFallback={() => (
            <ErrorState
              title={tCommon('error_loading')}
              action={
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => void promoCodesQuery.refetch()}
                >
                  {tCommon('retry')}
                </Button>
              }
            />
          )}
        >
          {(codes) => {
            const activeCodes = codes.filter((c) => c.status !== 'archived');
            if (activeCodes.length === 0) {
              return (
                <div className="border-border rounded-lg border py-16 text-center">
                  <p className="text-text-primary text-base font-medium">
                    {t('vendor.empty_title')}
                  </p>
                  <p className="text-text-muted mt-2 text-sm">{t('vendor.empty_desc')}</p>
                  <Button
                    variant="primary"
                    size="sm"
                    className="mt-4"
                    onClick={() => {
                      window.location.href = '/vendor/promo-codes/new';
                    }}
                  >
                    {t('vendor.new_code')}
                  </Button>
                </div>
              );
            }

            return (
              <div
                className="border-border-default rounded-lg border"
                data-testid="instant-content:vendor-promo-codes"
              >
                <Table>
                  <Table.Head className="bg-neutral-50">
                    <Table.Row>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.code')}
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.kind')}
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.value')}
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.status')}
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        <LabelWithTooltip
                          label={t('admin.table.redemption_count')}
                          tooltip={t('admin.table.redemption_count_tooltip')}
                        />
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.valid_until')}
                      </Table.HeadCell>
                      <Table.HeadCell className="text-text-muted px-4 py-3 font-medium">
                        {t('admin.table.actions')}
                      </Table.HeadCell>
                    </Table.Row>
                  </Table.Head>
                  <Table.Body className="bg-surface-base divide-neutral-100">
                    {activeCodes.map((code) => (
                      <Table.Row
                        key={code.id}
                        className="hover:bg-muted/50 cursor-pointer"
                        onClick={() => {
                          window.location.assign(`/vendor/promo-codes/${code.id}`);
                        }}
                      >
                        <Table.Cell className="px-4 py-3 font-mono font-medium text-neutral-900">
                          {code.code}
                        </Table.Cell>
                        <Table.Cell className="text-text-muted px-4 py-3">
                          {kindLabel(code.kind, t)}
                        </Table.Cell>
                        <Table.Cell className="px-4 py-3 text-neutral-900">
                          {formatPromoValue(code, locale)}
                        </Table.Cell>
                        <Table.Cell className="px-4 py-3">
                          <Badge tone={promoStatusTone(code.status)} size="sm">
                            {formatPromoStatus(code, locale, 'vendor')}
                          </Badge>
                        </Table.Cell>
                        <Table.Cell className="text-text-muted px-4 py-3">
                          {code.redemptionCount}
                          {code.totalCap != null && (
                            <span className="text-text-muted"> / {code.totalCap}</span>
                          )}
                        </Table.Cell>
                        <Table.Cell className="text-text-muted px-4 py-3">
                          {code.validUntil ? formatDate(code.validUntil, locale) : '—'}
                        </Table.Cell>
                        <Table.Cell className="px-4 py-3">
                          <div className="flex items-center gap-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                window.location.href = `/vendor/promo-codes/${code.id}`;
                              }}
                            >
                              {t('admin.table.edit')}
                            </Button>
                            <Button
                              variant="danger"
                              size="sm"
                              loading={deletingId === code.id}
                              onClick={(e) => {
                                e.stopPropagation();
                                setDeletingId(code.id);
                                archiveMutation.mutate(code.id);
                              }}
                            >
                              {t('admin.table.archive')}
                            </Button>
                          </div>
                        </Table.Cell>
                      </Table.Row>
                    ))}
                  </Table.Body>
                </Table>
              </div>
            );
          }}
        </QueryBoundary>
      </main>
    </VendorShell>
  );
}

export function PromoCodesList() {
  return (
    <HydratedIsland>
      <PromoCodesListInner />
    </HydratedIsland>
  );
}