import {
  useCallback,
  useEffect,
  useMemo,
  useState
} from "react";
import {
  Archive,
  Database,
  DatabaseZap,
  Download,
  Eye,
  Layers3,
  Pencil,
  Plus,
  Snowflake,
  ShieldCheck,
  Trash2,
  Upload
} from "lucide-react";
import { FormGrid, DialogSection, ActionToolbar,
  ActionBlockerHint,
  Button,
  ConfirmDialog,
  ContentSection,
  Dialog,
  DocumentationHelpLink,
  DismissibleAlert,
  FilterBar,
  FormField,
  IconButton,
  LoadingFrame,
  MetricCard,
  MetricGrid,
  SegmentedControl,
  SelectionList,
  SelectionListItem,
  SelectionListItemContent,
  StatePanel,
  StatusBadge,
  WorkspaceActionBar,
  WorkspaceFrame,
  WorkspaceLayout,
  hasScope,
  isApiError,
  useUnsavedChanges,
  useUnsavedDraftGuard,
  type ApiSettings,
  type AuthInfo
} from "@govoplan/core-webui";
import {
  createDatasourceStage,
  freezeDatasource,
  listDatasourceMaterializations,
  listDatasourceOrigins,
  listDatasourceStages,
  listDatasources,
  previewDatasource,
  promoteDatasourceStage,
  refreshDatasource,
  registerDatasourceOrigin,
  retireDatasource,
  updateDatasourceGovernance,
  type Datasource,
  type DatasourceGovernance,
  type DatasourceMaterialization,
  type DatasourceOrigin,
  type DatasourcePreview,
  type DatasourceSchemaChange,
  type DatasourceStage,
  type DatasourceValidationDiagnostic
} from "../../api/datasources";
import {
  DATASOURCE_FIELDS_DOCUMENTATION,
  DATASOURCE_GOVERNANCE_DOCUMENTATION,
  DATASOURCE_VISIBILITY_DOCUMENTATION,
  DATASOURCES_DOCUMENTATION,
  DATASOURCES_I18N
} from "./interfacePatterns";

type CatalogueView = "catalogue" | "staging" | "origins";
type AddKind = "upload" | "origin";
type UploadFormat = "json" | "csv";

