import { useEffect, useState } from "react";
import { useApiRequest } from "../../utils/useApiRequest";
import { Grid } from "../../components/Grid/Grid";
import Table from "../../components/Table/Table";
import Button from "../../components/Button/Button";
import { useModalStore } from "../../context/zustand-store/appStore";
import { Popover } from "../../components/PopOver/PopOver";
import { Tooltip } from "../../components/Tooltip/Tooltip";
import { SubmitNewTags } from "../../partials/tagging/SubmitNewTags";
import { useNavigate } from "@tanstack/react-router";
import { TAGGING } from "../../routes/paths";
import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
import { TableButton } from "../../components/TableButton/TableButton";
import AutoComplete from "../../components/AutoComplete/AutoComplete";

const speciesMap: Record<number, string> = {
  1: "گاو",
  2: "گاومیش",
  3: "شتر",
  4: "گوسفند",
  5: "بز",
};

export default function Taggings() {
  const { openModal } = useModalStore();
  const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
  const [tagsTableData, setTagsTableData] = useState<any[]>([]);
  const [selectedSpecie, setSelectedSpecie] = useState<
    (string | number)[] | any
  >([]);

  const navigate = useNavigate();

  const { data: tagsData, refetch } = useApiRequest({
    api: `/tag/web/api/v1/tag_batch/?species_code=${
      selectedSpecie.length ? selectedSpecie[0] : ""
    }`,
    method: "get",
    queryKey: ["tagsList", tableInfo, selectedSpecie],
    params: { ...tableInfo },
  });

  const { data: tagDashboardData, refetch: updateDashboard } = useApiRequest({
    api: "/tag/web/api/v1/tag_batch/main_dashboard/",
    method: "get",
    queryKey: ["tagDashboard"],
  });

  const handleUpdate = () => {
    refetch();
    updateDashboard();
  };

  useEffect(() => {
    if (tagsData?.results) {
      const formattedData = tagsData.results.map((item: any, index: number) => {
        return [
          tableInfo.page === 1
            ? index + 1
            : index + tableInfo.page_size * (tableInfo.page - 1) + 1,
          item?.organization?.name || "بدون سازمان",
          item?.species_code === 1
            ? "گاو"
            : item?.species_code === 2
              ? "گاومیش"
              : item?.species_code === 3
                ? "شتر"
                : item?.species_code === 4
                  ? "گوسفند"
                  : item?.species_code === 5
                    ? "بز"
                    : "نامشخص",
          item?.serial_from || "-",
          item?.serial_to || "-",
          item?.total_distributed_tags || 0,
          item?.total_remaining_tags || 0,
          <Popover key={item.id}>
            <Tooltip title="مشاهده پلاک ها" position="right">
              <Button
                variant="detail"
                page="tagging_detail"
                access="Show-Tagging-Detail"
                onClick={() => {
                  const path =
                    TAGGING +
                    "/" +
                    item?.id +
                    "/" +
                    item?.serial_from +
                    "/" +
                    item?.serial_to;
                  navigate({ to: path });
                }}
              />
            </Tooltip>
            <Tooltip title="ویرایش" position="right">
              <Button
                variant="edit"
                page="livestock_farmers"
                access="Edit-Rancher"
                onClick={() => {
                  openModal({
                    title: "ثبت پلاک جدید",
                    content: (
                      <SubmitNewTags getData={handleUpdate} item={item} />
                    ),
                  });
                }}
              />
            </Tooltip>
            <DeleteButtonForPopOver
              page="tagging"
              access="Delete-Tag"
              api={`/tag/web/api/v1/tag_batch/${item?.id}/`}
              getData={refetch}
            />
          </Popover>,
        ];
      });
      setTagsTableData(formattedData);
    } else {
      setTagsTableData([]);
    }
  }, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);

  const { data: speciesData } = useApiRequest({
    api: "/livestock/web/api/v1/livestock_species",
    method: "get",
    params: { page: 1, pageSize: 1000 },
    queryKey: ["species"],
  });

  const speciesOptions = () => {
    return speciesData?.results?.map((opt: any) => {
      return {
        key: opt?.value,
        value: opt?.name,
      };
    });
  };

  return (
    <Grid container column className="gap-4 mt-2 rtl">
      <Grid>
        <Button
          size="small"
          variant="submit"
          page="tagging"
          access="Create-Tag"
          onClick={() => {
            openModal({
              title: "ثبت پلاک جدید",
              content: <SubmitNewTags getData={handleUpdate} />,
            });
          }}
        >
          ثبت پلاک جدید
        </Button>
      </Grid>

      <Grid isDashboard>
        <Table
          isDashboard
          title="خلاصه اطلاعات"
          noPagination
          noSearch
          columns={[
            "تعداد گروه پلاک",
            "پلاک‌های تولیدشده",
            "گروه پلاک های دارای توزیع",
            "پلاک توزیع شده",
            "پلاک باقی‌مانده",
            "جزئیات گونه ها",
          ]}
          rows={[
            [
              tagDashboardData?.batch_count?.toLocaleString() || 0,
              tagDashboardData?.tag_count_created_by_batch?.toLocaleString() ||
                0,
              tagDashboardData?.has_distributed_batches_number?.toLocaleString() ||
                0,
              tagDashboardData?.total_distributed_tags?.toLocaleString() || 0,
              tagDashboardData?.total_remaining_tags?.toLocaleString() || 0,
              <TableButton
                key="species-stats"
                size="small"
                onClick={() =>
                  openModal({
                    title: "آمار گونه‌ای",
                    isFullSize: true,
                    content: (
                      <BatchBySpeciesModal
                        batchData={
                          tagDashboardData?.batch_data_by_species || []
                        }
                        onRowAction={(row) => {
                          openModal({
                            title: `جزئیات ${
                              speciesMap[row?.species_code] ?? "-"
                            }`,
                            content: (
                              <div className="space-y-3">
                                <div className="flex items-center justify-between text-sm">
                                  <span className="text-gray-600 dark:text-gray-300">
                                    تعداد بچ
                                  </span>
                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {row?.batch_count?.toLocaleString?.() ?? 0}
                                  </span>
                                </div>
                                <div className="flex items-center justify-between text-sm">
                                  <span className="text-gray-600 dark:text-gray-300">
                                    پلاک تولید شده
                                  </span>
                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {row?.tag_count_created_by_batch?.toLocaleString?.() ??
                                      0}
                                  </span>
                                </div>
                                <div className="flex items-center justify-between text-sm">
                                  <span className="text-gray-600 dark:text-gray-300">
                                    پلاک توزیع شده
                                  </span>
                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {row?.total_distributed_tags?.toLocaleString?.() ??
                                      0}
                                  </span>
                                </div>
                                <div className="flex items-center justify-between text-sm">
                                  <span className="text-gray-600 dark:text-gray-300">
                                    پلاک باقی‌مانده
                                  </span>
                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {row?.total_remaining_tags?.toLocaleString?.() ??
                                      0}
                                  </span>
                                </div>
                                <div className="flex items-center justify-between text-sm">
                                  <span className="text-gray-600 dark:text-gray-300">
                                    بچ‌های توزیع‌شده
                                  </span>
                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {row?.has_distributed_batches_number?.toLocaleString?.() ??
                                      0}
                                  </span>
                                </div>
                              </div>
                            ),
                          });
                        }}
                      />
                    ),
                  })
                }
              >
                مشاهده
              </TableButton>,
            ],
          ]}
        />
      </Grid>
      <Grid container className="items-center gap-2">
        <Grid>
          {speciesOptions() && (
            <AutoComplete
              data={speciesOptions()}
              selectedKeys={selectedSpecie}
              onChange={setSelectedSpecie}
              title="گونه"
            />
          )}
        </Grid>
      </Grid>
      <Table
        className="mt-2"
        onChange={setTableInfo}
        count={tagsData?.count || 0}
        isPaginated
        title="پلاک کوبی"
        columns={[
          "ردیف",
          "سازمان ثبت کننده",
          "گونه",
          "از بازه سریال",
          "تا بازه سریال",
          "پلاک های توزیع شده",
          "پلاک های باقیمانده",
          "عملیات",
        ]}
        rows={tagsTableData}
      />
    </Grid>
  );
}

