import { useCallback, useState } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogBody,
  DialogContent,
  DialogSurface,
  DialogTitle,
  MessageBar,
  MessageBarBody,
  Spinner,
  Text,
} from "@fluentui/react-components";
import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";

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

export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
  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, data) => { if (!data.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 style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                  {data.entries.map((entry) => (
                    <div key={entry}>{entry}</div>
                  ))}
                </div>
              </div>
            )}
          </DialogContent>
          <DialogActions>
            <Button appearance="secondary" onClick={onClose}>
              Close
            </Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
}