export default function DatasourcesPage({
  settings,
  auth
}: {
  settings: ApiSettings;
  auth: AuthInfo;
}) {
  const [view, setView] = useState<CatalogueView>("catalogue");
  const [datasources, setDatasources] = useState<Datasource[]>([]);
  const [stages, setStages] = useState<DatasourceStage[]>([]);
  const [origins, setOrigins] = useState<DatasourceOrigin[]>([]);
  const [originsAvailable, setOriginsAvailable] = useState(false);
  const [selectedDatasourceRef, setSelectedDatasourceRef] = useState(
    initialDatasourceRef
  );
  const [selectedStageRef, setSelectedStageRef] = useState("");
  const [selectedOriginRef, setSelectedOriginRef] = useState("");
  const [preview, setPreview] = useState<DatasourcePreview | null>(null);
  const [materializations, setMaterializations] = useState<DatasourceMaterialization[]>([]);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);
  const [detailLoading, setDetailLoading] = useState(false);
  const [working, setWorking] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [addOpen, setAddOpen] = useState(false);
  const [freezeOpen, setFreezeOpen] = useState(false);
  const [freezeLabel, setFreezeLabel] = useState("");
  const [retireOpen, setRetireOpen] = useState(false);
  const [promoteOpen, setPromoteOpen] = useState(false);
  const [governanceOpen, setGovernanceOpen] = useState(false);
  const { requestDiscard } = useUnsavedChanges();

  const canManage = hasScope(auth, "datasources:source:write")
    || hasScope(auth, "datasources:source:admin");
  const canStage = hasScope(auth, "datasources:stage:write")
    || hasScope(auth, "datasources:source:admin");

  const reload = useCallback(async (preferredDatasourceRef?: string) => {
    setLoading(true);
    setError("");
    try {
      const [nextDatasources, nextStages, originCatalogue] = await Promise.all([
        listDatasources(settings),
        listDatasourceStages(settings),
        listDatasourceOrigins(settings)
      ]);
      setDatasources(nextDatasources);
      setStages(nextStages);
      setOrigins(originCatalogue.origins);
      setOriginsAvailable(originCatalogue.available);
      setSelectedDatasourceRef((current) => {
        const preferred = preferredDatasourceRef || current;
        return nextDatasources.some((item) => item.ref === preferred)
          ? preferred
          : nextDatasources[0]?.ref ?? "";
      });
      setSelectedStageRef((current) => nextStages.some((item) => item.ref === current)
        ? current
        : nextStages[0]?.ref ?? "");
      setSelectedOriginRef((current) => originCatalogue.origins.some((item) => item.ref === current)
        ? current
        : originCatalogue.origins[0]?.ref ?? "");
    } catch (loadError) {
      setError(apiErrorMessage(loadError));
    } finally {
      setLoading(false);
    }
  }, [settings]);

  useEffect(() => {
    void reload();
  }, [reload]);

  useEffect(() => {
    if (!selectedDatasourceRef) {
      setPreview(null);
      setMaterializations([]);
      return;
    }
    let cancelled = false;
    setDetailLoading(true);
    Promise.allSettled([
      previewDatasource(settings, selectedDatasourceRef),
      listDatasourceMaterializations(settings, selectedDatasourceRef)
    ]).then(([previewResult, materializationResult]) => {
      if (cancelled) return;
      if (previewResult.status === "fulfilled") {
        setPreview(previewResult.value);
      } else {
        setPreview(null);
        setError(apiErrorMessage(previewResult.reason));
      }
      setMaterializations(
        materializationResult.status === "fulfilled"
          ? materializationResult.value
          : []
      );
      setDetailLoading(false);
    });
    return () => {
      cancelled = true;
    };
  }, [selectedDatasourceRef, settings]);

  const selectedDatasource = datasources.find((item) => item.ref === selectedDatasourceRef) ?? null;
  const selectedStage = stages.find((item) => item.ref === selectedStageRef) ?? null;
  const selectedOrigin = origins.find((item) => item.ref === selectedOriginRef) ?? null;

  const visibleDatasources = useMemo(
    () => filterItems(datasources, search, (item) =>
      `${item.name} ${item.source_name} ${item.description ?? ""} ${item.mode} ${item.kind}`),
    [datasources, search]
  );
  const visibleStages = useMemo(
    () => filterItems(stages, search, (item) =>
      `${item.name} ${item.source_name} ${item.state} ${item.mode}`),
    [stages, search]
  );
  const visibleOrigins = useMemo(
    () => filterItems(origins, search, (item) =>
      `${item.name} ${item.source_name} ${item.provider} ${item.kind}`),
    [origins, search]
  );

  const promoteStage = async () => {
    if (!selectedStage || selectedStage.state !== "ready") return;
    setWorking(true);
    setError("");
    try {
      const result = await promoteDatasourceStage(settings, selectedStage.ref);
      setSuccess(`Promoted ${result.datasource.name} as revision ${result.materialization.revision}.`);
      setView("catalogue");
      await reload(result.datasource.ref);
    } catch (operationError) {
      setError(apiErrorMessage(operationError));
    } finally {
      setWorking(false);
    }
  };

  const refreshSelected = async () => {
    if (!selectedDatasource) return;
    setWorking(true);
    setError("");
    try {
      const result = await refreshDatasource(settings, selectedDatasource.ref);
      setSuccess(`Refreshed ${result.datasource.name} as revision ${result.materialization.revision}.`);
      await reload(result.datasource.ref);
    } catch (operationError) {
      setError(apiErrorMessage(operationError));
    } finally {
      setWorking(false);
    }
  };

  const freezeSelected = async (): Promise<boolean> => {
    if (!selectedDatasource) return false;
    setWorking(true);
    setError("");
    try {
      const materialization = await freezeDatasource(
        settings,
        selectedDatasource.ref,
        freezeLabel
      );
      setSuccess(`Created frozen revision ${materialization.revision}.`);
      setFreezeOpen(false);
      setFreezeLabel("");
      await reload(selectedDatasource.ref);
      return true;
    } catch (operationError) {
      setError(apiErrorMessage(operationError));
      return false;
    } finally {
      setWorking(false);
    }
  };

  const retireSelected = async () => {
    if (!selectedDatasource) return;
    setWorking(true);
    setError("");
    try {
      await retireDatasource(settings, selectedDatasource.ref);
      setSuccess(`Retired ${selectedDatasource.name}.`);
      setRetireOpen(false);
      await reload();
    } catch (operationError) {
      setError(apiErrorMessage(operationError));
    } finally {
      setWorking(false);
    }
  };

  useUnsavedDraftGuard({
    dirty: Boolean(freezeOpen && freezeLabel.trim()),
    onSave: freezeSelected,
    onDiscard: () => {
      setFreezeOpen(false);
      setFreezeLabel("");
    },
    title: "i18n:govoplan-datasources.unsaved_freeze_title",
    message: "i18n:govoplan-datasources.unsaved_freeze_message"
  });

  const closeFreeze = () => {
    if (working) return;
    if (freezeLabel.trim()) requestDiscard(() => setFreezeOpen(false));
    else setFreezeOpen(false);
  };

  return (
    <WorkspaceFrame as="main" height="viewport" surface="plain" className="datasources-page" label="Datasource workspace">
      <WorkspaceLayout
        variant="split"
        primarySize="compact"
        surface="contained"
        primaryScrollable={false}
        contentScrollable={false}
        primaryLabel="Datasource catalogue"
        contentLabel="Datasource workspace"
        contentClassName="datasources-workspace"
        primary={<>
          <WorkspaceActionBar
            scope="collection-pane"
            variant="collection"
            refreshable
            reloadAction={{ onReload: () => void reload(selectedDatasourceRef), loading: loading || working }}
            contextActions={<strong>Data</strong>}
            createAction={<IconButton
              label="Add datasource or stage"
              icon={<Plus size={17} />}
              variant="primary"
              onClick={() => setAddOpen(true)}
              disabled={!canStage && !canManage}
              disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
            />}
          />
          <div className="datasources-view-switch">
            <SegmentedControl<CatalogueView>
              ariaLabel="Datasource view"
              size="equal"
              width="fill"
              options={[
                { id: "catalogue", label: "Catalogue" },
                { id: "staging", label: "Staging" },
                { id: "origins", label: "Origins" }
              ]}
              value={view}
              onChange={(next) => {
                setView(next);
                setSearch("");
                setError("");
              }}
            />
          </div>
          <FilterBar surface="panel">
            <input
              type="search"
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder={`Search ${view}`}
              aria-label={`Search ${view}`}
            />
          </FilterBar>
          <LoadingFrame
            loading={loading}
            className="datasources-list-frame"
          >
            <SelectionList variant="navigation" label="Datasources">
              {view === "catalogue" ? visibleDatasources.map((item) => (
                <SelectionListItem
                  key={item.ref}
                  selected={item.ref === selectedDatasourceRef}
                  onClick={() => setSelectedDatasourceRef(item.ref)}
                >
                  <SelectionListItemContent title={item.name} description={`${item.source_name} · ${item.kind}`} />
                  <StatusBadge status={item.mode} label={item.mode} />
                </SelectionListItem>
              )) : null}
              {view === "staging" ? visibleStages.map((item) => (
                <SelectionListItem
                  key={item.ref}
                  selected={item.ref === selectedStageRef}
                  onClick={() => setSelectedStageRef(item.ref)}
                >
                  <SelectionListItemContent title={item.name} description={`${item.source_name} · ${formatCount(item.row_count, "row")}`} />
                  <StatusBadge status={item.state} label={item.state} />
                </SelectionListItem>
              )) : null}
              {view === "origins" ? visibleOrigins.map((item) => (
                <SelectionListItem
                  key={item.ref}
                  selected={item.ref === selectedOriginRef}
                  onClick={() => setSelectedOriginRef(item.ref)}
                >
                  <SelectionListItemContent title={item.name} description={`${item.provider} · ${item.kind}`} />
                  <StatusBadge status={item.shape} label={item.shape} />
                </SelectionListItem>
              )) : null}
              {view === "catalogue" && !visibleDatasources.length ? (
                <StatePanel size="compact" description="No datasources" />
              ) : null}
              {view === "staging" && !visibleStages.length ? (
                <StatePanel size="compact" description="No staged data" />
              ) : null}
              {view === "origins" && !visibleOrigins.length ? (
                <StatePanel size="compact" description={originsAvailable ? "No connector origins" : "Connectors unavailable"} />
              ) : null}
            </SelectionList>
          </LoadingFrame>
        </>}
      >
          <WorkspaceActionBar
            scope="detail-pane"
            variant="detail"
            className="datasources-workspace-toolbar"
            contextActions={<span className="datasources-current-title">
              {view === "catalogue" ? <DatabaseZap size={19} />
                : view === "staging" ? <Layers3 size={19} />
                  : <Database size={19} />}
              <span>
                <strong>
                  {view === "catalogue"
                    ? selectedDatasource?.name ?? "Catalogue"
                    : view === "staging"
                      ? selectedStage?.name ?? "Staging"
                      : selectedOrigin?.name ?? "Connector origins"}
                </strong>
                <small>
                  {view === "catalogue"
                    ? selectedDatasource?.source_name ?? "Governed data"
                    : view === "staging"
                      ? selectedStage?.source_name ?? "Inspect before promotion"
                      : selectedOrigin?.provider ?? "External acquisition"}
                </small>
              </span>
            </span>}
            helpAction={<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />}
            primaryActions={<>
              {view === "catalogue" && selectedDatasource?.mode === "cached" ? (
                <Button onClick={() => void refreshSelected()} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
                  <Download size={16} /> Refresh
                </Button>
              ) : null}
              {view === "catalogue" && selectedDatasource ? (
                <>
                  <IconButton
                    label="Edit datasource governance"
                    icon={<Pencil size={16} />}
                    onClick={() => setGovernanceOpen(true)}
                    disabled={!canManage || working}
                    disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}
                  />
                  <Button onClick={() => setFreezeOpen(true)} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
                    <Snowflake size={16} /> Freeze
                  </Button>
                </>
              ) : null}
              {view === "staging" && selectedStage?.state === "ready" ? (
                <Button
                  variant="primary"
                  onClick={() => setPromoteOpen(true)}
                  disabled={!canStage || working}
                  disabledReason={working ? DATASOURCES_I18N.working : !canStage ? DATASOURCES_I18N.stageReason : undefined}
                >
                  <Upload size={16} /> Promote
                </Button>
              ) : null}
              {view === "origins" && selectedOrigin ? (
                <Button
                  variant="primary"
                  onClick={() => setAddOpen(true)}
                  disabled={!canManage || working}
                  disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}
                >
                  <Plus size={16} /> Register
                </Button>
              ) : null}
            </>}
            destructiveActions={view === "catalogue" && selectedDatasource ? (
              <IconButton
                label="Retire datasource"
                icon={<Trash2 size={16} />}
                variant="danger"
                onClick={() => setRetireOpen(true)}
                disabled={!canManage || working}
                disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}
              />
            ) : undefined}
          />

          <div className="datasources-alerts">
            {error ? (
              <DismissibleAlert tone="danger" resetKey={error}>
                {error}
              </DismissibleAlert>
            ) : null}
            {success ? (
              <DismissibleAlert tone="success" resetKey={success}>
                {success}
              </DismissibleAlert>
            ) : null}
            {!canManage && !canStage ? <ActionBlockerHint
              tone="info"
              reason={{
                summary: "Datasources are read-only",
                details: DATASOURCES_I18N.manageReason,
                requiredAction: DATASOURCES_I18N.permissionAction,
                actor: DATASOURCES_I18N.permissionActor,
                target: DATASOURCES_I18N.permissionDestination
              }}
              labels={{ requiredAction: DATASOURCES_I18N.requiredAction, actor: DATASOURCES_I18N.actor, target: DATASOURCES_I18N.destination }}
              documentation={DATASOURCES_DOCUMENTATION}
            /> : null}
          </div>

          <div className="datasources-content">
            {view === "catalogue" ? (
              selectedDatasource ? (
                <DatasourceDetail
                  datasource={selectedDatasource}
                  preview={preview}
                  materializations={materializations}
                  loading={detailLoading}
                />
              ) : <EmptyWorkspace icon={<DatabaseZap size={32} />} label="No datasource selected" />
            ) : null}
            {view === "staging" ? (
              selectedStage
                ? <StageDetail stage={selectedStage} />
                : <EmptyWorkspace icon={<Layers3 size={32} />} label="No stage selected" />
            ) : null}
            {view === "origins" ? (
              selectedOrigin
                ? <OriginDetail origin={selectedOrigin} />
                : <EmptyWorkspace icon={<Database size={32} />} label={
                    originsAvailable ? "No origin selected" : "Connectors unavailable"
                  } />
            ) : null}
          </div>
          {working ? <div className="datasources-working" role="status">Working...</div> : null}
      </WorkspaceLayout>

      <AddDatasourceDialog
        open={addOpen}
        settings={settings}
        initialKind={view === "origins" ? "origin" : "upload"}
        initialOrigin={view === "origins" ? selectedOrigin : null}
        origins={origins}
        originsAvailable={originsAvailable}
        datasources={datasources}
        canStage={canStage}
        canManage={canManage}
        onClose={() => setAddOpen(false)}
        onCreated={async (result) => {
          setAddOpen(false);
          if ("state" in result) {
            setView("staging");
            setSelectedStageRef(result.ref);
            setSuccess(`Created stage ${result.name}. Review it before promotion.`);
            await reload();
          } else {
            setView("catalogue");
            setSuccess(`Registered ${result.name}.`);
            await reload(result.ref);
          }
        }}
      />
      <GovernanceDialog
        open={governanceOpen}
        settings={settings}
        datasource={selectedDatasource}
        onClose={() => setGovernanceOpen(false)}
        onSaved={async (updated) => {
          setGovernanceOpen(false);
          setSuccess(`Updated governance for ${updated.name}.`);
          await reload(updated.ref);
        }}
      />
      <Dialog
        open={freezeOpen}
        title="Freeze datasource state"
        onClose={closeFreeze}
        footer={(
          <>
            <Button onClick={closeFreeze} disabled={working} disabledReason={working ? DATASOURCES_I18N.working : undefined}>Cancel</Button>
            <Button variant="primary" onClick={() => void freezeSelected()} disabled={working}>
              <Snowflake size={16} /> Freeze
            </Button>
          </>
        )}
      >
        <p className="datasources-dialog-copy">
          Create an immutable, addressable state for reproducible runs and evidence.
        </p>
        <FormField label="Label" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
          <input
            value={freezeLabel}
            onChange={(event) => setFreezeLabel(event.target.value)}
            placeholder="Optional evidence label"
          />
        </FormField>
      </Dialog>
      <ConfirmDialog
        open={promoteOpen}
        title="i18n:govoplan-datasources.promote_title"
        message="i18n:govoplan-datasources.promote_message"
        confirmLabel="Promote"
        busy={working}
        onCancel={() => setPromoteOpen(false)}
        onConfirm={() => {
          setPromoteOpen(false);
          void promoteStage();
        }}
      />
      <ConfirmDialog
        open={retireOpen}
        title="Retire datasource"
        message={`Retire ${selectedDatasource?.name ?? "this datasource"}? Existing materialization references remain in the database, but the datasource will no longer be available to new definitions.`}
        confirmLabel="Retire"
        tone="danger"
        busy={working}
        onCancel={() => setRetireOpen(false)}
        onConfirm={() => void retireSelected()}
      />
    </WorkspaceFrame>
  );
}

