khata-ui/src/ReportSnapshots.tsx

import * as React from "react";
import {
  Box,
  Container,
  Paper,
  Typography,
  TextField,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  CircularProgress,
  Alert,
  Snackbar,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Switch,
  FormControlLabel,
  Chip,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import RefreshIcon from "@mui/icons-material/Refresh";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import {
  useReportSnapshotsList,
  useCreateSnapshot,
  useDeleteSnapshot,
} from "./features/report-snapshots";
import type { ReportSnapshot } from "./features/report-snapshots";

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

export default function ReportSnapshots() {
  const [ignoreSelf, setIgnoreSelf] = React.useState(true);
  const [startDate, setStartDate] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [minAmount, setMinAmount] = React.useState("");
  const [maxAmount, setMaxAmount] = React.useState("");
  const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
  const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
  const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);

  const { data: listData, isLoading, isFetching, refetch } = useReportSnapshotsList();
  const createMutation = useCreateSnapshot();
  const deleteMutation = useDeleteSnapshot();

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

  const handleCreate = async () => {
    try {
      const result = await createMutation.mutateAsync({
        ignore_self: ignoreSelf || null,
        start_date: startDate ? new Date(startDate).toISOString() : null,
        end_date: endDate ? new Date(endDate).toISOString() : null,
        min_amount: minAmount ? parseFloat(minAmount) : null,
        max_amount: maxAmount ? parseFloat(maxAmount) : null,
      });
      const snapshotId = (result as any)?.snapshot_id;
      if (snapshotId) {
        setCreatedSnapshotId(snapshotId);
        setSnackbar({ message: `Snapshot created: ${snapshotId}`, severity: "success" });
      } else {
        setSnackbar({ message: "Snapshot created", severity: "success" });
      }
      resetForm();
    } catch (err: any) {
      setSnackbar({ message: err?.response?.data?.detail || "Failed to create snapshot", severity: "error" });
    }
  };

  const resetForm = () => {
    setIgnoreSelf(false);
    setStartDate("");
    setEndDate("");
    setMinAmount("");
    setMaxAmount("");
  };

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

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

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

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <FormControlLabel
            control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
            label="Ignore self-transfers"
          />

          <Box sx={{ display: "flex", gap: 2 }}>
            <TextField
              label="Start Date"
              type="datetime-local"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              size="small"
              InputLabelProps={{ shrink: true }}
              sx={{ flex: 1 }}
            />
            <TextField
              label="End Date"
              type="datetime-local"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
              size="small"
              InputLabelProps={{ shrink: true }}
              sx={{ flex: 1 }}
            />
          </Box>

          <Box sx={{ display: "flex", gap: 2 }}>
            <TextField
              label="Min Amount"
              type="number"
              value={minAmount}
              onChange={(e) => setMinAmount(e.target.value)}
              size="small"
              sx={{ flex: 1 }}
            />
            <TextField
              label="Max Amount"
              type="number"
              value={maxAmount}
              onChange={(e) => setMaxAmount(e.target.value)}
              size="small"
              sx={{ flex: 1 }}
            />
          </Box>

          <Button
            variant="contained"
            startIcon={<AddCircleIcon />}
            onClick={handleCreate}
            disabled={createMutation.isPending}
          >
            {createMutation.isPending ? "Generating..." : "Generate Snapshot"}
          </Button>

          {createdSnapshotId && (
            <Alert severity="success" onClose={() => setCreatedSnapshotId(null)}>
              Snapshot created: <strong>{createdSnapshotId}</strong>. Use it in the Dashboard snapshot selector.
            </Alert>
          )}
        </Box>
      </Paper>

      <Paper sx={{ borderRadius: 4 }} variant="outlined">
        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
          <Typography variant="subtitle1" fontWeight={600}>
            Existing Snapshots
          </Typography>
          <IconButton onClick={() => refetch()} disabled={isFetching}>
            <RefreshIcon />
          </IconButton>
        </Box>

        {isLoading ? (
          <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
            <CircularProgress />
          </Box>
        ) : snapshots.length === 0 ? (
          <Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
            No snapshots yet
          </Box>
        ) : (
          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Snapshot ID</TableCell>
                  <TableCell>Created</TableCell>
                  <TableCell>Query</TableCell>
                  <TableCell align="right">Actions</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {snapshots.map((snap: ReportSnapshot) => (
                  <TableRow key={snap.id}>
                    <TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                        {snap.snapshot_id}
                        <IconButton
                          size="small"
                          onClick={() => {
                            navigator.clipboard.writeText(snap.snapshot_id);
                            setSnackbar({ message: "Copied!", severity: "success" });
                          }}
                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
                        >
                          <ContentCopyIcon sx={{ fontSize: 14 }} />
                        </IconButton>
                      </Box>
                    </TableCell>
                    <TableCell>{formatDate(snap.created_at)}</TableCell>
                    <TableCell>
                      {snap.query ? (
                        <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
                          {snap.query.accounts && <Chip label={`${snap.query.accounts.length} account(s)`} size="small" variant="outlined" />}
                          {snap.query.ignore_self && <Chip label="ignore_self" size="small" variant="outlined" />}
                          {snap.query.start_date && <Chip label="start" size="small" variant="outlined" />}
                          {snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
                        </Box>
                      ) : (
                        <Typography variant="body2" color="text.secondary">—</Typography>
                      )}
                    </TableCell>
                    <TableCell align="right">
                      <IconButton size="small" onClick={() => setDeleteTarget(snap)}>
                        <DeleteIcon fontSize="small" />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </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 Snapshot?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This will permanently delete the report snapshot.
          </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>
  );
}