"use client";

import { useMemo } from "react";
import { useRouter, useSearchParams } from "next/navigation";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

import PlantProductionPage from "@views/dashboards/farm/PlantProductionPage";

const YieldHarvestPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

  const selectionSummary = useMemo(() => {
    const from = searchParams.get("from");
    const planType = searchParams.get("planType");
    const planId = searchParams.get("planId");
    const planName = searchParams.get("planName");
    const relatedType = searchParams.get("relatedType");
    const relatedPlanId = searchParams.get("relatedPlanId");
    const relatedPlanName = searchParams.get("relatedPlanName");

    if (!from || !planType || !planId || !planName || !relatedType || !relatedPlanId || !relatedPlanName) {
      return null;
    }

    return {
      from,
      planType,
      planId,
      planName,
      relatedType,
      relatedPlanId,
      relatedPlanName,
    };
  }, [searchParams]);

  const planContext = useMemo(() => {
    if (!selectionSummary) return undefined;

    const context: {
      irrigationPlanId?: string;
      fertilizationPlanId?: string;
    } = {};

    if (selectionSummary.planType === "irrigation") {
      context.irrigationPlanId = selectionSummary.planId;
    } else {
      context.fertilizationPlanId = selectionSummary.planId;
    }

    if (selectionSummary.relatedType === "irrigation") {
      context.irrigationPlanId = selectionSummary.relatedPlanId;
    } else {
      context.fertilizationPlanId = selectionSummary.relatedPlanId;
    }

    return context;
  }, [selectionSummary]);

  const handleBack = () => {
    const from = selectionSummary?.from;

    if (from === "irrigation-plan") {
      router.push("/irrigation-plan");
      return;
    }

    if (from === "fertilization-plan") {
      router.push("/fertilization-plan");
      return;
    }

    router.back();
  };

  return (
    <Stack spacing={6}>
      {selectionSummary ? (
        <Card variant="outlined">
          <CardContent>
            <Stack
              direction={{ xs: "column", md: "row" }}
              spacing={2}
              alignItems={{ xs: "stretch", md: "center" }}
              justifyContent="space-between"
            >
              <Box>
                <Typography variant="h5">تحلیل عملکرد و برداشت</Typography>
                <Typography color="text.secondary">
                  بر اساس انتخاب برنامه‌ها وارد این صفحه شده‌اید.
                </Typography>
              </Box>

              <Button
                variant="outlined"
                color="secondary"
                startIcon={<i className="tabler-arrow-right text-[18px]" />}
                onClick={handleBack}
              >
                بازگشت به صفحه قبل
              </Button>
            </Stack>

            <Stack direction={{ xs: "column", md: "row" }} spacing={1.5} useFlexGap flexWrap="wrap" sx={{ mt: 3 }}>
              <Chip
                variant="tonal"
                color="primary"
                label={`برنامه ${selectionSummary.planType === "irrigation" ? "آبیاری" : "کوددهی"}: ${selectionSummary.planName}`}
              />
              <Chip
                variant="tonal"
                color="success"
                label={`برنامه ${selectionSummary.relatedType === "irrigation" ? "آبیاری" : "کوددهی"} انتخاب‌شده: ${selectionSummary.relatedPlanName}`}
              />
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      <PlantProductionPage planContext={planContext} />
    </Stack>
  );
};

export default YieldHarvestPage;