"use client";

import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";

import { DocumentLink } from "@/components/ui/document-link";
import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import { isDocumentPlaceholder } from "@/lib/document-file";

import type { ViewMeetingSummaryDetail } from "./view-meeting-summary-data";
import { RequiredSectionTitle } from "./view-meeting-summary-shared";

type Props = {
  reference: ViewMeetingSummaryDetail["summaryReference"];
};

function hasMeetingSummaryReference(
  reference: ViewMeetingSummaryDetail["summaryReference"],
) {
  return !isDocumentPlaceholder(reference.name);
}

export function ViewMeetingSummaryReferenceSection({ reference }: Props) {
  if (!hasMeetingSummaryReference(reference)) {
    return null;
  }

  const documentPath = reference.name;

  return (
    <Box>
      <RequiredSectionTitle>Summary Meeting Reference</RequiredSectionTitle>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 2.75,
          maxWidth: 375,
        }}
      >
        <Box
          sx={{
            position: "relative",
            flex: 1,
            minWidth: 276,
            height: 62,
            borderRadius: "6px",
            bgcolor: "var(--ms-surface, #fafafa)",
            border: "1px solid var(--ms-border, #e9eaeb)",
            display: "flex",
            alignItems: "center",
            px: 1.5,
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 1.5,
              flex: 1,
              minWidth: 0,
              pr: 10,
            }}
          >
            <DocumentLink
              file={{ path: documentPath }}
              sx={{
                display: "inline-flex",
                alignItems: "center",
                minWidth: 0,
                maxWidth: "100%",
              }}
            >
              <DocumentFileAttachment
                value={documentPath}
                fileSize={reference.size}
                iconSize={40}
                emptyLabel="-"
              />
            </DocumentLink>
          </Box>

          <Box
            sx={{
              position: "absolute",
              right: 16,
              top: "50%",
              transform: "translateY(-50%)",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 1,
              width: 80,
            }}
          >
            <Typography
              sx={{
                fontSize: 11,
                fontWeight: 500,
                color: "var(--ms-muted, #868686)",
              }}
            >
              {reference.uploadStatus}
            </Typography>
            <Box
              sx={{
                width: 80,
                height: 4,
                bgcolor: "var(--ms-surface-track, #ffffff)",
                borderRadius: "16px",
              }}
            >
              <LinearProgress
                variant="determinate"
                value={reference.uploadStatus === "Uploading" ? 35 : 100}
                sx={{
                  height: 4,
                  borderRadius: "16px",
                  bgcolor: "var(--ms-surface-track, #ffffff)",
                  "& .MuiLinearProgress-bar": {
                    borderRadius: "16px",
                    bgcolor: "#22c55e",
                  },
                }}
              />
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}