"use client";

import { useState } from "react";

import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
import CheckIcon from "@mui/icons-material/Check";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

import { AlertDialog } from "@/components/ui/alert-dialog";
import {
  meetingSummaryText,
  normalizeMeetingSummaryLanguage,
  type MeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";

type Props = {
  language?: MeetingSummaryLanguage;
  onBack: () => void;
  onReviewed?: () => void;
  reviewedDisabled?: boolean;
  // Whether to render the "Reviewed" button at all (e.g. only for a summary
  // that has been submitted and is awaiting PSWG review).
  showReviewed?: boolean;
};

export function ViewMeetingSummaryHeader({
  language = "en",
  onBack,
  onReviewed,
  reviewedDisabled = false,
  showReviewed = true,
}: Props) {
  const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
  const normalizedLanguage = normalizeMeetingSummaryLanguage(language);
  const text = meetingSummaryText[normalizedLanguage] ?? meetingSummaryText.en;

  function handleReviewConfirm() {
    onReviewed?.();
    setReviewDialogOpen(false);
  }

  return (
    <>
      <Box
        sx={{
          mb: 3,
          display: "flex",
          alignItems: "flex-start",
          justifyContent: "space-between",
          gap: 2,
          flexWrap: "wrap",
        }}
      >
        <Box sx={{ display: "flex", alignItems: "flex-start", gap: 3 }}>
          <Button
            onClick={onBack}
            startIcon={<ArrowBackIosNewOutlinedIcon sx={{ fontSize: 14 }} />}
            sx={{
              mt: 0.2,
              color: "var(--ms-muted)",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              px: 0,
              minWidth: "auto",
              "& .MuiButton-startIcon": { mr: 0.75 },
            }}
          >
            {text.viewPage.back}
          </Button>

          <Box>
            <Typography
              sx={{
                fontSize: 18,
                fontWeight: 500,
                color: "var(--ms-text)",
                letterSpacing: "-0.36px",
              }}
            >
              {text.viewPage.title}
            </Typography>
            <Typography sx={{ mt: 0.75, fontSize: 12, color: "var(--ms-muted)" }}>
              <Box component="span" sx={{ color: "var(--ms-muted)" }}>
                {text.viewPage.breadcrumbRoot}
              </Box>
              <Box component="span" sx={{ color: "var(--ms-subtle, #414651)" }}>
                {" "}
                / {text.viewPage.breadcrumbCurrent}
              </Box>
            </Typography>
          </Box>
        </Box>

        {showReviewed ? (
          <Button
            variant="contained"
            disabled={reviewedDisabled}
            onClick={() => setReviewDialogOpen(true)}
            startIcon={<CheckIcon sx={{ fontSize: 24 }} />}
            sx={{
              height: 44,
              minWidth: 119,
              px: "12px",
              py: "10px",
              borderRadius: "6px",
              bgcolor: "var(--ms-blue, #1a64a8)",
              boxShadow: "none",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              "& .MuiButton-startIcon": { mr: "10px", ml: 0 },
              "&:hover": {
                bgcolor: "var(--ms-blue-dark, #155489)",
                boxShadow: "none",
              },
            }}
          >
            {text.viewPage.reviewed}
          </Button>
        ) : null}
      </Box>

      <AlertDialog
        open={reviewDialogOpen}
        title={text.viewPage.reviewConfirmTitle}
        description={text.viewPage.reviewConfirmDescription}
        confirmLabel={text.viewPage.confirm}
        cancelLabel={text.viewPage.cancel}
        onConfirm={handleReviewConfirm}
        onCancel={() => setReviewDialogOpen(false)}
      />
    </>
  );
}