Frontend/src/views/dashboards/farm/plantSimulator/PlantSimulator.tsx

"use client";

import { useEffect, useRef, useState, useCallback, memo } from "react";
import { useTranslations } from "next-intl";
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
import { Line } from "react-chartjs-2";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid2";
import Button from "@mui/material/Button";

ChartJS.register(
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
  Tooltip,
  Legend,
  Filler,
);

// ─── Types ───────────────────────────────────────────────────────────────────

interface Leaf {
  id: number;
  side: "left" | "right";
  heightFraction: number;
  scale: number;
  swayOffset: number;
  length: number;
  branchId: number | null; // null = on main stem, number = on a branch
}

interface Branch {
  id: number;
  side: "left" | "right";
  heightFraction: number; // where on stem it starts (0..1)
  length: number; // branch length px
  angle: number; // base angle in degrees
  scale: number; // 0..1 grow-in
  swayOffset: number;
  thickness: number; // px
}

interface Fruit {
  id: number;
  branchId: number | null;
  leafId: number;
  side: "left" | "right";
  scale: number;
  swayOffset: number;
  color: string;
  size: number; // varied fruit radius
}

interface PlantState {
  height: number;
  leaves: Leaf[];
  branches: Branch[];
  fruits: Fruit[];
  tick: number;
  yield: number;
  yieldRate: number;
}

interface EnvironmentSettings {
  light: number;
  water: number;
}

// ─── Constants ───────────────────────────────────────────────────────────────

const MAX_HEIGHT = 280;
const MAX_YIELD = 500;
const SVG_W = 280;
const SVG_H = 400;
const STEM_X = SVG_W / 2;
const BASE_Y = SVG_H - 24;
const LEAF_INTERVAL_PX = 30;
const MAX_LEAVES = 14;
const MAX_BRANCHES = 6;
const FRUIT_COLORS = [
  "#ef4444",
  "#f97316",
  "#eab308",
  "#f472b6",
  "#a855f7",
  "#22c55e",
];

// ─── Helper: compute growth speed multiplier from env settings ────────────────

function growthRate(env: EnvironmentSettings, speed: number): number {
  const lightFactor = 0.3 + (env.light / 100) * 0.7;
  const waterFactor = 0.3 + (env.water / 100) * 0.7;
  return speed * lightFactor * waterFactor;
}

// Yield rate in g/s: leaves and height progress amplify yield production
function computeYieldRate(
  env: EnvironmentSettings,
  leafCount: number,
  heightProgress: number,
): number {
  const lightFactor = 0.2 + (env.light / 100) * 0.8;
  const waterFactor = 0.2 + (env.water / 100) * 0.8;
  const leafFactor = leafCount / MAX_LEAVES;
  // yield only starts after 20% growth and accelerates with more leaves
  const maturityFactor = Math.max(0, (heightProgress - 0.2) / 0.8);
  return parseFloat(
    (
      MAX_YIELD *
      0.012 *
      lightFactor *
      waterFactor *
      leafFactor *
      maturityFactor
    ).toFixed(3),
  );
}

// ─── Helpers: quadratic bezier point / tangent at t ─────────────────────────

function qBez(p0: number, p1: number, p2: number, t: number) {
  return (1 - t) * (1 - t) * p0 + 2 * (1 - t) * t * p1 + t * t * p2;
}

function qBezTan(p0: number, p1: number, p2: number, t: number) {
  return 2 * (1 - t) * (p1 - p0) + 2 * t * (p2 - p1);
}

// ─── Plant SVG Component ──────────────────────────────────────────────────────

