jobtrackingapp/job-tracker-ui/src/components/Attachments.tsx

import React, { useCallback, useEffect, useMemo, useState } from "react";

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";

import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
import DownloadIcon from "@mui/icons-material/Download";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";

import { api } from "../api";
import { useToast } from "../toast";
import { useDialogActions } from "../dialogs";

interface AttachmentItem {
  id: number;
  fileName: string;
  uploadDate: string;
  fileType: string;
  fileSize: number;
}

function fmtSize(n: number) {
  if (!n) return "";
  const kb = n / 1024;
  if (kb < 1024) return `${kb.toFixed(0)} KB`;
  return `${(kb / 1024).toFixed(1)} MB`;
}

function isImageType(t: string) {
  return (t || "").toLowerCase().startsWith("image/");
}

function isPdfType(t: string) {
  return (t || "").toLowerCase() === "application/pdf";
}

function guessKind(fileName: string): string {
  const n = (fileName || "").toLowerCase();
  if (n.includes("cover")) return "Cover letter";
  if (n.includes("resume") || n.includes("résumé") || n.includes(" cv") || n.endsWith("cv.pdf")) return "Resume";
  if (n.includes("portfolio")) return "Portfolio";
  return "Attachment";
}

export default function Attachments({ jobId }: { jobId: number }) {
  const { toast } = useToast();
  const { confirmAction, promptForValue } = useDialogActions();
  const [items, setItems] = useState<AttachmentItem[]>([]);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [preview, setPreview] = useState<{ url: string; type: string; name: string } | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await api.get<AttachmentItem[]>(`/attachments/${jobId}`);
      setItems(res.data);
    } catch {
      // non-fatal
    }
  }, [jobId]);

  useEffect(() => {
    void load();
  }, [load]);

  useEffect(() => {
    return () => {
      if (preview?.url) URL.revokeObjectURL(preview.url);
    };
  }, [preview?.url]);

  const rename = async (a: AttachmentItem) => {
    const next = await promptForValue("Rename attachment to:", a.fileName, { title: "Rename attachment", confirmLabel: "Rename" });
    if (!next || next.trim() === a.fileName) return;
    try {
      await api.patch(`/attachments/${a.id}`, { fileName: next.trim() });
      toast("Renamed.", "success");
      await load();
    } catch {
      toast("Rename failed.", "error");
    }
  };

  const remove = async (a: AttachmentItem) => {
    if (!(await confirmAction(`Delete attachment "${a.fileName}"?`, { title: "Delete attachment", confirmLabel: "Delete", destructive: true }))) return;
    try {
      await api.delete(`/attachments/${a.id}`);
      toast("Deleted attachment.", "success");
      await load();
    } catch {
      toast("Delete failed.", "error");
    }
  };

  const upload = async (e: any) => {
    if (!e.target.files) return;

    const data = new FormData();
    const files = Array.from(e.target.files) as File[];
    files.forEach((f) => data.append("files", f));
    data.append("jobId", jobId.toString());

    try {
      await api.post("/attachments", data, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      toast("Files uploaded.", "success");
      await load();
    } catch {
      toast("Upload failed.", "error");
    }
  };

  const getBlobUrl = async (id: number) => {
    const res = await api.get(`/attachments/download/${id}`, { responseType: "blob" });
    const blob: Blob = res.data;
    return URL.createObjectURL(blob);
  };

  const download = async (a: AttachmentItem) => {
    try {
      const url = await getBlobUrl(a.id);
      const link = document.createElement("a");
      link.href = url;
      link.download = a.fileName || `attachment_${a.id}`;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.setTimeout(() => URL.revokeObjectURL(url), 5000);
    } catch {
      toast("Download failed.", "error");
    }
  };

  const openPreview = async (a: AttachmentItem) => {
    try {
      if (preview?.url) URL.revokeObjectURL(preview.url);
      const url = await getBlobUrl(a.id);
      setPreview({ url, type: a.fileType || "", name: a.fileName });
      setPreviewOpen(true);
    } catch {
      toast("Preview failed.", "error");
    }
  };

  const count = useMemo(() => items.length, [items.length]);

  return (
    <Box>
      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 1 }}>
        <Typography sx={{ fontWeight: 800 }}>Attachments ({count})</Typography>
        <Button component="label" size="small" variant="outlined">
          Upload
          <input type="file" multiple hidden onChange={upload} />
        </Button>
      </Box>

      <TableContainer sx={{ borderRadius: 2, border: "1px solid", borderColor: "divider" }}>
        <Table size="small">
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell sx={{ width: 140 }}>Kind</TableCell>
              <TableCell sx={{ width: 120 }}>Type</TableCell>
              <TableCell sx={{ width: 90 }}>Size</TableCell>
              <TableCell sx={{ width: 170 }}>Uploaded</TableCell>
              <TableCell sx={{ width: 170 }}>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map((a) => {
              const canPreview = isImageType(a.fileType) || isPdfType(a.fileType);
              const kind = guessKind(a.fileName);
              return (
                <TableRow key={a.id} hover>
                  <TableCell>
                    <Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800 }}>
                      {a.fileName}
                    </Button>
                  </TableCell>
                  <TableCell>{kind}</TableCell>
                  <TableCell sx={{ color: "text.secondary" }}>{a.fileType ? a.fileType.replace("application/", "") : ""}</TableCell>
                  <TableCell sx={{ color: "text.secondary" }}>{a.fileSize ? fmtSize(a.fileSize) : ""}</TableCell>
                  <TableCell sx={{ color: "text.secondary" }}>{a.uploadDate ? new Date(a.uploadDate).toLocaleString() : ""}</TableCell>
                  <TableCell>
                    <Box sx={{ display: "flex", gap: 0.5, flex: "0 0 auto" }}>
                      {canPreview ? (
                        <IconButton size="small" onClick={() => void openPreview(a)} title="Preview">
                          <VisibilityOutlinedIcon fontSize="small" />
                        </IconButton>
                      ) : null}
                      <IconButton size="small" onClick={() => void download(a)} title="Download">
                        <DownloadIcon fontSize="small" />
                      </IconButton>
                      <IconButton size="small" onClick={() => void rename(a)} title="Rename">
                        <DriveFileRenameOutlineIcon fontSize="small" />
                      </IconButton>
                      <IconButton size="small" onClick={() => void remove(a)} title="Delete">
                        <DeleteOutlineIcon fontSize="small" />
                      </IconButton>
                    </Box>
                  </TableCell>
                </TableRow>
              );
            })}

            {items.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6}>
                  <Typography sx={{ color: "text.secondary" }}>No attachments yet.</Typography>
                </TableCell>
              </TableRow>
            ) : null}
          </TableBody>
        </Table>
      </TableContainer>

      <Dialog open={previewOpen} onClose={() => setPreviewOpen(false)} fullWidth maxWidth="md">
        <DialogTitle>Preview{preview?.name ? `: ${preview.name}` : ""}</DialogTitle>
        <DialogContent>
          {!preview ? null : isImageType(preview.type) ? (
            <img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", borderRadius: 12 }} />
          ) : isPdfType(preview.type) ? (
            <iframe title="pdf" src={preview.url} style={{ width: "100%", height: 560, border: 0, borderRadius: 12 }} />
          ) : (
            <Typography sx={{ color: "text.secondary" }}>No inline preview for this file type.</Typography>
          )}
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setPreviewOpen(false);
            }}
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}