"use client";

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

import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
import RateReviewOutlinedIcon from "@mui/icons-material/RateReviewOutlined";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { AlertDialog } from "@/components/ui/alert-dialog";
import { DocumentLink } from "@/components/ui/document-link";
import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import {
  AccountCircleIcon,
  HyperlinkIcon,
  SubmitDateIcon,
} from "@/components/ui/icon";
import { formatDate } from "@/lib/date-utils";
import { isDocumentPlaceholder } from "@/lib/document-file";

import type { MeetingRequest } from "../../meeting-request-data";
import { MeetingRequestDetailTable } from "./meeting-request-detail-table";

type DetailMeetingRequest = MeetingRequest & {
  privateSectorWG?: string;
  submittedBy?: string;
  coChairRequestedBy?: string;
  description?: string;
};

type Props = {
  row: MeetingRequest;
  onBack: () => void;
  onCreateMeeting?: (row: MeetingRequest) => void;
  onStartReview?: (row: MeetingRequest) => void;
  startReviewLoading?: boolean;
};

export function MeetingRequestDetail({
  row,
  onBack,
  onCreateMeeting,
  onStartReview,
  startReviewLoading = false,
}: Props) {
  const detailRow = row as DetailMeetingRequest;

  return (
    <Box sx={{ width: "100%", minWidth: 0, color: "var(--mr-text)" }}>
      <MeetingRequestDetailHeader
        row={row}
        onBack={onBack}
        onCreateMeeting={onCreateMeeting}
        onStartReview={onStartReview}
        startReviewLoading={startReviewLoading}
      />

      <Typography
        className="font-kh"
        sx={{
          mb: 3,
          pb: 2.5,
          borderBottom: "1px solid var(--mr-border)",
          fontSize: { xs: 20, md: 24 },
          fontWeight: 600,
          color: "var(--mr-text)",
          lineHeight: 1.7,
        }}
      >
        {detailRow.title}
      </Typography>

      <SubmitDetailsSection detailRow={detailRow} />

      <DescriptionSection description={detailRow.description ?? "-"} />

      <Box>
        <Typography
          sx={{
            mb: 2,
            fontSize: 16,
            fontWeight: 600,
            color: "var(--mr-text)",
          }}
        >
          List of Issues
        </Typography>

        <MeetingRequestDetailTable meetingRequest={detailRow} />
      </Box>
    </Box>
  );
}

function MeetingRequestDetailHeader({
  row,
  onBack,
  onCreateMeeting,
  onStartReview,
  startReviewLoading = false,
}: {
  row: MeetingRequest;
  onBack: () => void;
  onCreateMeeting?: (row: MeetingRequest) => void;
  onStartReview?: (row: MeetingRequest) => void;
  startReviewLoading?: boolean;
}) {
  const [startReviewDialogOpen, setStartReviewDialogOpen] = useState(false);
  const showStartReview = row.status === "Submitted";
  const canCreateMeeting = row.canCreateMeeting;

  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: 4 }}>
          <Button
            onClick={onBack}
            startIcon={<ArrowBackIosNewOutlinedIcon sx={{ fontSize: 14 }} />}
            sx={{
              mt: 0.2,
              color: "var(--mr-muted)",
              textTransform: "none",
              fontSize: 13,
              fontWeight: 500,
              px: 0,
              minWidth: "auto",
              "& .MuiButton-startIcon": {
                mr: 0.75,
              },
            }}
          >
            Back
          </Button>

          <Box>
            <Typography
              sx={{ fontSize: 18, fontWeight: 600, color: "var(--mr-text)" }}
            >
              Meeting Request Details
            </Typography>

            <Typography
              sx={{
                mt: 0.6,
                fontSize: 12,
                color: "var(--mr-muted)",
                fontWeight: 400,
              }}
            >
              All Meetings / Meeting Detail
            </Typography>
          </Box>
        </Box>

        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1.5,
            flexWrap: "wrap",
          }}
        >
          {showStartReview ? (
            <Button
              variant="contained"
              disabled={startReviewLoading}
              onClick={() => setStartReviewDialogOpen(true)}
              startIcon={<RateReviewOutlinedIcon sx={{ fontSize: 20 }} />}
              sx={{
                height: 40,
                minWidth: { xs: "100%", sm: 158 },
                borderRadius: "6px",
                bgcolor: "var(--mr-blue)",
                color: "#fff",
                textTransform: "none",
                fontSize: 13,
                fontWeight: 500,
                px: 2,
                whiteSpace: "nowrap",
                boxShadow: "none",
                "& .MuiButton-startIcon": {
                  mr: "12px",
                },
                "&:hover": {
                  bgcolor: "var(--mr-blue)",
                  boxShadow: "none",
                },
              }}
            >
              Start Review
            </Button>
          ) : null}

          {canCreateMeeting ? (
            <Button
              variant="contained"
              startIcon={<AddBoxOutlinedIcon sx={{ fontSize: 20 }} />}
              onClick={() => onCreateMeeting?.(row)}
              sx={{
                width: { xs: "100%", sm: 158 },
                height: 40,
                borderRadius: "6px",
                bgcolor: "var(--mr-blue)",
                color: "#fff",
                textTransform: "none",
                fontSize: 13,
                fontWeight: 500,
                px: 2,
                whiteSpace: "nowrap",
                boxShadow: "none",
                "& .MuiButton-startIcon": {
                  mr: "12px",
                },
                "&:hover": {
                  bgcolor: "var(--mr-blue)",
                  boxShadow: "none",
                },
              }}
            >
              Create Meeting
            </Button>
          ) : null}
        </Box>
      </Box>

      <AlertDialog
        open={startReviewDialogOpen}
        title="Start Review"
        description="Do you want to start reviewing this meeting request?"
        confirmLabel="Confirm"
        cancelLabel="Cancel"
        onConfirm={() => {
          onStartReview?.(row);
          setStartReviewDialogOpen(false);
        }}
        onCancel={() => setStartReviewDialogOpen(false)}
      />
    </>
  );
}