function DatasourceDetail({
  datasource,
  preview,
  materializations,
  loading
}: {
  datasource: Datasource;
  preview: DatasourcePreview | null;
  materializations: DatasourceMaterialization[];
  loading: boolean;
}) {
  return (
    <>
      <MetricGrid columns={5} density="compact" minimum="compact">
        <MetricCard density="compact" label="Mode" value={datasource.mode} valueTitle={datasource.mode} />
        <MetricCard density="compact" label="Rows" value={formatNumber(datasource.row_count)} />
        <MetricCard density="compact" label="Fields" value={String(datasource.schema.length)} />
        <MetricCard density="compact" label="Revisions" value={String(materializations.length)} />
        <MetricCard density="compact" label="Updated" value={formatDate(datasource.updated_at)} />
      </MetricGrid>
      {datasource.description ? (
        <div className="datasources-description">{datasource.description}</div>
      ) : null}
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span><ShieldCheck size={16} /> Governance</span>
          <StatusBadge
            status={datasource.governance.publication_state}
            label={datasource.governance.publication_state}
          />
        </ActionToolbar>
        <div className="datasources-key-values">
          <span><small>Authority</small><strong>{readableToken(datasource.governance.authority_mode)}</strong></span>
          <span><small>Classification</small><strong>{datasource.governance.classification}</strong></span>
          <span><small>Owner</small><strong>{datasource.governance.owner_ref || "Not assigned"}</strong></span>
          <span><small>Steward</small><strong>{datasource.governance.steward_ref || "Not assigned"}</strong></span>
          <span><small>Responsible organization</small><strong>{datasource.governance.responsible_organization_ref || "Not assigned"}</strong></span>
          <span><small>Purposes</small><strong>{datasource.governance.purposes.join(", ") || "Not declared"}</strong></span>
        </div>
        {datasource.governance.semantic_definition ? (
          <p className="datasources-dialog-copy">{datasource.governance.semantic_definition}</p>
        ) : null}
      </ContentSection>
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span><Eye size={16} /> Preview</span>
          <small>{preview ? `${formatNumber(preview.total_rows)} total rows` : ""}</small>
        </ActionToolbar>
        {loading ? (
          <div className="datasources-inline-loading">Loading preview...</div>
        ) : preview ? (
          <PreviewTable datasource={datasource} rows={preview.rows} />
        ) : (
          <StatePanel size="inline" description="No preview available" />
        )}
      </ContentSection>
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span><Archive size={16} /> Materializations</span>
          <small>Immutable revisions</small>
        </ActionToolbar>
        <div className="datasources-table-scroll">
          <table>
            <thead>
              <tr>
                <th>Revision</th>
                <th>Created</th>
                <th>Rows</th>
                <th>State</th>
                <th>Fingerprint</th>
              </tr>
            </thead>
            <tbody>
              {materializations.map((item) => (
                <tr key={item.ref}>
                  <td>{item.revision}</td>
                  <td>{formatDate(item.created_at)}</td>
                  <td>{formatNumber(item.row_count)}</td>
                  <td>
                    {item.frozen_at ? (
                      <StatusBadge
                        status="frozen"
                        label={item.frozen_label || "frozen"}
                      />
                    ) : <StatusBadge status={item.state} label={item.state} />}
                  </td>
                  <td className="datasources-fingerprint" title={item.fingerprint}>
                    {shortFingerprint(item.fingerprint)}
                  </td>
                </tr>
              ))}
              {!materializations.length ? (
                <tr><td colSpan={5}>Live source without materializations</td></tr>
              ) : null}
            </tbody>
          </table>
        </div>
      </ContentSection>
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span>Schema</span>
          <small>Version {datasource.schema_version}</small>
        </ActionToolbar>
        <SchemaTable fields={datasource.schema} />
      </ContentSection>
    </>
  );
}

