"use client";

import {
  useMemo,
  useState,
} from "react";

import {
  usePathname,
  useRouter,
} from "next/navigation";

import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Snackbar from "@mui/material/Snackbar";

import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";

import {
  useAppLanguage,
} from "@/components/providers/app-language-provider";

import {
  evaluationFormText,
  getEvaluationFormFontClass,
  normalizeEvaluationFormLanguage,
} from "../evaluation-form-i18n";

import {
  useEvaluationForm,
  useUpdateEvaluationForm,
} from "../hook/use-evaluation-form";

import type {
  AdminEvaluationRow,
  EvaluationFormData,
  EvaluationSummary,
  UpdateEvaluationFormPayload,
} from "../types/evaluation-form.types";

import {
  EvaluationSubmissionsTable,
} from "./evaluation-submissions-table";

import {
  EvaluationSummaryCards,
} from "./evaluation-summary-cards";

import {
  EvaluationViewDetail,
  type EvaluationDetailMode,
} from "./view-detail/evaluation-view-detail";

type Props = {
  assignmentId?: number;
};

function toAdminStatus(
  assignmentStatus: string,
): AdminEvaluationRow["status"] {
  const normalized = String(
    assignmentStatus || "",
  )
    .trim()
    .toUpperCase();

  if (
    normalized.includes("COMPLETED") ||
    normalized.includes("APPROVED") ||
    normalized.includes("DONE")
  ) {
    return "Completed";
  }

  if (
    normalized.includes("REVIEWED") ||
    normalized.includes("REVIEW_COMPLETE")
  ) {
    return "Reviewed";
  }

  return "Pending Review";
}

function getLatestEvaluationDate(
  data: EvaluationFormData,
): string | null {
  let latestTimestamp = 0;

  for (const item of data.items) {
    const value = item.evaluation;

    const evaluation = Array.isArray(value)
      ? value[0]
      : value;

    const dateValue =
      evaluation?.updatedAt ||
      evaluation?.createdAt;

    if (!dateValue) {
      continue;
    }

    const timestamp = new Date(
      dateValue,
    ).getTime();

    if (
      !Number.isNaN(timestamp) &&
      timestamp > latestTimestamp
    ) {
      latestTimestamp =
        timestamp;
    }
  }

  if (latestTimestamp <= 0) {
    return null;
  }

  return new Date(
    latestTimestamp,
  ).toISOString();
}

function mapApiToRow(
  data: EvaluationFormData,
): AdminEvaluationRow {
  return {
    id:
      data.assignment.id,

    progressReportId:
      data.assignment
        .progressReportId,

    progressReportTitle:
      data.assignment
        .progressReport
        .title,

    totalIssues:
      data.totalIssues,

    submittedBy:
      "PSWG Secretariat",

    submittedRole:
      "PSWG Secretariat",

    submittedDate:
      getLatestEvaluationDate(
        data,
      ),

    status:
      toAdminStatus(
        data.assignment.status,
      ),

    assignmentStatus:
      data.assignment.status,
  };
}

function buildSummary(
  row: AdminEvaluationRow | null,
): EvaluationSummary {
  if (!row) {
    return {
      totalSubmissions: 0,
      pendingReview: 0,
      reviewed: 0,
      completed: 0,
    };
  }

  return {
    totalSubmissions:
      1,

    pendingReview:
      row.status ===
      "Pending Review"
        ? 1
        : 0,

    reviewed:
      row.status ===
      "Reviewed"
        ? 1
        : 0,

    completed:
      row.status ===
      "Completed"
        ? 1
        : 0,
  };
}

