"use client";

import type { ReactNode } from "react";

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

import { DataTableDateCell } from "@/components/ui/data-table";
import {
  ActionCell,
  DescriptionCell,
  LogoCell,
  StatusBadge,
  StakeholderCell,
  TableText,
  TypeBadge,
  UsersCell,
} from "@/features/stakeholder/components/table/stakeholder-table-cells";
import type { Stakeholder } from "@/features/stakeholder/stakeholder-data";

type GridInfoItemProps = {
  label: string;
  children: ReactNode;
};

function GridInfoItem({
  label,
  children,
  labelWidth = 88,
  valueAlign = "left",
}: GridInfoItemProps & {
  labelWidth?: number;
  valueAlign?: "left" | "center";
}) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)`,
        alignItems: "center",
        columnGap: 1,
        minWidth: 0,
      }}
    >
      <Typography
        sx={{
          color: isDark ? alpha("#ffffff", 0.56) : "#717680",
          fontSize: 12,
          fontWeight: 500,
          lineHeight: "20px",
          whiteSpace: "nowrap",
        }}
      >
        {label}
      </Typography>

      <Box
        sx={{
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: valueAlign === "center" ? "center" : "flex-start",
        }}
      >
        {children}
      </Box>
    </Box>
  );
}

type StakeholderGridCardProps = {
  stakeholder: Stakeholder;
  onView: (stakeholder: Stakeholder) => void;
  onAddUser: (stakeholder: Stakeholder) => void;
  onEdit: (stakeholder: Stakeholder) => void;
  onDelete: (stakeholder: Stakeholder) => void;
};

export function StakeholderGridCard({
  stakeholder,
  onView,
  onAddUser,
  onEdit,
  onDelete,
}: StakeholderGridCardProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const typeName = stakeholder.stakeholderType?.name ?? "-";

  return (
    <Paper
      elevation={0}
      sx={{
        borderRadius: "12px",
        border: `1px solid ${isDark ? alpha("#ffffff", 0.1) : "#f5f5f5"}`,
        bgcolor: isDark ? "#111827" : "#ffffff",
        px: { xs: 2, md: 2.5 },
        py: { xs: 2, md: 2.25 },
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "flex-start",
          justifyContent: "space-between",
          gap: 2,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, minWidth: 0 }}>
          <Box sx={{ width: 60, flexShrink: 0 }}>
            <LogoCell name={stakeholder.name} logo={stakeholder.logo} />
          </Box>

          <Box sx={{ minWidth: 0 }}>
            <StakeholderCell name={stakeholder.name} />
            <Typography
              sx={{
                mt: 0.5,
                color: isDark ? alpha("#ffffff", 0.56) : "#717680",
                fontSize: 12,
                fontWeight: 500,
              }}
            >
              #{stakeholder.id}
            </Typography>
          </Box>
        </Box>

        <ActionCell
          stakeholder={stakeholder}
          onView={onView}
          onAddUser={onAddUser}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      </Box>

      <Box
        sx={{
          mt: 2.25,
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            md: "repeat(3, minmax(0, 1fr))",
          },
          columnGap: { xs: 2, md: 4 },
          rowGap: 2,
        }}
      >
        <GridInfoItem label="Type :">
          <TypeBadge type={typeName} />
        </GridInfoItem>

        <GridInfoItem label="Status :">
          <StatusBadge active={stakeholder.active} />
        </GridInfoItem>

        <GridInfoItem label="Co-Chair :">
          <TableText value={stakeholder.coChair?.trim() || "-"} />
        </GridInfoItem>

        <GridInfoItem label="Related to :" labelWidth={92}>
          <StakeholderCell
            name={stakeholder.relatedStakeholder?.name ?? "-"}
          />
        </GridInfoItem>

        <GridInfoItem label="Created :" labelWidth={92}>
          <DataTableDateCell align="left" value={stakeholder.createdAt} />
        </GridInfoItem>

        <GridInfoItem label="Last Update :" labelWidth={92}>
          <DataTableDateCell align="left" value={stakeholder.updatedAt} />
        </GridInfoItem>

        <GridInfoItem label="User :">
          <UsersCell align="left" users={stakeholder.users ?? []} />
        </GridInfoItem>
      </Box>

      <Box sx={{ mt: 2.25 }}>
        <Typography
          sx={{
            mb: 0.75,
            color: isDark ? alpha("#ffffff", 0.72) : "#414651",
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          Description
        </Typography>

        <DescriptionCell value={stakeholder.description} />
      </Box>
    </Paper>
  );
}