import {
  Download,
  Eye,
  FileCheck2,
  Plus,
  RefreshCw,
  Save,
  Send,
  Trash2,
  X
} from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { DialogSection, ToolbarGroup, ActionToolbar,
  ApiError,
  ActionBlockerHint,
  Button,
  ConfirmDialog,
  ContentSection,
  Dialog,
  DocumentationHelpLink,
  DismissibleAlert,
  FilterBar,
  FormField,
  IconButton,
  LoadingFrame,
  SegmentedControl,
  SelectionList,
  SelectionListItem,
  SelectionListItemContent,
  StatePanel,
  StatusBadge,
  ToggleSwitch,
  WorkspaceFrame,
  WorkspaceLayout,
  formatDateTime,
  hasScope,
  useUnsavedChanges,
  useUnsavedDraftGuard,
  type ApiSettings,
  type AuthInfo
} from "@govoplan/core-webui";
import { WysiwygEditor } from "@govoplan/core-webui/wysiwyg";
import {
  checkTemplateCompatibility,
  createTemplate,
  deleteTemplate,
  downloadTemplateRender,
  listTemplateRenders,
  listTemplateRevisions,
  listTemplates,
  publishTemplate,
  renderTemplate,
  updateTemplate,
  type TemplateCompatibility,
  type TemplateDefinition,
  type TemplateFieldRequirement,
  type TemplateFieldType,
  type TemplatePayload,
  type TemplateRender,
  type TemplateRevision,
  type TemplateType
} from "../../api/templates";
import {
  TEMPLATE_FIELDS_DOCUMENTATION,
  TEMPLATE_OUTPUT_DOCUMENTATION,
  TEMPLATES_DOCUMENTATION,
  TEMPLATES_I18N
} from "./interfacePatterns";

type Props = { settings: ApiSettings; auth: AuthInfo };
type WorkspaceView = "definition" | "preview";

const TEMPLATE_TYPES: Array<{ value: TemplateType; label: string }> = [
  { value: "label", label: "Label" },
  { value: "label_sheet", label: "Label sheet" },
  { value: "envelope", label: "Envelope" },
  { value: "serial_letter", label: "Serial letter" },
  { value: "form_letter", label: "Form letter" },
  { value: "list_layout", label: "List layout" },
  { value: "email", label: "Email" },
  { value: "content_fragment", label: "Content fragment" },
  { value: "generic", label: "Generic" }
];

const FIELD_TYPES: TemplateFieldType[] = [
  "string", "integer", "number", "boolean", "date", "datetime", "object", "array"
];