function PlantSVG({
  plant,
  tick,
  running,
}: {
  plant: PlantState;
  tick: number;
  running: boolean;
}) {
  const stemTop = BASE_Y - plant.height;
  const progress = plant.height / MAX_HEIGHT;
  const stemW = 6 + Math.min(progress * 7, 7);

  const sway = Math.sin(tick / 55) * 3;

  // Stem control points — quadratic Bezier
  const s0x = STEM_X,
    s0y = BASE_Y;
  const s1x = STEM_X + sway * 0.4,
    s1y = stemTop + plant.height * 0.5;
  const s2x = STEM_X + sway,
    s2y = stemTop;

  // Get point on main stem at fraction t (0=base, 1=top)
  const stemPt = (t: number) => ({
    x: qBez(s0x, s1x, s2x, t),
    y: qBez(s0y, s1y, s2y, t),
  });

  // Get angle on main stem at t
  const stemAngle = (t: number) => {
    const dx = qBezTan(s0x, s1x, s2x, t);
    const dy = qBezTan(s0y, s1y, s2y, t);
    return (Math.atan2(dy, dx) * 180) / Math.PI;
  };

  // Get branch tip position
  const branchTip = (b: Branch) => {
    const base = stemPt(b.heightFraction);
    const dir = b.side === "left" ? -1 : 1;
    const bSway = Math.sin(tick / 30 + b.swayOffset) * 4 * b.scale;
    const rad = ((b.angle + bSway) * Math.PI) / 180;
    const len = b.length * b.scale;
    return {
      bx: base.x,
      by: base.y,
      tx: base.x + Math.cos(rad) * len * dir,
      ty: base.y + Math.sin(rad) * len,
      cx: base.x + Math.cos(rad) * len * 0.5 * dir,
      cy: base.y + Math.sin(rad) * len * 0.35 - 8 * b.scale,
    };
  };

  return (
    <svg
      width={SVG_W}
      height={SVG_H}
      viewBox={`0 0 ${SVG_W} ${SVG_H}`}
      className="drop-shadow-2xl"
    >
      <defs>
        <linearGradient id="sg" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stopColor="#24462e" />
          <stop offset="50%" stopColor="#3d7a4f" />
          <stop offset="100%" stopColor="#6ab870" />
        </linearGradient>
        <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#4a8c5a" />
          <stop offset="100%" stopColor="#2e5a38" />
        </linearGradient>
        <radialGradient id="soilG" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#b08030" />
          <stop offset="100%" stopColor="#4a2c0a" />
        </radialGradient>
        <filter id="fglow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <filter id="lsh" x="-30%" y="-30%" width="160%" height="160%">
          <feDropShadow
            dx="0.8"
            dy="1.2"
            stdDeviation="1.2"
            floodColor="#0a2010"
            floodOpacity="0.35"
          />
        </filter>
      </defs>

      {/* ── Floating pollen particles ── */}
      {running &&
        progress > 0.35 &&
        [0, 1, 2, 3, 4, 5].map((i) => {
          const px = STEM_X + Math.sin(tick / 28 + i * 1.1) * 40;
          const cycle = (tick * 0.35 + i * 30) % 80;
          const py = stemTop - 12 - cycle;
          return (
            <circle
              key={`p${i}`}
              cx={px}
              cy={py}
              r={1.4}
              fill="#fde68a"
              opacity={Math.max(0, 0.55 - cycle / 160)}
            />
          );
        })}

      {/* ── Soil mound ── */}
      <ellipse
        cx={STEM_X}
        cy={BASE_Y + 8}
        rx={58}
        ry={14}
        fill="url(#soilG)"
        opacity={0.9}
      />
      {[-24, -10, 4, 16, 28].map((dx) => (
        <line
          key={dx}
          x1={STEM_X + dx}
          y1={BASE_Y + 5}
          x2={STEM_X + dx + 5}
          y2={BASE_Y + 10}
          stroke="#2a1400"
          strokeWidth={0.8}
          opacity={0.35}
        />
      ))}
      {/* Small grass tufts */}
      {[-30, -14, 18, 32].map((dx, i) => (
        <path
          key={`grass${i}`}
          d={`M${STEM_X + dx} ${BASE_Y + 3} q${2} ${-6} ${0} ${-10} M${STEM_X + dx + 3} ${BASE_Y + 3} q${-1} ${-5} ${1} ${-8}`}
          stroke="#5a9a5a"
          strokeWidth={0.8}
          fill="none"
          opacity={0.4}
        />
      ))}

      {/* ── Roots ── */}
      {plant.height > 15 && (
        <g opacity={0.4 + progress * 0.15}>
          {[
            { dx: -22, dy: 22, w: 2.2, cx: -10, cy: 8 },
            { dx: 18, dy: 20, w: 1.8, cx: 8, cy: 10 },
            { dx: -8, dy: 24, w: 1.2, cx: -4, cy: 12 },
            { dx: 12, dy: 18, w: 1, cx: 6, cy: 14 },
          ].map((r, i) => (
            <path
              key={`root${i}`}
              d={`M${STEM_X} ${BASE_Y} Q${STEM_X + r.cx} ${BASE_Y + r.cy} ${STEM_X + r.dx} ${BASE_Y + r.dy}`}
              stroke="#3b2a12"
              strokeWidth={r.w}
              fill="none"
              strokeLinecap="round"
            />
          ))}
        </g>
      )}

      {/* ── Main stem (quadratic bezier) ── */}
      {plant.height > 0 && (
        <>
          <path
            d={`M${s0x} ${s0y} Q${s1x} ${s1y} ${s2x} ${s2y}`}
            stroke="url(#sg)"
            strokeWidth={stemW}
            fill="none"
            strokeLinecap="round"
          />
          {/* Stem highlight vein */}
          <path
            d={`M${s0x + 1.5} ${s0y - 6} Q${s1x + 1.5} ${s1y} ${s2x + 1.5} ${s2y + 6}`}
            stroke="rgba(160,220,140,0.2)"
            strokeWidth={1.8}
            fill="none"
            strokeLinecap="round"
          />
          {/* Stem node bumps — small circles at branch attachment points */}
          {plant.branches.map((b) => {
            const pt = stemPt(b.heightFraction);
            return (
              <circle
                key={`node${b.id}`}
                cx={pt.x}
                cy={pt.y}
                r={stemW * 0.5 + 1}
                fill="#3a6a42"
                opacity={b.scale * 0.6}
              />
            );
          })}
        </>
      )}

      {/* ── Branches (curved) ── */}
      {plant.branches.map((b) => {
        const { bx, by, tx, ty, cx, cy } = branchTip(b);
        const bw = b.thickness * b.scale;
        return (
          <g key={`br${b.id}`} opacity={b.scale}>
            <path
              d={`M${bx} ${by} Q${cx} ${cy} ${tx} ${ty}`}
              stroke="url(#bg)"
              strokeWidth={bw}
              fill="none"
              strokeLinecap="round"
            />
            {/* branch highlight */}
            <path
              d={`M${bx} ${by} Q${cx - 0.5} ${cy - 0.5} ${tx} ${ty}`}
              stroke="rgba(150,210,130,0.15)"
              strokeWidth={bw * 0.4}
              fill="none"
              strokeLinecap="round"
            />
            {/* small thorn/bud at tip */}
            <circle
              cx={tx}
              cy={ty}
              r={bw * 0.5 + 0.5}
              fill="#5a9a52"
              opacity={0.7}
            />
          </g>
        );
      })}

      {/* ── Leaves ── */}
      {plant.leaves.map((leaf) => {
        let ax: number, ay: number;
        if (leaf.branchId != null) {
          const branch = plant.branches.find((b) => b.id === leaf.branchId);
          if (!branch) return null;
          const tip = branchTip(branch);
          ax = tip.tx;
          ay = tip.ty;
        } else {
          const pt = stemPt(leaf.heightFraction);
          ax = pt.x;
          ay = pt.y;
        }

        const swayA = Math.sin(tick / 20 + leaf.swayOffset) * 6;
        const dir = leaf.side === "left" ? -1 : 1;
        const rot = dir * 35 + swayA;
        const lx = leaf.length * leaf.scale;
        const ly = leaf.length * 0.4 * leaf.scale;
        const hue = 110 + leaf.id * 3;
        const lit = 30 + leaf.id * 1.8;
        const c1 = `hsl(${hue},65%,${lit}%)`;
        const c2 = `hsl(${hue},55%,${lit + 14}%)`;

        return (
          <g
            key={`lf${leaf.id}`}
            transform={`translate(${ax},${ay}) rotate(${rot})`}
            filter="url(#lsh)"
            opacity={Math.min(leaf.scale * 1.4, 1)}
          >
            {/* Leaf shape — custom path for more natural look */}
            <path
              d={`M0,0 Q${dir * lx * 0.3},${-ly * 0.9} ${dir * lx},${-ly * 0.15}
                  Q${dir * lx * 0.55},${ly * 0.5} 0,0`}
              fill={c1}
            />
            {/* Midrib */}
            <line
              x1={0}
              y1={0}
              x2={dir * lx * 0.95}
              y2={-ly * 0.12}
              stroke={c2}
              strokeWidth={0.9}
              opacity={0.7}
            />
            {/* Side veins */}
            {[0.25, 0.45, 0.65, 0.8].map((t, vi) => {
              const vx = dir * lx * t * 0.95;
              const vy = -ly * 0.12 * t;
              return (
                <line
                  key={vi}
                  x1={vx}
                  y1={vy}
                  x2={vx + dir * lx * 0.12}
                  y2={vy - ly * (0.35 + vi * 0.08)}
                  stroke={c2}
                  strokeWidth={0.55}
                  opacity={0.45}
                />
              );
            })}
          </g>
        );
      })}

      {/* ── Fruits on branches and stem ── */}
      {plant.fruits.map((fruit) => {
        const leaf = plant.leaves.find((l) => l.id === fruit.leafId);
        if (!leaf) return null;

        let ox: number, oy: number;
        if (fruit.branchId != null) {
          const branch = plant.branches.find((b) => b.id === fruit.branchId);
          if (!branch) return null;
          const tip = branchTip(branch);
          ox = tip.tx;
          oy = tip.ty;
        } else {
          const pt = stemPt(leaf.heightFraction);
          ox = pt.x;
          oy = pt.y;
        }

        const fSway = Math.sin(tick / 25 + fruit.swayOffset) * 3;
        const dir = fruit.side === "left" ? -1 : 1;
        const fr = fruit.size * fruit.scale;
        const fx = ox + dir * (12 + fr) + fSway;
        const fy = oy + 4 * fruit.scale;

        return (
          <g
            key={`fr${fruit.id}`}
            filter="url(#fglow)"
            opacity={Math.min(fruit.scale * 1.3, 1)}
          >
            {/* Hanging stem */}
            <path
              d={`M${ox + dir * 3} ${oy} Q${(ox + fx) / 2} ${oy - 4} ${fx} ${fy - fr}`}
              stroke="#4a7c42"
              strokeWidth={1}
              fill="none"
              strokeLinecap="round"
            />
            {/* Fruit body */}
            <circle cx={fx} cy={fy} r={fr} fill={fruit.color} />
            {/* Depth gradient */}
            <circle
              cx={fx + fr * 0.15}
              cy={fy + fr * 0.15}
              r={fr * 0.7}
              fill="rgba(0,0,0,0.12)"
            />
            {/* Shine */}
            <circle
              cx={fx - fr * 0.25}
              cy={fy - fr * 0.3}
              r={fr * 0.3}
              fill="white"
              opacity={0.4}
            />
            {/* Calyx (small leaves on top) */}
            <ellipse
              cx={fx - 2}
              cy={fy - fr - 1}
              rx={fr * 0.35}
              ry={fr * 0.15}
              fill="#3d7a30"
              opacity={0.85}
              transform={`rotate(-15,${fx - 2},${fy - fr - 1})`}
            />
            <ellipse
              cx={fx + 2}
              cy={fy - fr - 1}
              rx={fr * 0.35}
              ry={fr * 0.15}
              fill="#4a8a3a"
              opacity={0.75}
              transform={`rotate(15,${fx + 2},${fy - fr - 1})`}
            />
          </g>
        );
      })}

      {/* ── Top bud → flower ── */}
      {progress > 0.55 &&
        (() => {
          const bs = Math.min((progress - 0.55) / 0.3, 1);
          const tx = s2x;
          const ty = s2y - 4;
          const ps = Math.sin(tick / 32) * 5;

          return (
            <g opacity={bs}>
              {/* Sepals (green base petals) */}
              {[0, 72, 144, 216, 288].map((deg) => {
                const r = ((deg + ps * 0.5) * Math.PI) / 180;
                return (
                  <ellipse
                    key={`sep${deg}`}
                    cx={tx + Math.cos(r) * 7 * bs}
                    cy={ty + Math.sin(r) * 7 * bs}
                    rx={4.5 * bs}
                    ry={2 * bs}
                    fill="#4a8c42"
                    opacity={0.6}
                    transform={`rotate(${deg},${tx + Math.cos(r) * 7 * bs},${ty + Math.sin(r) * 7 * bs})`}
                  />
                );
              })}
              {/* Petals — larger, appear after 80% */}
              {progress > 0.8 &&
                [0, 45, 90, 135, 180, 225, 270, 315].map((deg) => {
                  const petalScale = Math.min((progress - 0.8) / 0.15, 1);
                  const r = ((deg + ps) * Math.PI) / 180;
                  const pd = 10 * petalScale * bs;
                  return (
                    <ellipse
                      key={`pet${deg}`}
                      cx={tx + Math.cos(r) * pd}
                      cy={ty + Math.sin(r) * pd}
                      rx={5 * petalScale * bs}
                      ry={2.8 * petalScale * bs}
                      fill={deg % 90 === 0 ? "#fde68a" : "#fcd34d"}
                      opacity={0.9}
                      transform={`rotate(${deg + ps},${tx + Math.cos(r) * pd},${ty + Math.sin(r) * pd})`}
                    />
                  );
                })}
              {/* Centre */}
              <circle cx={tx} cy={ty} r={5.5 * bs} fill="#f9c74f" />
              <circle cx={tx} cy={ty} r={3 * bs} fill="#f3722c" />
              {/* Orbiting pollen */}
              {progress > 0.88 &&
                [0, 1, 2, 3, 4, 5].map((i) => {
                  const a = (tick / 18 + i * 1.05) % (Math.PI * 2);
                  const or = 13 * bs;
                  return (
                    <circle
                      key={`pln${i}`}
                      cx={tx + Math.cos(a) * or}
                      cy={ty + Math.sin(a) * or}
                      r={1.3}
                      fill="#fde68a"
                      opacity={0.65}
                    />
                  );
                })}
            </g>
          );
        })()}
    </svg>
  );
}

