import {
  Avatar,
  Box,
  Card,
  CardContent,
  Typography,
  Chip,
  IconButton,
  Tooltip,
} from "@mui/material";
import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import SchoolOutlinedIcon from "@mui/icons-material/SchoolOutlined";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import {
  formatAcademicYearShort,
  formatEnquiryDate,
  formatModifiedDate,
  getEntityValue,
  getInitials,
} from "../utils/common/common";
import { STAGE } from "../constants/kanban-constants";
import { kanbanStyles } from "../styles/styles";
import { ENTITY_TYPE } from "../../listing/libs/utils/common";

const LeadCard = (props: {
  cardData: any;
  color: string;
  darkColor: string;
  darkerColor: string;
}) => {
  const lead = props?.cardData;
  const entity = ENTITY_TYPE;
  const ENTITY_PREFIX = entity;
  const firstName = getEntityValue(lead, ENTITY_PREFIX, "contact_first_name");
  const lastName = getEntityValue(lead, ENTITY_PREFIX, "contact_last_name");
  const Name = getEntityValue(lead, ENTITY_PREFIX, "name");

  const displayName = Name || "Unknown";
  const leadOwnerName = getEntityValue(lead, entity, "lead_owner");

  const handleEmailClick = (e) => {
    e.stopPropagation();
    if (getEntityValue(lead, ENTITY_PREFIX, "primary_email")) {
      window.open(
        `https://mail.google.com/mail/?view=cm&to=${getEntityValue(
          lead,
          ENTITY_PREFIX,
          "primary_email"
        )}`,
        "_blank"
      );
    }
  };

  const handlePhoneClick = (e) => {
    e.stopPropagation();
    if (getEntityValue(lead, ENTITY_PREFIX, "primary_mobile")) {
      window.location.href = `tel:${getEntityValue(
        lead,
        ENTITY_PREFIX,
        "primary_mobile"
      )}`;
    }
  };
  const statusValue = getEntityValue(lead, entity, "lead_status").toUpperCase();
  // const style = statusStyles[statusValue];

  return (
    <Card
      sx={{
        width: "100%", // FULL WIDTH fix to avoid right side cut
        minWidth: "256px", // Prevent shrinking too small
        maxWidth: "256px", // Keep look similar to design
        borderRadius: "16px",
        overflow: "visible", // Prevent clipping
        boxSizing: "border-box",
        boxShadow: "0px 3px 8px 0px #22303E1A",
        backgroundColor: "#ffffff",
        cursor: "pointer",
      }}
      // onClick={async () => {
      //   openNavigationTab(
      //     {
      //       id: lead?.id,
      //       contact_name: "Loading...",
      //       primary_mobile: "",
      //     },
      //     entity
      //   );
      //   await fetchEntityDetails(lead?.id, entity);
      // }}
    >
      <CardContent
        sx={{
          padding: "12px",
          display: "flex",
          flexDirection: "column",
          gap: 1.2,
        }}
      >
        {/* Header */}
        <Box
          sx={{
            display: "flex",
            gap: 1.5,
            alignItems: "center",
          }}
        >
          <Chip
            label={getEntityValue(lead, entity, STAGE) || "N/A"}
            size="small"
            sx={{
              height: 20,
              fontSize: "10px",
              backgroundColor: props?.color || "#FFE7EF",
              color: props?.darkerColor || "#D81B60",
              fontWeight: 500,
              borderRadius: "6px",
              "& .MuiChip-label": { px: 1 },
            }}
          />

          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
            <SchoolOutlinedIcon sx={{ fontSize: 16, color: "#575555" }} />
            <Typography
              sx={{ fontSize: "10px", color: "#575555", fontWeight: 500 }}
            >
              {getEntityValue(lead, entity, "school_code") || "N/A"}
            </Typography>
          </Box>
        </Box>

        {/* Name + Icons */}
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            // gap: 15,
          }}
        >
          <Typography
            variant="body1"
            sx={{
              fontWeight: 500,
              fontSize: "15px",
              color: "#272524",
              maxWidth: "200px",
              whiteSpace: "nowrap",
              overflow: "hidden",
              textOverflow: "ellipsis",
            }}
          >
            {displayName}
          </Typography>

          <Box sx={{ display: "flex", gap: 0.5 }}>
            <Tooltip
              arrow
              title={getEntityValue(lead, ENTITY_PREFIX, "primary_mobile")}
            >
              <Box sx={kanbanStyles.iconStyle}>
                <IconButton
                  size="small"
                  onClick={handlePhoneClick}
                  disabled={
                    !getEntityValue(lead, ENTITY_PREFIX, "primary_mobile")
                  }
                  sx={{ p: 0.5 }}
                >
                  <PhoneOutlinedIcon sx={{ fontSize: 18, color: "#757575" }} />
                </IconButton>
              </Box>
            </Tooltip>

            <Tooltip
              arrow
              title={getEntityValue(lead, ENTITY_PREFIX, "primary_email")}
            >
              <Box sx={kanbanStyles.iconStyle}>
                <IconButton
                  size="small"
                  onClick={handleEmailClick}
                  disabled={
                    !getEntityValue(lead, ENTITY_PREFIX, "primary_email")
                  }
                  sx={{ p: 0.5 }}
                >
                  <EmailOutlinedIcon sx={{ fontSize: 18, color: "#757575" }} />
                </IconButton>
              </Box>
            </Tooltip>
          </Box>
        </Box>

        {/* Code + Status + AY & Grade */}
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            // justifyContent: "space-between",
            // alignItems: "center",
            alignItems: "flex-start",
            overflow: "visible",
            gap: "4px",
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
            <Typography
              sx={{
                fontSize: "10px",
                color: "#7b7a79",
                fontWeight: 500,
                whiteSpace: "nowrap",
              }}
            >
              {getEntityValue(lead, entity, "code") || "N/A"}
            </Typography>

            <Chip
              label={getEntityValue(lead, entity, "lead_status") || "N/A"}
              size="small"
              sx={{
                backgroundColor: "transparent",
                color: "inherit",
                textTransform: "capitalize",
                fontWeight: 500,
                pl: "2px",
                pr: "2px",
                height: 20,
                fontSize: "10px",
                borderRadius: "6px",
                "& .MuiChip-label": { px: 0.8 },
              }}
            />
          </Box>

          <Typography
            sx={{
              fontSize: "10px",
              color: "#7b7a79",
              fontWeight: 500,
              whiteSpace: "nowrap",
            }}
          >
            {getEntityValue(lead, entity, "expected_admission_year") +
              " | " +
              getEntityValue(lead, entity, "admission_grade") || "N/A"}
          </Typography>
        </Box>

        {/* Footer */}
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            mt: 1.2, // increased margin to separate without a line
            pt: 0, // prevent divider-like spacing
            gap: 1.5,
            borderTop: "1px solid #E0E0E0", // subtle divider line
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: 1, mt: 1.5 }}>
            <Avatar
              src={lead?.profile_image || undefined}
              sx={{
                width: 23,
                height: 23,
                fontSize: 12,
                bgcolor: !lead?.profile_image ? props?.darkColor : undefined,
              }}
            >
              {!lead?.profile_image && getInitials(leadOwnerName)}
            </Avatar>
            <Typography
              sx={{
                fontSize: "12px", // slightly bigger like screenshot
                color: "black",
                fontWeight: 500,
                maxWidth: "140px",
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {getEntityValue(lead, entity, "lead_owner") || "N/A"}
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 0.8,
              whiteSpace: "nowrap",
              mt: 1.5,
            }}
          >
            <CalendarTodayIcon
              sx={{ width: 19, height: 20, color: "#6e6d6d", mb: "2px" }}
            />
            <Typography
              variant="body2"
              sx={{ fontSize: "12px", color: "#7b7a79", fontWeight: 500 }}
            >
              {formatModifiedDate(
                getEntityValue(lead, entity, "modified_date")
              )}
            </Typography>
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
};

export default LeadCard;