khata-ui/src/FetchRequests.tsx

import * as React from "react";
import {
  Box,
  Container,
  Paper,
  Typography,
  Button,
  ToggleButtonGroup,
  ToggleButton,
  Chip,
  IconButton,
  CircularProgress,
  Alert,
  Snackbar,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Tooltip,
  TextField,
  Select,
  MenuItem,
  InputLabel,
  FormControl,
  OutlinedInput,
  Autocomplete,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import RefreshIcon from "@mui/icons-material/Refresh";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import ReplayIcon from "@mui/icons-material/Replay";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import ScheduleIcon from "@mui/icons-material/Schedule";
import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
import {
  useUploadFile,
} from "./features/fetch-requests";
import type {
  FetchRequest,
  FetchRequestStatus,
  FileSource,
  EmailSource,
} from "./features/fetch-requests";
import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
import { useNavigate } from "react-router-dom";
import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
import type { ResourceField } from "../react-openapi";

const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
  pending: "default",
  processing: "info",
  paused: "warning",
  raw_expenses_done: "primary",
  enriched_done: "warning",
  completed: "success",
  failed: "error",
};

const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
  pending: <ScheduleIcon sx={{ fontSize: 16 }} />,
  processing: <CircularProgress size={14} sx={{ mr: 0.5 }} />,
  paused: <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />,
  raw_expenses_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
  enriched_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
  completed: <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />,
  failed: <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />,
};

function formatDate(iso: string) {
  const d = new Date(iso);
  return d.toLocaleString();
}

function formatDateRange(start?: string, end?: string) {
  if (!start && !end) return "\u2014";
  const s = start ? new Date(start).toLocaleDateString() : "?";
  const e = end ? new Date(end).toLocaleDateString() : "?";
  return `${s} \u2192 ${e}`;
}

function shortId(fp: string) {
  return fp.length > 8 ? fp.slice(0, 8) + "\u2026" : fp;
}

