"use client";

// Page header: title + breadcrumb on the left, Export and New Report
// buttons on the right. Both buttons are visual placeholders for now.

import AddIcon from "@mui/icons-material/Add";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

import { ExportButton } from "@/components/ui/export-button";

import type { ProgressReportView } from "../progress-report-data";
import type { ProgressReportLabels } from "../progress-report-i18n";

type ProgressReportHeaderProps = {
  labels: ProgressReportLabels;
  view: ProgressReportView;
  onNewReport: () => void;
};

export function ProgressReportHeader({
  labels,
  view,
  onNewReport,
}: ProgressReportHeaderProps) {
  // The page title follows the active view ("Progress Report" or "Calendar").
  const title = view === "calendar" ? labels.calendarTitle : labels.pageTitle;
  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: 2,
      }}
    >
      {/* Title + breadcrumb */}
      <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
        <Typography
          component="h1"
          sx={{
            color: "var(--mr-text)",
            fontSize: 32,
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.64px",
          }}
        >
          {title}
        </Typography>

        <Typography sx={{ fontSize: 12, fontWeight: 500, lineHeight: 1 }}>
          <Box component="span" sx={{ color: "var(--mr-muted)" }}>
            {labels.breadcrumbParent} /{" "}
          </Box>
          <Box component="span" sx={{ color: "var(--mr-text)" }}>
            {labels.breadcrumbCurrent}
          </Box>
        </Typography>
      </Box>

      {/* Action buttons */}
      <Box sx={{ display: "flex", alignItems: "center", gap: "22px" }}>
        <ExportButton compact>{labels.exportButton}</ExportButton>

        <Button
          type="button"
          variant="contained"
          startIcon={<AddIcon sx={{ fontSize: 18 }} />}
          onClick={onNewReport}
          sx={{
            height: 40,
            px: "12px",
            bgcolor: "#1a64a8",
            color: "#edf8fd",
            fontSize: 13,
            fontWeight: 500,
            lineHeight: 1,
            borderRadius: "6px",
            boxShadow: "none",
            textTransform: "none",
            whiteSpace: "nowrap",
            "&:hover": {
              bgcolor: "#15548e",
              boxShadow: "none",
            },
          }}
        >
          {labels.newReportButton}
        </Button>
      </Box>
    </Box>
  );
}