"use client";

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

import { ExportButton } from "@/components/ui/export-button";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import {
  meetingSummaryText,
  normalizeMeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";

const khmerFont =
  '"Kantumruy Pro", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif';

type Props = {
  // When true, an "Export as XLSX" button is shown on the right side.
  showExportButton?: boolean;
  // Called when the user clicks the export button.
  onExport?: () => void;
  // While true, the export button shows a loading label and is disabled.
  exporting?: boolean;
};

export function MeetingSummaryHeader({
  showExportButton = false,
  onExport,
  exporting = false,
}: Props) {
  const theme = useTheme();
  const { language } = useAppLanguage();

  const meetingSummaryLanguage = normalizeMeetingSummaryLanguage(language);
  const text = meetingSummaryText[meetingSummaryLanguage];

  const isDark = theme.palette.mode === "dark";

  const fontFamily =
    meetingSummaryLanguage === "kh" ? khmerFont : theme.typography.fontFamily;

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "flex-start", md: "flex-end" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 3 },
        flexWrap: "wrap",
        minHeight: { xs: "auto", md: 32 },
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          minHeight: { xs: "auto", md: 32 },
          py: { xs: 0, md: 0.5 },
        }}
      >
        <Typography
          sx={{
            color: theme.palette.text.primary,
            fontSize: { xs: 28, md: 32 },
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.02em",
            fontFamily,
          }}
        >
          {text.pageTitle}
        </Typography>

        <Typography
          sx={{
            mt: 1.8,
            color: isDark ? "#9ca3af" : "#6b7280",
            fontSize: 14,
            fontWeight: 500,
            lineHeight: 1,
            fontFamily,
          }}
        >
          {text.pageSubtitle}
        </Typography>
      </Box>

      {showExportButton ? (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            flexShrink: 0,
            ml: "auto",
          }}
        >
          <ExportButton
            onClick={onExport}
            loading={exporting}
            loadingLabel={text.exporting}
            sx={{ fontFamily }}
          >
            {text.exportAsXlsx}
          </ExportButton>
        </Box>
      ) : null}
    </Box>
  );
}