function MeetingRequestDocument({
  documentName,
  meetingRequestLetter,
}: {
  documentName: string;
  meetingRequestLetter?: string | null;
}) {
  const path = meetingRequestLetter?.trim() || documentName;

  if (isDocumentPlaceholder(path) || !path) {
    return (
      <Typography sx={{ fontSize: 13, fontWeight: 500, color: "var(--mr-text)" }}>
        -
      </Typography>
    );
  }

  return (
    <DocumentLink
      file={{ path }}
      sx={{
        display: "inline-flex",
        alignItems: "center",
        minWidth: 0,
        maxWidth: "100%",
      }}
    >
      <DocumentFileAttachment value={path} emptyLabel="-" iconSize={20} />
    </DocumentLink>
  );
}

function SubmitDetailsSection({
  detailRow,
}: {
  detailRow: DetailMeetingRequest;
}) {
  const { language } = useAppLanguage();

  return (
    <Box sx={{ mb: 3 }}>
      <Typography
        sx={{
          mb: 2,
          fontSize: 16,
          fontWeight: 600,
          color: "var(--mr-text)",
        }}
      >
        Submit Details
      </Typography>

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
          columnGap: 8,
          rowGap: 2,
          pb: 3,
          borderBottom: "1px solid var(--mr-border)",
        }}
      >
        <DetailItem
          icon={<AccountCircleIcon />}
          label="Private Sector WG"
          value={detailRow.privateSectorWG ?? "-"}
        />

        <DetailItem
          icon={<SubmitDateIcon />}
          label="Submitted Date"
          value={formatDate(detailRow.requestedDate, language)}
        />

        <DetailItem
          icon={<HyperlinkIcon />}
          label="Meeting Request"
          value={
            <MeetingRequestDocument
              documentName={detailRow.documentName}
              meetingRequestLetter={detailRow.meetingRequestLetter}
            />
          }
        />

        <DetailItem
          icon={<AccountCircleIcon />}
          label="Submitted By"
          value={detailRow.submittedBy ?? detailRow.requestedBy}
        />

        <DetailItem
          icon={<AccountCircleIcon />}
          label="Co-chair requested by"
          value={detailRow.coChairRequestedBy ?? "-"}
        />
      </Box>
    </Box>
  );
}

function DescriptionSection({ description }: { description: string }) {
  return (
    <Box sx={{ mb: 4 }}>
      <Typography
        sx={{
          mb: 1.5,
          fontSize: 16,
          fontWeight: 600,
          color: "var(--mr-text)",
        }}
      >
        Descriptions
      </Typography>

      <Typography
        className="font-kh"
        sx={{
          fontSize: 13,
          lineHeight: "22px",
          color: "var(--mr-text)",
          fontWeight: 400,
          textAlign: "justify",
        }}
      >
        {description}
      </Typography>
    </Box>
  );
}

function DetailItem({
  icon,
  label,
  value,
}: {
  icon: ReactNode;
  label: string;
  value: ReactNode;
}) {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "24px 1fr", sm: "24px 170px 1fr" },
        alignItems: "start",
        gap: 1,
      }}
    >
      <Typography
        component="span"
        sx={{
          color: "var(--mr-muted)",
          display: "flex",
          alignItems: "center",
          lineHeight: 1.6,
        }}
      >
        {icon}
      </Typography>

      <Typography
        sx={{
          fontSize: 13,
          color: "var(--mr-muted)",
          fontWeight: 400,
        }}
      >
        {label} :
      </Typography>

      <Box sx={{ minWidth: 0 }}>
        {typeof value === "string" ? (
          <Typography
            sx={{
              fontSize: 13,
              color: "var(--mr-text)",
              fontWeight: 500,
            }}
          >
            {value}
          </Typography>
        ) : (
          value
        )}
      </Box>
    </Box>
  );
}