'use client';

/**
 * AgentDefinitionList — admin list of CS agent definitions.
 */

import { useT, useLocale } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { Badge } from '@/components/ui/primitives/Badge';
import { Checkbox } from '@/components/ui/primitives/Checkbox';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { TableSkeleton } from '@/components/ui/feedback/Skeleton';
import { Stack } from '@/components/ui/layout/Stack';
import { QueryBoundary } from '@platform-modules/ui-primitives';
import { useDefinitions, useUpdateDefinition } from './internals/useAdminSupport';
import { formatDate } from '@/lib/format';

interface AgentDefinitionSummary {
  slug: string;
  name: string;
  isActive: boolean;
  version: number;
  updatedAt: string;
}

function AgentDefinitionListInner() {
  const t = useT('admin_support');
  const definitionsQuery = useDefinitions();

  return (
    <QueryBoundary
      query={definitionsQuery}
      skeleton={<TableSkeleton rows={5} cols={5} />}
      errorFallback={() => <InlineNotice tone="danger" title={t('definitions_load_error')} />}
    >
      {(resolved) => {
        const definitions = (resolved.definitions as AgentDefinitionSummary[] | undefined) ?? [];
        return (
          <Stack gap="4">
            <PageHeader title={t('definitions_title')} subtitle={t('definitions_subtitle')} />

            {definitions.length === 0 ? (
              <EmptyState title={t('definitions_empty')} />
            ) : (
              <div className="border-border-default overflow-hidden rounded-lg border">
                <table className="w-full text-sm">
                  <thead className="bg-surface-raised text-text-muted text-xs uppercase">
                    <tr>
                      <th className="px-4 py-2 text-start font-medium">{t('definitions_slug')}</th>
                      <th className="px-4 py-2 text-start font-medium">{t('definitions_name')}</th>
                      <th className="px-4 py-2 text-start font-medium">
                        {t('definitions_active')}
                      </th>
                      <th className="px-4 py-2 text-start font-medium">
                        {t('definitions_version')}
                      </th>
                      <th className="px-4 py-2 text-start font-medium">
                        {t('definitions_updated')}
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-border-default divide-y">
                    {definitions.map((def) => (
                      <DefinitionRow key={def.slug} def={def} />
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </Stack>
        );
      }}
    </QueryBoundary>
  );
}

function DefinitionRow({ def }: { def: AgentDefinitionSummary }) {
  const t = useT('admin_support');
  const { locale } = useLocale();
  const update = useUpdateDefinition(def.slug);

  return (
    <tr
      className="bg-surface-default hover:bg-surface-raised cursor-pointer transition-colors"
      onClick={() => {
        window.location.href = `/admin/support/definitions/${def.slug}`;
      }}
    >
      <td className="px-4 py-3 font-mono text-xs">{def.slug}</td>
      <td className="px-4 py-3 font-medium">{def.name}</td>
      <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center gap-2">
          <Checkbox
            checked={def.isActive}
            disabled={update.isPending}
            onCheckedChange={(checked) => {
              void update.mutateAsync({ is_active: checked === true });
            }}
            aria-label={t('definitions_active_agent')}
          />
          <Badge tone={def.isActive ? 'success' : 'neutral'} size="sm">
            {def.isActive ? t('providers_active') : t('providers_inactive')}
          </Badge>
        </div>
      </td>
      <td className="px-4 py-3">{def.version}</td>
      <td className="text-text-muted px-4 py-3">{formatDate(def.updatedAt, locale)}</td>
    </tr>
  );
}

export function AgentDefinitionList() {
  return (
    <HydratedIsland>
      <AgentDefinitionListInner />
    </HydratedIsland>
  );
}