'use client';

import { useState } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { LanguageRegistryTable, type Language } from '@/components/ui/admin/LanguageRegistryTable';
import { LanguageEditDialog } from './LanguageEditDialog';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import type { Locale } from '@/lib/i18n';

// ─── Props ────────────────────────────────────────────────────────────────────

export interface LanguagesIslandProps {
  /** Initial language list server-fetched by the Astro page. */
  initialLanguages: Language[];
  /** Server-resolved locale — threads through HydratedIsland to prevent React #418. */
  locale?: Locale;
}

// ─── Inner island (inside QueryClient + i18n) ─────────────────────────────────

function LanguagesIslandInner({ initialLanguages }: Omit<LanguagesIslandProps, 'locale'>) {
  const [languages, setLanguages] = useState<Language[]>(initialLanguages);
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState<Language | null>(null);
  const [adding, setAdding] = useState(false);

  async function refresh() {
    setLoading(true);
    try {
      const res = await fetch('/api/admin/languages');
      const json = (await res.json()) as { ok: boolean; languages?: Language[] };
      if (json.ok && json.languages) {
        setLanguages(json.languages);
      }
    } catch (err) {
      captureCaught(err, { scope: 'admin-languages.LanguagesIsland.refresh', severity: 'warning' });
    } finally {
      setLoading(false);
    }
  }

  async function handleToggleActive(code: string, next: boolean) {
    try {
      if (next) {
        await fetch(`/api/admin/languages/${code}`, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
            'x-csrf-token': getCsrfToken(),
          },
          body: JSON.stringify({ isActive: true }),
        });
      } else {
        await fetch(`/api/admin/languages/${code}`, {
          method: 'DELETE',
          headers: { 'x-csrf-token': getCsrfToken() },
        });
      }
      await refresh();
    } catch (err) {
      captureCaught(err, {
        scope: 'admin-languages.LanguagesIsland.toggleActive',
        severity: 'warning',
      });
    }
  }

  function handleDialogClose() {
    setEditing(null);
    setAdding(false);
    // Refresh list after save
    void refresh();
  }

  return (
    <>
      <LanguageRegistryTable
        languages={languages}
        loading={loading}
        onEdit={setEditing}
        onToggleActive={handleToggleActive}
        onAdd={() => setAdding(true)}
      />

      {(editing !== null || adding) && (
        <LanguageEditDialog
          mode={editing !== null ? 'edit' : 'add'}
          initial={editing ?? undefined}
          onClose={handleDialogClose}
        />
      )}
    </>
  );
}

// ─── Exported island (wraps with HydratedIsland for QueryClient + i18n) ──────

export default function LanguagesIsland({ locale, ...rest }: LanguagesIslandProps) {
  return (
    <HydratedIsland locale={locale}>
      <LanguagesIslandInner {...rest} />
    </HydratedIsland>
  );
}