function StageDetail({ stage }: { stage: DatasourceStage }) {
  const errors = stage.validation.errors ?? [];
  const warnings = stage.validation.warnings ?? [];
  const schemaChanges = stage.validation.schema_change?.changes ?? [];
  const schemaClassification = stage.validation.schema_change?.classification ?? "new";
  return (
    <>
      <MetricGrid columns={5} density="compact" minimum="compact">
        <MetricCard density="compact" label="State" value={stage.state} valueTitle={stage.state} />
        <MetricCard density="compact" label="Mode" value={stage.mode} valueTitle={stage.mode} />
        <MetricCard density="compact" label="Rows" value={formatNumber(stage.row_count)} />
        <MetricCard density="compact" label="Fields" value={String(stage.schema.length)} />
        <MetricCard density="compact" label="Created" value={formatDate(stage.created_at)} />
      </MetricGrid>
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span>Validation</span>
          <StatusBadge
            status={stage.validation.valid === false ? "invalid" : "ready"}
            label={stage.validation.valid === false ? "Invalid" : "Ready"}
          />
        </ActionToolbar>
        <div className="datasources-key-values">
          <span><small>Fingerprint</small><strong>{shortFingerprint(stage.fingerprint)}</strong></span>
          <span><small>Target</small><strong>{stage.target_datasource_ref || "New datasource"}</strong></span>
          <span><small>Promoted revision</small><strong>{stage.promoted_materialization_ref || "Not promoted"}</strong></span>
          <span><small>Quality policy</small><strong>{stage.validation.policy_version || "Local default"}</strong></span>
          <span><small>Policy hash</small><strong>{shortFingerprint(stage.validation.policy_hash || "")}</strong></span>
          <span><small>Schema change</small><strong>{readableToken(schemaClassification)}</strong></span>
        </div>
        {errors.length || warnings.length ? (
          <div className="datasources-validation-alerts">
            {errors.length ? (
              <DismissibleAlert tone="danger" compact dismissible={false}>
                <strong>Promotion blockers</strong>
                <ValidationDiagnosticList diagnostics={errors} />
              </DismissibleAlert>
            ) : null}
            {warnings.length ? (
              <DismissibleAlert tone="warning" compact dismissible={false}>
                <strong>Review warnings</strong>
                <ValidationDiagnosticList diagnostics={warnings} />
              </DismissibleAlert>
            ) : null}
          </div>
        ) : (
          <div className="datasources-validation-ok">
            All configured quality rules passed and no blocking schema change was detected.
          </div>
        )}
      </ContentSection>
      {schemaChanges.length ? (
        <ContentSection>
          <ActionToolbar surface="section-header" className="datasources-section-heading">
            <span>Schema comparison</span>
            <StatusBadge status={schemaClassification} label={readableToken(schemaClassification)} />
          </ActionToolbar>
          <ul className="datasources-schema-changes">
            {schemaChanges.map((change, index) => (
              <SchemaChangeItem key={`${change.code}-${change.field ?? index}`} change={change} />
            ))}
          </ul>
        </ContentSection>
      ) : null}
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span>Detected schema</span>
          <small>{stage.shape}</small>
        </ActionToolbar>
        <SchemaTable fields={stage.schema} />
      </ContentSection>
    </>
  );
}

