/**
 * BlocklistsPage — external IP blocklist source management.
 *
 * Provides three sections:
 * 1. **Blocklist Sources** — table of configured URLs with enable/disable
 *    toggle, edit, delete, and preview actions.
 * 2. **Import Schedule** — frequency preset (hourly/daily/weekly) + time
 *    picker + "Run Now" button showing last/next run times.
 * 3. **Import Log** — paginated table of completed import runs.
 */

import { useCallback, useState } from "react";
import {
  Badge,
  Button,
  Dialog,
  DialogActions,
  DialogBody,
  DialogContent,
  DialogSurface,
  DialogTitle,
  Field,
  Input,
  MessageBar,
  MessageBarBody,
  Select,
  Spinner,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableCellLayout,
  TableHeader,
  TableHeaderCell,
  TableRow,
  Text,
  makeStyles,
  tokens,
} from "@fluentui/react-components";
import { useCommonSectionStyles } from "../theme/commonStyles";
import {
  AddRegular,
  ArrowClockwiseRegular,
  DeleteRegular,
  EditRegular,
  EyeRegular,
  PlayRegular,
} from "@fluentui/react-icons";
import {
  useBlocklists,
  useImportLog,
  useRunImport,
  useSchedule,
} from "../hooks/useBlocklist";
import type {
  BlocklistSource,
  ImportRunResult,
  PreviewResponse,
  ScheduleConfig,
  ScheduleFrequency,
} from "../types/blocklist";

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalXL,
  },

  tableWrapper: { overflowX: "auto" },
  actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
  mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
  centred: {
    display: "flex",
    justifyContent: "center",
    padding: tokens.spacingVerticalL,
  },
  scheduleForm: {
    display: "flex",
    flexWrap: "wrap",
    gap: tokens.spacingHorizontalM,
    alignItems: "flex-end",
  },
  scheduleField: { minWidth: "140px" },
  metaRow: {
    display: "flex",
    gap: tokens.spacingHorizontalL,
    flexWrap: "wrap",
    paddingTop: tokens.spacingVerticalS,
  },
  metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
  runResult: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalXS,
    maxHeight: "320px",
    overflowY: "auto",
  },
  pagination: {
    display: "flex",
    justifyContent: "flex-end",
    gap: tokens.spacingHorizontalS,
    alignItems: "center",
    paddingTop: tokens.spacingVerticalS,
  },
  dialogForm: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalM,
    minWidth: "380px",
  },
  previewList: {
    fontFamily: "Consolas, 'Courier New', monospace",
    fontSize: "12px",
    maxHeight: "280px",
    overflowY: "auto",
    backgroundColor: tokens.colorNeutralBackground3,
    padding: tokens.spacingVerticalS,
    borderRadius: tokens.borderRadiusMedium,
  },
  errorRow: { backgroundColor: tokens.colorStatusDangerBackground1 },
});

// ---------------------------------------------------------------------------
// Source form dialog
// ---------------------------------------------------------------------------

interface SourceFormValues {
  name: string;
  url: string;
  enabled: boolean;
}

interface SourceFormDialogProps {
  open: boolean;
  mode: "add" | "edit";
  initial: SourceFormValues;
  saving: boolean;
  error: string | null;
  onClose: () => void;
  onSubmit: (values: SourceFormValues) => void;
}