export default function FetchRequests() {
  const navigate = useNavigate();

  const [sourceType, setSourceType] = React.useState<"file" | "email">("file");
  const [accountName, setAccountName] = React.useState("");
  const [payorUsername, setPayorUsername] = React.useState("aetos");
  const [format, setFormat] = React.useState("");
  const [file, setFile] = React.useState<File | null>(null);
  const [uploadedPath, setUploadedPath] = React.useState<string | null>(null);
  const [fromEmail, setFromEmail] = React.useState("");
  const [subject, setSubject] = React.useState("");
  const [rawTerms, setRawTerms] = React.useState("");
  const [startDate, setStartDate] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
  const [deleteTarget, setDeleteTarget] = React.useState<FetchRequest | null>(null);

  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
  const [accountFilter, setAccountFilter] = React.useState("");
  const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");

  const { useList, useCreate, usePatch, useDelete, components } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
  const { data: listData, isLoading, isFetching, refetch } = useList({
    ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
    ...(accountFilter ? { account_name: accountFilter } : {}),
    ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
  });

  const { useList: useAccountsList } = useResourceByName("accounts");
  const { data: accountsData } = useAccountsList();
  const accountOptions: string[] = React.useMemo(() => {
    return (accountsData?.data ?? []).map((a: any) => a.name).filter(Boolean);
  }, [accountsData]);

  const config = useConfig();
  const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
  const formatField: ResourceField | undefined = fetchRes?.fields?.source?.schema?.format;
  const formatOptions: string[] = formatField?.options ?? [];
  const startDateField: ResourceField | undefined = fetchRes?.fields?.start_date;
  const endDateField: ResourceField | undefined = fetchRes?.fields?.end_date;
  const payorUsernameField: ResourceField | undefined = fetchRes?.fields?.payor_username;

  const createMutation = useCreate();
  const updateMutation = usePatch();
  const deleteMutation = useDelete();
  const uploadMutation = useUploadFile();

  const requests = listData?.data ?? [];

  const handleUpload = async () => {
    if (!file) return;
    const result = await uploadMutation.mutateAsync(file);
    if (result?.saved_as) {
      setUploadedPath(result.saved_as);
      if (!format) setFormat(file.name.split(".").pop() || "");
      setSnackbar({ message: `File uploaded: ${result.saved_as}`, severity: "success" });
    }
  };

  const handleCreate = async () => {
    if (!accountName) return;

    let source: FileSource | EmailSource;

    if (sourceType === "file") {
      if (!uploadedPath || !format) return;
      source = { path: uploadedPath, format } as FileSource;
    } else {
      if (!format) return;
      const emailSource: EmailSource = { format };
      if (fromEmail) emailSource.from_email = fromEmail;
      if (subject) emailSource.subject = subject;
      if (rawTerms.trim()) emailSource.raw_terms = rawTerms.split(",").map((s) => s.trim()).filter(Boolean);
      source = emailSource;
    }

    try {
      const result = await createMutation.mutateAsync({
        source,
        account_name: accountName,
        payor_username: payorUsername,
        ...(startDate ? { start_date: new Date(startDate).toISOString() } : {}),
        ...(endDate ? { end_date: new Date(endDate).toISOString() } : {}),
      });
      setSnackbar({ message: "Fetch request created", severity: "success" });
      resetForm();
      navigate(`/fetch-requests/${result.id}`);
    } catch (err: any) {
      if (err?.response?.status === 409) {
        setSnackbar({ message: "Duplicate \u2014 same fingerprint already exists", severity: "error" });
      } else {
        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
      }
    }
  };

  const resetForm = () => {
    setAccountName("");
    setFormat("");
    setFile(null);
    setUploadedPath(null);
    setFromEmail("");
    setSubject("");
    setRawTerms("");
    setStartDate("");
    setEndDate("");
  };

  const handleRetry = async (req: FetchRequest) => {
    try {
      await updateMutation.mutateAsync({ id: req.id, data: { status: "pending" } });
      setSnackbar({ message: "Retrying fetch request", severity: "success" });
    } catch {
      setSnackbar({ message: "Failed to retry", severity: "error" });
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      await deleteMutation.mutateAsync(deleteTarget.id);
      setSnackbar({ message: "Fetch request deleted", severity: "success" });
    } catch {
      setSnackbar({ message: "Failed to delete", severity: "error" });
    }
    setDeleteTarget(null);
  };

  const sourceTypeOptions: ("all" | "file" | "email")[] = ["all", "file", "email"];

  return (
    <Container sx={{ mt: 4, mb: 4 }}>
      <Typography variant="h5" fontWeight="bold" gutterBottom>
        Fetch Request Pipeline
      </Typography>

      <Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
          New Fetch Request
        </Typography>

        <ToggleButtonGroup
          value={sourceType}
          exclusive
          onChange={(_, val) => val && setSourceType(val)}
          sx={{ mb: 3 }}
          size="small"
        >
          <ToggleButton value="file">File Upload</ToggleButton>
          <ToggleButton value="email">Email Fetch</ToggleButton>
        </ToggleButtonGroup>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {sourceType === "file" ? (
            <>
              <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
                <Button variant="outlined" component="label" startIcon={<CloudUploadIcon />}>
                  Choose File
                  <input type="file" hidden onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
                </Button>
                <Typography variant="body2" sx={{ flex: 1, color: "text.secondary" }}>
                  {file ? file.name : "No file selected"}
                </Typography>
                <Button
                  variant="contained"
                  onClick={handleUpload}
                  disabled={!file || uploadMutation.isPending}
                >
                  {uploadMutation.isPending ? "Uploading..." : "Upload"}
                </Button>
              </Box>
              {uploadedPath && (
                <Alert severity="success" sx={{ py: 0 }}>
                  Uploaded as: {uploadedPath}
                </Alert>
              )}
              {formatField && components?.FormField ? (
                <components.FormField
                  name="format"
                  field={formatField}
                  value={format}
                  onChange={setFormat}
                />
              ) : (
                <FormControl size="small">
                  <InputLabel>Format</InputLabel>
                  <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
                    {formatOptions.map((opt) => (
                      <MenuItem key={opt} value={opt}>{opt}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            </>
          ) : (
            <>
              {formatField && components?.FormField ? (
                <components.FormField
                  name="format"
                  field={formatField}
                  value={format}
                  onChange={setFormat}
                />
              ) : (
                <FormControl size="small">
                  <InputLabel>Format</InputLabel>
                  <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
                    {formatOptions.map((opt) => (
                      <MenuItem key={opt} value={opt}>{opt}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
              <TextField label="From Email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} size="small" />
              <TextField label="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} size="small" />
              <TextField label="Raw Terms" value={rawTerms} onChange={(e) => setRawTerms(e.target.value)} size="small" helperText="Comma-separated search terms" />
            </>
          )}

          <Autocomplete
            options={accountOptions}
            value={accountName || null}
            onChange={(_, val) => setAccountName(val ?? "")}
            renderInput={(params) => (
              <TextField {...params} label="Account Name" size="small" required />
            )}
            sx={{ "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
          />
          {payorUsernameField && components?.FormField ? (
            <components.FormField
              name="payor_username"
              field={payorUsernameField}
              value={payorUsername}
              onChange={setPayorUsername}
            />
          ) : (
            <TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
          )}

          <Box sx={{ display: "flex", gap: 2 }}>
            {startDateField && components?.date ? (
              <Box sx={{ flex: 1 }}>
                <components.date
                  name="start_date"
                  field={startDateField}
                  value={startDate}
                  onChange={setStartDate}
                />
              </Box>
            ) : (
              <TextField
                label="Start Date"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                size="small"
                InputLabelProps={{ shrink: true }}
                inputProps={{ max: new Date().toISOString().split("T")[0] }}
                sx={{ flex: 1 }}
              />
            )}
            {endDateField && components?.date ? (
              <Box sx={{ flex: 1 }}>
                <components.date
                  name="end_date"
                  field={endDateField}
                  value={endDate}
                  onChange={setEndDate}
                />
              </Box>
            ) : (
              <TextField
                label="End Date"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                size="small"
                InputLabelProps={{ shrink: true }}
                inputProps={{ max: new Date().toISOString().split("T")[0] }}
                sx={{ flex: 1 }}
              />
            )}
          </Box>

          <Button
            variant="contained"
            onClick={handleCreate}
            disabled={createMutation.isPending || !accountName || (sourceType === "file" && (!uploadedPath || !format)) || (sourceType === "email" && !format)}
          >
            {createMutation.isPending ? "Creating..." : "Create Fetch Request"}
          </Button>
        </Box>
      </Paper>

      <Paper sx={{ borderRadius: 4, mb: 2, p: 2 }} variant="outlined">
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
          <FormControl size="small" sx={{ minWidth: 200 }}>
            <InputLabel>Status</InputLabel>
            <Select
              multiple
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as string[])}
              input={<OutlinedInput label="Status" />}
              renderValue={(selected) => (selected as string[]).join(", ")}
            >
              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
              ))}
            </Select>
          </FormControl>
          <Autocomplete
            options={accountOptions}
            value={accountFilter || null}
            onChange={(_, val) => setAccountFilter(val ?? "")}
            renderInput={(params) => (
              <TextField {...params} label="Account" size="small" sx={{ minWidth: 160 }} />
            )}
            sx={{ minWidth: 160, "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
          />
          <ToggleButtonGroup
            value={sourceFilter}
            exclusive
            onChange={(_, val) => val && setSourceFilter(val)}
            size="small"
          >
            {sourceTypeOptions.map((opt) => (
              <ToggleButton key={opt} value={opt}>
                {opt === "all" ? "All" : opt === "file" ? "File" : "Email"}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
          <Box sx={{ flex: 1 }} />
          <IconButton onClick={() => refetch()} disabled={isFetching}>
            <RefreshIcon />
          </IconButton>
        </Box>
      </Paper>

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
          <CircularProgress />
        </Box>
      ) : requests.length === 0 ? (
        <Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
          No fetch requests yet
        </Box>
      ) : (
        <Paper variant="outlined" sx={{ borderRadius: 4 }}>
          <Box sx={{ overflowX: "auto" }}>
            <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
              <Box component="thead">
                <Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
                  {["ID", "Account", "Source", "Date Range", "Status", "Retries", "Created", "Actions"].map((h) => (
                    <Box
                      key={h}
                      component="th"
                      sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
                    >
                      {h}
                    </Box>
                  ))}
                </Box>
              </Box>
              <Box component="tbody">
                {[...requests]
                  .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
                  .map((req: FetchRequest) => (
                  <Box
                    key={req.id}
                    component="tr"
                    onClick={() => navigate(`/fetch-requests/${req.id}`)}
                    sx={{
                      cursor: "pointer",
                      borderBottom: 1,
                      borderColor: "divider",
                      "&:hover": { bgcolor: "action.hover" },
                      "&:last-child": { borderBottom: 0 },
                    }}
                  >
                    <Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                        {shortId(req.fingerprint)}
                        <IconButton
                          size="small"
                          onClick={(e) => {
                            e.stopPropagation();
                            navigator.clipboard.writeText(req.fingerprint);
                            setSnackbar({ message: "Copied!", severity: "success" });
                          }}
                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
                        >
                          <ContentCopyIcon sx={{ fontSize: 14 }} />
                        </IconButton>
                      </Box>
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
                      {req.account_name}
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
                      <Chip
                        label={"path" in req.source ? "File" : "Email"}
                        size="small"
                        variant="outlined"
                        color={"path" in req.source ? "primary" : "secondary"}
                      />
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
                      <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
                        {formatDateRange((req as any).start_date, (req as any).end_date)}
                      </Typography>
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                        <Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
                          <Chip
                            icon={statusIcons[req.status] as any}
                            label={req.status.replace(/_/g, " ")}
                            color={statusColors[req.status]}
                            size="small"
                          />
                        </Tooltip>
                      </Box>
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
                      {(req.retry_count ?? 0) > 0 ? (
                        <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
                          {req.retry_count}/{RETRY_MAX}
                        </Typography>
                      ) : (
                        <Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.disabled" }}>
                          \u2014
                        </Typography>
                      )}
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5, whiteSpace: "nowrap", fontSize: "0.8rem" }}>
                      {formatDate(req.created_at)}
                    </Box>
                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
                        {req.status === "paused" && (
                          <Tooltip title="Resolve ambiguities">
                            <IconButton
                              size="small"
                              onClick={(e) => {
                                e.stopPropagation();
                                navigate(`/fetch-requests/${req.id}`);
                              }}
                            >
                              <WarningAmberIcon fontSize="small" color="warning" />
                            </IconButton>
                          </Tooltip>
                        )}
                        {req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
                          <Tooltip title="Retry">
                            <IconButton
                              size="small"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleRetry(req);
                              }}
                            >
                              <ReplayIcon fontSize="small" />
                            </IconButton>
                          </Tooltip>
                        )}
                        <Tooltip title="Delete">
                          <IconButton
                            size="small"
                            onClick={(e) => {
                              e.stopPropagation();
                              setDeleteTarget(req);
                            }}
                          >
                            <DeleteIcon fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      </Box>
                    </Box>
                  </Box>
                ))}
              </Box>
            </Box>
          </Box>
        </Paper>
      )}

      <Snackbar
        open={!!snackbar}
        autoHideDuration={4000}
        onClose={() => setSnackbar(null)}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
      >
        {snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
      </Snackbar>

      <Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
        <DialogTitle>Delete Fetch Request?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This will permanently delete the fetch request and all associated data.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
          <Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
            {deleteMutation.isPending ? "Deleting..." : "Delete"}
          </Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
}