function ValidationDiagnosticList({
  diagnostics
}: {
  diagnostics: DatasourceValidationDiagnostic[];
}) {
  return (
    <ul className="datasources-diagnostic-list">
      {diagnostics.map((diagnostic, index) => {
        const details = [
          diagnostic.rule_id ? `Rule ${diagnostic.rule_id}` : "",
          diagnostic.affected_rows !== undefined ? `${diagnostic.affected_rows} affected row${diagnostic.affected_rows === 1 ? "" : "s"}` : "",
          diagnostic.row_numbers?.length ? `Rows ${diagnostic.row_numbers.join(", ")}${diagnostic.row_numbers_truncated ? ", …" : ""}` : ""
        ].filter(Boolean);
        return (
          <li key={`${diagnostic.code}-${diagnostic.rule_id ?? index}`}>
            <span>{diagnostic.message}</span>
            {details.length ? <small>{details.join(" · ")}</small> : null}
          </li>
        );
      })}
    </ul>
  );
}

function SchemaChangeItem({ change }: { change: DatasourceSchemaChange }) {
  return (
    <li>
      <StatusBadge status={change.classification} label={readableToken(change.classification)} />
      <span>
        <strong>{change.message}</strong>
        {change.field ? <small>{change.field}</small> : null}
      </span>
    </li>
  );
}

function OriginDetail({ origin }: { origin: DatasourceOrigin }) {
  return (
    <>
      <MetricGrid columns="auto" density="compact" minimum="compact">
        <MetricCard density="compact" label="Provider" value={origin.provider} valueTitle={origin.provider} />
        <MetricCard density="compact" label="Mode" value={readableToken(origin.source_mode)} />
        <MetricCard density="compact" label="Health" value={readableToken(origin.health.status)} />
        <MetricCard density="compact" label="Rows" value={formatNumber(origin.row_count)} />
        <MetricCard density="compact" label="Fields" value={String(origin.schema.length)} />
        <MetricCard density="compact" label="Updated" value={formatDate(origin.updated_at)} />
      </MetricGrid>
      {origin.description ? (
        <div className="datasources-description">{origin.description}</div>
      ) : null}
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span>Registration options</span>
          <small>{origin.supported_modes.join(", ")}</small>
        </ActionToolbar>
        <div className="datasources-key-values">
          <span><small>Origin reference</small><strong>{origin.ref}</strong></span>
          <span><small>Kind</small><strong>{readableToken(origin.kind)}</strong></span>
          <span><small>Shape</small><strong>{readableToken(origin.shape)}</strong></span>
          <span><small>Fingerprint</small><strong>{shortFingerprint(origin.fingerprint)}</strong></span>
          <span><small>Health</small><strong>{origin.health.summary}</strong></span>
          <span><small>Pushdown</small><strong>{pushdownSummary(origin)}</strong></span>
        </div>
      </ContentSection>
      <ContentSection>
        <ActionToolbar surface="section-header" className="datasources-section-heading">
          <span>Discovered schema</span>
          <small>Version {origin.schema_version}</small>
        </ActionToolbar>
        <SchemaTable fields={origin.schema} />
      </ContentSection>
    </>
  );
}

function pushdownSummary(origin: DatasourceOrigin): string {
  const capabilities = [
    origin.pushdown.projections ? "projections" : "",
    origin.pushdown.pagination ? "pagination" : "",
    ...origin.pushdown.filters.map((item) => `filter:${item}`),
    ...origin.pushdown.aggregations.map((item) => `aggregate:${item}`),
    ...origin.pushdown.sorting.map((item) => `sort:${item}`)
  ].filter(Boolean);
  return capabilities.join(", ") || "None declared";
}

