"use client";

import { useState } from "react";

import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
import IosShareOutlinedIcon from "@mui/icons-material/IosShareOutlined";
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";

type Props = {
  onBack: () => void;
  shared?: boolean;
  onShareConfirm?: () => void;
};

export function ViewMeetingSummaryHeader({
  onBack,
  shared = false,
  onShareConfirm,
}: Props) {
  const [shareDialogOpen, setShareDialogOpen] = useState(false);

  function handleShareConfirm() {
    onShareConfirm?.();
    setShareDialogOpen(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 },
            }}
          >
            Back
          </Button>

          <Box>
            <Typography
              sx={{
                fontSize: 18,
                fontWeight: 500,
                color: "var(--ms-text)",
                letterSpacing: "-0.36px",
              }}
            >
              View Meeting Summary
            </Typography>
            <Typography
              sx={{ mt: 0.75, fontSize: 12, color: "var(--ms-muted)" }}
            >
              <Box component="span" sx={{ color: "var(--ms-muted)" }}>
                All Meeting Summary
              </Box>
              <Box component="span" sx={{ color: "var(--ms-subtle, #414651)" }}>
                {" "}
                / View Meeting Summary
              </Box>
            </Typography>
          </Box>
        </Box>

        <Button
          variant="contained"
          disabled={shared}
          onClick={() => setShareDialogOpen(true)}
          startIcon={<IosShareOutlinedIcon sx={{ fontSize: 20 }} />}
          sx={{
            height: 40,
            minWidth: 204,
            borderRadius: "6px",
            bgcolor: "var(--ms-blue, #1a64a8)",
            boxShadow: "none",
            textTransform: "none",
            fontSize: 13,
            fontWeight: 500,
            "&:hover": {
              bgcolor: "var(--ms-blue-dark, #155489)",
              boxShadow: "none",
            },
            "&.Mui-disabled": {
              bgcolor: "#bdbdbd",
              color: "#ffffff",
            },
          }}
        >
          {shared ? "Already Shared" : "Share With PSWG"}
        </Button>
      </Box>

      {!shared ? (
        <AlertDialog
          open={shareDialogOpen}
          title="Share with PSWG"
          description="Do you want to share with PSWG?"
          confirmLabel="Confirm"
          cancelLabel="Cancel"
          onConfirm={handleShareConfirm}
          onCancel={() => setShareDialogOpen(false)}
        />
      ) : null}
    </>
  );
}