import { useParams } from "@tanstack/react-router";
import { Bars3Icon, CubeIcon, SparklesIcon } from "@heroicons/react/24/outline";
import { useApiRequest } from "../utils/useApiRequest";
import { formatJustDate, formatJustTime } from "../utils/formatTime";
import ShowMoreInfo from "../components/ShowMoreInfo/ShowMoreInfo";
import { Grid } from "../components/Grid/Grid";
import Typography from "../components/Typography/Typography";
import Table from "../components/Table/Table";

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

export default function TagDistribtutionDetails() {
  const { id } = useParams({ strict: false });

  const { data } = useApiRequest({
    api: `/tag/web/api/v1/tag_distribution_batch/${id}/`,
    method: "get",
    queryKey: ["tagBatchInnerDashboard", id],
    enabled: !!id,
  });

  const dist = data?.distributions;

  return (
    <Grid container column className="gap-4 mt-2">
      <Grid isDashboard>
        <Table
          isDashboard
          title="مشخصات توزیع پلاک"
          noSearch
          noPagination
          columns={[
            "شناسه توزیع",
            "تاریخ ثبت",
            "توزیع کننده",
            "دریافت کننده",
            "تعداد کل پلاک",
            "پلاک های توزیع شده",
            "پلاک های باقیمانده",
            "نوع توزیع",
            "جزئیات توزیع",
          ]}
          rows={[
            [
              data?.dist_batch_identity ?? "-",
              `${formatJustDate(data?.create_date) ?? "-"} (${
                formatJustDate(data?.create_date)
                  ? (formatJustTime(data?.create_date) ?? "-")
                  : "-"
              })`,
              data?.assigner_org?.name ?? "-",
              data?.assigned_org?.name ?? "-",
              data?.total_tag_count?.toLocaleString() ?? "-",
              data?.total_distributed_tag_count?.toLocaleString() ?? "-",
              data?.remaining_tag_count?.toLocaleString() ?? "-",
              data?.distribution_type === "batch"
                ? "توزیع گروهی"
                : "توزیع تصادفی",
              <ShowMoreInfo key={data?.id} title="جزئیات توزیع">
                <Grid container column className="gap-4 w-full">
                  {dist?.map((opt: any, index: number) => (
                    <Grid
                      key={index}
                      container
                      column
                      className="gap-3 w-full rounded-xl border border-gray-200 dark:border-gray-700 p-4"
                    >
                      <Grid container className="gap-2 items-center">
                        <SparklesIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
                        <Typography variant="body2" className="font-medium">
                          گونه:
                        </Typography>
                        <Typography
                          variant="body2"
                          className="text-gray-700 dark:text-gray-300"
                        >
                          {speciesMap[opt?.species_code] ?? "-"}
                        </Typography>
                      </Grid>

                      {data?.distribution_type === "batch" &&
                        opt?.serial_from != null && (
                          <Grid container className="gap-2 items-center">
                            <Bars3Icon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
                            <Typography variant="body2" className="font-medium">
                              بازه سریال:
                            </Typography>
                            <Typography
                              variant="body2"
                              className="text-gray-600 dark:text-gray-400"
                            >
                              از {opt?.serial_from ?? "-"} تا{" "}
                              {opt?.serial_to ?? "-"}
                            </Typography>
                          </Grid>
                        )}

                      <Grid container className="gap-2 items-center">
                        <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
                        <Typography variant="body2" className="font-medium">
                          تعداد پلاک:
                        </Typography>
                        <Typography
                          variant="body2"
                          className="text-gray-700 dark:text-gray-300"
                        >
                          {opt?.total_tag_count?.toLocaleString() ?? "-"}
                        </Typography>
                      </Grid>
                      <Grid container className="gap-2 items-center">
                        <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
                        <Typography variant="body2" className="font-medium">
                          پلاک های توزیع شده:
                        </Typography>
                        <Typography
                          variant="body2"
                          className="text-gray-700 dark:text-gray-300"
                        >
                          {opt?.distributed_number?.toLocaleString() ?? "-"}
                        </Typography>
                      </Grid>
                      <Grid container className="gap-2 items-center">
                        <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
                        <Typography variant="body2" className="font-medium">
                          پلاک های باقیمانده:
                        </Typography>
                        <Typography
                          variant="body2"
                          className="text-gray-700 dark:text-gray-300"
                        >
                          {opt?.remaining_number?.toLocaleString() ?? "-"}
                        </Typography>
                      </Grid>
                    </Grid>
                  ))}
                </Grid>
              </ShowMoreInfo>,
            ],
          ]}
        />
      </Grid>
    </Grid>
  );
}