export function EvaluationFormManagementPage({
  assignmentId = 1,
}: Props) {
  const router =
    useRouter();

  const pathname =
    usePathname();

  /*
   * ==========================================
   * ROLE DETECTION
   * ==========================================
   */

  const isAdmin =
    pathname === "/admin" ||
    pathname.startsWith(
      "/admin/",
    );

  const isMinistry =
    pathname === "/ministry" ||
    pathname.startsWith(
      "/ministry/",
    );

  const isPswg =
    pathname === "/pswg" ||
    pathname.startsWith(
      "/pswg/",
    );

  const isCdc =
    pathname === "/cdc" ||
    pathname.startsWith(
      "/cdc/",
    );

  const isCdcGpsf =
    pathname === "/cdc-gpsf" ||
    pathname.startsWith(
      "/cdc-gpsf/",
    );

  const isCefp =
    pathname === "/cefp" ||
    pathname.startsWith(
      "/cefp/",
    );

  /*
   * ONLY ADMIN CAN EDIT
   */
  const canEdit =
    isAdmin;

  /*
   * BACK BUTTON
   */
  const showBackButton =
    isMinistry ||
    isPswg ||
    isCdc ||
    isCdcGpsf ||
    isCefp;

  const {
    language,
  } =
    useAppLanguage();

  const lang =
    normalizeEvaluationFormLanguage(
      language,
    );

  const text =
    evaluationFormText[
      lang
    ];

  const fontClass =
    getEvaluationFormFontClass(
      lang,
    );

  const [
    drawerOpen,
    setDrawerOpen,
  ] =
    useState(false);

  const [
    drawerMode,
    setDrawerMode,
  ] =
    useState<EvaluationDetailMode>(
      "view",
    );

  const [
    saveError,
    setSaveError,
  ] =
    useState<
      string | null
    >(null);

  const [
    successOpen,
    setSuccessOpen,
  ] =
    useState(false);

  const {
    data,
    isLoading,
    isFetching,
    isError,
    error,
    refetch,
  } =
    useEvaluationForm(
      assignmentId,
    );

  const updateEvaluation =
    useUpdateEvaluationForm(
      assignmentId,
    );

  const row =
    useMemo(
      () =>
        data
          ? mapApiToRow(
              data,
            )
          : null,
      [
        data,
      ],
    );

  const rows =
    useMemo(
      () =>
        row
          ? [row]
          : [],
      [
        row,
      ],
    );

  const summary =
    useMemo(
      () =>
        buildSummary(
          row,
        ),
      [
        row,
      ],
    );

  async function openView() {
    setSaveError(
      null,
    );

    await refetch();

    setDrawerMode(
      "view",
    );

    setDrawerOpen(
      true,
    );
  }

  /*
   * ADMIN ONLY
   */
  async function openEdit() {
    if (!canEdit) {
      return;
    }

    setSaveError(
      null,
    );

    await refetch();

    setDrawerMode(
      "edit",
    );

    setDrawerOpen(
      true,
    );
  }

  /*
   * ADMIN ONLY
   */
  async function handleSave(
    payload:
      UpdateEvaluationFormPayload,
  ) {
    if (!canEdit) {
      return;
    }

    setSaveError(
      null,
    );

    setSuccessOpen(
      false,
    );

    try {
      await updateEvaluation.mutateAsync(
        payload,
      );

      setSuccessOpen(
        true,
      );

      await refetch();

      setDrawerMode(
        "view",
      );
    } catch (
      updateError
    ) {
      setSaveError(
        updateError instanceof Error
          ? updateError.message
          : text.updateError,
      );
    }
  }

  function closeDrawer() {
    if (
      canEdit &&
      updateEvaluation.isPending
    ) {
      return;
    }

    setDrawerOpen(
      false,
    );

    setDrawerMode(
      "view",
    );

    setSaveError(
      null,
    );
  }

  function handleBack() {
    router.back();
  }

  return (
    <>
      <Box
        className={
          fontClass
        }
        sx={{
          width:
            "100%",

          minWidth:
            0,

          minHeight:
            "100%",

          px: {
            xs:
              1.5,

            md:
              2.25,
          },

          py: {
            xs:
              1.5,

            md:
              2,
          },

          bgcolor:
            "background.default",

          color:
            "text.primary",
        }}
      >
        {/* ==========================================
            HEADER
            ========================================== */}
        <Box
          sx={{
            display:
              "flex",

            alignItems:
              "flex-start",

            gap:
              1.5,

            mb:
              4.25,
          }}
        >
          {/* BACK */}
          {showBackButton ? (
            <Button
              onClick={
                handleBack
              }
              startIcon={
                <ArrowBackIosNewIcon
                  sx={{
                    fontSize:
                      "16px !important",
                  }}
                />
              }
              sx={{
                minWidth:
                  0,

                height:
                  36,

                px:
                  0,

                py:
                  0,

                display:
                  "inline-flex",

                alignItems:
                  "center",

                justifyContent:
                  "center",

                color:
                  "text.secondary",

                textTransform:
                  "none",

                fontSize:
                  15,

                fontWeight:
                  500,

                lineHeight:
                  1,

                whiteSpace:
                  "nowrap",

                flexShrink:
                  0,

                "& .MuiButton-startIcon":
                  {
                    display:
                      "flex",

                    alignItems:
                      "center",

                    justifyContent:
                      "center",

                    ml:
                      0,

                    mr:
                      "6px",
                  },

                "&:hover": {
                  bgcolor:
                    "transparent",

                  color:
                    "primary.main",
                },
              }}
            >
              Back
            </Button>
          ) : null}

          {/* TITLE + SUBTITLE */}
          <Box
            sx={{
              minWidth:
                0,
            }}
          >
            <Box
              sx={{
                minHeight:
                  36,

                display:
                  "flex",

                alignItems:
                  "center",

                color:
                  "text.primary",

                fontSize: {
                  xs:
                    24,

                  md:
                    28,
                },

                fontWeight:
                  600,

                lineHeight:
                  1.2,
              }}
            >
              {
                text.pageTitle
              }
            </Box>

            <Box
              sx={{
                mt:
                  0.25,

                color:
                  "text.secondary",

                fontSize: {
                  xs:
                    12,

                  md:
                    13,
                },

                lineHeight:
                  1.6,
              }}
            >
              {
                text.pageSubtitle
              }
            </Box>
          </Box>
        </Box>

        {/* ==========================================
            ERROR
            ========================================== */}
        {isError ? (
          <Alert
            severity="error"
            sx={{
              mb:
                1.5,
            }}
          >
            {error instanceof Error
              ? error.message
              : text.loadError}
          </Alert>
        ) : null}

        {/* ==========================================
            CONTENT
            ========================================== */}
        <Box
          sx={{
            position:
              "relative",
          }}
        >
          {(isLoading ||
            isFetching) ? (
            <Box
              sx={{
                position:
                  "absolute",

                top:
                  8,

                right:
                  8,

                zIndex:
                  5,

                display:
                  "flex",

                alignItems:
                  "center",

                gap:
                  0.7,

                color:
                  "text.secondary",

                fontSize:
                  11,
              }}
            >
              <CircularProgress
                size={
                  14
                }
              />

              {
                text.loading
              }
            </Box>
          ) : null}

          <EvaluationSummaryCards
            summary={
              summary
            }
          />

          <Box
            sx={{
              mt:
                4.25,
            }}
          >
            <EvaluationSubmissionsTable
              rows={
                rows
              }
              loading={
                isLoading
              }
              pageSize={
                10
              }
              onView={() =>
                void openView()
              }
              onEdit={
                canEdit
                  ? () =>
                      void openEdit()
                  : undefined
              }
            />
          </Box>
        </Box>
      </Box>

      {/* ==========================================
          VIEW DETAIL / EDIT DRAWER
          ========================================== */}
      <EvaluationViewDetail
        open={
          drawerOpen
        }
        mode={
          canEdit
            ? drawerMode
            : "view"
        }
        data={
          data ??
          null
        }
        saving={
          canEdit
            ? updateEvaluation.isPending
            : false
        }
        error={
          saveError
        }
        canEdit={
          canEdit
        }
        onClose={
          closeDrawer
        }
        onModeChange={(
          nextMode,
        ) => {
          if (!canEdit) {
            return;
          }

          if (
            updateEvaluation.isPending
          ) {
            return;
          }

          setSaveError(
            null,
          );

          setDrawerMode(
            nextMode,
          );
        }}
        onSave={
          handleSave
        }
      />

      {/* ==========================================
          SUCCESS
          ========================================== */}
      <Snackbar
        open={
          successOpen
        }
        autoHideDuration={
          3000
        }
        onClose={(
          _event,
          reason,
        ) => {
          if (
            reason ===
            "clickaway"
          ) {
            return;
          }

          setSuccessOpen(
            false,
          );
        }}
        anchorOrigin={{
          vertical:
            "bottom",

          horizontal:
            "right",
        }}
        sx={{
          zIndex:
            9999,
        }}
      >
        <Alert
          className={
            fontClass
          }
          severity="success"
          variant="filled"
          onClose={() =>
            setSuccessOpen(
              false,
            )
          }
          sx={{
            minWidth: {
              xs:
                280,

              sm:
                360,
            },

            fontWeight:
              600,
          }}
        >
          {
            text.updateSuccess
          }
        </Alert>
      </Snackbar>
    </>
  );
}