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

'use client'

import { useEffect, useRef, useState, useCallback, memo } from 'react'
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
  Tooltip,
  Legend,
  Filler
} from 'chart.js'
import { Line } from 'react-chartjs-2'

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 CHART_OPTIONS = {
  responsive: true,
  animation: { duration: 0 },
  plugins: {
    legend: { labels: { color: '#e2e8f0', font: { size: 11 } } },
    title: {
      display: true,
      text: 'نمودار رشد گیاه',
      color: '#e2e8f0',
      font: { size: 14 }
    }
  },
  scales: {
    x: {
      ticks: { color: '#94a3b8', maxTicksLimit: 8 },
      grid: { color: 'rgba(148,163,184,0.1)' }
    },
    yHeight: {
      type: 'linear' as const,
      position: 'left' as const,
      min: 0,
      max: MAX_HEIGHT,
      ticks: { color: '#4a7c59' },
      grid: { color: 'rgba(148,163,184,0.1)' },
      title: { display: true, text: 'ارتفاع', color: '#4a7c59' }
    },
    yLeaf: {
      type: 'linear' as const,
      position: 'right' as const,
      min: 0,
      max: MAX_LEAVES,
      ticks: { color: '#f9c74f' },
      grid: { display: false },
      title: { display: true, text: 'برگ', color: '#f9c74f' }
    },
    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 GrowthChart = memo(function GrowthChart({
  heightHistory,
  leafHistory,
  yieldHistory,
  yieldRateHistory
}: {
  heightHistory: number[]
  leafHistory: number[]
  yieldHistory: number[]
  yieldRateHistory: number[]
}) {
  const labels = heightHistory.map((_, i) => `${i}s`)

  const data = {
    labels,
    datasets: [
      {
        label: 'ارتفاع (px)',
        data: heightHistory,
        borderColor: '#4a7c59',
        backgroundColor: 'rgba(74,124,89,0.10)',
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: 'yHeight'
      },
      {
        label: 'تعداد برگ',
        data: leafHistory,
        borderColor: '#f9c74f',
        backgroundColor: 'rgba(249,199,79,0.10)',
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: 'yLeaf'
      },
      {
        label: 'محصول (g)',
        data: yieldHistory,
        borderColor: '#f97316',
        backgroundColor: 'rgba(249,115,22,0.10)',
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        yAxisID: 'yYield'
      },
      {
        label: 'سرعت محصول (g/s)',
        data: yieldRateHistory,
        borderColor: '#a78bfa',
        backgroundColor: 'rgba(167,139,250,0.10)',
        fill: true,
        tension: 0.4,
        pointRadius: 0,
        borderDash: [4, 3],
        yAxisID: 'yYieldRate'
      }
    ]
  }

  return <Line data={data} options={CHART_OPTIONS} />
})

// ─── 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 isFinished = plant.height >= MAX_HEIGHT

  return (
    <div className='min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-slate-100 p-6'>
      <h1 className='text-3xl font-bold text-center mb-8 tracking-tight'>
        🌱 شبیه‌ساز رشد گیاه
      </h1>

      <div className='max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6'>

        {/* ── Left: Plant visualization ── */}
        <div className='lg:col-span-1 flex flex-col items-center gap-4'>
          <div className='bg-slate-800 border border-slate-700 rounded-2xl p-6 w-full flex flex-col items-center shadow-xl'>
            <PlantSVG plant={plant} tick={plant.tick} running={running} />

            {/* Stats */}
            <div className='mt-4 grid grid-cols-3 gap-2 w-full text-sm'>
              <div className='bg-green-900/40 border border-green-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-green-400 font-semibold text-base'>{Math.round(plant.height)}</div>
                <div className='text-slate-400 text-[10px]'>ارتفاع</div>
              </div>
              <div className='bg-yellow-900/40 border border-yellow-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-yellow-400 font-semibold text-base'>{plant.leaves.length}</div>
                <div className='text-slate-400 text-[10px]'>برگ</div>
              </div>
              <div className='bg-emerald-900/40 border border-emerald-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-emerald-400 font-semibold text-base'>{plant.branches.length}</div>
                <div className='text-slate-400 text-[10px]'>شاخه</div>
              </div>
              <div className='bg-red-900/40 border border-red-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-red-400 font-semibold text-base'>{plant.fruits.length}</div>
                <div className='text-slate-400 text-[10px]'>میوه</div>
              </div>
              <div className='bg-orange-900/40 border border-orange-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-orange-400 font-semibold text-base'>{plant.yield.toFixed(1)}</div>
                <div className='text-slate-400 text-[10px]'>محصول (g)</div>
              </div>
              <div className='bg-violet-900/40 border border-violet-700/40 rounded-xl p-2.5 text-center'>
                <div className='text-violet-400 font-semibold text-base'>{plant.yieldRate.toFixed(2)}</div>
                <div className='text-slate-400 text-[10px]'>سرعت (g/s)</div>
              </div>
            </div>

            {isFinished && (
              <div className='mt-3 text-yellow-300 text-sm font-medium animate-pulse'>
                🌼 گیاه به حداکثر رشد رسید!
              </div>
            )}
          </div>

          {/* Controls */}
          <div className='bg-slate-800 border border-slate-700 rounded-2xl p-5 w-full shadow-xl space-y-4'>
            <h2 className='font-semibold text-slate-300 text-base mb-1'>کنترل‌ها</h2>

            {/* Start / Stop / Reset */}
            <div className='flex gap-2'>
              <button
                onClick={() => setRunning(r => !r)}
                disabled={isFinished}
                className={`flex-1 py-2 rounded-xl font-semibold transition-all text-sm
                  ${running
                    ? 'bg-red-600 hover:bg-red-500'
                    : 'bg-green-600 hover:bg-green-500'}
                  disabled:opacity-40 disabled:cursor-not-allowed`}
              >
                {running ? '⏸ توقف' : '▶ شروع'}
              </button>
              <button
                onClick={() => { setRunning(false); reset() }}
                className='px-4 py-2 rounded-xl bg-slate-600 hover:bg-slate-500 text-sm font-semibold transition-all'
              >
                ↺ ریست
              </button>
            </div>

            {/* Speed slider */}
            <div>
              <label className='flex justify-between text-sm text-slate-400 mb-1'>
                <span>سرعت رشد</span>
                <span className='text-white font-medium'>{speed.toFixed(1)}×</span>
              </label>
              <input
                type='range' min={0.5} max={5} step={0.5}
                value={speed}
                onChange={e => setSpeed(Number(e.target.value))}
                className='w-full accent-green-500'
              />
            </div>

            {/* Light */}
            <div>
              <label className='flex justify-between text-sm text-slate-400 mb-1'>
                <span>☀️ نور</span>
                <span className='text-yellow-400 font-medium'>{env.light}%</span>
              </label>
              <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 accent-yellow-400'
              />
            </div>

            {/* Water */}
            <div>
              <label className='flex justify-between text-sm text-slate-400 mb-1'>
                <span>💧 آب</span>
                <span className='text-blue-400 font-medium'>{env.water}%</span>
              </label>
              <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 accent-blue-400'
              />
            </div>

            {/* Effective rate indicator */}
            <div className='bg-slate-700/50 rounded-xl p-3 text-xs text-slate-400'>
              نرخ رشد مؤثر:{' '}
              <span className='text-green-400 font-semibold'>
                {growthRate(env, speed).toFixed(2)}×
              </span>
            </div>
          </div>
        </div>

        {/* ── Right: Chart ── */}
        <div className='lg:col-span-2 bg-slate-800 border border-slate-700 rounded-2xl p-6 shadow-xl'>
          <GrowthChart
            heightHistory={heightHistory}
            leafHistory={leafHistory}
            yieldHistory={yieldHistory}
            yieldRateHistory={yieldRateHistory}
          />

          {/* Info cards */}
          <div className='mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm'>
            <div className='bg-slate-700/60 rounded-xl p-4 border border-slate-600'>
              <div className='text-slate-400 mb-1'>پیشرفت رشد</div>
              <div className='w-full bg-slate-600 rounded-full h-2 mb-1'>
                <div
                  className='bg-green-500 h-2 rounded-full transition-all'
                  style={{ width: `${(plant.height / MAX_HEIGHT) * 100}%` }}
                />
              </div>
              <div className='text-green-400 font-semibold'>
                {Math.round((plant.height / MAX_HEIGHT) * 100)}%
              </div>
            </div>

            <div className='bg-slate-700/60 rounded-xl p-4 border border-slate-600'>
              <div className='text-slate-400 mb-1'>وضعیت نور</div>
              <div className='w-full bg-slate-600 rounded-full h-2 mb-1'>
                <div
                  className='bg-yellow-400 h-2 rounded-full transition-all'
                  style={{ width: `${env.light}%` }}
                />
              </div>
              <div className='text-yellow-400 font-semibold'>{env.light}%</div>
            </div>

            <div className='bg-slate-700/60 rounded-xl p-4 border border-slate-600'>
              <div className='text-slate-400 mb-1'>وضعیت آب</div>
              <div className='w-full bg-slate-600 rounded-full h-2 mb-1'>
                <div
                  className='bg-blue-400 h-2 rounded-full transition-all'
                  style={{ width: `${env.water}%` }}
                />
              </div>
              <div className='text-blue-400 font-semibold'>{env.water}%</div>
            </div>

            <div className='bg-slate-700/60 rounded-xl p-4 border border-slate-600'>
              <div className='text-slate-400 mb-1'>محصول دهی</div>
              <div className='w-full bg-slate-600 rounded-full h-2 mb-1'>
                <div
                  className='bg-orange-400 h-2 rounded-full transition-all'
                  style={{ width: `${(plant.yield / MAX_YIELD) * 100}%` }}
                />
              </div>
              <div className='flex justify-between items-center'>
                <span className='text-orange-400 font-semibold'>{plant.yield.toFixed(1)}g</span>
                <span className='text-violet-400 text-xs'>{plant.yieldRate.toFixed(3)} g/s</span>
              </div>
            </div>
          </div>

          {/* Description */}
          <div className='mt-6 bg-slate-700/30 border border-slate-600/50 rounded-xl p-4 text-xs text-slate-400 leading-6'>
            <p>
              این شبیه‌ساز رشد گیاه را بر اساس سرعت پایه، میزان نور خورشید و آب دریافتی
              محاسبه می‌کند. هر برگ به صورت تدریجی روی ساقه ظاهر شده و با حرکت طبیعی
              در باد نمایش داده می‌شود. <strong className='text-slate-300'>محصول‌دهی (g)</strong> پس از ۲۰٪ رشد شروع شده
              و با تعداد برگ، نور و آب شتاب می‌گیرد. <strong className='text-slate-300'>سرعت محصول (g/s)</strong> نشان‌دهنده
              نرخ لحظه‌ای تولید است. نمودار تغییرات همه شاخص‌ها را در طول زمان ثبت می‌کند.
            </p>
          </div>
        </div>

      </div>
    </div>
  )
}