const PICTOGRAM_BASE = "assets/pictograms";

const V2Pictograms = {
  mascot: {
    ready: `${PICTOGRAM_BASE}/mascot-ready.png`,
    think: `${PICTOGRAM_BASE}/mascot-think.png`,
    safe: `${PICTOGRAM_BASE}/mascot-safe.png`,
    point: `${PICTOGRAM_BASE}/mascot-point.png`,
    listen: `${PICTOGRAM_BASE}/mascot-listen.png`,
    mark: `${PICTOGRAM_BASE}/mascot-mark.png`,
    compare: `${PICTOGRAM_BASE}/mascot-compare.png`,
    present: `${PICTOGRAM_BASE}/mascot-present.png`,
  },
  object: {
    sun: `${PICTOGRAM_BASE}/icon-sun.png`,
    satellite: `${PICTOGRAM_BASE}/icon-satellite.png`,
    dish: `${PICTOGRAM_BASE}/icon-dish.png`,
    signal: `${PICTOGRAM_BASE}/icon-signal.png`,
    evidence: `${PICTOGRAM_BASE}/icon-evidence.png`,
  },
};

function resolvePictogram(asset) {
  if (!asset) return V2Pictograms.object.signal;
  if (asset.includes("/")) return asset;
  return V2Pictograms.mascot[asset] || V2Pictograms.object[asset] || V2Pictograms.object.signal;
}

function MascotPose({ pose = "ready", className = "" }) {
  return (
    <img
      className={`mascot-pose ${className}`}
      src={V2Pictograms.mascot[pose] || V2Pictograms.mascot.ready}
      alt=""
      aria-hidden="true"
    />
  );
}

function TargetBadge({ scenario, compact = false }) {
  return (
    <div className={`target-badge ${compact ? "compact" : ""}`} data-scenario={scenario.kind}>
      <img src={scenario.targetAsset} alt="" aria-hidden="true" />
      <span>
        <small>这次看</small>
        <strong>{scenario.targetName}</strong>
      </span>
    </div>
  );
}

function VisualInstruction({ scenario, instruction, ageBand, className = "" }) {
  const steps = instruction.steps || [];
  return (
    <section
      className={`visual-instruction ${className}`}
      aria-label={`${instruction.verb}。${instruction.cue || ""}`}
      data-scenario={scenario.kind}
    >
      <div className="visual-hero-art" aria-hidden="true">
        <span className="target-orbit-line"></span>
        <MascotPose pose={instruction.pose} />
        <img className="visual-target-art" src={scenario.targetAsset} alt="" />
      </div>
      <div className="visual-instruction-copy">
        <span>现在要做</span>
        <strong>{instruction.verb}</strong>
        {ageBand === "9-12" && instruction.cue ? <p>{instruction.cue}</p> : null}
      </div>
      {steps.length ? (
        <div className="instruction-step-strip" aria-label="看图步骤">
          {steps.map((step, index) => (
            <div className="instruction-step" key={`${step.label}-${index}`}>
              <img src={resolvePictogram(step.asset)} alt="" aria-hidden="true" />
              <strong>{step.label}</strong>
            </div>
          ))}
        </div>
      ) : null}
    </section>
  );
}

function PictureChoiceArt({ kind = "rise" }) {
  const patterns = {
    rise: [24, 42, 68, 92],
    flat: [54, 56, 53, 55],
    fall: [92, 68, 42, 24],
    bell: [22, 48, 92, 48, 22],
    leftHigh: [88, 72, 38, 30],
    rightHigh: [30, 38, 72, 88],
    same: [52, 54, 52, 54],
    uncertain: [36, 74, 44, 68],
    doppler: [86, 68, 50, 32, 18],
    wideBlock: [18, 20, 72, 76, 73, 20],
    pulse: [18, 20, 96, 20, 18],
  };
  const bars = patterns[kind] || patterns.rise;
  return (
    <span className={`picture-choice-art ${kind}`} aria-hidden="true">
      <span className="picture-bars">
        {bars.map((height, index) => <i key={index} style={{ "--bar-height": `${height}%` }}></i>)}
      </span>
    </span>
  );
}

function EvidenceCounter({ count, max = 3 }) {
  return (
    <div className="evidence-counter" role="status" aria-label={`已经留下 ${count} 个证据标记`}>
      {Array.from({ length: max }, (_, index) => (
        <span className={index < count ? "filled" : ""} key={index} aria-hidden="true">✦</span>
      ))}
    </div>
  );
}

Object.assign(window, {
  V2Pictograms,
  resolvePictogram,
  MascotPose,
  TargetBadge,
  VisualInstruction,
  PictureChoiceArt,
  EvidenceCounter,
});