// ─── Growth Chart ─────────────────────────────────────────────────────────────

const GrowthChart = memo(function GrowthChart({
  heightHistory,
  leafHistory,
  yieldHistory,
  yieldRateHistory,
}: {
  heightHistory: number[];
  leafHistory: number[];
  yieldHistory: number[];
  yieldRateHistory: number[];
}) {
  const t = useTranslations("plantSimulator");

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    animation: { duration: 0 },
    plugins: {
      legend: { labels: { font: { size: 11 } } },
      title: {
        display: true,
        text: t("chartTitle"),
        font: { size: 14 },
      },
    },
    scales: {
      x: {
        ticks: { maxTicksLimit: 8 },
      },
      yHeight: {
        type: "linear" as const,
        position: "left" as const,
        min: 0,
        max: MAX_HEIGHT,
        title: { display: true, text: t("chartHeight") },
      },
      yLeaf: {
        type: "linear" as const,
        position: "right" as const,
        min: 0,
        max: MAX_LEAVES,
        grid: { display: false },
        title: { display: true, text: t("chartLeaves") },
      },
      yYield: {
        type: "linear" as const,
        position: "left" as const,
        min: 0,
        max: MAX_YIELD,
        display: false,
        grid: { display: false },
      },
      yYieldRate: {
        type: "linear" as const,
        position: "right" as const,
        min: 0,
        display: false,
        grid: { display: false },
      },
    },
  };

  const labels = heightHistory.map((_, i) => `${i}s`);

  const data = {
    labels,
    datasets: [
      {
        label: t("chartHeightPx"),
        data: heightHistory,
        borderColor: "#4a7c59",
        backgroundColor: "rgba(74,124,89,0.10)",
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: "yHeight",
      },
      {
        label: t("chartLeafCount"),
        data: leafHistory,
        borderColor: "#f9c74f",
        backgroundColor: "rgba(249,199,79,0.10)",
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: "yLeaf",
      },
      {
        label: t("chartYield"),
        data: yieldHistory,
        borderColor: "#f97316",
        backgroundColor: "rgba(249,115,22,0.10)",
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: "yYield",
      },
      {
        label: t("chartYieldRate"),
        data: yieldRateHistory,
        borderColor: "#a78bfa",
        backgroundColor: "rgba(167,139,250,0.10)",
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        borderDash: [4, 3],
        yAxisID: "yYieldRate",
      },
    ],
  };

  return (
    <Box
      className="is-full"
      sx={{
        minHeight: { xs: 380, sm: 340, md: 320 },
        height: { xs: 380, sm: 340, md: 320 },
      }}
    >
      <Line data={data} options={chartOptions} />
    </Box>
  );
});

