"use client";

import { useState, type ReactNode } from "react";

import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { SxProps, Theme } from "@mui/material/styles";

import { AlertDialog } from "@/components/ui/alert-dialog";
import { AppButton } from "@/components/ui/button";
import {
  saveDraftIcon as SaveDraftIcon,
  sharedWithPSWGIcon as SharedWithPSWGIcon,
} from "@/components/ui/icon";

const actionButtonSx: SxProps<Theme> = {
  height: 44,
  minHeight: 44,
  px: 1.5,
  bgcolor: "#1a64a8",
  color: "#ffffff",
  "& .MuiButton-startIcon": { m: 0, mr: 1 },
  "&:hover": { bgcolor: "#155489", boxShadow: "none" },
  "&.Mui-disabled": {
    bgcolor: "#bdbdbd",
    color: "#ffffff",
  },
};

export type WorkflowActionButtonsProps = {
  showShare?: boolean;
  showSubmit?: boolean;
  showSaveDraft?: boolean;
  canShare?: boolean;
  canSubmit?: boolean;
  canSaveDraft?: boolean;
  isUpdating?: boolean;
  shareLabel?: string;
  submitLabel?: string;
  shareDialogTitle?: string;
  shareDialogDescription?: ReactNode;
  submitDialogTitle?: string;
  submitDialogDescription?: ReactNode;
  onShare?: () => void | Promise<void>;
  onSubmit?: () => void | Promise<void>;
  onSaveDraft?: () => void | Promise<void>;
};

function getActionErrorMessage(error: unknown) {
  return error instanceof Error
    ? error.message
    : "Unable to complete this action.";
}

export function WorkflowActionButtons({
  showShare = true,
  showSubmit = true,
  showSaveDraft = true,
  canShare = false,
  canSubmit = false,
  canSaveDraft = false,
  isUpdating = false,
  shareLabel = "Share With PSWG",
  submitLabel = "Submit to CDC",
  shareDialogTitle = "Share with PSWG",
  shareDialogDescription = "Do you want to share this progress report with PSWG?",
  submitDialogTitle = "Submit to CDC",
  submitDialogDescription = "Are you sure you want to submit to CDC?",
  onShare,
  onSubmit,
  onSaveDraft,
}: WorkflowActionButtonsProps) {
  const [shareDialogOpen, setShareDialogOpen] = useState(false);
  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
  const [shareError, setShareError] = useState<string | null>(null);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [saveError, setSaveError] = useState<string | null>(null);

  async function handleShareConfirm() {
    if (!onShare) return;
    setShareError(null);

    try {
      await onShare();
      setShareDialogOpen(false);
    } catch (error) {
      setShareError(getActionErrorMessage(error));
    }
  }

  async function handleSubmitConfirm() {
    if (!onSubmit) return;
    setSubmitError(null);

    try {
      await onSubmit();
      setSubmitDialogOpen(false);
    } catch (error) {
      setSubmitError(getActionErrorMessage(error));
    }
  }

  async function handleSaveDraft() {
    if (!onSaveDraft) return;
    setSaveError(null);

    try {
      await onSaveDraft();
    } catch (error) {
      setSaveError(getActionErrorMessage(error));
    }
  }

  if (!showShare && !showSubmit && !showSaveDraft) {
    return null;
  }

  return (
    <>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1.125,
          flexWrap: "wrap",
        }}
      >
        {showShare ? (
          <AppButton
            startIcon={<SharedWithPSWGIcon sx={{ fontSize: 24 }} />}
            disabled={!canShare || isUpdating}
            onClick={() => {
              setShareError(null);
              setShareDialogOpen(true);
            }}
            sx={actionButtonSx}
          >
            {shareLabel}
          </AppButton>
        ) : null}

        {showSubmit ? (
          <AppButton
            startIcon={<CheckRoundedIcon sx={{ fontSize: 24 }} />}
            disabled={!canSubmit || isUpdating}
            onClick={() => {
              setSubmitError(null);
              setSubmitDialogOpen(true);
            }}
            sx={actionButtonSx}
          >
            {submitLabel}
          </AppButton>
        ) : null}

        {showSaveDraft ? (
          <Box
            component="button"
            type="button"
            disabled={!canSaveDraft || isUpdating}
            onClick={() => void handleSaveDraft()}
            aria-label="Save Draft"
            sx={{
              p: 0,
              m: 0,
              border: 0,
              bgcolor: "transparent",
              cursor: canSaveDraft && !isUpdating ? "pointer" : "not-allowed",
              opacity: canSaveDraft && !isUpdating ? 1 : 0.7,
              lineHeight: 0,
              display: "inline-flex",
              "&:hover": {
                bgcolor: "transparent",
              },
              "&:disabled": {
                cursor: "not-allowed",
              },
            }}
          >
            <SaveDraftIcon />
          </Box>
        ) : null}

        {saveError ? (
          <Typography sx={{ width: "100%", color: "#d92d20", fontSize: 12 }}>
            {saveError}
          </Typography>
        ) : null}
      </Box>

      {showShare ? (
        <AlertDialog
          open={shareDialogOpen}
          title={shareDialogTitle}
          description={
            <Box>
              <Box>{shareDialogDescription}</Box>
              {shareError ? (
                <Box sx={{ mt: 1, color: "#d92d20" }}>{shareError}</Box>
              ) : null}
            </Box>
          }
          confirmLabel="Confirm"
          cancelLabel="Cancel"
          loading={isUpdating}
          onConfirm={() => void handleShareConfirm()}
          onCancel={() => setShareDialogOpen(false)}
        />
      ) : null}

      {showSubmit ? (
        <AlertDialog
          open={submitDialogOpen}
          title={submitDialogTitle}
          description={
            <Box>
              <Box>{submitDialogDescription}</Box>
              {submitError ? (
                <Box sx={{ mt: 1, color: "#d92d20" }}>{submitError}</Box>
              ) : null}
            </Box>
          }
          confirmLabel="Confirm"
          cancelLabel="Cancel"
          loading={isUpdating}
          onConfirm={() => void handleSubmitConfirm()}
          onCancel={() => setSubmitDialogOpen(false)}
        />
      ) : null}
    </>
  );
}