import React, { useState, useEffect } from "react";
import Typography from "../../components/Typography/Typography";
import { Grid } from "../../components/Grid/Grid";
import Button from "../../components/Button/Button";
import { useApiMutation } from "../../utils/useApiRequest";
import { useDrawerStore } from "../../context/zustand-store/appStore";
import MainSubmitInspection from "./MainSubmitInspection";
import { motion, AnimatePresence, Variants } from "framer-motion";
import {
  UserIcon,
  IdentificationIcon,
  PhoneIcon,
  CalendarIcon,
  CreditCardIcon,
  InformationCircleIcon,
  MapPinIcon,
  BuildingStorefrontIcon,
} from "@heroicons/react/24/outline";

interface MainPlaceInfoProps {
  item: any;
  userlastseen?: string;
  isPoultry?: boolean;
  isLivestock?: boolean;
}

interface PersonData {
  _id: string;
  nationalcode: string;
  name: string;
  family: string;
  father: string;
  birthdate: string;
  mobile: string[];
  info: string[];
  card: string[];
}

interface ApiResponse {
  data: PersonData[];
  count: number;
}

interface PersonRegistryData {
  registeryOfficePersonId: number;
  nationalCode: string;
  firstName: string;
  lastName: string;
  fatherName: string;
  supervisorNationalCode: string | null;
  gender: boolean;
  identityNo: string;
  identitySeries: string;
  identitySerial: string;
  birthDate: string;
  birthDateUnix: number;
  isLive: boolean;
  deathDate: string | null;
  city: string;
  vilage: string | null;
  town: string | null;
  errorCode: number;
  errorDescription: string | null;
  createdOn: string;
  errorCodeSpecified: boolean | null;
  birthDateDay: number;
  birthDateMonth: number;
  birthDateYear: number;
}

interface PersonRegistryResponse {
  status: boolean;
  statusCode: number;
  data: PersonRegistryData;
  apiLogId: string;
}

interface UnitRegistryData {
  counter: number;
  serviceType: number;
  title: string;
  isicname: string;
  fullname: string;
  state: string;
  city: string;
  address: string;
  licenseNumber: string;
  licenseExpireDate: string;
  licenseType: string;
  licenseStatus: string;
  layerTwo: {
    phonenumber: string;
    unionName: string;
    postalcode: string;
    nationalcode: string;
    mobilenumber: string;
    nationalId: string | null;
    corporationName: string | null;
    licenseIssueDate: string;
    jobType: string;
    hasPartner: string;
    hasSteward: string;
    isForeigner: string;
  };
}

interface UnitRegistryResponse {
  status?: boolean;
  statusCode?: number;
  data?: UnitRegistryData[];
}

