"use client";

import { useRouter } from "next/navigation";

import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { ExportButton } from "@/components/ui/export-button";
import type { ExportFormat } from "@/components/ui/export-format-menu";
import { PlusThinIcon } from "@/features/ministry/dashboard/components/dashboard-icons";

type CdcGpsfDashboardActionsProps = {
  // Runs when the user picks CSV / XLSX / Image from the Export menu.
  onExport?: (format: ExportFormat) => void;
};

export function CdcGpsfDashboardActions({
  onExport,
}: CdcGpsfDashboardActionsProps) {
  const theme = useTheme();
  const router = useRouter();

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: { xs: "flex-start", md: "flex-end" },
        gap: 0.75,
      }}
    >
      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
        <ExportButton compact showMenu onExport={onExport}>
          Export
        </ExportButton>

        <ButtonBase
          onClick={() => router.push("/cdc-gpsf/progress-reports")}
          disableRipple
          sx={{
            minWidth: 107,
            height: 40,
            px: 1.5,
            borderRadius: "6px",
            border: "1px solid #1D69B4",
            bgcolor: "#1D69B4",
            color: "#ffffff",
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 0.625,
            boxShadow: "none",
            transition: "background-color 0.2s ease",
            "&:hover": {
              bgcolor: "#1D59B1",
            },
          }}
        >
          <PlusThinIcon sx={{ fontSize: 18 }} />
          <Typography
            sx={{
              color: "inherit",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1,
              whiteSpace: "nowrap",
            }}
          >
            New
          </Typography>
        </ButtonBase>
      </Box>

      <Typography sx={{ fontSize: 11, color: theme.palette.text.secondary }}>
        <b>Last updated:</b> 14 September 2025, 23:00
      </Typography>
    </Box>
  );
}