"use client";

import Link from "next/link";

import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { MeetingSummaryStatusBadge } from "@/components/ui/meeting-summary-status-badge";

import type { MeetingSummaryStatus } from "@/features/pswg/meeting-summary/meeting-summary-data";
import {
  meetingSummaryStatusLabels,
  meetingSummaryText,
  type MeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";

const khmerFont =
  '"Kantumruy Pro", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif';

export function TableText({
  value,
  fontSize = 12,
  fontWeight = 500,
  align = "left",
  language = "en",
}: {
  value: string;
  fontSize?: number;
  fontWeight?: number;
  align?: "left" | "center";
  language?: MeetingSummaryLanguage;
}) {
  const theme = useTheme();

  return (
    <Typography
      noWrap
      sx={{
        width: "100%",
        color: theme.palette.text.primary,
        fontSize,
        fontWeight,
        textAlign: align,
        fontFamily: language === "kh" ? khmerFont : theme.typography.fontFamily,
      }}
    >
      {value}
    </Typography>
  );
}

export function IssueCountCell({ count }: { count: number }) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        width: 28,
        height: 28,
        borderRadius: "50%",
        border: `1px solid ${alpha(
          theme.palette.error.main,
          isDark ? 0.35 : 0.24
        )}`,
        backgroundColor: alpha(theme.palette.error.main, isDark ? 0.15 : 0.06),
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Typography
        sx={{
          color: theme.palette.error.main,
          fontSize: 13,
          fontWeight: 600,
        }}
      >
        {count}
      </Typography>
    </Box>
  );
}

export function StatusBadge({
  status,
  language,
}: {
  status: MeetingSummaryStatus;
  language: MeetingSummaryLanguage;
}) {
  return (
    <MeetingSummaryStatusBadge
      status={status}
      label={meetingSummaryStatusLabels[status][language]}
      language={language}
    />
  );
}

export function AgencyCell({ agency }: { agency: string }) {
  const theme = useTheme();

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
      <Avatar
        sx={{
          width: 35,
          height: 35,
          backgroundColor: "transparent",
        }}
      >
        <DashboardAssetIcon
          src={dashboardAssets.primaryAgencyAvatar}
          alt={agency}
          width="100%"
          height="100%"
          sx={{ objectFit: "cover" }}
        />
      </Avatar>

      <Typography
        noWrap
        sx={{
          color: theme.palette.text.primary,
          fontSize: 12,
          fontWeight: 500,
        }}
      >
        {agency}
      </Typography>
    </Box>
  );
}

function FileReferenceIcon() {
  return (
    <Box
      sx={{
        position: "relative",
        width: 20,
        height: 20,
        flexShrink: 0,
      }}
    >
      <DashboardAssetIcon
        src={dashboardAssets.fileReferencePage}
        alt=""
        width={12}
        height={15}
        sx={{
          position: "absolute",
          left: 4,
          top: 2,
        }}
      />

      <DashboardAssetIcon
        src={dashboardAssets.fileReferenceEarmark}
        alt=""
        width={5.75}
        height={5.75}
        sx={{
          position: "absolute",
          left: 10,
          top: 1.5,
        }}
      />

      <Box
        sx={{
          position: "absolute",
          left: 0,
          top: 7,
          width: 11,
          height: 6,
          borderRadius: "2px",
          backgroundColor: "#d92d20",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <DashboardAssetIcon
          src={dashboardAssets.fileReferenceLabel}
          alt=""
          width={5}
          height={2}
        />
      </Box>
    </Box>
  );
}

export function SummaryFileCell({
  label,
  language,
}: {
  label: string;
  language: MeetingSummaryLanguage;
}) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "inline-flex",
        alignItems: "center",
        gap: 1,
        minWidth: 0,
      }}
    >
      <FileReferenceIcon />

      <Typography
        noWrap
        sx={{
          color: theme.palette.text.primary,
          fontSize: 12,
          fontWeight: 500,
          fontFamily: language === "kh" ? khmerFont : theme.typography.fontFamily,
        }}
      >
        {label}
      </Typography>
    </Box>
  );
}

export function ActionCell({
  id,
  language,
  detailBasePath = "/pswg/meeting-summary",
}: {
  id: number;
  language: MeetingSummaryLanguage;
  // Where the "View Detail" link should go. Each section (PSWG, CDC-GPSF)
  // passes its own base path so the user stays inside that section.
  detailBasePath?: string;
}) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const text = meetingSummaryText[language] ?? meetingSummaryText.en;
  const actionColor = isDark ? alpha("#ffffff", 0.55) : "#717680";

  return (
    <Button
      component={Link}
      href={`${detailBasePath}/${id}`}
      variant="text"
      startIcon={<VisibilityOutlinedIcon sx={{ fontSize: 24 }} />}
      sx={{
        width: "100%",
        maxWidth: 154,
        minWidth: 0,
        height: 40,
        px: 1,
        justifyContent: "flex-start",
        color: actionColor,
        textTransform: "none",
        borderRadius: 0,
        "& .MuiButton-startIcon": {
          mr: 0.5,
          ml: 0,
        },
        "&:hover": {
          bgcolor: "transparent",
          color: isDark ? alpha("#ffffff", 0.78) : "#717680",
        },
      }}
    >
      <Typography
        noWrap
        sx={{
          color: "inherit",
          fontSize: 12,
          fontWeight: 400,
          lineHeight: 1.24,
          fontFamily: language === "kh" ? khmerFont : theme.typography.fontFamily,
        }}
      >
        {text.viewDetail}
      </Typography>
    </Button>
  );
}