export default function TemplatesPage({ settings, auth }: Props) {
  const [items, setItems] = useState<TemplateDefinition[]>([]);
  const [selectedId, setSelectedId] = useState("");
  const [draft, setDraft] = useState<TemplatePayload>(emptyPayload());
  const [savedKey, setSavedKey] = useState("");
  const [view, setView] = useState<WorkspaceView>("definition");
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [createOpen, setCreateOpen] = useState(false);
  const [createName, setCreateName] = useState("");
  const [createType, setCreateType] = useState<TemplateType>("form_letter");
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [publishOpen, setPublishOpen] = useState(false);
  const [finalRenderOpen, setFinalRenderOpen] = useState(false);
  const [sampleText, setSampleText] = useState('{\n  "name": "Ada Example",\n  "address": "Main Street 1",\n  "postal_code": "10115",\n  "city": "Berlin"\n}');
  const [usage, setUsage] = useState("campaign.postal");
  const [outputFormat, setOutputFormat] = useState<"html" | "text">("html");
  const [persistToFiles, setPersistToFiles] = useState(false);
  const [compatibility, setCompatibility] = useState<TemplateCompatibility | null>(null);
  const [render, setRender] = useState<TemplateRender | null>(null);
  const [revisions, setRevisions] = useState<TemplateRevision[]>([]);
  const [renders, setRenders] = useState<TemplateRender[]>([]);
  const { requestDiscard } = useUnsavedChanges();

  const selected = items.find((item) => item.id === selectedId) ?? null;
  const canWrite = hasScope(auth, "templates:template:write") || hasScope(auth, "templates:template:admin");
  const canPublish = hasScope(auth, "templates:template:publish") || hasScope(auth, "templates:template:admin");
  const canRender = hasScope(auth, "templates:template:render") || hasScope(auth, "templates:template:admin");
  const dirty = Boolean(selected && draftKey(draft) !== savedKey);
  const readOnly = !canWrite || Boolean(selected?.read_only);

  const applyItem = useCallback((item: TemplateDefinition | null) => {
    const next = item ? payloadFromItem(item) : emptyPayload();
    setDraft(next);
    setSavedKey(item ? draftKey(next) : "");
    setCompatibility(null);
    setRender(null);
    setUsage(item?.revision.usages[0] ?? "campaign.postal");
  }, []);

  const reload = useCallback(async (preferredId?: string) => {
    setLoading(true);
    setError("");
    try {
      const nextItems = await listTemplates(settings);
      setItems(nextItems);
      const nextId = preferredId && nextItems.some((item) => item.id === preferredId)
        ? preferredId
        : nextItems.some((item) => item.id === selectedId)
          ? selectedId
          : nextItems[0]?.id ?? "";
      setSelectedId(nextId);
      applyItem(nextItems.find((item) => item.id === nextId) ?? null);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setLoading(false);
    }
  }, [applyItem, selectedId, settings]);

  useEffect(() => { void reload(); }, [settings.apiBaseUrl, settings.apiKey, settings.accessToken]);
  useEffect(() => {
    if (!selectedId) {
      setRevisions([]);
      setRenders([]);
      return;
    }
    let active = true;
    void Promise.all([
      listTemplateRevisions(settings, selectedId),
      listTemplateRenders(settings, selectedId)
    ]).then(([nextRevisions, nextRenders]) => {
      if (!active) return;
      setRevisions(nextRevisions);
      setRenders(nextRenders);
    }).catch((caught) => {
      if (active) setError(errorMessage(caught));
    });
    return () => { active = false; };
  }, [selectedId, settings.apiBaseUrl, settings.apiKey, settings.accessToken]);

  const visibleItems = useMemo(() => {
    const needle = search.trim().toLocaleLowerCase();
    return needle
      ? items.filter((item) => `${item.name} ${item.template_type} ${item.revision.usages.join(" ")}`.toLocaleLowerCase().includes(needle))
      : items;
  }, [items, search]);

  const save = async () => {
    if (!selected || !draft.name.trim() || !draft.usages.length) return false;
    setBusy(true);
    setError("");
    try {
      const updated = await updateTemplate(settings, selected, draft);
      setSuccess(`Saved immutable revision ${updated.current_revision}.`);
      await reload(updated.id);
      return true;
    } catch (caught) {
      setError(errorMessage(caught));
      return false;
    } finally {
      setBusy(false);
    }
  };

  useUnsavedDraftGuard({
    dirty,
    onSave: save,
    onDiscard: () => applyItem(selected),
    title: "i18n:govoplan-templates.unsaved_title",
    message: "i18n:govoplan-templates.unsaved_message"
  });

  const create = async (): Promise<boolean> => {
    if (!createName.trim()) return false;
    setBusy(true);
    setError("");
    try {
      const created = await createTemplate(settings, {
        ...emptyPayload(createType),
        name: createName.trim()
      });
      setCreateOpen(false);
      setCreateName("");
      setSuccess(`Created ${created.name}.`);
      await reload(created.id);
      return true;
    } catch (caught) {
      setError(errorMessage(caught));
      return false;
    } finally {
      setBusy(false);
    }
  };

  useUnsavedDraftGuard({
    dirty: Boolean(createOpen && createName.trim()),
    onSave: create,
    onDiscard: () => {
      setCreateOpen(false);
      setCreateName("");
      setCreateType("form_letter");
    },
    title: "i18n:govoplan-templates.create_unsaved_title",
    message: "i18n:govoplan-templates.create_unsaved_message"
  });

  const closeCreate = () => {
    if (busy) return;
    if (createName.trim()) requestDiscard(() => setCreateOpen(false));
    else setCreateOpen(false);
  };

  const publish = async () => {
    if (!selected || dirty) return;
    setBusy(true);
    try {
      const updated = await publishTemplate(settings, selected);
      setPublishOpen(false);
      setSuccess(`Published revision ${updated.current_revision}.`);
      await reload(updated.id);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusy(false);
    }
  };

  const remove = async () => {
    if (!selected) return;
    setBusy(true);
    try {
      await deleteTemplate(settings, selected);
      setDeleteOpen(false);
      setSuccess(`Deleted ${selected.name}.`);
      await reload();
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusy(false);
    }
  };

  const runRender = async (final: boolean) => {
    if (!selected || dirty) return;
    setBusy(true);
    setError("");
    try {
      const sample = parseSample(sampleText);
      const fields = flattenFieldTypes(sample);
      const nextCompatibility = await checkTemplateCompatibility(settings, selected, usage, fields, outputFormat);
      setCompatibility(nextCompatibility);
      if (!nextCompatibility.compatible) return;
      const nextRender = await renderTemplate(settings, selected, {
        usage,
        outputFormat,
        items: [sample],
        final,
        persistToFiles
      });
      setRender(nextRender);
      if (final) setFinalRenderOpen(false);
      setRenders(await listTemplateRenders(settings, selected.id));
      setSuccess(`${final ? "Final" : "Preview"} output rendered with ${nextRender.item_count} item(s).`);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusy(false);
    }
  };

  return (
    <WorkspaceFrame as="main" height="viewport" surface="plain" className="templates-page" label="Template workspace">
      <WorkspaceLayout
        variant="split"
        primarySize="compact"
        surface="contained"
        primaryScrollable={false}
        contentScrollable={false}
        primaryLabel="Template library"
        contentLabel="Template workspace"
        contentClassName="templates-workspace"
        primary={<>
          <ActionToolbar surface="panel-header">
            <strong>Template library</strong>
            <IconButton label="Add template" icon={<Plus size={17} />} variant="primary" disabled={!canWrite} disabledReason={!canWrite ? TEMPLATES_I18N.writeReason : undefined} onClick={() => requestDiscard(() => setCreateOpen(true))} />
          </ActionToolbar>
          <FilterBar surface="panel"><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search templates" /></FilterBar>
          <SelectionList variant="navigation" label="Templates">
            {visibleItems.map((item) => (
              <SelectionListItem
                key={item.id}
                selected={item.id === selectedId}
                onClick={() => {
                  if (item.id === selectedId) return;
                  requestDiscard(() => {
                    setSelectedId(item.id);
                    applyItem(item);
                  });
                }}
              >
                <SelectionListItemContent title={item.name} description={`${typeLabel(item.template_type)} · revision ${item.current_revision}`} />
                <StatusBadge status={item.status} label={item.status} />
              </SelectionListItem>
            ))}
            {!visibleItems.length && <StatePanel size="compact" description="No matching templates." />}
          </SelectionList>
        </>}
      >
          <ActionToolbar surface="panel-header" className="templates-workspace-toolbar">
            <span className="templates-current-title">
              <strong>{selected?.name ?? "Select a template"}</strong>
              <small>{selected ? `${typeLabel(selected.template_type)} · ${selected.revision.locale}` : ""}</small>
            </span>
            <ToolbarGroup align="end" className="templates-toolbar-actions">
              <DocumentationHelpLink reference={TEMPLATES_DOCUMENTATION} />
              <IconButton label="Discard and reload" icon={<RefreshCw size={17} />} disabled={loading || busy} disabledReason={loading ? TEMPLATES_I18N.loading : busy ? TEMPLATES_I18N.busy : undefined} onClick={() => requestDiscard(() => void reload(selectedId))} />
              <Button variant="primary" disabled={!selected || readOnly || !dirty || busy} disabledReason={busy ? TEMPLATES_I18N.busy : !selected ? TEMPLATES_I18N.noSelection : readOnly ? (canWrite ? TEMPLATES_I18N.readOnlyReason : TEMPLATES_I18N.writeReason) : !dirty ? TEMPLATES_I18N.noChanges : undefined} onClick={() => void save()}><Save size={16} /> Save revision</Button>
              <Button disabled={!selected || !canPublish || dirty || busy} disabledReason={busy ? TEMPLATES_I18N.busy : !selected ? TEMPLATES_I18N.noSelection : !canPublish ? TEMPLATES_I18N.publishReason : dirty ? TEMPLATES_I18N.saveBeforeAction : undefined} onClick={() => setPublishOpen(true)}><FileCheck2 size={16} /> Publish</Button>
              <IconButton label="Delete template" icon={<Trash2 size={17} />} variant="danger" disabled={!selected || readOnly} disabledReason={!selected ? TEMPLATES_I18N.noSelection : readOnly ? (canWrite ? TEMPLATES_I18N.readOnlyReason : TEMPLATES_I18N.writeReason) : undefined} onClick={() => setDeleteOpen(true)} />
              <SegmentedControl
                value={view}
                onChange={setView}
                options={[{ id: "definition", label: "Definition" }, { id: "preview", label: "Preview" }]}
                ariaLabel="Template workspace"
              />
            </ToolbarGroup>
          </ActionToolbar>

          <div className="templates-alerts">
            {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
            {success && <DismissibleAlert tone="success" resetKey={success}>{success}</DismissibleAlert>}
            {selected && readOnly && <ActionBlockerHint
              tone="info"
              reason={{
                summary: "Template is read-only",
                details: canWrite ? TEMPLATES_I18N.readOnlyReason : TEMPLATES_I18N.writeReason,
                requiredAction: TEMPLATES_I18N.permissionAction,
                actor: TEMPLATES_I18N.permissionActor,
                target: TEMPLATES_I18N.permissionDestination
              }}
              labels={{ requiredAction: TEMPLATES_I18N.requiredAction, actor: TEMPLATES_I18N.actor, target: TEMPLATES_I18N.destination }}
              documentation={TEMPLATES_DOCUMENTATION}
            />}
          </div>

          <LoadingFrame loading={loading} label="Loading templates">
            <div className="templates-content">
              {!selected ? <StatePanel size="fill" title="Templates" description="Create or select a reusable template." /> : view === "definition" ? <>
                <DefinitionEditor draft={draft} disabled={readOnly || busy} auth={auth} onChange={setDraft} />
                <RevisionHistory revisions={revisions} currentRevisionId={selected.current_revision_id} publishedRevisionId={selected.published_revision_id ?? null} />
              </> : <>
                <PreviewPanel
                  item={selected}
                  sampleText={sampleText}
                  usage={usage}
                  outputFormat={outputFormat}
                  persistToFiles={persistToFiles}
                  compatibility={compatibility}
                  render={render}
                  disabled={busy || dirty || !canRender}
                  disabledReason={busy ? TEMPLATES_I18N.busy : dirty ? TEMPLATES_I18N.saveBeforeAction : !canRender ? TEMPLATES_I18N.renderReason : undefined}
                  onSampleText={setSampleText}
                  onUsage={setUsage}
                  onOutputFormat={setOutputFormat}
                  onPersistToFiles={setPersistToFiles}
                  onRender={(final) => final ? setFinalRenderOpen(true) : void runRender(false)}
                  onDownload={() => render && void downloadTemplateRender(settings, render).catch((caught) => setError(errorMessage(caught)))}
                />
                <RenderHistory renders={renders} settings={settings} onError={setError} />
              </>}
            </div>
          </LoadingFrame>
      </WorkspaceLayout>

      <Dialog open={createOpen} title="Add template" onClose={closeCreate} closeDisabled={busy} footer={<><Button onClick={closeCreate} disabled={busy} disabledReason={busy ? TEMPLATES_I18N.busy : undefined}>Cancel</Button><Button variant="primary" disabled={!createName.trim() || busy} disabledReason={busy ? TEMPLATES_I18N.busy : !createName.trim() ? TEMPLATES_I18N.incomplete : undefined} onClick={() => void create()}>Create</Button></>}>
        <DialogSection className="templates-dialog-form">
          <FormField label="Name" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input autoFocus value={createName} onChange={(event) => setCreateName(event.target.value)} /></FormField>
          <FormField label="Type" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><select value={createType} onChange={(event) => setCreateType(event.target.value as TemplateType)}>{TEMPLATE_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></FormField>
        </DialogSection>
      </Dialog>
      <ConfirmDialog open={publishOpen} title="i18n:govoplan-templates.publish_title" message="i18n:govoplan-templates.publish_message" confirmLabel="Publish" busy={busy} onCancel={() => setPublishOpen(false)} onConfirm={() => void publish()} />
      <ConfirmDialog open={finalRenderOpen} title="i18n:govoplan-templates.render_title" message="i18n:govoplan-templates.render_message" confirmLabel="Render final output" busy={busy} onCancel={() => setFinalRenderOpen(false)} onConfirm={() => void runRender(true)} />
      <ConfirmDialog open={deleteOpen} title="Delete template?" message="Existing render evidence remains until module retention removes it. Consumers can no longer select this template." confirmLabel="Delete" tone="danger" busy={busy} onCancel={() => setDeleteOpen(false)} onConfirm={() => void remove()} />
    </WorkspaceFrame>
  );
}

function RevisionHistory({ revisions, currentRevisionId, publishedRevisionId }: { revisions: TemplateRevision[]; currentRevisionId: string; publishedRevisionId: string | null }) {
  return <ContentSection className="templates-history">
    <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Revision history</strong><small>{revisions.length} immutable revision(s)</small></ActionToolbar>
    <div className="templates-history-list">
      {revisions.map((revision) => <div key={revision.id}>
        <span><strong>Revision {revision.revision}</strong><small>{formatDateTime(revision.created_at)} · {shortHash(revision.definition_hash)}</small></span>
        <span className="templates-history-badges">
          {revision.id === currentRevisionId && <StatusBadge status="current" label="Current" />}
          {revision.id === publishedRevisionId && <StatusBadge status="active" label="Published" />}
        </span>
      </div>)}
      {!revisions.length && <StatePanel size="inline" description="No revision evidence is available." />}
    </div>
  </ContentSection>;
}

function RenderHistory({ renders, settings, onError }: { renders: TemplateRender[]; settings: ApiSettings; onError: (message: string) => void }) {
  return <ContentSection className="templates-history">
    <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Output history</strong><small>{renders.length} recent render(s)</small></ActionToolbar>
    <div className="templates-history-list">
      {renders.map((item) => <div key={item.render_id}>
        <span><strong>{item.filename}</strong><small>{item.generated_at ? formatDateTime(item.generated_at) : "Generated"} · {item.item_count} item(s) · {shortHash(item.output_sha256)}</small></span>
        <Button disabled={!item.artifact?.download_path} onClick={() => void downloadTemplateRender(settings, item).catch((caught) => onError(errorMessage(caught)))}><Download size={15} /> Download</Button>
      </div>)}
      {!renders.length && <StatePanel size="inline" description="No output has been rendered for this template." />}
    </div>
  </ContentSection>;
}

function DefinitionEditor({ draft, disabled, auth, onChange }: { draft: TemplatePayload; disabled: boolean; auth: AuthInfo; onChange: (draft: TemplatePayload) => void }) {
  const update = <K extends keyof TemplatePayload>(key: K, value: TemplatePayload[K]) => onChange({ ...draft, [key]: value });
  const scopeOptions = [
    { value: "tenant:", label: "Tenant" },
    { value: `user:${auth.user.account_id}`, label: "Only me" },
    ...auth.groups.map((group) => ({ value: `group:${group.id}`, label: `Group: ${group.name}` }))
  ];
  const scopeValue = `${draft.scope_type}:${draft.scope_id ?? ""}`;
  const layout = draft.layout;
  return (
    <div className="templates-definition">
      <div className="templates-definition-fields">
        <FormField label="Name" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input disabled={disabled} value={draft.name} onChange={(event) => update("name", event.target.value)} /></FormField>
        <FormField label="Type" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><select disabled={disabled} value={draft.template_type} onChange={(event) => update("template_type", event.target.value as TemplateType)}>{TEMPLATE_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></FormField>
        <FormField label="Locale" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input disabled={disabled} value={draft.locale} onChange={(event) => update("locale", event.target.value)} /></FormField>
        <FormField label="Visibility" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><select disabled={disabled} value={scopeValue} onChange={(event) => { const [scopeType, scopeId] = event.target.value.split(":", 2); onChange({ ...draft, scope_type: scopeType as TemplatePayload["scope_type"], scope_id: scopeId || null }); }}>{scopeOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select></FormField>
        <FormField label="Usages" help="Comma-separated capability contexts, for example campaign.postal or addresses.labels." documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input disabled={disabled} value={draft.usages.join(", ")} onChange={(event) => update("usages", splitValues(event.target.value))} /></FormField>
        <FormField label="Description"><input disabled={disabled} value={draft.description ?? ""} onChange={(event) => update("description", event.target.value || null)} /></FormField>
      </div>

      <ContentSection>
        <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Required data contract</strong><Button disabled={disabled} onClick={() => update("required_fields", [...draft.required_fields, emptyField()])}><Plus size={15} /> Add field</Button></ActionToolbar>
        <div className="templates-fields-table">
          {draft.required_fields.map((field, index) => (
            <div className="templates-field-row" key={`${index}:${field.path}`}>
              <input disabled={disabled} value={field.path} placeholder="recipient.address" aria-label="Field path" onChange={(event) => updateField(draft, index, { path: event.target.value }, onChange)} />
              <select disabled={disabled} value={field.value_type} aria-label="Field type" onChange={(event) => updateField(draft, index, { value_type: event.target.value as TemplateFieldType }, onChange)}>{FIELD_TYPES.map((value) => <option key={value} value={value}>{value}</option>)}</select>
              <input disabled={disabled} value={field.label ?? ""} placeholder="Label" aria-label="Field label" onChange={(event) => updateField(draft, index, { label: event.target.value || null }, onChange)} />
              <ToggleSwitch checked={field.required} label="Required" disabled={disabled} onChange={(checked) => updateField(draft, index, { required: checked }, onChange)} />
              <IconButton label="Remove field" icon={<X size={16} />} variant="ghost" disabled={disabled} onClick={() => update("required_fields", draft.required_fields.filter((_, fieldIndex) => fieldIndex !== index))} />
            </div>
          ))}
          {!draft.required_fields.length && <StatePanel size="inline" description="No required fields. Tokens still resolve from supplied parameters and items." />}
        </div>
      </ContentSection>

      <ContentSection>
        <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Page and media</strong></ActionToolbar>
        <div className="templates-layout-fields">
          <FormField label="Page size"><select disabled={disabled} value={String(layout.page_size ?? pageSizeForType(draft.template_type))} onChange={(event) => update("layout", { ...layout, page_size: event.target.value })}>{["A3", "A4", "A5", "Letter", "Legal", "DL"].map((value) => <option key={value} value={value}>{value}</option>)}</select></FormField>
          <FormField label="Margin (mm)"><input type="number" min="0" max="60" disabled={disabled} value={Number(layout.margin_mm ?? 15)} onChange={(event) => update("layout", { ...layout, margin_mm: Number(event.target.value) })} /></FormField>
          {draft.template_type === "label_sheet" && <>
            <FormField label="Columns"><input type="number" min="1" max="12" disabled={disabled} value={Number(layout.columns ?? 3)} onChange={(event) => update("layout", { ...layout, columns: Number(event.target.value) })} /></FormField>
            <FormField label="Rows"><input type="number" min="1" max="30" disabled={disabled} value={Number(layout.rows ?? 8)} onChange={(event) => update("layout", { ...layout, rows: Number(event.target.value) })} /></FormField>
            <FormField label="Gap (mm)"><input type="number" min="0" max="20" disabled={disabled} value={Number(layout.gap_mm ?? 2)} onChange={(event) => update("layout", { ...layout, gap_mm: Number(event.target.value) })} /></FormField>
          </>}
        </div>
      </ContentSection>

      <ContentSection className="templates-body-section">
        <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Template body</strong><small>Use tokens such as {"{{name}}"} or {"{{recipient.address}}"}.</small></ActionToolbar>
        <WysiwygEditor disabled={disabled} value={draft.content_html ?? ""} onChange={(value) => update("content_html", value || null)} minHeight={300} />
      </ContentSection>
    </div>
  );
}

function PreviewPanel({ item, sampleText, usage, outputFormat, persistToFiles, compatibility, render, disabled, disabledReason, onSampleText, onUsage, onOutputFormat, onPersistToFiles, onRender, onDownload }: {
  item: TemplateDefinition;
  sampleText: string;
  usage: string;
  outputFormat: "html" | "text";
  persistToFiles: boolean;
  compatibility: TemplateCompatibility | null;
  render: TemplateRender | null;
  disabled: boolean;
  disabledReason?: string;
  onSampleText: (value: string) => void;
  onUsage: (value: string) => void;
  onOutputFormat: (value: "html" | "text") => void;
  onPersistToFiles: (value: boolean) => void;
  onRender: (final: boolean) => void;
  onDownload: () => void;
}) {
  return (
    <div className="templates-preview">
      <ContentSection>
        <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Validated sample input</strong><small>Preview and final output use the same pinned revision and canonical input.</small></ActionToolbar>
        <div className="templates-preview-controls">
          <FormField label="Usage" documentation={TEMPLATE_OUTPUT_DOCUMENTATION}><select value={usage} onChange={(event) => onUsage(event.target.value)}>{item.revision.usages.map((value) => <option key={value} value={value}>{value}</option>)}</select></FormField>
          <FormField label="Output" documentation={TEMPLATE_OUTPUT_DOCUMENTATION}><SegmentedControl value={outputFormat} onChange={onOutputFormat} options={[{ id: "html", label: "Printable HTML" }, { id: "text", label: "Plain text" }]} ariaLabel="Output format" /></FormField>
          <ToggleSwitch checked={persistToFiles} label="Store in Files when available" onChange={onPersistToFiles} />
        </div>
        <textarea className="templates-sample" value={sampleText} onChange={(event) => onSampleText(event.target.value)} spellCheck={false} aria-label="Sample item JSON" />
        <div className="templates-preview-actions">
          <Button disabled={disabled} disabledReason={disabled ? disabledReason : undefined} onClick={() => onRender(false)}><Eye size={16} /> Validate and preview</Button>
          <Button variant="primary" disabled={disabled || !item.revision.published_at} disabledReason={disabled ? disabledReason : !item.revision.published_at ? "Publish this revision before producing final output." : undefined} onClick={() => onRender(true)}><Send size={16} /> Render final output</Button>
        </div>
      </ContentSection>

      {compatibility && <DismissibleAlert tone={compatibility.compatible ? "success" : "danger"}>
        {compatibility.compatible
          ? "The selected usage, output profile, and supplied fields are compatible."
          : compatibility.diagnostics.map((item) => String(item.message ?? item.code ?? "Incompatible input")).join(" ")}
      </DismissibleAlert>}

      {render && <ContentSection className="templates-render-result">
        <ActionToolbar surface="section-header" className="templates-section-heading"><strong>Render evidence</strong><Button disabled={!render.artifact?.download_path} onClick={onDownload}><Download size={16} /> Download</Button></ActionToolbar>
        <dl>
          <div><dt>Revision</dt><dd>{render.revision} · {shortHash(render.template_hash)}</dd></div>
          <div><dt>Input</dt><dd>{shortHash(render.input_hash)}</dd></div>
          <div><dt>Output</dt><dd>{shortHash(render.output_sha256)}</dd></div>
          <div><dt>Renderer</dt><dd>{render.renderer_version}</dd></div>
          <div><dt>Items / pages</dt><dd>{render.item_count} / {render.page_count}</dd></div>
          <div><dt>Generated</dt><dd>{render.generated_at ? formatDateTime(render.generated_at) : "Now"}</dd></div>
        </dl>
        <p>{render.artifact?.kind === "managed_file" ? "Managed by Files" : "Bounded Templates download"} · {render.output_size_bytes.toLocaleString()} bytes</p>
      </ContentSection>}
    </div>
  );
}

function emptyPayload(templateType: TemplateType = "form_letter"): TemplatePayload {
  return {
    name: "",
    description: null,
    scope_type: "tenant",
    scope_id: null,
    template_type: templateType,
    usages: templateType === "email"
      ? ["campaign.email", "campaign.content"]
      : templateType === "content_fragment"
        ? ["campaign.content"]
        : ["campaign.postal"],
    locale: "en",
    required_fields: [],
    output_profiles: [],
    content_text: null,
    content_html: "<p>Hello {{name}},</p><p></p>",
    layout: { page_size: pageSizeForType(templateType), margin_mm: 15 },
    metadata: {}
  };
}

function payloadFromItem(item: TemplateDefinition): TemplatePayload {
  return {
    name: item.name,
    slug: item.slug,
    description: item.description ?? null,
    scope_type: item.scope_type,
    scope_id: item.scope_id ?? null,
    template_type: item.template_type,
    usages: [...item.revision.usages],
    locale: item.revision.locale,
    required_fields: item.revision.required_fields.map((field) => ({ ...field })),
    output_profiles: item.revision.output_profiles.map((profile) => ({ ...profile, capabilities: [...profile.capabilities], page: { ...profile.page } })),
    content_text: item.revision.content_text ?? null,
    content_html: item.revision.content_html ?? null,
    layout: { ...item.revision.layout },
    metadata: { ...item.revision.metadata }
  };
}

function emptyField(): TemplateFieldRequirement {
  return { path: "", value_type: "string", label: null, required: true, description: null };
}

function updateField(draft: TemplatePayload, index: number, patch: Partial<TemplateFieldRequirement>, onChange: (draft: TemplatePayload) => void) {
  onChange({ ...draft, required_fields: draft.required_fields.map((field, fieldIndex) => fieldIndex === index ? { ...field, ...patch } : field) });
}

function pageSizeForType(type: TemplateType): string { return type === "envelope" ? "DL" : "A4"; }
function typeLabel(type: TemplateType): string { return TEMPLATE_TYPES.find((item) => item.value === type)?.label ?? type; }
function splitValues(value: string): string[] { return [...new Set(value.split(",").map((item) => item.trim().toLocaleLowerCase()).filter(Boolean))]; }
function draftKey(value: TemplatePayload): string { return JSON.stringify(value); }
function shortHash(value: string): string { return value.slice(0, 12); }

function parseSample(value: string): Record<string, unknown> {
  const parsed: unknown = JSON.parse(value);
  if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") throw new Error("Sample input must be one JSON object.");
  return parsed as Record<string, unknown>;
}

function flattenFieldTypes(value: Record<string, unknown>, prefix = "", result: Record<string, string> = {}): Record<string, string> {
  for (const [key, item] of Object.entries(value)) {
    const path = prefix ? `${prefix}.${key}` : key;
    if (Array.isArray(item)) result[path] = "array";
    else if (item !== null && typeof item === "object") {
      result[path] = "object";
      flattenFieldTypes(item as Record<string, unknown>, path, result);
    } else if (typeof item === "number") result[path] = Number.isInteger(item) ? "integer" : "number";
    else result[path] = typeof item;
  }
  return result;
}

function errorMessage(error: unknown): string {
  if (error instanceof ApiError) {
    try {
      const parsed = JSON.parse(error.body) as { detail?: unknown };
      return typeof parsed.detail === "string" ? parsed.detail : JSON.stringify(parsed.detail ?? parsed);
    } catch { return error.message; }
  }
  return error instanceof Error ? error.message : "The template operation failed.";
}