// ─── Main Component ───────────────────────────────────────────────────────────

const INIT_PLANT: PlantState = {
  height: 0,
  leaves: [],
  branches: [],
  fruits: [],
  tick: 0,
  yield: 0,
  yieldRate: 0,
};

export default function PlantSimulator() {
  const [running, setRunning] = useState(false);
  const [speed, setSpeed] = useState(1.5);
  const [env, setEnv] = useState<EnvironmentSettings>({ light: 75, water: 65 });

  const [plant, setPlant] = useState<PlantState>(INIT_PLANT);
  const [heightHistory, setHeightHistory] = useState<number[]>([0]);
  const [leafHistory, setLeafHistory] = useState<number[]>([0]);
  const [yieldHistory, setYieldHistory] = useState<number[]>([0]);
  const [yieldRateHistory, setYieldRateHistory] = useState<number[]>([0]);

  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const tickRef = useRef(0);
  const historyIntervalRef = useRef<ReturnType<typeof setInterval> | null>(
    null,
  );
  const plantRef = useRef<PlantState>(plant);
  plantRef.current = plant;

  const reset = useCallback(() => {
    setPlant(INIT_PLANT);
    setHeightHistory([0]);
    setLeafHistory([0]);
    setYieldHistory([0]);
    setYieldRateHistory([0]);
    tickRef.current = 0;
  }, []);

  // Stop simulation when plant reaches max height
  useEffect(() => {
    if (plant.height >= MAX_HEIGHT && running) setRunning(false);
  }, [plant.height, running]);

  // Main simulation tick at ~20fps (reduced from 30fps to prevent browser overload)
  useEffect(() => {
    if (!running) {
      if (intervalRef.current) clearInterval(intervalRef.current);
      return;
    }

    intervalRef.current = setInterval(() => {
      tickRef.current += 1;
      const t = tickRef.current;

      setPlant((prev) => {
        const rate = growthRate(env, speed);
        const newHeight = Math.min(prev.height + rate * 0.4, MAX_HEIGHT);
        const hp = newHeight / MAX_HEIGHT;

        // ── Branches: appear after 30% growth ──
        const newBranches = [...prev.branches];
        const expectedBranches = Math.min(
          Math.floor((hp - 0.3) / 0.12),
          MAX_BRANCHES,
        );
        while (newBranches.length < Math.max(0, expectedBranches)) {
          const bid = newBranches.length;
          newBranches.push({
            id: bid,
            side: bid % 2 === 0 ? "left" : "right",
            heightFraction: 0.25 + bid * 0.11,
            length: 30 + Math.random() * 25,
            angle: -(25 + Math.random() * 20),
            scale: 0,
            swayOffset: Math.random() * Math.PI * 2,
            thickness: 2.5 + Math.random() * 1.5,
          });
        }
        const grownBranches = newBranches.map((b) => ({
          ...b,
          scale: Math.min(b.scale + 0.012, 1),
        }));

        // ── Leaves: on main stem + on branch tips ──
        const newLeaves = [...prev.leaves];
        const expectedStemLeaves = Math.min(
          Math.floor(newHeight / LEAF_INTERVAL_PX),
          MAX_LEAVES,
        );

        // Stem leaves (fixed: use 'added' counter; nextId-newLeaves.length was always 0 → infinite loop)
        const stemLeafCount = newLeaves.filter(
          (l) => l.branchId === null,
        ).length;
        let nextId = newLeaves.length;
        let added = 0;
        while (stemLeafCount + added < expectedStemLeaves) {
          const idx = stemLeafCount + added;
          newLeaves.push({
            id: nextId,
            side: idx % 2 === 0 ? "left" : "right",
            heightFraction: (idx + 1) / (expectedStemLeaves + 1),
            scale: 0,
            swayOffset: Math.random() * Math.PI * 2,
            length: 16 + Math.random() * 14,
            branchId: null,
          });
          nextId++;
          added++;
        }

        // Branch-tip leaves (1 per mature branch, once branch scale > 0.6)
        for (const b of grownBranches) {
          if (b.scale > 0.6) {
            const hasLeaf = newLeaves.some((l) => l.branchId === b.id);
            if (!hasLeaf) {
              newLeaves.push({
                id: nextId++,
                side: b.side,
                heightFraction: b.heightFraction,
                scale: 0,
                swayOffset: Math.random() * Math.PI * 2,
                length: 14 + Math.random() * 10,
                branchId: b.id,
              });
            }
          }
        }

        const grownLeaves = newLeaves.map((l) => ({
          ...l,
          scale: Math.min(l.scale + 0.018, 1),
        }));

        // ── Yield ──
        const currentYieldRate = computeYieldRate(env, grownLeaves.length, hp);
        const newYield = Math.min(
          prev.yield + currentYieldRate * 0.033,
          MAX_YIELD,
        );

        // ── Fruits: appear after 45% on branches, then some on stem ──
        const newFruits = [...prev.fruits];
        const maxFruits = Math.min(
          Math.floor((hp - 0.45) / 0.08),
          grownBranches.length + 3,
        );
        let fNextId = newFruits.length;
        while (newFruits.length < Math.max(0, maxFruits)) {
          const fid = fNextId++;
          // First fruits on branches, then on stem leaves
          const onBranch = fid < grownBranches.length;
          const targetBranch = onBranch ? grownBranches[fid] : null;
          const targetLeaf = onBranch
            ? grownLeaves.find((l) => l.branchId === targetBranch!.id) ||
              grownLeaves[fid]
            : grownLeaves[Math.min(fid, grownLeaves.length - 1)];
          if (!targetLeaf) break;
          newFruits.push({
            id: fid,
            branchId: onBranch ? targetBranch!.id : null,
            leafId: targetLeaf.id,
            side: targetLeaf.side === "left" ? "right" : "left",
            scale: 0,
            swayOffset: Math.random() * Math.PI * 2,
            color: FRUIT_COLORS[fid % FRUIT_COLORS.length],
            size: 5 + Math.random() * 4,
          });
        }

        const grownFruits = newFruits.map((f) => ({
          ...f,
          scale: Math.min(f.scale + 0.014, 1),
        }));

        return {
          height: newHeight,
          leaves: grownLeaves,
          branches: grownBranches,
          fruits: grownFruits,
          tick: t,
          yield: newYield,
          yieldRate: currentYieldRate,
        };
      });
    }, 50);

    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [running, speed, env]);

  // History logging every 1 second (reads from plantRef to avoid setPlant side-effects)
  useEffect(() => {
    if (!running) {
      if (historyIntervalRef.current) clearInterval(historyIntervalRef.current);
      return;
    }

    historyIntervalRef.current = setInterval(() => {
      const p = plantRef.current;
      setHeightHistory((h) => [...h.slice(-59), Math.round(p.height)]);
      setLeafHistory((l) => [...l.slice(-59), p.leaves.length]);
      setYieldHistory((y) => [...y.slice(-59), parseFloat(p.yield.toFixed(1))]);
      setYieldRateHistory((r) => [...r.slice(-59), p.yieldRate]);
    }, 1000);

    return () => {
      if (historyIntervalRef.current) clearInterval(historyIntervalRef.current);
    };
  }, [running]);

  const t = useTranslations("plantSimulator");
  const isFinished = plant.height >= MAX_HEIGHT;

  const statItems: {
    value: string | number;
    label: string;
    color: "success" | "warning" | "error" | "secondary";
  }[] = [
    { value: Math.round(plant.height), label: t("height"), color: "success" },
    { value: plant.leaves.length, label: t("leaves"), color: "warning" },
    { value: plant.branches.length, label: t("branches"), color: "success" },
    { value: plant.fruits.length, label: t("fruits"), color: "error" },
    { value: plant.yield.toFixed(1), label: t("yield"), color: "warning" },
    {
      value: plant.yieldRate.toFixed(2),
      label: t("yieldRate"),
      color: "secondary",
    },
  ];

  const primaryPanelSx = {
    height: "100%",
    minHeight: { xs: "auto", lg: 780 },
  };

  return (
    <Box className="flex flex-col gap-6 min-is-0 is-full">
      <Grid container spacing={6} className="min-is-0 is-full">
        {/* ── Plant visualization ── */}
        <Grid size={{ xs: 12, lg: 6 }} className="flex">
          <Card
            className="is-full flex flex-col items-center p-6"
            sx={primaryPanelSx}
          >
            <CardContent
              className="flex flex-col items-center gap-4 is-full p-0"
              sx={{ flex: 1 }}
            >
              <PlantSVG plant={plant} tick={plant.tick} running={running} />

              <Grid container spacing={2} className="is-full">
                {statItems.map((item, idx) => (
                  <Grid key={idx} size={{ xs: 4 }}>
                    <Card variant="outlined" className="text-center p-2.5">
                      <Typography variant="h6" color={item.color}>
                        {item.value}
                      </Typography>
                      <Typography variant="caption" color="text.secondary">
                        {item.label}
                      </Typography>
                    </Card>
                  </Grid>
                ))}
              </Grid>

              {isFinished && (
                <Typography
                  variant="body2"
                  color="warning.main"
                  className="font-medium animate-pulse"
                >
                  🌼 {t("maxGrowthReached")}
                </Typography>
              )}
            </CardContent>
          </Card>
        </Grid>

        {/* ── Chart ── */}
        <Grid size={{ xs: 12, lg: 6 }} className="flex">
          <Card className="p-6 flex flex-col" sx={primaryPanelSx}>
            <CardContent sx={{ flex: 1 }}>
              <GrowthChart
                heightHistory={heightHistory}
                leafHistory={leafHistory}
                yieldHistory={yieldHistory}
                yieldRateHistory={yieldRateHistory}
              />

              <Grid container spacing={4} className="mt-6">
                <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
                  <Card variant="outlined" className="p-4">
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      className="mbe-1"
                    >
                      {t("progressGrowth")}
                    </Typography>
                    <Box
                      className="w-full rounded-full overflow-hidden bg-action-hover mbe-1"
                      sx={{ height: 8 }}
                    >
                      <Box
                        className="bg-success rounded-full h-full transition-all"
                        sx={{ width: `${(plant.height / MAX_HEIGHT) * 100}%` }}
                      />
                    </Box>
                    <Typography
                      variant="body2"
                      color="success.main"
                      fontWeight="bold"
                    >
                      {Math.round((plant.height / MAX_HEIGHT) * 100)}%
                    </Typography>
                  </Card>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
                  <Card variant="outlined" className="p-4">
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      className="mbe-1"
                    >
                      {t("lightStatus")}
                    </Typography>
                    <Box
                      className="w-full rounded-full overflow-hidden bg-action-hover mbe-1"
                      sx={{ height: 8 }}
                    >
                      <Box
                        className="bg-warning rounded-full h-full transition-all"
                        sx={{ width: `${env.light}%` }}
                      />
                    </Box>
                    <Typography
                      variant="body2"
                      color="warning.main"
                      fontWeight="bold"
                    >
                      {env.light}%
                    </Typography>
                  </Card>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
                  <Card variant="outlined" className="p-4">
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      className="mbe-1"
                    >
                      {t("waterStatus")}
                    </Typography>
                    <Box
                      className="w-full rounded-full overflow-hidden bg-action-hover mbe-1"
                      sx={{ height: 8 }}
                    >
                      <Box
                        className="bg-info rounded-full h-full transition-all"
                        sx={{ width: `${env.water}%` }}
                      />
                    </Box>
                    <Typography
                      variant="body2"
                      color="info.main"
                      fontWeight="bold"
                    >
                      {env.water}%
                    </Typography>
                  </Card>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
                  <Card variant="outlined" className="p-4">
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      className="mbe-1"
                    >
                      {t("yieldStatus")}
                    </Typography>
                    <Box
                      className="w-full rounded-full overflow-hidden bg-action-hover mbe-1"
                      sx={{ height: 8 }}
                    >
                      <Box
                        className="bg-warning rounded-full h-full transition-all"
                        sx={{ width: `${(plant.yield / MAX_YIELD) * 100}%` }}
                      />
                    </Box>
                    <Box className="flex justify-between items-center">
                      <Typography
                        variant="body2"
                        color="warning.main"
                        fontWeight="bold"
                      >
                        {plant.yield.toFixed(1)}g
                      </Typography>
                      <Typography variant="caption" color="secondary.main">
                        {plant.yieldRate.toFixed(3)} g/s
                      </Typography>
                    </Box>
                  </Card>
                </Grid>
              </Grid>

              <Card variant="outlined" className="mt-6 p-4">
                <Typography
                  variant="body2"
                  color="text.secondary"
                  className="leading-6"
                >
                  {t("description")}
                </Typography>
              </Card>
            </CardContent>
          </Card>
        </Grid>
      </Grid>

      <Grid container spacing={6} className="min-is-0 is-full">
        {/* ── Controls ── */}
        <Grid size={12} className="flex">
          <Card className="is-full p-5" sx={{ width: "100%" }}>
            <CardContent className="space-y-4 p-0">
              <Typography
                variant="subtitle1"
                component="h2"
                className="font-semibold"
              >
                {t("controls")}
              </Typography>

              <Box className="flex gap-2">
                <Button
                  variant="contained"
                  color={running ? "error" : "success"}
                  onClick={() => setRunning((r) => !r)}
                  disabled={isFinished}
                  fullWidth
                >
                  {running ? `⏸ ${t("stop")}` : `▶ ${t("start")}`}
                </Button>
                <Button
                  variant="outlined"
                  color="secondary"
                  onClick={() => {
                    setRunning(false);
                    reset();
                  }}
                >
                  ↺ {t("reset")}
                </Button>
              </Box>

              <Box>
                <Typography
                  variant="body2"
                  color="text.secondary"
                  className="flex justify-between mbe-1"
                >
                  <span>{t("growthSpeed")}</span>
                  <span className="font-medium">{speed.toFixed(1)}×</span>
                </Typography>
                <input
                  type="range"
                  min={0.5}
                  max={5}
                  step={0.5}
                  value={speed}
                  onChange={(e) => setSpeed(Number(e.target.value))}
                  className="w-full"
                />
              </Box>

              <Box>
                <Typography
                  variant="body2"
                  color="text.secondary"
                  className="flex justify-between mbe-1"
                >
                  <span>☀️ {t("light")}</span>
                  <span className="font-medium">{env.light}%</span>
                </Typography>
                <input
                  type="range"
                  min={0}
                  max={100}
                  step={5}
                  value={env.light}
                  onChange={(e) =>
                    setEnv((prev) => ({
                      ...prev,
                      light: Number(e.target.value),
                    }))
                  }
                  className="w-full"
                />
              </Box>

              <Box>
                <Typography
                  variant="body2"
                  color="text.secondary"
                  className="flex justify-between mbe-1"
                >
                  <span>💧 {t("water")}</span>
                  <span className="font-medium">{env.water}%</span>
                </Typography>
                <input
                  type="range"
                  min={0}
                  max={100}
                  step={5}
                  value={env.water}
                  onChange={(e) =>
                    setEnv((prev) => ({
                      ...prev,
                      water: Number(e.target.value),
                    }))
                  }
                  className="w-full"
                />
              </Box>

              <Card variant="outlined" className="p-3">
                <Typography variant="caption" color="text.secondary">
                  {t("effectiveRate")}{" "}
                  <Typography
                    component="span"
                    variant="caption"
                    color="success.main"
                    fontWeight="bold"
                  >
                    {growthRate(env, speed).toFixed(2)}×
                  </Typography>
                </Typography>
              </Card>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  );
}