import React from "react";
import { Typography, Box } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import PersonIcon from "@mui/icons-material/Person";
import BusinessIcon from "@mui/icons-material/Business";
import DateRangeIcon from "@mui/icons-material/DateRange";
import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
import LocalPostOfficeIcon from "@mui/icons-material/LocalPostOffice";
import PhoneIcon from "@mui/icons-material/Phone";
import PublicIcon from "@mui/icons-material/Public";
import CorporateFareIcon from "@mui/icons-material/CorporateFare";
import BadgeIcon from "@mui/icons-material/Badge";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import LocationCityIcon from "@mui/icons-material/LocationCity";
import FaceIcon from "@mui/icons-material/Face";
import FavoriteIcon from "@mui/icons-material/Favorite";
import CakeIcon from "@mui/icons-material/Cake";
import HomeIcon from "@mui/icons-material/Home";
import { formatJustDate } from "../../../../utils/formatTime";
export const ViewGuildDetails = ({ guild }) => {
  // Helper function to safely render values
  const renderValue = (value) => {
    if (!value) return "-";
    if (typeof value === "object") {
      // If it's an object, try to extract a meaningful string
      return value.name || value.title || value.label || JSON.stringify(value);
    }
    return value;
  };

  // Extract nested values
  const provinceName = guild?.address?.province?.name || "-";
  const cityName = guild?.address?.city?.name || "-";
  const postalCode = guild?.address?.postalCode || "-";
  const guildCategory = guild?.guildAreaActivity?.title || "-";
  const unionName = guild?.unionName || "-";
  return (
    <Grid
      container
      gap={SPACING.TINY}
      maxHeight={"80vh"}
      minWidth={{ xs: "96vw", md: "90vw", lg: "1280px" }}
      overflow={"auto"}
      p={2}
    >
      <Grid container xs={12}>
        {/* Two Column Layout: Person Data | Guild Data */}
        <Grid
          item
          xs={12}
          lg={6}
          pl={{ xs: 0, md: 2 }}
          pr={{ xs: 0, md: 3 }}
          mb={2}
        >
          <Grid container direction="column" gap={SPACING.SMALL}>
            <Grid item xs={12}>
              <Typography variant="h6" gutterBottom>
                اطلاعات شخصی
              </Typography>
            </Grid>
            <Grid container xs={12}>
              <Grid
                container
                xs={12}
                md={6}
                gap={SPACING.TINY}
                px={SPACING.TINY}
              >
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <BadgeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        کد ملی
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.nationalId)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PersonIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.firstName)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PersonIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام خانوادگی
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.lastName)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <BadgeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شماره شناسنامه
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.nationalCode)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <FavoriteIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        در قید حیات
                      </Typography>
                      <Typography variant="body1">
                        {guild?.user?.isAlive ? "بلی" : "خیر"}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
              </Grid>

              <Grid
                container
                xs={12}
                md={6}
                gap={SPACING.TINY}
                px={SPACING.TINY}
                mt={{ xs: 1, md: 0 }}
                direction="column"
              >
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <CakeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        تاریخ تولد
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.birthday)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PersonIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام پدر
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.fatherName)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <FaceIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        جنسیت
                      </Typography>
                      <Typography variant="body1">
                        {guild?.user?.gender === "True"
                          ? "مرد"
                          : guild?.user?.gender === "False"
                          ? "زن"
                          : "-"}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PhoneIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شماره همراه
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.mobile)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <LocationCityIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شهر
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.user?.city)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Grid>

        <Grid item xs={12} lg={6} pr={{ xs: 0, md: 2 }} pl={{ xs: 0, md: 3 }}>
          <Grid container gap={SPACING.TINY} direction="column">
            <Grid item xs={12}>
              <Typography variant="h6" gutterBottom>
                اطلاعات صنفی
              </Typography>
            </Grid>
            <Grid container xs={12}>
              <Grid
                container
                direction="column"
                xs={12}
                md={6}
                px={SPACING.TINY}
                gap={SPACING.TINY}
              >
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <BusinessIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام واحد
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.guildsName)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <BusinessIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        رسته واحد صنفی
                      </Typography>
                      <Typography variant="body1">{guildCategory}</Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PublicIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        استان
                      </Typography>
                      <Typography variant="body1">{provinceName}</Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <LocationCityIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شهرستان
                      </Typography>
                      <Typography variant="body1">{cityName}</Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <DateRangeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        تاریخ انقضا مجوز
                      </Typography>
                      <Typography variant="body1">
                        {formatJustDate(guild?.licenseExpireDate)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <ConfirmationNumberIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شماره مجوز
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.licenseNumber)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <AccountBalanceIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام اتحادیه
                      </Typography>
                      <Typography variant="body1">{unionName}</Typography>
                    </Box>
                  </Box>
                </Grid>
              </Grid>
              <Grid
                container
                xs={12}
                md={6}
                px={SPACING.TINY}
                direction="column"
                gap={SPACING.TINY}
              >
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <LocalPostOfficeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        کد پستی
                      </Typography>
                      <Typography variant="body1">{postalCode}</Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PhoneIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شماره تلفن
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.phone)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <PublicIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        آیا اتباع است؟
                      </Typography>
                      <Typography variant="body1">
                        {guild?.isForeignNational ? "بلی" : "خیر"}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <CorporateFareIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        نام شرکت
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.companyName)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <BadgeIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        شناسه ملی شرکت
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.companyIdentifier)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>

                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="center"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <CheckCircleIcon color="action" />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        وضعیت مجوز
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.licenseStatus)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12}>
                  <Box
                    display="flex"
                    alignItems="flex-start"
                    gap={1}
                    px={1.5}
                    py={0.5}
                    bgcolor="#f5f5f5"
                    borderRadius={1}
                  >
                    <HomeIcon color="action" sx={{ mt: 0.5 }} />
                    <Box>
                      <Typography variant="caption" color="text.secondary">
                        آدرس
                      </Typography>
                      <Typography variant="body1">
                        {renderValue(guild?.address?.address)}
                      </Typography>
                    </Box>
                  </Box>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};
