'use client';

import { useQuery } from '@tanstack/react-query';

import { apiFetch } from '@/lib/api/client';
import { MERGE_FIELDS } from '@/lib/templates/merge-fields';

interface CustomFieldDef {
  id: string;
  entityType: string;
  fieldName: string;
  fieldLabel: string;
}

const SCOPE_LABELS: Record<string, string> = {
  client: 'Client',
  yacht: 'Yacht',
  company: 'Company',
  owner: 'Owner',
  interest: 'Interest',
  berth: 'Berth',
  eoi: 'EOI',
  reservation: 'Reservation',
  port: 'Port',
  date: 'Date',
};

const CUSTOM_RESOLVABLE_ENTITY_TYPES = new Set(['client', 'interest', 'berth']);

function useCustomFieldTokens() {
  return useQuery<{ data: CustomFieldDef[] }>({
    queryKey: ['admin', 'custom-fields', 'token-picker'],
    queryFn: () => apiFetch<{ data: CustomFieldDef[] }>('/api/v1/admin/custom-fields'),
    staleTime: 60_000,
  });
}

/**
 * Reusable token reference for template / email editors.
 *
 * Renders the canonical `MERGE_FIELDS` catalog grouped by entity scope.
 * Below the static catalog, lazily fetches per-port custom field
 * definitions and renders any whose entityType is resolvable at
 * send-time (client / interest / berth - see `mergeCustomFieldValues`
 * in `document-sends.service.ts`) as a "Custom" group.
 *
 * The validator accepts any `{{custom.<fieldName>}}` shape, but only
 * the three entity types above resolve to real values, so we only show
 * those - surfacing client-portal-only fields would mis-set expectations.
 */
export function TemplateTokenPicker() {
  const customQuery = useCustomFieldTokens();
  const customFields = (customQuery.data?.data ?? []).filter((d) =>
    CUSTOM_RESOLVABLE_ENTITY_TYPES.has(d.entityType),
  );

  return (
    <div className="space-y-4">
      {Object.entries(MERGE_FIELDS).map(([scope, fields]) => (
        <div key={scope}>
          <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            {SCOPE_LABELS[scope] ?? scope}
          </p>
          <div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-xs sm:grid-cols-2">
            {fields.map((f) => (
              <div key={f.token} className="flex items-baseline gap-1.5">
                <code className="rounded bg-muted px-1 font-mono text-xs">{f.token}</code>
                <span className="truncate text-muted-foreground">{f.label}</span>
              </div>
            ))}
          </div>
        </div>
      ))}

      {customFields.length > 0 ? (
        <div>
          <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            Custom (port-specific)
          </p>
          <div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-xs sm:grid-cols-2">
            {customFields
              .slice()
              .sort((a, b) =>
                a.entityType === b.entityType
                  ? a.fieldName.localeCompare(b.fieldName)
                  : a.entityType.localeCompare(b.entityType),
              )
              .map((f) => (
                <div key={f.id} className="flex items-baseline gap-1.5">
                  <code className="rounded bg-muted px-1 font-mono text-xs">
                    {`{{custom.${f.fieldName}}}`}
                  </code>
                  <span className="truncate text-muted-foreground">
                    {f.fieldLabel}{' '}
                    <span className="text-muted-foreground/70">({f.entityType})</span>
                  </span>
                </div>
              ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}