function SourceFormDialog({
  open,
  mode,
  initial,
  saving,
  error,
  onClose,
  onSubmit,
}: SourceFormDialogProps): React.JSX.Element {
  const styles = useStyles();
  const [values, setValues] = useState<SourceFormValues>(initial);

  // Sync when dialog re-opens with new initial data.
  const handleOpen = useCallback((): void => {
    setValues(initial);
  }, [initial]);

  return (
    <Dialog
      open={open}
      onOpenChange={(_ev, data) => {
        if (!data.open) onClose();
      }}
    >
      <DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
        <DialogBody>
          <DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
          <DialogContent>
            <div className={styles.dialogForm}>
              {error && (
                <MessageBar intent="error">
                  <MessageBarBody>{error}</MessageBarBody>
                </MessageBar>
              )}
              <Field label="Name" required>
                <Input
                  value={values.name}
                  onChange={(_ev, d) => {
                    setValues((p) => ({ ...p, name: d.value }));
                  }}
                  placeholder="e.g. Blocklist.de — All"
                />
              </Field>
              <Field label="URL" required>
                <Input
                  value={values.url}
                  onChange={(_ev, d) => {
                    setValues((p) => ({ ...p, url: d.value }));
                  }}
                  placeholder="https://lists.blocklist.de/lists/all.txt"
                />
              </Field>
              <Switch
                label="Enabled"
                checked={values.enabled}
                onChange={(_ev, d) => {
                  setValues((p) => ({ ...p, enabled: d.checked }));
                }}
              />
            </div>
          </DialogContent>
          <DialogActions>
            <Button appearance="secondary" onClick={onClose} disabled={saving}>
              Cancel
            </Button>
            <Button
              appearance="primary"
              disabled={saving || !values.name.trim() || !values.url.trim()}
              onClick={() => {
                onSubmit(values);
              }}
            >
              {saving ? <Spinner size="tiny" /> : mode === "add" ? "Add" : "Save"}
            </Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
}

// ---------------------------------------------------------------------------
// Preview dialog
// ---------------------------------------------------------------------------

interface PreviewDialogProps {
  open: boolean;
  source: BlocklistSource | null;
  onClose: () => void;
  fetchPreview: (id: number) => Promise<PreviewResponse>;
}

function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
  const styles = useStyles();
  const [data, setData] = useState<PreviewResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Load preview when dialog opens.
  const handleOpen = useCallback((): void => {
    if (!source) return;
    setData(null);
    setError(null);
    setLoading(true);
    fetchPreview(source.id)
      .then((result) => {
        setData(result);
        setLoading(false);
      })
      .catch((err: unknown) => {
        setError(err instanceof Error ? err.message : "Failed to fetch preview");
        setLoading(false);
      });
  }, [source, fetchPreview]);

  return (
    <Dialog
      open={open}
      onOpenChange={(_ev, d) => {
        if (!d.open) onClose();
      }}
    >
      <DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
        <DialogBody>
          <DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
          <DialogContent>
            {loading && (
              <div style={{ textAlign: "center", padding: "16px" }}>
                <Spinner label="Downloading…" />
              </div>
            )}
            {error && (
              <MessageBar intent="error">
                <MessageBarBody>{error}</MessageBarBody>
              </MessageBar>
            )}
            {data && (
              <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                <Text size={300}>
                  {data.valid_count} valid IPs / {data.skipped_count} skipped of{" "}
                  {data.total_lines} total lines. Showing first {data.entries.length}:
                </Text>
                <div className={styles.previewList}>
                  {data.entries.map((entry) => (
                    <div key={entry}>{entry}</div>
                  ))}
                </div>
              </div>
            )}
          </DialogContent>
          <DialogActions>
            <Button appearance="secondary" onClick={onClose}>
              Close
            </Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
}

// ---------------------------------------------------------------------------
// Import result dialog
// ---------------------------------------------------------------------------

interface ImportResultDialogProps {
  open: boolean;
  result: ImportRunResult | null;
  onClose: () => void;
}

function ImportResultDialog({ open, result, onClose }: ImportResultDialogProps): React.JSX.Element {
  const styles = useStyles();
  if (!result) return <></>;
  return (
    <Dialog
      open={open}
      onOpenChange={(_ev, d) => {
        if (!d.open) onClose();
      }}
    >
      <DialogSurface>
        <DialogBody>
          <DialogTitle>Import Complete</DialogTitle>
          <DialogContent>
            <div className={styles.runResult}>
              <Text size={300} weight="semibold">
                Total imported: {result.total_imported} &nbsp;|&nbsp; Skipped:
                {result.total_skipped} &nbsp;|&nbsp; Sources with errors: {result.errors_count}
              </Text>
              {result.results.map((r, i) => (
                <div key={i} style={{ padding: "4px 0", borderBottom: "1px solid #eee" }}>
                  <Text size={200} weight="semibold">
                    {r.source_url}
                  </Text>
                  <br />
                  <Text size={200}>
                    Imported: {r.ips_imported} | Skipped: {r.ips_skipped}
                    {r.error ? ` | Error: ${r.error}` : ""}
                  </Text>
                </div>
              ))}
            </div>
          </DialogContent>
          <DialogActions>
            <Button appearance="primary" onClick={onClose}>
              Close
            </Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
}

// ---------------------------------------------------------------------------
// Sources section
// ---------------------------------------------------------------------------

const EMPTY_SOURCE: SourceFormValues = { name: "", url: "", enabled: true };

interface SourcesSectionProps {
  onRunImport: () => void;
  runImportRunning: boolean;
}

function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
  const styles = useStyles();
  const sectionStyles = useCommonSectionStyles();
  const { sources, loading, error, refresh, createSource, updateSource, removeSource, previewSource } =
    useBlocklists();

  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogMode, setDialogMode] = useState<"add" | "edit">("add");
  const [dialogInitial, setDialogInitial] = useState<SourceFormValues>(EMPTY_SOURCE);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewSourceItem, setPreviewSourceItem] = useState<BlocklistSource | null>(null);

  const openAdd = useCallback((): void => {
    setDialogMode("add");
    setDialogInitial(EMPTY_SOURCE);
    setEditingId(null);
    setSaveError(null);
    setDialogOpen(true);
  }, []);

  const openEdit = useCallback((source: BlocklistSource): void => {
    setDialogMode("edit");
    setDialogInitial({ name: source.name, url: source.url, enabled: source.enabled });
    setEditingId(source.id);
    setSaveError(null);
    setDialogOpen(true);
  }, []);

  const handleSubmit = useCallback(
    (values: SourceFormValues): void => {
      setSaving(true);
      setSaveError(null);
      const op =
        dialogMode === "add"
          ? createSource({ name: values.name, url: values.url, enabled: values.enabled })
          : updateSource(editingId ?? -1, {
              name: values.name,
              url: values.url,
              enabled: values.enabled,
            });
      op.then(() => {
        setSaving(false);
        setDialogOpen(false);
      }).catch((err: unknown) => {
        setSaving(false);
        setSaveError(err instanceof Error ? err.message : "Failed to save source");
      });
    },
    [dialogMode, editingId, createSource, updateSource],
  );

  const handleToggleEnabled = useCallback(
    (source: BlocklistSource): void => {
      void updateSource(source.id, { enabled: !source.enabled });
    },
    [updateSource],
  );

  const handleDelete = useCallback(
    (source: BlocklistSource): void => {
      void removeSource(source.id);
    },
    [removeSource],
  );

  const handlePreview = useCallback((source: BlocklistSource): void => {
    setPreviewSourceItem(source);
    setPreviewOpen(true);
  }, []);

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text size={500} weight="semibold">
          Blocklist Sources
        </Text>
        <div style={{ display: "flex", gap: "8px" }}>
          <Button
            icon={<PlayRegular />}
            appearance="secondary"
            onClick={onRunImport}
            disabled={runImportRunning}
          >
            {runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
          </Button>
          <Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
            Refresh
          </Button>
          <Button icon={<AddRegular />} appearance="primary" onClick={openAdd}>
            Add Source
          </Button>
        </div>
      </div>

      {error && (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      )}

      {loading ? (
        <div className={styles.centred}>
          <Spinner label="Loading sources…" />
        </div>
      ) : sources.length === 0 ? (
        <div className={styles.centred}>
          <Text>No blocklist sources configured. Click "Add Source" to get started.</Text>
        </div>
      ) : (
        <div className={styles.tableWrapper}>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell>URL</TableHeaderCell>
                <TableHeaderCell>Enabled</TableHeaderCell>
                <TableHeaderCell>Actions</TableHeaderCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sources.map((source) => (
                <TableRow key={source.id}>
                  <TableCell>
                    <TableCellLayout>{source.name}</TableCellLayout>
                  </TableCell>
                  <TableCell>
                    <TableCellLayout>
                      <span className={styles.mono}>{source.url}</span>
                    </TableCellLayout>
                  </TableCell>
                  <TableCell>
                    <Switch
                      checked={source.enabled}
                      onChange={() => {
                        handleToggleEnabled(source);
                      }}
                      label={source.enabled ? "On" : "Off"}
                    />
                  </TableCell>
                  <TableCell>
                    <div className={styles.actionsCell}>
                      <Button
                        icon={<EyeRegular />}
                        size="small"
                        appearance="secondary"
                        onClick={() => {
                          handlePreview(source);
                        }}
                      >
                        Preview
                      </Button>
                      <Button
                        icon={<EditRegular />}
                        size="small"
                        appearance="secondary"
                        onClick={() => {
                          openEdit(source);
                        }}
                      >
                        Edit
                      </Button>
                      <Button
                        icon={<DeleteRegular />}
                        size="small"
                        appearance="secondary"
                        onClick={() => {
                          handleDelete(source);
                        }}
                      >
                        Delete
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      <SourceFormDialog
        open={dialogOpen}
        mode={dialogMode}
        initial={dialogInitial}
        saving={saving}
        error={saveError}
        onClose={() => {
          setDialogOpen(false);
        }}
        onSubmit={handleSubmit}
      />

      <PreviewDialog
        open={previewOpen}
        source={previewSourceItem}
        onClose={() => {
          setPreviewOpen(false);
        }}
        fetchPreview={previewSource}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Schedule section
// ---------------------------------------------------------------------------

const FREQUENCY_LABELS: Record<ScheduleFrequency, string> = {
  hourly: "Every N hours",
  daily: "Daily",
  weekly: "Weekly",
};

const DAYS = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];

interface ScheduleSectionProps {
  onRunImport: () => void;
  runImportRunning: boolean;
}

function ScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps): React.JSX.Element {
  const styles = useStyles();
  const sectionStyles = useCommonSectionStyles();
  const { info, loading, error, saveSchedule } = useSchedule();
  const [saving, setSaving] = useState(false);
  const [saveMsg, setSaveMsg] = useState<string | null>(null);

  const config = info?.config ?? {
    frequency: "daily" as ScheduleFrequency,
    interval_hours: 24,
    hour: 3,
    minute: 0,
    day_of_week: 0,
  };

  const [draft, setDraft] = useState<ScheduleConfig>(config);

  // Sync draft when data loads.
  const handleSave = useCallback((): void => {
    setSaving(true);
    saveSchedule(draft)
      .then(() => {
        setSaveMsg("Schedule saved.");
        setSaving(false);
        setTimeout(() => {
          setSaveMsg(null);
        }, 3000);
      })
      .catch((err: unknown) => {
        setSaveMsg(err instanceof Error ? err.message : "Failed to save schedule");
        setSaving(false);
      });
  }, [draft, saveSchedule]);

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text size={500} weight="semibold">
          Import Schedule
        </Text>
        <Button
          icon={<PlayRegular />}
          appearance="secondary"
          onClick={onRunImport}
          disabled={runImportRunning}
        >
          {runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
        </Button>
      </div>

      {error && (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      )}
      {saveMsg && (
        <MessageBar intent={saveMsg === "Schedule saved." ? "success" : "error"}>
          <MessageBarBody>{saveMsg}</MessageBarBody>
        </MessageBar>
      )}

      {loading ? (
        <div className={styles.centred}>
          <Spinner label="Loading schedule…" />
        </div>
      ) : (
        <>
          <div className={styles.scheduleForm}>
            <Field label="Frequency" className={styles.scheduleField}>
              <Select
                value={draft.frequency}
                onChange={(_ev, d) => {
                  setDraft((p) => ({ ...p, frequency: d.value as ScheduleFrequency }));
                }}
              >
                {(["hourly", "daily", "weekly"] as ScheduleFrequency[]).map((f) => (
                  <option key={f} value={f}>
                    {FREQUENCY_LABELS[f]}
                  </option>
                ))}
              </Select>
            </Field>

            {draft.frequency === "hourly" && (
              <Field label="Every (hours)" className={styles.scheduleField}>
                <Input
                  type="number"
                  value={String(draft.interval_hours)}
                  onChange={(_ev, d) => {
                    setDraft((p) => ({ ...p, interval_hours: Math.max(1, parseInt(d.value, 10) || 1) }));
                  }}
                  min={1}
                  max={168}
                />
              </Field>
            )}

            {draft.frequency !== "hourly" && (
              <>
                {draft.frequency === "weekly" && (
                  <Field label="Day of week" className={styles.scheduleField}>
                    <Select
                      value={String(draft.day_of_week)}
                      onChange={(_ev, d) => {
                        setDraft((p) => ({ ...p, day_of_week: parseInt(d.value, 10) }));
                      }}
                    >
                      {DAYS.map((day, i) => (
                        <option key={day} value={i}>
                          {day}
                        </option>
                      ))}
                    </Select>
                  </Field>
                )}
                <Field label="Hour (UTC)" className={styles.scheduleField}>
                  <Select
                    value={String(draft.hour)}
                    onChange={(_ev, d) => {
                      setDraft((p) => ({ ...p, hour: parseInt(d.value, 10) }));
                    }}
                  >
                    {Array.from({ length: 24 }, (_, i) => (
                      <option key={i} value={i}>
                        {String(i).padStart(2, "0")}:00
                      </option>
                    ))}
                  </Select>
                </Field>
                <Field label="Minute" className={styles.scheduleField}>
                  <Select
                    value={String(draft.minute)}
                    onChange={(_ev, d) => {
                      setDraft((p) => ({ ...p, minute: parseInt(d.value, 10) }));
                    }}
                  >
                    {[0, 15, 30, 45].map((m) => (
                      <option key={m} value={m}>
                        {String(m).padStart(2, "0")}
                      </option>
                    ))}
                  </Select>
                </Field>
              </>
            )}

            <Button
              appearance="primary"
              onClick={handleSave}
              disabled={saving}
              style={{ alignSelf: "flex-end" }}
            >
              {saving ? <Spinner size="tiny" /> : "Save Schedule"}
            </Button>
          </div>

          <div className={styles.metaRow}>
            <div className={styles.metaItem}>
              <Text size={200} weight="semibold">
                Last run
              </Text>
              <Text size={200}>{info?.last_run_at ?? "Never"}</Text>
            </div>
            <div className={styles.metaItem}>
              <Text size={200} weight="semibold">
                Next run
              </Text>
              <Text size={200}>{info?.next_run_at ?? "Not scheduled"}</Text>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Import log section
// ---------------------------------------------------------------------------

function ImportLogSection(): React.JSX.Element {
  const styles = useStyles();
  const sectionStyles = useCommonSectionStyles();
  const { data, loading, error, page, setPage, refresh } = useImportLog(undefined, 20);

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text size={500} weight="semibold">
          Import Log
        </Text>
        <Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
          Refresh
        </Button>
      </div>

      {error && (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      )}

      {loading ? (
        <div className={styles.centred}>
          <Spinner label="Loading log…" />
        </div>
      ) : !data || data.items.length === 0 ? (
        <div className={styles.centred}>
          <Text>No import runs recorded yet.</Text>
        </div>
      ) : (
        <>
          <div className={styles.tableWrapper}>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHeaderCell>Timestamp</TableHeaderCell>
                  <TableHeaderCell>Source URL</TableHeaderCell>
                  <TableHeaderCell>Imported</TableHeaderCell>
                  <TableHeaderCell>Skipped</TableHeaderCell>
                  <TableHeaderCell>Status</TableHeaderCell>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.items.map((entry) => (
                  <TableRow
                    key={entry.id}
                    className={entry.errors ? styles.errorRow : undefined}
                  >
                    <TableCell>
                      <TableCellLayout>
                        <span className={styles.mono}>{entry.timestamp}</span>
                      </TableCellLayout>
                    </TableCell>
                    <TableCell>
                      <TableCellLayout>
                        <span className={styles.mono}>{entry.source_url}</span>
                      </TableCellLayout>
                    </TableCell>
                    <TableCell>
                      <TableCellLayout>{entry.ips_imported}</TableCellLayout>
                    </TableCell>
                    <TableCell>
                      <TableCellLayout>{entry.ips_skipped}</TableCellLayout>
                    </TableCell>
                    <TableCell>
                      <TableCellLayout>
                        {entry.errors ? (
                          <Badge appearance="filled" color="danger">
                            Error
                          </Badge>
                        ) : (
                          <Badge appearance="filled" color="success">
                            OK
                          </Badge>
                        )}
                      </TableCellLayout>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {data.total_pages > 1 && (
            <div className={styles.pagination}>
              <Button
                size="small"
                appearance="secondary"
                disabled={page <= 1}
                onClick={() => {
                  setPage(page - 1);
                }}
              >
                Previous
              </Button>
              <Text size={200}>
                Page {page} of {data.total_pages}
              </Text>
              <Button
                size="small"
                appearance="secondary"
                disabled={page >= data.total_pages}
                onClick={() => {
                  setPage(page + 1);
                }}
              >
                Next
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------

export function BlocklistsPage(): React.JSX.Element {
  const styles = useStyles();
  const { running, lastResult, error: importError, runNow } = useRunImport();
  const [importResultOpen, setImportResultOpen] = useState(false);

  const handleRunImport = useCallback((): void => {
    void runNow().then(() => {
      setImportResultOpen(true);
    });
  }, [runNow]);

  return (
    <div className={styles.root}>
      <Text as="h1" size={700} weight="semibold">
        Blocklists
      </Text>

      {importError && (
        <MessageBar intent="error">
          <MessageBarBody>Import error: {importError}</MessageBarBody>
        </MessageBar>
      )}

      <SourcesSection onRunImport={handleRunImport} runImportRunning={running} />
      <ScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
      <ImportLogSection />

      <ImportResultDialog
        open={importResultOpen}
        result={lastResult}
        onClose={() => {
          setImportResultOpen(false);
        }}
      />
    </div>
  );
}