"use client";

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

import { HyperlinkIcon, Users } from "@/components/ui/icon";

import type { CreateMeetingSummaryRequestItem } from "./create-meeting-summary-data";

type Props = {
  item: CreateMeetingSummaryRequestItem;
  selected?: boolean;
  onToggle?: () => void;
};

export function MeetingRequestListItem({
  item,
  selected = false,
  onToggle,
}: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const borderColor = selected
    ? isDark
      ? alpha("#1a64a8", 0.4)
      : "#b6dbf6"
    : isDark
      ? alpha("#ffffff", 0.08)
      : "#e9eaeb";

  return (
    <Box
      component={onToggle ? "button" : "div"}
      type={onToggle ? "button" : undefined}
      onClick={onToggle}
      sx={{
        width: "100%",
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: 1,
        p: "22px",
        border: "none",
        cursor: onToggle ? "pointer" : "default",
        textAlign: "left",
        bgcolor: selected
          ? isDark
            ? alpha("#1a64a8", 0.16)
            : "#ddedfb"
          : isDark
            ? "#101828"
            : "#ffffff",
        borderTop: selected ? `1px solid ${borderColor}` : "none",
        borderBottom: `1px solid ${borderColor}`,
        transition: "background-color 0.15s ease",
        "&:hover": onToggle
          ? {
              bgcolor: selected
                ? isDark
                  ? alpha("#1a64a8", 0.22)
                  : "#d4e8fa"
                : isDark
                  ? alpha("#ffffff", 0.04)
                  : "#fafafa",
            }
          : undefined,
      }}
    >
      <Box
        sx={{
          display: "flex",
          gap: "14px",
          alignItems: "flex-start",
          minWidth: 0,
        }}
      >
        <Box
          sx={{
            width: 24,
            height: 24,
            borderRadius: "4px",
            bgcolor: "#1a64a8",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
            color: "#ffffff",
          }}
        >
          <HyperlinkIcon sx={{ fontSize: 16 }} />
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "15px",
            minWidth: 0,
            maxWidth: 248,
          }}
        >
          <Typography
            className="font-kh"
            sx={{
              fontSize: 12,
              fontWeight: 500,
              color: isDark ? "#f3f4f6" : "#000000",
              lineHeight: 1.4,
              wordBreak: "break-word",
            }}
          >
            {item.title}
          </Typography>

          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 1,
              minWidth: 0,
            }}
          >
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "5px",
                flexShrink: 0,
              }}
            >
              <Users sx={{ fontSize: 20, color: "#717680" }} />
              <Typography
                sx={{
                  fontSize: 12,
                  fontWeight: 500,
                  color: "#717680",
                  whiteSpace: "nowrap",
                }}
              >
                PSWG :
              </Typography>
            </Box>

            <Typography
              noWrap
              sx={{
                fontSize: 12,
                fontWeight: 500,
                color: isDark ? "#f3f4f6" : "#181d27",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {item.pswg}
            </Typography>
          </Box>
        </Box>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1,
          flexShrink: 0,
        }}
      >
        <Typography
          sx={{
            fontSize: 12,
            fontWeight: 500,
            color: "#717680",
            whiteSpace: "nowrap",
          }}
        >
          {item.requestedDate}
        </Typography>

        <Box
          sx={{
            width: 7,
            height: 7,
            borderRadius: "50%",
            bgcolor: "#1a64a8",
            flexShrink: 0,
          }}
        />
      </Box>
    </Box>
  );
}