import React, { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Textfield from "../components/Textfeild/Textfeild";
import { useApiMutation } from "../utils/useApiRequest";
import { motion, AnimatePresence, Variants } from "framer-motion";
import Typography from "../components/Typography/Typography";
import { useToast } from "../hooks/useToast";
import {
  UserIcon,
  IdentificationIcon,
  PhoneIcon,
  CalendarIcon,
  CreditCardIcon,
  InformationCircleIcon,
  ClipboardDocumentIcon,
} from "@heroicons/react/24/outline";
import Button from "../components/Button/Button";
import Checkbox from "../components/CheckBox/CheckBox";

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 NationalInfo: React.FC = () => {
  const [searchValue, setSearchValue] = useState("");
  const [searchResults, setSearchResults] = useState<PersonData[]>([]);
  const [personRegistryChecked, setPersonRegistryChecked] = useState(false);
  const [unitRegistryChecked, setUnitRegistryChecked] = useState(false);
  const [personRegistryData, setPersonRegistryData] =
    useState<PersonRegistryData | null>(null);
  const [unitRegistryData, setUnitRegistryData] = useState<UnitRegistryData[]>(
    []
  );
  const showToast = useToast();

  const searchMutation = 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",
  });

  const handleSearch = async () => {
    const trimmedValue = searchValue.trim();

    if (!trimmedValue) {
      showToast("لطفا مقدار جستجو را وارد کنید", "error");
      return;
    }

    let searchField: "mobile" | "nationalcode";
    if (trimmedValue.length === 11 && trimmedValue.startsWith("09")) {
      searchField = "mobile";
    } else if (trimmedValue.length === 10) {
      searchField = "nationalcode";
    } else {
      showToast(
        "لطفا 10 رقم (کد ملی) یا 11 رقم (شماره موبایل) وارد کنید",
        "error"
      );
      return;
    }

    try {
      const result = await searchMutation.mutateAsync({
        searchfield: searchField,
        value: trimmedValue,
      });

      if (result?.data && result.data.length > 0) {
        setSearchResults(result.data);
      } else {
        setSearchResults([]);
        showToast("نتیجه‌ای یافت نشد", "info");
      }

      let nationalCodeForRegistry: string | null = null;

      if (trimmedValue.length === 10) {
        nationalCodeForRegistry = trimmedValue;
      } else if (result?.data && result.data.length > 0) {
        const personWithNationalCode = result.data.find(
          (person) => person.nationalcode && person.nationalcode.length === 10
        );
        if (personWithNationalCode) {
          nationalCodeForRegistry = personWithNationalCode.nationalcode;
        }
      }

      if (personRegistryChecked) {
        if (!nationalCodeForRegistry) {
          showToast("کد ملی برای استعلام ثبت احوال یافت نشد", "error");
          setPersonRegistryData(null);
        } else {
          try {
            const personResult = await personRegistryMutation.mutateAsync({
              type: "person",
              info: nationalCodeForRegistry,
            });
            if (personResult?.status && personResult?.data) {
              setPersonRegistryData(personResult.data);
            } else {
              setPersonRegistryData(null);
              showToast("نتیجه‌ای از ثبت احوال یافت نشد", "info");
            }
          } catch (error: any) {
            console.error("Person registry error:", error);
            showToast(
              error?.response?.data?.message || "خطا در استعلام ثبت احوال",
              "error"
            );
            setPersonRegistryData(null);
          }
        }
      } else {
        setPersonRegistryData(null);
      }

      if (unitRegistryChecked) {
        if (!nationalCodeForRegistry) {
          showToast("کد ملی برای استعلام واحد صنفی یافت نشد", "error");
          setUnitRegistryData([]);
        } else {
          try {
            const unitResult = await unitRegistryMutation.mutateAsync({
              type: "guild",
              info: nationalCodeForRegistry,
            });
            const unitsCandidate =
              unitResult?.data ?? (Array.isArray(unitResult) ? unitResult : []);
            setUnitRegistryData(
              Array.isArray(unitsCandidate) ? unitsCandidate : []
            );
          } catch (error: any) {
            console.error("Unit registry error:", error);
            showToast(
              error?.response?.data?.message || "خطا در استعلام واحد صنفی",
              "error"
            );
            setUnitRegistryData([]);
          }
        }
      } else {
        setUnitRegistryData([]);
      }
    } catch (error: any) {
      console.error("Search error:", error);
      showToast(error?.response?.data?.message || "خطا در جستجو", "error");
      setSearchResults([]);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    const numericValue = value.replace(/\D/g, "").slice(0, 11);
    setSearchValue(numericValue);
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

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

  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",
      },
    }),
    exit: {
      opacity: 0,
      scale: 0.95,
      transition: { duration: 0.2 },
    },
  };

  const useClipboard = () => {
    const showToast = useToast();
    const copyToClipboard = async (text: string, label?: string) => {
      try {
        await navigator.clipboard.writeText(text);
        showToast(label ? `${label} کپی شد` : "کپی شد", "success");
      } catch {
        showToast("خطا در کپی کردن به کلیپ‌بورد", "error");
      }
    };
    return copyToClipboard;
  };

  const CopyIconButton: React.FC<{
    text: string;
    label?: string;
    className?: string;
  }> = ({ text, label, className }) => {
    const copyToClipboard = useClipboard();
    return (
      <button
        type="button"
        onClick={() => copyToClipboard(text, label)}
        title="کپی به کلیپ‌بورد"
        className={
          className ??
          "ml-2 inline-flex items-center justify-center p-1 rounded hover:bg-gray-100 dark:hover:bg-dark-600 transition"
        }
      >
        <ClipboardDocumentIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
      </button>
    );
  };

  return (
    <Grid container column className="gap-4 p-4 max-w-6xl mx-auto">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.1 }}
        className="w-full"
      >
        <Grid
          container
          column
          className="gap-4 p-6 bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600"
        >
          <Grid container className="gap-2 items-center justify-center">
            <Grid container className="flex-1" column>
              <Textfield
                placeholder="کد ملی یا شماره موبایل"
                value={searchValue}
                onChange={handleInputChange}
                onKeyPress={handleKeyPress}
                fullWidth
              />
            </Grid>
            <Button
              onClick={handleSearch}
              disabled={
                searchMutation.isPending ||
                personRegistryMutation.isPending ||
                unitRegistryMutation.isPending
              }
              className="px-6 py-2.5"
            >
              {searchMutation.isPending ||
              personRegistryMutation.isPending ||
              unitRegistryMutation.isPending
                ? "در حال جستجو..."
                : "جستجو"}
            </Button>
          </Grid>
          <Typography
            variant="body2"
            className="text-gray-500 dark:text-gray-400 text-xs"
          >
            شماره موبایل باید با 09 آغاز شود
          </Typography>
          <Grid container className="gap-4 justify-center">
            <Checkbox
              label="استعلام از ثبت احوال"
              checked={personRegistryChecked}
              onChange={(e) => setPersonRegistryChecked(e.target.checked)}
            />
            <Checkbox
              label="استعلام واحد صنفی"
              checked={unitRegistryChecked}
              onChange={(e) => setUnitRegistryChecked(e.target.checked)}
            />
          </Grid>
        </Grid>
      </motion.div>

      <AnimatePresence mode="popLayout">
        {searchResults.length > 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="w-full"
          >
            <Typography
              variant="body1"
              className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
            >
              نتایج جستجو ({searchResults.length})
            </Typography>

            <Grid container column className="gap-4">
              {searchResults.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 flex items-center"
                            >
                              {getDisplayName(person)}
                              {/* کپی نام کامل */}
                              <CopyIconButton
                                text={getDisplayName(person)}
                                label="نام"
                                className="ml-2"
                              />
                            </Typography>
                            {person.father && (
                              <Typography
                                variant="body2"
                                className="text-gray-600 dark:text-gray-400 mt-1 flex items-center"
                              >
                                فرزند {person.father}
                                <CopyIconButton
                                  text={person.father}
                                  label="نام پدر"
                                  className="ml-2"
                                />
                              </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>
                            <div className="flex items-center gap-2">
                              <Typography
                                variant="body1"
                                className="text-gray-900 dark:text-gray-100 font-medium"
                              >
                                {person.nationalcode}
                              </Typography>
                              {person.nationalcode && (
                                <CopyIconButton
                                  text={person.nationalcode}
                                  label="کد ملی"
                                  className="ml-2"
                                />
                              )}
                            </div>
                          </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>
                              <div className="flex items-center gap-2">
                                <Typography
                                  variant="body1"
                                  className="text-gray-900 dark:text-gray-100 font-medium"
                                >
                                  {person.birthdate}
                                </Typography>
                                <CopyIconButton
                                  text={person.birthdate}
                                  label="تاریخ تولد"
                                  className="ml-2"
                                />
                              </div>
                            </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="inline-flex items-center gap-1 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}
                                    <CopyIconButton
                                      text={mobile}
                                      label="شماره تلفن"
                                    />
                                  </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="inline-flex items-center gap-1 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}
                                <CopyIconButton
                                  text={card}
                                  label="شماره کارت"
                                />
                              </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 flex items-start justify-between"
                              >
                                <Typography
                                  variant="body2"
                                  className="text-gray-700 dark:text-gray-300"
                                >
                                  {info}
                                </Typography>
                                <CopyIconButton
                                  text={info}
                                  label="اطلاعات"
                                  className="ml-2"
                                />
                              </motion.div>
                            ))}
                          </div>
                        </div>
                      )}
                    </Grid>
                  </div>
                </motion.div>
              ))}
            </Grid>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence mode="popLayout">
        {personRegistryData && (
          <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>

      <AnimatePresence mode="popLayout">
        {unitRegistryData.length > 0 && (
          <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"
                  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">
                            <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 NationalInfo;
