// Cartoon-style game tracker — winding path with summit destination
// Inspired by MyTrakz / Candy Crush map. Monochromatic teal palette.

function Tracker({ milestones, currentIdx, avatarFace, avatarImage, onSelectMilestone, accent, pathTitle }) {
  // Positions along a hand-tuned winding path, percentages.
  // The path zig-zags from bottom (start) to top (goal).
  const positions = [
    { x: 80, y: 86 },  // 0 - start
    { x: 30, y: 76 },  // 1
    { x: 70, y: 66 },  // 2
    { x: 22, y: 56 },  // 3
    { x: 68, y: 46 },  // 4
    { x: 50, y: 22 },  // 5 - goal (at top)
  ];

  const N = milestones.length;
  const pts = positions.slice(0, N);

  return (
    <div className="cartoon-scene">
      {/* Sky background with clouds */}
      <div className="cartoon-sky">
        <Cloud style={{ top: '12%', left: '8%', width: 90 }} />
        <Cloud style={{ top: '18%', left: '76%', width: 70 }} />
        <Cloud style={{ top: '30%', left: '14%', width: 60 }} />
        <Cloud style={{ top: '38%', left: '82%', width: 80 }} />
        <Cloud style={{ top: '52%', left: '4%', width: 70 }} />
        <Cloud style={{ top: '60%', left: '88%', width: 55 }} />

        {/* Sun (one big primary circle behind summit) */}
        <div className="cartoon-sun" />
      </div>

      {/* SVG path layer */}
      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        className="cartoon-path-svg"
      >
        <defs>
          <linearGradient id="pathSolid" x1="0" y1="100%" x2="0" y2="0%">
            <stop offset="0%" stopColor="#a855f7"/>
            <stop offset="50%" stopColor="#818cf8"/>
            <stop offset="100%" stopColor="#a78bfa"/>
          </linearGradient>
        </defs>

        {/* Dashed path (the road) */}
        <path
          d={buildPathArr(pts)}
          stroke="rgba(250, 245, 255, 0.85)"
          strokeWidth="1.6"
          strokeLinecap="round"
          fill="none"
          vectorEffect="non-scaling-stroke"
          strokeDasharray="0.7 1.4"
          opacity="0.7"
        />
        {/* Glowing base path underneath */}
        <path
          d={buildPathArr(pts)}
          stroke="url(#pathSolid)"
          strokeWidth="4"
          strokeLinecap="round"
          fill="none"
          vectorEffect="non-scaling-stroke"
          opacity="0.5"
          filter="blur(2px)"
        />
      </svg>

      {/* Summit at top: goal building + flag */}
      <Summit pathTitle={pathTitle} />

      {/* Start marker (bottom) — "$$$" reward indicator */}
      <div className="cartoon-start">
        <div className="cartoon-start-pill">START · YOU</div>
      </div>

      {/* Milestone nodes */}
      {milestones.map((m, i) => {
        const p = pts[i];
        if (!p) return null;
        const isCurrent = i === currentIdx;
        const isDone = i < currentIdx;
        const isLocked = i > currentIdx;
        const isGoal = i === N - 1;
        return (
          <button
            key={i}
            onClick={() => !isLocked && onSelectMilestone(i)}
            disabled={isLocked}
            style={{
              position: 'absolute',
              left: `${p.x}%`,
              top: `${p.y}%`,
              transform: 'translate(-50%, -50%)',
              cursor: isLocked ? 'not-allowed' : 'pointer',
              background: 'none', border: 'none', padding: 0,
              animation: `fadeUp 0.5s ease-out ${0.1 + i * 0.06}s both`,
              zIndex: isCurrent ? 6 : 3,
            }}
          >
            <MilestoneCircle
              milestone={m}
              index={i}
              isCurrent={isCurrent}
              isDone={isDone}
              isLocked={isLocked}
              isGoal={isGoal}
            />
          </button>
        );
      })}

      {/* Cartoon avatar at current milestone */}
      {pts[currentIdx] && (
        <div
          className="cartoon-avatar-wrap"
          style={{
            left: `${pts[currentIdx].x}%`,
            top: `${pts[currentIdx].y}%`,
          }}
        >
          <Avatar face={avatarFace} image={avatarImage} />
        </div>
      )}
    </div>
  );
}

function buildPathArr(pts) {
  if (pts.length < 2) return `M ${pts[0].x} ${pts[0].y}`;
  let d = `M ${pts[0].x} ${pts[0].y}`;
  for (let i = 1; i < pts.length; i++) {
    const prev = pts[i - 1];
    const cur = pts[i];
    const cpY = (prev.y + cur.y) / 2;
    d += ` C ${prev.x} ${cpY}, ${cur.x} ${cpY}, ${cur.x} ${cur.y}`;
  }
  return d;
}

function Cloud({ style }) {
  return (
    <div className="cartoon-cloud" style={style}>
      <div className="cartoon-cloud-puff a"/>
      <div className="cartoon-cloud-puff b"/>
      <div className="cartoon-cloud-puff c"/>
    </div>
  );
}

function Summit({ pathTitle }) {
  return (
    <div className="cartoon-summit">
      {/* Flag */}
      <div className="cartoon-flag">
        <div className="cartoon-flag-pole"/>
        <div className="cartoon-flag-fabric">
          <div className="cartoon-flag-text">Goal</div>
        </div>
      </div>
      {/* Stylized building (geometric AI-temple) */}
      <div className="cartoon-building">
        <div className="cartoon-building-tower"/>
        <div className="cartoon-building-base"/>
        <div className="cartoon-building-roof"/>
      </div>
      {/* Hill / ground at summit */}
      <div className="cartoon-summit-hill"/>
      {/* Role banner below the summit */}
      <div className="cartoon-summit-banner">{pathTitle}</div>
    </div>
  );
}

function MilestoneCircle({ milestone, index, isCurrent, isDone, isLocked, isGoal }) {
  const size = isGoal ? 60 : (isCurrent ? 56 : 48);
  return (
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      {/* Pulse ring for current */}
      {isCurrent && (
        <div className="cartoon-milestone-pulse" style={{
          width: size + 16, height: size + 16,
          marginTop: 0,
        }}/>
      )}
      <div className={`cartoon-milestone ${isDone ? 'done' : ''} ${isCurrent ? 'current' : ''} ${isLocked ? 'locked' : ''} ${isGoal ? 'goal' : ''}`}
        style={{ width: size, height: size }}>
        <div className="cartoon-milestone-inner">
          {isLocked ? <Icon.Lock /> : isDone ? <Icon.Check style={{ width: 18, height: 18 }} /> : isGoal ? <Icon.Flag style={{ width: 22, height: 22 }} /> : (index + 1)}
        </div>
      </div>
      {/* Label */}
      <div className={`cartoon-milestone-label ${isLocked ? 'locked' : ''}`}>
        {milestone.title}
      </div>
    </div>
  );
}

function Avatar({ face, image }) {
  return (
    <div className="cartoon-avatar">
      {/* You-tag */}
      <div className="cartoon-avatar-tag">YOU</div>
      <div className="cartoon-avatar-tag-tip"/>
      {/* Body */}
      <div className="cartoon-avatar-body">
        <div className={`cartoon-avatar-head ${image ? 'has-image' : ''}`}>
          {image
            ? <img src={image} alt="Your avatar" className="cartoon-avatar-img"/>
            : <span className="cartoon-avatar-face">{face || '🙂'}</span>}
        </div>
        <div className="cartoon-avatar-torso"/>
        <div className="cartoon-avatar-shadow"/>
      </div>
    </div>
  );
}

window.Tracker = Tracker;
window.Avatar = Avatar;