'use client';
import { ErrorState } from '@/components/ui/feedback/ErrorState';

import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { HydratedIsland } from '@/components/HydratedIsland';
import type { DehydratedState } from '@tanstack/react-query';
import type { Locale } from '@/lib/i18n';
import { Card } from '@/components/ui/layout/Card';
import { captureCaught } from '@/lib/observability';
import { Button } from '@/components/ui/primitives/Button';
import { MetricTile } from '@/components/ui/domain/MetricTile/MetricTile';
import { useT } from '@/lib/i18n/react';
import { formatInteger } from '@/lib/format.js';
import { getCsrfToken } from '@/lib/csrf';

type Telemetry = {
  r2Hits: number;
  lazyFetches: number;
  unresolvable: number;
  manualOverrides: number;
  byResolution: Record<string, number>;
};

const TELEMETRY_KEY = ['admin-address-cache-telemetry'] as const;

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

function TelemetryContent() {
  const t = useT('admin_addresses');
  const tCommon = useT('common');
  const qc = useQueryClient();
  const [refreshing, setRefreshing] = useState(false);

  const { data, isError, refetch } = useQuery<Telemetry | null>({
    queryKey: TELEMETRY_KEY,
    queryFn: async () => {
      const r = await fetch('/api/admin/address-cache/telemetry');
      const json = (await r.json()) as Record<string, unknown>;
      if (json?.ok && json.data) return json.data as Telemetry;
      if (typeof json?.r2Hits === 'number') return json as unknown as Telemetry;
      return null;
    },
    initialData: null,
  });

  async function forceRefresh() {
    setRefreshing(true);
    await fetch('/api/admin/address-cache/refresh', {
      method: 'POST',
      headers: { 'x-csrf-token': getCsrfToken() },
    }).catch((err: unknown) => {
      captureCaught(err, { scope: 'AddressCacheTelemetry.forceRefresh', severity: 'warning' });
    });
    await qc.invalidateQueries({ queryKey: TELEMETRY_KEY });
    setRefreshing(false);
  }

  if (isError) {
    return (
      <ErrorState
        title={tCommon('error_loading')}
        action={
          <Button variant="secondary" size="sm" onClick={() => refetch()}>
            {tCommon('retry')}
          </Button>
        }
      />
    );
  }
  return (
    <Card>
      <h2 className="mb-4 text-lg font-semibold">{t('page_title')}</h2>
      {data ? (
        <div className="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
          <MetricTile label={t('stat_r2_hits')} value={formatInteger(data.r2Hits)} />
          <MetricTile label={t('stat_lazy_fetches')} value={formatInteger(data.lazyFetches)} />
          <MetricTile label={t('stat_unresolvable')} value={formatInteger(data.unresolvable)} />
          <MetricTile
            label={t('stat_manual_overrides')}
            value={formatInteger(data.manualOverrides)}
          />
        </div>
      ) : (
        <p className="text-text-muted mb-6">{t('loading')}</p>
      )}
      {data?.byResolution && Object.keys(data.byResolution).length > 0 && (
        <section className="mb-6">
          <h3 className="mb-2 text-sm font-semibold">{t('by_resolution_heading')}</h3>
          <ul className="flex flex-col gap-1">
            {Object.entries(data.byResolution).map(([key, val]) => (
              <li key={key} className="flex justify-between text-sm">
                <span className="font-mono">{key}</span>
                <span>{formatInteger(val)}</span>
              </li>
            ))}
          </ul>
        </section>
      )}
      <Button onClick={forceRefresh} disabled={refreshing} aria-label={t('refresh_aria')}>
        {refreshing ? t('refreshing') : t('force_refresh')}
      </Button>
    </Card>
  );
}