const MainPlaceInfo: React.FC<MainPlaceInfoProps> = ({
  item,
  userlastseen,
}) => {
  const [personData, setPersonData] = useState<PersonData[]>([]);
  const [isLoadingPersonInfo, setIsLoadingPersonInfo] = useState(false);
  const [personRegistryData, setPersonRegistryData] =
    useState<PersonRegistryData | null>(null);
  const [unitRegistryData, setUnitRegistryData] = useState<UnitRegistryData[]>(
    [],
  );
  const [isLoadingRegistry, setIsLoadingRegistry] = useState(false);
  const { openDrawer } = useDrawerStore();

  const personInfoMutation = useApiMutation<ApiResponse>({
    api: "people_info",
    method: "get",
  });

  const personRegistryMutation = useApiMutation<PersonRegistryResponse>({
    api: "national-documents",
    method: "get",
  });

  const unitRegistryMutation = useApiMutation<UnitRegistryResponse>({
    api: "national-documents",
    method: "get",
  });

  // Auto-fetch person info and registry data if national_id has 10 digits
  useEffect(() => {
    const nationalId = item?.national_id;
    if (
      nationalId &&
      typeof nationalId === "string" &&
      nationalId.length === 10
    ) {
      fetchPersonInfo(nationalId);
      fetchRegistryData(nationalId);
    }
  }, [item?.national_id]);

  const fetchPersonInfo = async (nationalId: string) => {
    setIsLoadingPersonInfo(true);
    try {
      const result = await personInfoMutation.mutateAsync({
        searchfield: "nationalcode",
        value: nationalId,
      });

      if (result?.data && result.data.length > 0) {
        setPersonData(result.data);
      } else {
        setPersonData([]);
      }
    } catch (error: any) {
      console.error("Person info error:", error);
      setPersonData([]);
    } finally {
      setIsLoadingPersonInfo(false);
    }
  };

  const fetchRegistryData = async (nationalCode: string) => {
    setIsLoadingRegistry(true);
    try {
      // Fetch person registry
      try {
        const personResult = await personRegistryMutation.mutateAsync({
          type: "person",
          info: nationalCode,
        });
        if (personResult?.status && personResult?.data) {
          setPersonRegistryData(personResult.data);
        } else {
          setPersonRegistryData(null);
        }
      } catch (error: any) {
        console.error("Person registry error:", error);
        setPersonRegistryData(null);
      }

      // Fetch unit registry
      try {
        const unitResult = await unitRegistryMutation.mutateAsync({
          type: "guild",
          info: nationalCode,
        });
        const unitsCandidate =
          unitResult?.data ?? (Array.isArray(unitResult) ? unitResult : []);
        setUnitRegistryData(
          Array.isArray(unitsCandidate) ? unitsCandidate : [],
        );
      } catch (error: any) {
        console.error("Unit registry error:", error);
        setUnitRegistryData([]);
      }
    } catch (error) {
      console.error("Registry fetch error:", error);
    } finally {
      setIsLoadingRegistry(false);
    }
  };

  const handleOpenInspection = () => {
    openDrawer({
      title: "ثبت بازرسی",
      content: <MainSubmitInspection item={item} />,
      direction: "left",
    });
  };

  const cardVariants: Variants = {
    hidden: { opacity: 0, y: 20, scale: 0.95 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        delay: i * 0.1,
        duration: 0.3,
        ease: "easeOut",
      },
    }),
  };

  const getDisplayName = (person: PersonData) => {
    if (person.family && person.name.includes(person.family)) {
      return person.name;
    }
    return person.family ? `${person.name} ${person.family}` : person.name;
  };

  return (
    <Grid container column className="gap-4 p-2">
      {/* Place Basic Information */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
        className="w-full"
      >
        <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6">
          <Grid container column className="gap-4">
            <div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
              <div className="flex items-center gap-3">
                <div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
                  <BuildingStorefrontIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
                </div>
                <div>
                  <Typography
                    variant="h6"
                    className="text-gray-900 dark:text-gray-100 font-bold"
                  >
                    {item?.guilds_name || "نامشخص"}
                  </Typography>
                  {userlastseen && (
                    <Typography
                      variant="body2"
                      className="text-gray-600 dark:text-gray-400 mt-1"
                    >
                      آخرین بازدید: {userlastseen}
                    </Typography>
                  )}
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {item?.national_id && (
                <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                  <CreditCardIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                  <div>
                    <Typography
                      variant="body2"
                      className="text-gray-500 dark:text-gray-400 text-xs"
                    >
                      کد ملی
                    </Typography>
                    <Typography
                      variant="body1"
                      className="text-gray-900 dark:text-gray-100 font-medium"
                    >
                      {item.national_id}
                    </Typography>
                  </div>
                </div>
              )}

              {item?.lat && item?.lng && (
                <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                  <MapPinIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                  <div>
                    <Typography
                      variant="body2"
                      className="text-gray-500 dark:text-gray-400 text-xs"
                    >
                      موقعیت
                    </Typography>
                    <Typography
                      variant="body1"
                      className="text-gray-900 dark:text-gray-100 font-medium"
                    >
                      {item.lat.toFixed(6)}, {item.lng.toFixed(6)}
                    </Typography>
                  </div>
                </div>
              )}
            </div>

            <div className="pt-2">
              <Button
                onClick={handleOpenInspection}
                variant="submit"
                fullWidth
                className="mt-2"
              >
                ثبت بازرسی
              </Button>
            </div>
          </Grid>
        </div>
      </motion.div>

      {/* Person Info Data */}
      <AnimatePresence mode="popLayout">
        {isLoadingPersonInfo && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6">
              <Typography
                variant="body1"
                className="text-gray-700 dark:text-gray-300 text-center"
              >
                در حال بارگذاری اطلاعات شخص...
              </Typography>
            </div>
          </motion.div>
        )}

        {personData.length > 0 && !isLoadingPersonInfo && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <Typography
              variant="body1"
              className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
            >
              اطلاعات شخص ({personData.length})
            </Typography>

            <Grid container column className="gap-4">
              {personData.map((person, index) => (
                <motion.div
                  key={person._id}
                  custom={index}
                  variants={cardVariants}
                  initial="hidden"
                  animate="visible"
                  exit="exit"
                  className="w-full"
                >
                  <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
                    <Grid container column className="gap-4">
                      <div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
                        <div className="flex items-center gap-3">
                          <div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
                            <UserIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
                          </div>
                          <div>
                            <Typography
                              variant="h6"
                              className="text-gray-900 dark:text-gray-100 font-bold"
                            >
                              {getDisplayName(person)}
                            </Typography>
                            {person.father && (
                              <Typography
                                variant="body2"
                                className="text-gray-600 dark:text-gray-400 mt-1"
                              >
                                فرزند {person.father}
                              </Typography>
                            )}
                          </div>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              کد ملی
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {person.nationalcode}
                            </Typography>
                          </div>
                        </div>

                        {person.birthdate && (
                          <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                            <CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                            <div>
                              <Typography
                                variant="body2"
                                className="text-gray-500 dark:text-gray-400 text-xs"
                              >
                                تاریخ تولد
                              </Typography>
                              <Typography
                                variant="body1"
                                className="text-gray-900 dark:text-gray-100 font-medium"
                              >
                                {person.birthdate}
                              </Typography>
                            </div>
                          </div>
                        )}

                        {person.mobile && person.mobile.length > 0 && (
                          <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                            <PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0 mt-0.5" />
                            <div className="flex-1">
                              <Typography
                                variant="body2"
                                className="text-gray-500 dark:text-gray-400 text-xs mb-1"
                              >
                                شماره تلفن
                              </Typography>
                              <div className="flex flex-wrap gap-2">
                                {person.mobile.map((mobile, idx) => (
                                  <span
                                    key={idx}
                                    className="px-2 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300 rounded text-sm font-medium"
                                  >
                                    {mobile}
                                  </span>
                                ))}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>

                      {person.card && person.card.length > 0 && (
                        <div className="pt-2">
                          <div className="flex items-center gap-2 mb-3">
                            <CreditCardIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                            <Typography
                              variant="body2"
                              className="text-gray-700 dark:text-gray-300 font-semibold"
                            >
                              کارت های بانکی
                            </Typography>
                          </div>
                          <div className="flex flex-wrap gap-2">
                            {person.card.map((card, idx) => (
                              <motion.span
                                key={idx}
                                initial={{ opacity: 0, scale: 0.9 }}
                                animate={{ opacity: 1, scale: 1 }}
                                transition={{ delay: idx * 0.05 }}
                                className="px-3 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-lg text-sm font-mono border border-blue-200 dark:border-blue-800"
                              >
                                {card}
                              </motion.span>
                            ))}
                          </div>
                        </div>
                      )}

                      {person.info && person.info.length > 0 && (
                        <div className="pt-2">
                          <div className="flex items-center gap-2 mb-3">
                            <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                            <Typography
                              variant="body2"
                              className="text-gray-700 dark:text-gray-300 font-semibold"
                            >
                              اطلاعات جمع آوری شده توسط هوش مصنوعی
                            </Typography>
                          </div>
                          <div className="space-y-2">
                            {person.info.map((info, idx) => (
                              <motion.div
                                key={idx}
                                initial={{ opacity: 0, x: -10 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: idx * 0.05 }}
                                className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg border-r-4 border-primary-500"
                              >
                                <Typography
                                  variant="body2"
                                  className="text-gray-700 dark:text-gray-300"
                                >
                                  {info}
                                </Typography>
                              </motion.div>
                            ))}
                          </div>
                        </div>
                      )}
                    </Grid>
                  </div>
                </motion.div>
              ))}
            </Grid>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Person Registry Data */}
      <AnimatePresence mode="popLayout">
        {isLoadingRegistry && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6">
              <Typography
                variant="body1"
                className="text-gray-700 dark:text-gray-300 text-center"
              >
                در حال بارگذاری اطلاعات ثبت احوال...
              </Typography>
            </div>
          </motion.div>
        )}

        {personRegistryData && !isLoadingRegistry && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <Typography
              variant="body1"
              className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
            >
              استعلام از ثبت احوال
            </Typography>
            <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6">
              <Grid container column className="gap-4">
                <div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
                  <div className="flex items-center gap-3">
                    <div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
                      <UserIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
                    </div>
                    <div>
                      <Typography
                        variant="h6"
                        className="text-gray-900 dark:text-gray-100 font-bold"
                      >
                        {personRegistryData.firstName}{" "}
                        {personRegistryData.lastName}
                      </Typography>
                      {personRegistryData.fatherName && (
                        <Typography
                          variant="body2"
                          className="text-gray-600 dark:text-gray-400 mt-1"
                        >
                          فرزند {personRegistryData.fatherName}
                        </Typography>
                      )}
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                    <IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                    <div>
                      <Typography
                        variant="body2"
                        className="text-gray-500 dark:text-gray-400 text-xs"
                      >
                        کد ملی
                      </Typography>
                      <Typography
                        variant="body1"
                        className="text-gray-900 dark:text-gray-100 font-medium"
                      >
                        {personRegistryData.nationalCode}
                      </Typography>
                    </div>
                  </div>

                  {personRegistryData.birthDate && (
                    <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                      <CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                      <div>
                        <Typography
                          variant="body2"
                          className="text-gray-500 dark:text-gray-400 text-xs"
                        >
                          تاریخ تولد
                        </Typography>
                        <Typography
                          variant="body1"
                          className="text-gray-900 dark:text-gray-100 font-medium"
                        >
                          {personRegistryData.birthDate}
                        </Typography>
                      </div>
                    </div>
                  )}

                  {personRegistryData.city && (
                    <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                      <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                      <div>
                        <Typography
                          variant="body2"
                          className="text-gray-500 dark:text-gray-400 text-xs"
                        >
                          شهر
                        </Typography>
                        <Typography
                          variant="body1"
                          className="text-gray-900 dark:text-gray-100 font-medium"
                        >
                          {personRegistryData.city}
                          {personRegistryData.vilage &&
                            ` - ${personRegistryData.vilage}`}
                        </Typography>
                      </div>
                    </div>
                  )}

                  <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                    <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                    <div>
                      <Typography
                        variant="body2"
                        className="text-gray-500 dark:text-gray-400 text-xs"
                      >
                        جنسیت
                      </Typography>
                      <Typography
                        variant="body1"
                        className="text-gray-900 dark:text-gray-100 font-medium"
                      >
                        {personRegistryData.gender ? "مرد" : "زن"}
                      </Typography>
                    </div>
                  </div>

                  <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                    <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                    <div>
                      <Typography
                        variant="body2"
                        className="text-gray-500 dark:text-gray-400 text-xs"
                      >
                        وضعیت حیات
                      </Typography>
                      <Typography
                        variant="body1"
                        className="text-gray-900 dark:text-gray-100 font-medium"
                      >
                        {personRegistryData.isLive ? "زنده" : "فوت شده"}
                      </Typography>
                    </div>
                  </div>
                </div>
              </Grid>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Unit Registry Data */}
      <AnimatePresence mode="popLayout">
        {unitRegistryData.length > 0 && !isLoadingRegistry && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <Typography
              variant="body1"
              className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
            >
              استعلام واحد صنفی ({unitRegistryData.length})
            </Typography>
            <Grid container column className="gap-4">
              {unitRegistryData.map((unit, index) => (
                <motion.div
                  key={index}
                  custom={index}
                  variants={cardVariants}
                  initial="hidden"
                  animate="visible"
                  className="w-full"
                >
                  <div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
                    <Grid container column className="gap-4">
                      <div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
                        <div className="flex items-center gap-3">
                          <div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
                            <CreditCardIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
                          </div>
                          <div>
                            <Typography
                              variant="h6"
                              className="text-gray-900 dark:text-gray-100 font-bold"
                            >
                              {unit.title}
                            </Typography>
                            <Typography
                              variant="body2"
                              className="text-gray-600 dark:text-gray-400 mt-1"
                            >
                              {unit.fullname}
                            </Typography>
                          </div>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              کد ملی
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.layerTwo.nationalcode}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              شماره موبایل
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.layerTwo.mobilenumber}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              شماره تلفن
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.layerTwo.phonenumber}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <CreditCardIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              شماره پروانه
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.licenseNumber}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              نوع پروانه
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.licenseType}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              وضعیت پروانه
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.licenseStatus}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              تاریخ انقضا
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.licenseExpireDate}
                            </Typography>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
                          <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
                          <div>
                            <Typography
                              variant="body2"
                              className="text-gray-500 dark:text-gray-400 text-xs"
                            >
                              شهر / استان
                            </Typography>
                            <Typography
                              variant="body1"
                              className="text-gray-900 dark:text-gray-100 font-medium"
                            >
                              {unit.city} - {unit.state}
                            </Typography>
                          </div>
                        </div>
                      </div>

                      {unit.address && (
                        <div className="pt-2">
                          <div className="flex items-center gap-2 mb-3">
                            <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                            <Typography
                              variant="body2"
                              className="text-gray-700 dark:text-gray-300 font-semibold"
                            >
                              آدرس
                            </Typography>
                          </div>
                          <Typography
                            variant="body2"
                            className="text-gray-700 dark:text-gray-300 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg"
                          >
                            {unit.address}
                          </Typography>
                        </div>
                      )}

                      {unit.layerTwo.unionName && (
                        <div className="pt-2">
                          <div className="flex items-center gap-2 mb-3">
                            <InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                            <Typography
                              variant="body2"
                              className="text-gray-700 dark:text-gray-300 font-semibold"
                            >
                              نام اتحادیه
                            </Typography>
                          </div>
                          <Typography
                            variant="body2"
                            className="text-gray-700 dark:text-gray-300 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg"
                          >
                            {unit.layerTwo.unionName}
                          </Typography>
                        </div>
                      )}
                    </Grid>
                  </div>
                </motion.div>
              ))}
            </Grid>
          </motion.div>
        )}
      </AnimatePresence>
    </Grid>
  );
};

export default MainPlaceInfo;