BanGUI/frontend/src/components/blocklist/BlocklistSourcesSection.tsx

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

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 = useBlocklistStyles();
  const [values, setValues] = useState<SourceFormValues>(initial);

  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>
  );
}

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 = useBlocklistStyles();
  const [data, setData] = useState<PreviewResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  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>
  );
}

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

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

export function BlocklistSourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
  const styles = useBlocklistStyles();
  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>
  );
}