function GovernanceDialog({
  open,
  settings,
  datasource,
  onClose,
  onSaved
}: {
  open: boolean;
  settings: ApiSettings;
  datasource: Datasource | null;
  onClose: () => void;
  onSaved: (datasource: Datasource) => void | Promise<void>;
}) {
  const [draft, setDraft] = useState<DatasourceGovernance | null>(null);
  const [freshness, setFreshness] = useState("{}");
  const [quality, setQuality] = useState("{}");
  const [visibility, setVisibility] = useState("{}");
  const [baselineKey, setBaselineKey] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const { requestDiscard } = useUnsavedChanges();

  useEffect(() => {
    if (!open || !datasource) return;
    const nextDraft = structuredClone(datasource.governance);
    const nextFreshness = JSON.stringify(datasource.governance.freshness_policy, null, 2);
    const nextQuality = JSON.stringify(datasource.governance.quality_policy, null, 2);
    const nextVisibility = JSON.stringify(datasource.governance.visibility_policy ?? {}, null, 2);
    setDraft(nextDraft);
    setFreshness(nextFreshness);
    setQuality(nextQuality);
    setVisibility(nextVisibility);
    setBaselineKey(JSON.stringify({ draft: nextDraft, freshness: nextFreshness, quality: nextQuality, visibility: nextVisibility }));
    setError("");
  }, [datasource, open]);

  const dirty = Boolean(open && draft && JSON.stringify({ draft, freshness, quality, visibility }) !== baselineKey);

  const save = async (): Promise<boolean> => {
    if (!datasource || !draft) return false;
    setBusy(true);
    setError("");
    try {
      const updated = await updateDatasourceGovernance(settings, datasource.ref, {
        ...draft,
        freshness_policy: parseObject(freshness, "Freshness policy"),
        quality_policy: parseObject(quality, "Quality policy"),
        visibility_policy: parseObject(visibility, "Visibility policy")
      });
      await onSaved(updated);
      return true;
    } catch (saveError) {
      setError(apiErrorMessage(saveError));
      return false;
    } finally {
      setBusy(false);
    }
  };

  useUnsavedDraftGuard({
    dirty,
    onSave: save,
    onDiscard: onClose,
    title: "i18n:govoplan-datasources.unsaved_governance_title",
    message: "i18n:govoplan-datasources.unsaved_governance_message"
  });

  const close = () => {
    if (busy) return;
    if (dirty) requestDiscard(onClose);
    else onClose();
  };

  const setValue = <K extends keyof DatasourceGovernance>(
    key: K,
    value: DatasourceGovernance[K]
  ) => setDraft((current) => current ? { ...current, [key]: value } : current);

  return (
    <Dialog
      open={open}
      title="Datasource governance"
      className="datasources-governance-dialog"
      onClose={close}
      footer={(
        <>
          <Button onClick={close} disabled={busy} disabledReason={busy ? DATASOURCES_I18N.working : undefined}>Cancel</Button>
          <Button variant="primary" onClick={() => void save()} disabled={!draft || busy} disabledReason={busy ? DATASOURCES_I18N.working : !draft ? DATASOURCES_I18N.incomplete : undefined}>
            Save governance
          </Button>
        </>
      )}
    >
      {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
      {draft ? (
        <DialogSection className="datasources-dialog-fields">
          <FormGrid columns={2} gap="small" collapseAt="narrow">
            <FormField label="Authority mode" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <select
                value={draft.authority_mode}
                onChange={(event) => setValue("authority_mode", event.target.value as DatasourceGovernance["authority_mode"])}
              >
                {[
                  "native_authoritative",
                  "external_authoritative",
                  "external_mirror",
                  "governed_sync",
                  "governance_overlay",
                  "linked_reference"
                ].map((value) => <option key={value} value={value}>{readableToken(value)}</option>)}
              </select>
            </FormField>
            <FormField label="Authoritative source" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <input value={draft.authoritative_source_ref ?? ""} onChange={(event) => setValue("authoritative_source_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Classification" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <input value={draft.classification} onChange={(event) => setValue("classification", event.target.value)} />
            </FormField>
            <FormField label="Publication state" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <input value={draft.publication_state} onChange={(event) => setValue("publication_state", event.target.value)} />
            </FormField>
            <FormField label="Owner reference">
              <input value={draft.owner_ref ?? ""} onChange={(event) => setValue("owner_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Steward reference">
              <input value={draft.steward_ref ?? ""} onChange={(event) => setValue("steward_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Responsible organization">
              <input value={draft.responsible_organization_ref ?? ""} onChange={(event) => setValue("responsible_organization_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Responsible function">
              <input value={draft.responsible_function_ref ?? ""} onChange={(event) => setValue("responsible_function_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Schema owner">
              <input value={draft.schema_owner_ref ?? ""} onChange={(event) => setValue("schema_owner_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Privacy profile">
              <input value={draft.privacy_profile_ref ?? ""} onChange={(event) => setValue("privacy_profile_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Retention policy" interfaceId="datasources.field.retention-policy" helpContextId="datasources.field.retention-policy" helpModuleId="datasources" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <input value={draft.retention_policy_ref ?? ""} onChange={(event) => setValue("retention_policy_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Access policy reference" interfaceId="datasources.field.access-policy" helpContextId="datasources.field.access-policy" helpModuleId="datasources" documentation={DATASOURCE_VISIBILITY_DOCUMENTATION}>
              <input value={draft.access_policy_ref ?? ""} onChange={(event) => setValue("access_policy_ref", event.target.value || null)} placeholder="Optional Policy module target" />
            </FormField>
            <FormField label="Transfer agreement" interfaceId="datasources.field.transfer-agreement" helpContextId="datasources.field.transfer-agreement" helpModuleId="datasources" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <input value={draft.transfer_agreement_ref ?? ""} onChange={(event) => setValue("transfer_agreement_ref", event.target.value || null)} />
            </FormField>
            <FormField label="Correction procedure">
              <input value={draft.correction_procedure_ref ?? ""} onChange={(event) => setValue("correction_procedure_ref", event.target.value || null)} />
            </FormField>
          </FormGrid>
          <FormField label="Semantic definition" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
            <textarea value={draft.semantic_definition ?? ""} onChange={(event) => setValue("semantic_definition", event.target.value || null)} />
          </FormField>
          <FormGrid columns={2} gap="small" collapseAt="narrow">
            <GovernanceListField label="Purposes" values={draft.purposes} onChange={(values) => setValue("purposes", values)} />
            <GovernanceListField label="Legal basis references" values={draft.legal_basis_refs} onChange={(values) => setValue("legal_basis_refs", values)} />
            <GovernanceListField label="Official keys" values={draft.official_keys} onChange={(values) => setValue("official_keys", values)} />
            <GovernanceListField label="Legal hold references" values={draft.hold_refs} onChange={(values) => setValue("hold_refs", values)} />
            <GovernanceListField label="Affected services and processes" values={draft.affected_refs} onChange={(values) => setValue("affected_refs", values)} />
            <GovernanceListField label="Dependent flows, reports, controls and decisions" values={draft.dependency_refs} onChange={(values) => setValue("dependency_refs", values)} />
            <GovernanceListField label="Known limits" values={draft.known_limits} onChange={(values) => setValue("known_limits", values)} />
          </FormGrid>
          <FormGrid columns={2} gap="small" collapseAt="narrow">
            <FormField label="Visibility policy (JSON)" interfaceId="datasources.field.visibility-policy" helpContextId="datasources.field.visibility-policy" helpModuleId="datasources" documentation={DATASOURCE_VISIBILITY_DOCUMENTATION}>
              <textarea value={visibility} onChange={(event) => setVisibility(event.target.value)} spellCheck={false} />
              <small>Configure source and materialization ACLs, field redaction or omission, and principal-bound row filters.</small>
            </FormField>
            <FormField label="Freshness policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <textarea value={freshness} onChange={(event) => setFreshness(event.target.value)} spellCheck={false} />
            </FormField>
            <FormField label="Quality policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
              <textarea value={quality} onChange={(event) => setQuality(event.target.value)} spellCheck={false} />
            </FormField>
          </FormGrid>
        </DialogSection>
      ) : null}
    </Dialog>
  );
}

function GovernanceListField({
  label,
  values,
  onChange
}: {
  label: string;
  values: string[];
  onChange: (values: string[]) => void;
}) {
  return (
    <FormField label={label}>
      <textarea
        value={values.join("\n")}
        onChange={(event) => onChange(splitLines(event.target.value))}
        placeholder="One reference or value per line"
      />
    </FormField>
  );
}

function AddDatasourceDialog({
  open,
  settings,
  initialKind,
  initialOrigin,
  origins,
  originsAvailable,
  datasources,
  canStage,
  canManage,
  onClose,
  onCreated
}: {
  open: boolean;
  settings: ApiSettings;
  initialKind: AddKind;
  initialOrigin: DatasourceOrigin | null;
  origins: DatasourceOrigin[];
  originsAvailable: boolean;
  datasources: Datasource[];
  canStage: boolean;
  canManage: boolean;
  onClose: () => void;
  onCreated: (result: DatasourceStage | Datasource) => void | Promise<void>;
}) {
  const [kind, setKind] = useState<AddKind>(initialKind);
  const [format, setFormat] = useState<UploadFormat>("csv");
  const [mode, setMode] = useState<"live" | "cached" | "static">(
    initialKind === "origin" ? "live" : "static"
  );
  const [originRef, setOriginRef] = useState(initialOrigin?.ref ?? "");
  const [targetRef, setTargetRef] = useState("");
  const [name, setName] = useState(initialOrigin?.name ?? "");
  const [sourceName, setSourceName] = useState(initialOrigin?.source_name ?? "");
  const [description, setDescription] = useState(initialOrigin?.description ?? "");
  const [rowsText, setRowsText] = useState('[\n  { "id": 1 }\n]');
  const [csvText, setCsvText] = useState("");
  const [delimiter, setDelimiter] = useState(";");
  const [baselineKey, setBaselineKey] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const { requestDiscard } = useUnsavedChanges();

  useEffect(() => {
    if (!open) return;
    setKind(initialKind);
    setFormat("csv");
    setOriginRef(initialOrigin?.ref ?? "");
    setName(initialOrigin?.name ?? "");
    setSourceName(initialOrigin?.source_name ?? "");
    setDescription(initialOrigin?.description ?? "");
    setMode(initialKind === "origin" ? "live" : "static");
    setTargetRef("");
    setRowsText('[\n  { "id": 1 }\n]');
    setCsvText("");
    setDelimiter(";");
    setBaselineKey(addDatasourceDraftKey({
      kind: initialKind,
      format: "csv",
      mode: initialKind === "origin" ? "live" : "static",
      originRef: initialOrigin?.ref ?? "",
      targetRef: "",
      name: initialOrigin?.name ?? "",
      sourceName: initialOrigin?.source_name ?? "",
      description: initialOrigin?.description ?? "",
      rowsText: '[\n  { "id": 1 }\n]',
      csvText: "",
      delimiter: ";"
    }));
    setError("");
  }, [initialKind, initialOrigin, open]);

  const selectedOrigin = origins.find((item) => item.ref === originRef) ?? null;
  const dirty = Boolean(open && addDatasourceDraftKey({
    kind,
    format,
    mode,
    originRef,
    targetRef,
    name,
    sourceName,
    description,
    rowsText,
    csvText,
    delimiter
  }) !== baselineKey);

  const chooseOrigin = (ref: string) => {
    const origin = origins.find((item) => item.ref === ref);
    setOriginRef(ref);
    if (!origin) return;
    setName(origin.name);
    setSourceName(origin.source_name);
    setDescription(origin.description ?? "");
    setMode(origin.supported_modes.includes("live") ? "live" : "cached");
  };

  const chooseTarget = (ref: string) => {
    setTargetRef(ref);
    const target = datasources.find((item) => item.ref === ref);
    if (!target) return;
    setName(target.name);
    setSourceName(target.source_name);
    setDescription(target.description ?? "");
    setMode(target.mode === "cached" ? "cached" : "static");
  };

  const create = async (): Promise<boolean> => {
    setBusy(true);
    setError("");
    try {
      if (kind === "origin") {
        if (!selectedOrigin || (mode !== "live" && mode !== "cached")) {
          throw new Error("Choose a connector origin and registration mode.");
        }
        const datasource = await registerDatasourceOrigin(settings, {
          origin_ref: selectedOrigin.ref,
          name,
          source_name: sourceName,
          description,
          mode
        });
        await onCreated(datasource);
      } else {
        const common = {
          name,
          source_name: sourceName,
          description,
          mode: mode === "cached" ? "cached" as const : "static" as const,
          target_datasource_ref: targetRef || null
        };
        const stage = format === "csv"
          ? await createDatasourceStage(settings, {
              ...common,
              format: "csv",
              csv_text: csvText,
              delimiter
            })
          : await createDatasourceStage(settings, {
              ...common,
              format: "json",
              rows: parseRows(rowsText)
            });
        await onCreated(stage);
      }
      return true;
    } catch (createError) {
      setError(apiErrorMessage(createError));
      return false;
    } finally {
      setBusy(false);
    }
  };

  useUnsavedDraftGuard({
    dirty,
    onSave: create,
    onDiscard: onClose,
    title: "i18n:govoplan-datasources.unsaved_add_title",
    message: "i18n:govoplan-datasources.unsaved_add_message"
  });

  const close = () => {
    if (busy) return;
    if (dirty) requestDiscard(onClose);
    else onClose();
  };

  const loadFile = async (file: File | undefined) => {
    if (!file) return;
    try {
      const text = await file.text();
      const isJson = file.name.toLowerCase().endsWith(".json");
      setFormat(isJson ? "json" : "csv");
      if (isJson) setRowsText(text);
      else setCsvText(text);
      const baseName = file.name.replace(/\.[^.]+$/, "");
      setName((current) => current || baseName);
      setSourceName((current) => current || sourceNameFromFile(baseName));
    } catch {
      setError("The selected file could not be read.");
    }
  };

  return (
    <Dialog
      open={open}
      title="Add datasource"
      className="datasources-add-dialog"
      onClose={close}
      footer={(
        <>
          <Button onClick={close} disabled={busy} disabledReason={busy ? DATASOURCES_I18N.working : undefined}>Cancel</Button>
          <Button
            variant="primary"
            onClick={() => void create()}
            disabled={
              busy
              || !name.trim()
              || !sourceName.trim()
              || (kind === "upload" && !canStage)
              || (kind === "origin" && (!canManage || !originRef))
            }
            disabledReason={busy ? DATASOURCES_I18N.working : !name.trim() || !sourceName.trim() ? DATASOURCES_I18N.incomplete : kind === "upload" && !canStage ? DATASOURCES_I18N.stageReason : kind === "origin" && !canManage ? DATASOURCES_I18N.manageReason : kind === "origin" && !originRef ? DATASOURCES_I18N.incomplete : undefined}
          >
            {kind === "upload" ? <Upload size={16} /> : <Database size={16} />}
            {kind === "upload" ? "Create stage" : "Register"}
          </Button>
        </>
      )}
    >
      <DialogSection className="datasources-dialog-fields">
        {error ? (
          <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
        ) : null}
        <SegmentedControl<AddKind>
          ariaLabel="Datasource origin"
          width="fill"
          size="equal"
          options={[
            { id: "upload", label: "Upload", disabled: !canStage },
            {
              id: "origin",
              label: "Connector origin",
              disabled: !canManage || !originsAvailable
            }
          ]}
          value={kind}
          onChange={(next) => {
            setKind(next);
            setMode(next === "origin" ? "live" : "static");
            setError("");
          }}
        />
        {kind === "origin" ? (
          <FormField label="Connector origin" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
            <select value={originRef} onChange={(event) => chooseOrigin(event.target.value)}>
              <option value="">Choose an origin</option>
              {origins.map((origin) => (
                <option key={origin.ref} value={origin.ref}>
                  {origin.name} ({origin.provider})
                </option>
              ))}
            </select>
          </FormField>
        ) : (
          <>
            <FormField label="Update existing datasource" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
              <select value={targetRef} onChange={(event) => chooseTarget(event.target.value)}>
                <option value="">Create a new datasource</option>
                {datasources.filter((item) => item.mode !== "live" && item.shape === "tabular").map((item) => (
                  <option key={item.ref} value={item.ref}>{item.name}</option>
                ))}
              </select>
            </FormField>
            <FormField label="File">
              <input
                type="file"
                accept=".csv,.tsv,.json,text/csv,application/json,text/plain"
                onChange={(event) => void loadFile(event.target.files?.[0])}
              />
            </FormField>
          </>
        )}
        <FormGrid columns={2} gap="small" collapseAt="narrow">
          <FormField label="Name" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
            <input value={name} onChange={(event) => setName(event.target.value)} />
          </FormField>
          <FormField label="Datasource key" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
            <input
              value={sourceName}
              onChange={(event) => setSourceName(event.target.value)}
              pattern="[A-Za-z_][A-Za-z0-9_]*"
              placeholder="monthly_cases"
              disabled={Boolean(targetRef)}
            />
          </FormField>
        </FormGrid>
        <FormField label="Description">
          <input value={description} onChange={(event) => setDescription(event.target.value)} />
        </FormField>
        <FormField label="Mode" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
          <SegmentedControl
            ariaLabel="Datasource mode"
            width="fill"
            size="equal"
            options={kind === "origin"
              ? [
                  {
                    id: "live",
                    label: "Live",
                    disabled: !selectedOrigin?.supported_modes.includes("live")
                  },
                  {
                    id: "cached",
                    label: "Cached",
                    disabled: !selectedOrigin?.supported_modes.includes("cached")
                  }
                ]
              : [
                  { id: "static", label: "Static" },
                  { id: "cached", label: "Cached stage" }
                ]}
            value={mode}
            onChange={(next) => setMode(next as typeof mode)}
          />
        </FormField>
        {kind === "upload" ? (
          <>
            <FormField label="Format">
              <SegmentedControl<UploadFormat>
                ariaLabel="Upload format"
                options={[
                  { id: "json", label: "JSON" },
                  { id: "csv", label: "CSV" }
                ]}
                value={format}
                onChange={setFormat}
              />
            </FormField>
            {format === "csv" ? (
              <>
                <FormField label="Delimiter">
                  <select value={delimiter} onChange={(event) => setDelimiter(event.target.value)}>
                    <option value=",">Comma</option>
                    <option value=";">Semicolon</option>
                    <option value={"\t"}>Tab</option>
                    <option value="|">Pipe</option>
                  </select>
                </FormField>
                <FormField label="CSV data">
                  <textarea
                    value={csvText}
                    onChange={(event) => setCsvText(event.target.value)}
                    spellCheck={false}
                  />
                </FormField>
              </>
            ) : (
              <FormField label="JSON rows">
                <textarea
                  value={rowsText}
                  onChange={(event) => setRowsText(event.target.value)}
                  spellCheck={false}
                />
              </FormField>
            )}
          </>
        ) : null}
      </DialogSection>
    </Dialog>
  );
}

function PreviewTable({
  datasource,
  rows
}: {
  datasource: Datasource;
  rows: Record<string, unknown>[];
}) {
  const columns = datasource.schema.map((field) => field.name);
  return (
    <div className="datasources-table-scroll datasources-preview-table">
      <table>
        <thead>
          <tr>{columns.map((column) => <th key={column}>{column}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={index}>
              {columns.map((column) => (
                <td key={column}>{displayValue(row[column])}</td>
              ))}
            </tr>
          ))}
          {!rows.length ? (
            <tr><td colSpan={Math.max(1, columns.length)}>No rows</td></tr>
          ) : null}
        </tbody>
      </table>
    </div>
  );
}

function SchemaTable({ fields }: { fields: Datasource["schema"] }) {
  return (
    <div className="datasources-table-scroll">
      <table>
        <thead>
          <tr><th>Field</th><th>Type</th><th>Classification</th><th>Nullable</th></tr>
        </thead>
        <tbody>
          {fields.map((field) => (
            <tr key={field.name}>
              <td>{field.name}</td>
              <td>{field.data_type}</td>
              <td>{readableToken(field.classification)}</td>
              <td>{field.nullable ? "Yes" : "No"}</td>
            </tr>
          ))}
          {!fields.length ? <tr><td colSpan={4}>Schema not available</td></tr> : null}
        </tbody>
      </table>
    </div>
  );
}

function EmptyWorkspace({ icon, label }: { icon: React.ReactNode; label: string }) {
  return <StatePanel size="fill" icon={icon} title={label} />;
}

function filterItems<T>(
  items: T[],
  query: string,
  searchable: (item: T) => string
): T[] {
  const normalized = query.trim().toLocaleLowerCase();
  return normalized
    ? items.filter((item) => searchable(item).toLocaleLowerCase().includes(normalized))
    : items;
}

function initialDatasourceRef(): string {
  if (typeof window === "undefined") return "";
  return new URLSearchParams(window.location.search).get("datasource") ?? "";
}

function parseRows(text: string): Record<string, unknown>[] {
  const value: unknown = JSON.parse(text);
  if (!Array.isArray(value) || value.some((row) => !isRecord(row))) {
    throw new Error("JSON data must be an array of row objects.");
  }
  return value;
}

function addDatasourceDraftKey(value: {
  kind: AddKind;
  format: UploadFormat;
  mode: "live" | "cached" | "static";
  originRef: string;
  targetRef: string;
  name: string;
  sourceName: string;
  description: string;
  rowsText: string;
  csvText: string;
  delimiter: string;
}): string {
  return JSON.stringify(value);
}

function isRecord(value: unknown): value is Record<string, unknown> {
  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
}

function parseObject(value: string, label: string): Record<string, unknown> {
  const parsed: unknown = JSON.parse(value || "{}");
  if (!isRecord(parsed)) throw new Error(`${label} must be a JSON object.`);
  return parsed;
}

function splitLines(value: string): string[] {
  return [...new Set(value.split(/\r?\n/).map((item) => item.trim()).filter(Boolean))];
}

function readableToken(value: string): string {
  return value.replace(/_/g, " ").replace(/^./, (first: string) => first.toUpperCase());
}

function displayValue(value: unknown): string {
  if (value === null || value === undefined) return "";
  if (typeof value === "object") return JSON.stringify(value);
  return String(value);
}

function sourceNameFromFile(value: string): string {
  const normalized = value
    .normalize("NFKD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^A-Za-z0-9_]+/g, "_")
    .replace(/^_+|_+$/g, "")
    .toLowerCase();
  return /^[A-Za-z_]/.test(normalized) ? normalized : `source_${normalized || "upload"}`;
}

function formatNumber(value: number | null | undefined): string {
  return value === null || value === undefined ? "Unknown" : value.toLocaleString();
}

function formatCount(value: number | null | undefined, label: string): string {
  return value === null || value === undefined
    ? `Unknown ${label}s`
    : `${value.toLocaleString()} ${label}${value === 1 ? "" : "s"}`;
}

function formatDate(value: string | null | undefined): string {
  if (!value) return "Not available";
  const parsed = new Date(value);
  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleString();
}

function shortFingerprint(value: string): string {
  return value ? `${value.slice(0, 12)}…` : "Not available";
}

function apiErrorMessage(error: unknown): string {
  if (isApiError(error)) return error.message;
  return error instanceof Error ? error.message : "The datasource request failed.";
}