"use client";

import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

import { IssueStatusBadge } from "@/components/ui/issue-status-badge";
import { resolveAgencyLogoForDisplay } from "@/features/ministry/meeting-summary/components/create-meeting-summary/meeting-summary-issue-agencies";
import type { ViewMeetingSummaryIssueRow } from "./view-meeting-summary-data";

function isKhmerText(value: string) {
  return /[\u1780-\u17FF]/.test(value);
}

export function IssueListTextCell({
  value,
  compact = false,
  wrap = false,
  align = "left",
}: {
  value: string;
  compact?: boolean;
  wrap?: boolean;
  align?: "left" | "center" | "right";
}) {
  return (
    <Typography
      className={isKhmerText(value) ? "font-kh" : undefined}
      noWrap={!wrap}
      sx={{
        width: "100%",
        fontSize: compact ? 12 : 13,
        fontWeight: 500,
        whiteSpace: wrap ? "normal" : "nowrap",
        wordBreak: wrap ? "break-word" : "normal",
        overflow: wrap ? "visible" : "hidden",
        textOverflow: wrap ? "clip" : "ellipsis",
        lineHeight: wrap ? 1.35 : 1.2,
        textAlign: align,
        color: compact
          ? "var(--ms-secondary, #252b37)"
          : "var(--ms-text, #181d27)",
      }}
    >
      {value}
    </Typography>
  );
}

export function IssueListStatusCell({ label }: { label: string }) {
  return <IssueStatusBadge status={label} />;
}

export function IssueListAgencyCell({
  name,
  logo,
}: {
  name: string;
  logo?: string | null;
}) {
  if (name === "Not Uploaded" || name === "-") {
    return <IssueListTextCell value={name} compact />;
  }

  const resolvedLogo = resolveAgencyLogoForDisplay(name, logo);

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
      {resolvedLogo ? (
        <Box
          component="img"
          src={resolvedLogo}
          alt={name}
          sx={{
            width: 19,
            height: 19,
            borderRadius: "50%",
            objectFit: "cover",
            flexShrink: 0,
          }}
        />
      ) : null}
      <Typography
        noWrap
        sx={{
          fontSize: 12,
          fontWeight: 500,
          color: "var(--ms-text, #181d27)",
        }}
      >
        {name}
      </Typography>
    </Box>
  );
}

export function IssueListViewDetailButton({
  issue,
  onView,
}: {
  issue: ViewMeetingSummaryIssueRow;
  onView?: (issue: ViewMeetingSummaryIssueRow) => void;
}) {
  return (
    <Button
      startIcon={<VisibilityOutlinedIcon sx={{ fontSize: 20 }} />}
      onClick={() => onView?.(issue)}
      sx={{
        color: "var(--ms-muted, #717680)",
        textTransform: "none",
        fontSize: 12,
        fontWeight: 400,
        px: 1,
        minWidth: 0,
        whiteSpace: "nowrap",
        "& .MuiButton-startIcon": { mr: 0.5 },
        "&:hover": {
          bgcolor: "transparent",
          color: "var(--ms-blue, #1a64a8)",
        },
      }}
    >
      View Detail
    </Button>
  );
}