"use client";

import type { ReactNode } from "react";

import Image from "next/image";

import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { WorkflowActionButtons } from "@/components/ui/workflow-action-buttons";

type ProgressReportDetailHeaderProps = {
  title: string;
  ministryName: string;
  ministryLogo: string | null;
  canShare?: boolean;
  canSubmit?: boolean;
  canSaveDraft?: boolean;
  isUpdating?: boolean;
  readOnly?: boolean;
  actionSlot?: ReactNode;
  onBack: () => void;
  onShare?: () => Promise<void>;
  onSubmit?: () => Promise<void>;
  onSaveDraft?: () => Promise<void>;
};

export function ProgressReportDetailHeader({
  title,
  ministryName,
  ministryLogo,
  canShare = false,
  canSubmit = false,
  canSaveDraft = false,
  isUpdating = false,
  readOnly = false,
  actionSlot,
  onBack,
  onShare,
  onSubmit,
  onSaveDraft,
}: ProgressReportDetailHeaderProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "flex-start", lg: "center" },
        justifyContent: "space-between",
        gap: 2,
        flexWrap: "wrap",
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "flex-start",
          gap: { xs: 1.5, sm: 2 },
          minWidth: 0,
        }}
      >
        <Button
          onClick={onBack}
          startIcon={<ArrowBackIosNewOutlinedIcon sx={{ fontSize: 14 }} />}
          sx={{
            mt: 0.25,
            color: theme.palette.text.secondary,
            textTransform: "none",
            fontSize: 13,
            fontWeight: 500,
            px: 1.25,
            minWidth: 0,
            borderRadius: "100px",
            "& .MuiButton-startIcon": { mr: 0.75 },
          }}
        >
          Back
        </Button>

        <Box sx={{ minWidth: 0 }}>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 1.5,
              minWidth: 0,
            }}
          >
            {ministryLogo ? (
              <Image
                src={ministryLogo}
                alt={ministryName}
                width={28}
                height={28}
                unoptimized
                style={{
                  width: 28,
                  height: 28,
                  borderRadius: "50%",
                  objectFit: "contain",
                  flexShrink: 0,
                }}
              />
            ) : (
              <Box
                aria-hidden="true"
                sx={{
                  width: 28,
                  height: 28,
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0,
                  bgcolor: theme.palette.primary.main,
                  color: theme.palette.primary.contrastText,
                  fontSize: 13,
                  fontWeight: 700,
                }}
              >
                {ministryName.trim().charAt(0).toUpperCase() || "M"}
              </Box>
            )}

            <Typography
              sx={{
                fontSize: { xs: 17, md: 20 },
                fontWeight: 600,
                color: theme.palette.text.primary,
                lineHeight: 1.2,
                letterSpacing: "-0.4px",
              }}
            >
              {ministryName}
            </Typography>
          </Box>

          <Typography
            sx={{
              mt: 0.75,
              pl: "40px",
              fontSize: 12,
              fontWeight: 400,
              color: theme.palette.text.secondary,
              lineHeight: 1.25,
            }}
          >
            Progress Reports / {title} / {ministryName}
          </Typography>
        </Box>
      </Box>

      {actionSlot}

      {!readOnly ? (
        <WorkflowActionButtons
          canShare={canShare}
          canSubmit={canSubmit}
          canSaveDraft={canSaveDraft}
          isUpdating={isUpdating}
          onShare={onShare}
          onSubmit={onSubmit}
          onSaveDraft={onSaveDraft}
        />
      ) : null}
    </Box>
  );
}