"use client";

import { useState } from "react";

import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
import IosShareOutlinedIcon from "@mui/icons-material/IosShareOutlined";
import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
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;
  onSubmitToCdc?: () => void;
  onSaveDraft?: () => void;
  mode?: "create" | "edit";
  showSubmitToCdc?: boolean;
  showSaveDraft?: boolean;
  submitDisabled?: boolean;
  saveDraftDisabled?: boolean;
  saveDraftLabel?: string;
  isSubmitting?: boolean;
  isSavingDraft?: boolean;
  shared?: boolean;
  onShareConfirm?: () => Promise<void>;
  isSharing?: boolean;
};

export function CreateMeetingSummaryHeader({
  onBack,
  onSubmitToCdc,
  onSaveDraft,
  mode = "create",
  showSubmitToCdc = true,
  showSaveDraft = true,
  submitDisabled = true,
  saveDraftDisabled = true,
  saveDraftLabel = "Save Draft",
  isSubmitting = false,
  isSavingDraft = false,
  shared = false,
  onShareConfirm,
  isSharing = false,
}: Props) {
  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
  const [shareDialogOpen, setShareDialogOpen] = useState(false);
  const pageTitle =
    mode === "edit" ? "Edit Meeting Summary" : "Add Meeting Summary";

  function handleSubmitConfirm() {
    onSubmitToCdc?.();
    setSubmitDialogOpen(false);
  }

  async function handleShareConfirm() {
    await 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",
            }}
          >
            {pageTitle}
          </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)" }}>
              {" "}
              / {pageTitle}
            </Box>
          </Typography>
        </Box>
      </Box>

      <Box sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
        {onShareConfirm ? (
          <Button
            variant="contained"
            disabled={shared || isSharing || isSubmitting || isSavingDraft}
            onClick={() => setShareDialogOpen(true)}
            startIcon={<IosShareOutlinedIcon sx={{ fontSize: 20 }} />}
            sx={{
              minHeight: 40,
              px: 1.5,
              borderRadius: "6px",
              bgcolor: "#1a64a8",
              color: "#ffffff",
              boxShadow: "none",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              "&:hover": {
                bgcolor: "#155489",
                boxShadow: "none",
              },
              "&.Mui-disabled": {
                bgcolor: "#bdbdbd",
                color: "#ffffff",
              },
            }}
          >
            {shared
              ? "Already Shared"
              : isSharing
                ? "Sharing..."
                : "Share With PSWG"}
          </Button>
        ) : null}

        {showSubmitToCdc ? (
          <Button
            variant="contained"
            disabled={submitDisabled || isSubmitting || isSavingDraft}
            onClick={() => setSubmitDialogOpen(true)}
            startIcon={<CheckRoundedIcon sx={{ fontSize: 24 }} />}
            sx={{
              minHeight: 40,
              px: 1.5,
              py: 1.25,
              gap: 1.25,
              borderRadius: "6px",
              bgcolor: "#1a64a8",
              color: "#ffffff",
              boxShadow: "none",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1,
              "& .MuiButton-startIcon": { m: 0 },
              "&:hover": { bgcolor: "#155489", boxShadow: "none" },
              "&.Mui-disabled": {
                bgcolor: "#bdbdbd",
                color: "#ffffff",
              },
            }}
          >
            {isSubmitting ? "Submitting..." : "Submit to CDC"}
          </Button>
        ) : null}

        {showSaveDraft ? (
          <Button
            variant="contained"
            disabled={saveDraftDisabled || isSubmitting || isSavingDraft}
            onClick={onSaveDraft}
            startIcon={<ReplayRoundedIcon sx={{ fontSize: 24 }} />}
            sx={{
              minHeight: 40,
              px: 1.5,
              py: 1.25,
              gap: 1.25,
              borderRadius: "6px",
              bgcolor: "#bdbdbd",
              color: "#ffffff",
              boxShadow: "none",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1,
              "& .MuiButton-startIcon": { m: 0 },
              "&:hover": { bgcolor: "#a8a8a8", boxShadow: "none" },
              "&.Mui-disabled": {
                bgcolor: "#bdbdbd",
                color: "#ffffff",
                opacity: 0.6,
              },
            }}
          >
            {isSavingDraft ? "Saving..." : saveDraftLabel}
          </Button>
        ) : null}
      </Box>
    </Box>

      {showSubmitToCdc ? (
        <AlertDialog
          open={submitDialogOpen}
          title="Submit to CDC"
          description="Are you sure you want to submit to CDC?"
          confirmLabel="Confirm"
          cancelLabel="Cancel"
          loading={isSubmitting}
          onConfirm={handleSubmitConfirm}
          onCancel={() => setSubmitDialogOpen(false)}
        />
      ) : null}

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