"use client";

import { useRouter } from "next/navigation";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { AppCheckbox } from "@/components/ui/checkbox";
import { usePermissions } from "@/features/auth/hook/use-permissions";
import { canUseCdcIssueMatrix } from "@/features/cdc/cdc-issue-matrix/cdc-issue-matrix-permissions";
import {
  ActionCell,
  StatusBadge,
} from "@/features/pswg/working-group-issues/components/table/wg-issues-table-cells";
import type {
  IssueRow,
  IssueStatus,
} from "@/features/pswg/working-group-issues/wg-issues-data";
import type { WgIssuesLanguage } from "@/features/pswg/working-group-issues/wg-issues-i18n";
import { translateIssueMatrixValue } from "@/features/pswg/issue-matrix/components/issue-matrix-i18n";

import type { CdcIssueMatrixRow } from "./cdc-issue-matrix-data";
import type { IssueMatrixLanguage } from "./cdc-issue-matrix-i18n";
import {
  MinistryCell,
  MinistrySelectCell,
  StatusSelectCell,
  type MinistryEditControl,
  type StatusEditControl,
} from "./cdc-issue-matrix-row-editors";

const CDC_ISSUE_MATRIX_STATUSES = new Set<IssueStatus>([
  "Solved",
  "In Progress",
  "Not Addressed",
  "Draft",
  "Saved",
  "New Submission",
]);

function toWgIssuesLanguage(language: IssueMatrixLanguage): WgIssuesLanguage {
  return language === "kh" ? "km" : "en";
}

function toActionIssueRow(row: CdcIssueMatrixRow): IssueRow {
  return {
    id: row.id,
    issue: row.issue,
    category: row.category,
    description: row.issueDescription,
    recommendation: row.recommendation,
    governmentDecision: row.governmentDecision,
    status: row.status,
    primaryAgency: row.primaryAgency,
    primaryAgencyLogo: row.primaryAgencyImage,
    issueReference: "",
  };
}

function noop() {
  // Read-only cell renderer; controlled checkbox still needs an onChange
  // handler to avoid the React "missing onChange" warning.
}

/** How a row's Plenary Escalation checkbox behaves for the current user. */
export type PlenaryEscalationControl = {
  canEscalate: boolean;
  isUpdating: boolean;
  onToggle: (issueId: number, escalated: boolean) => void;
};

function PlenaryEscalationCell({
  checked,
  issueId,
  control,
}: {
  checked: boolean;
  issueId?: number;
  control?: PlenaryEscalationControl;
}) {
  // CDC Secretariat users tick the box to send an issue to the plenary;
  // everyone else sees the same box read-only.
  const isEditable =
    Boolean(control?.canEscalate) && issueId !== undefined && issueId > 0;

  return (
    <Box sx={{ display: "flex", justifyContent: "center", width: "100%" }}>
      <AppCheckbox
        checked={checked}
        disabled={isEditable && control?.isUpdating}
        onChange={
          isEditable
            ? (event) => control?.onToggle(issueId, event.target.checked)
            : noop
        }
      />
    </Box>
  );
}

export function CdcIssueMatrixActionCell({
  row,
  language,
  onEdit,
  onRemove,
}: {
  row: CdcIssueMatrixRow;
  language: IssueMatrixLanguage;
  onEdit?: (row: CdcIssueMatrixRow) => void;
  onRemove?: (row: CdcIssueMatrixRow) => void;
}) {
  const router = useRouter();
  const wgLanguage = toWgIssuesLanguage(language);
  const { can } = usePermissions();
  // Only issues this role raised itself can be edited or removed here.
  const isOwnIssue = row.source === "OWN";

  return (
    <ActionCell
      access={{
        canViewDetail:
          row.source === undefined || canUseCdcIssueMatrix(can, "read"),
        canEdit: isOwnIssue && canUseCdcIssueMatrix(can, "update"),
        canSendRequest: false,
        canRemove: isOwnIssue && canUseCdcIssueMatrix(can, "delete"),
      }}
      allowEditAnyStatus={isOwnIssue}
      allowRemoveAnyStatus={isOwnIssue}
      row={toActionIssueRow(row)}
      language={wgLanguage}
      onViewDetail={() => router.push(`/cdc/cdc-issue-matrix/${row.id}`)}
      onEdit={() => onEdit?.(row)}
      onRemove={() => onRemove?.(row)}
    />
  );
}

type CdcIssueMatrixTableCellProps = {
  value: string | number | boolean;
  columnKey: string;
  image?: string;
  language: IssueMatrixLanguage;
  row?: CdcIssueMatrixRow;
  plenaryEscalationControl?: PlenaryEscalationControl;
  ministryEditControl?: MinistryEditControl;
  statusEditControl?: StatusEditControl;
  onEdit?: (row: CdcIssueMatrixRow) => void;
  onRemove?: (row: CdcIssueMatrixRow) => void;
};

export function CdcIssueMatrixTableCell({
  value,
  columnKey,
  image,
  language,
  row,
  plenaryEscalationControl,
  ministryEditControl,
  statusEditControl,
  onEdit,
  onRemove,
}: CdcIssueMatrixTableCellProps) {
  const theme = useTheme();

  if (columnKey === "action" && row) {
    return (
      <CdcIssueMatrixActionCell
        row={row}
        language={language}
        onEdit={onEdit}
        onRemove={onRemove}
      />
    );
  }

  if (columnKey === "primaryAgency") {
    if (row) {
      return <MinistrySelectCell row={row} control={ministryEditControl} />;
    }

    return <MinistryCell value={String(value)} image={image} />;
  }

  if (columnKey === "plenaryEscalation") {
    return (
      <PlenaryEscalationCell
        checked={Boolean(value)}
        issueId={row?.issueId}
        control={plenaryEscalationControl}
      />
    );
  }

  const textValue = String(value);
  const displayValue = translateIssueMatrixValue(textValue, language);

  if (
    columnKey === "status" &&
    CDC_ISSUE_MATRIX_STATUSES.has(textValue as IssueStatus)
  ) {
    if (row) {
      return (
        <StatusSelectCell
          row={row}
          language={toWgIssuesLanguage(language)}
          control={statusEditControl}
        />
      );
    }

    return (
      <StatusBadge
        status={textValue as IssueStatus}
        language={toWgIssuesLanguage(language)}
      />
    );
  }

  const isWrappingTextColumn = columnKey === "workingGroup";

  return (
    <Typography
      sx={{
        color: theme.palette.text.primary,
        fontSize: 13,
        lineHeight: 1.5,
        width: "100%",
        ...(isWrappingTextColumn
          ? {
              whiteSpace: "normal",
              wordBreak: "break-word",
              display: "-webkit-box",
              WebkitLineClamp: 3,
              WebkitBoxOrient: "vertical",
              overflow: "hidden",
              textAlign: "center",
            }
          : {
              whiteSpace: "nowrap",
              overflow: "hidden",
              textOverflow: "ellipsis",
            }),
      }}
      title={displayValue}
    >
      {displayValue}
    </Typography>
  );
}