function BatchBySpeciesModal({
  batchData = [],
}: {
  batchData: Array<any>;
  onRowAction?: (row: any, index: number) => void;
}) {
  return (
    <div className="w-full">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {batchData?.map((row, idx) => {
          const speciesName = speciesMap[row?.species_code] ?? "-";
          return (
            <div
              key={idx}
              className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-4 flex flex-col"
            >
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-primary/70"></div>
                  <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
                    {speciesName}
                  </span>
                </div>
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600 dark:text-gray-300">
                    تعداد گروه پلاک
                  </span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                    {row?.batch_count?.toLocaleString?.() ?? 0}
                  </span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600 dark:text-gray-300">
                    گروه پلاک های توزیع‌شده
                  </span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                    {row?.has_distributed_batches_number?.toLocaleString?.() ??
                      0}
                  </span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600 dark:text-gray-300">
                    پلاک تولید شده
                  </span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                    {row?.tag_count_created_by_batch?.toLocaleString?.() ?? 0}
                  </span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600 dark:text-gray-300">
                    پلاک توزیع شده
                  </span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                    {row?.total_distributed_tags?.toLocaleString?.() ?? 0}
                  </span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600 dark:text-gray-300">
                    پلاک باقی‌مانده
                  </span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">
                    {row?.total_remaining_tags?.toLocaleString?.() ?? 0}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
