import type { CSSProperties } from "react";
import type { ChapterStepProps } from "../../registry/types";
import { OperationCue } from "../../components/OperationCue";
import "./WeightManagement.css";

type StepVisual = "mobile" | "desktop";

type StoryStep = {
  eyebrow: string;
  title: string;
  story: string;
  value: string;
  image: string;
  visual: StepVisual;
  cue: {
    x: number;
    y: number;
    label: string;
  };
  metrics: string[];
  position?: string;
  scrollDistance?: number;
};

const steps: StoryStep[] = [
  {
    eyebrow: "01 / 场景引入",
    title: "员工想管理体重，但每天不知道怎么做",
    story: "小王有健康意识，却很难判断每天吃多少、动多少，以及坚持以后效果怎么看。",
    value: "把员工日常饮食运动行为，和管理方持续健康运营目标连接起来。",
    image: "/weight-management/figure-01.png",
    visual: "mobile",
    cue: { x: 50, y: 82, label: "体重管理入口" },
    metrics: ["员工侧：清晰行动", "管理侧：可持续运营", "目标：效果可量化"],
  },
  {
    eyebrow: "02 / 个人画像",
    title: "先建立健康档案，让推荐贴合日常",
    story: "平台了解基础信息、饮食偏好、忌口和运动习惯，后续建议才不再一刀切。",
    value: "客户可以面向不同人群提供更精准的健康服务。",
    image: "/weight-management/figure-02.png",
    visual: "mobile",
    cue: { x: 74, y: 12, label: "完善档案" },
    metrics: ["基础信息", "饮食偏好", "运动习惯"],
    position: "top",
    scrollDistance: 1540,
  },
  {
    eyebrow: "03 / 可信数据",
    title: "对接体脂秤，直接看到身体数据结果",
    story: "体重、BMI、体脂率等指标沉淀到体重档案里，员工能看到身体变化。",
    value: "管理方也能基于可信数据评估项目效果，而不是只看是否打卡。",
    image: "/weight-management/figure-03.jpeg",
    visual: "mobile",
    cue: { x: 52, y: 26, label: "身体指标" },
    metrics: ["体重", "BMI", "体脂率"],
    position: "top",
    scrollDistance: 560,
  },
  {
    eyebrow: "04 / 方案生成",
    title: "从模糊目标，到可执行周期方案",
    story: "平台把饮食、运动和生活建议放进一个周期里，让员工知道每天如何执行。",
    value: "健康活动从零散提醒，升级为有计划、有周期、可复盘的服务。",
    image: "/weight-management/figure-04.jpeg",
    visual: "mobile",
    cue: { x: 50, y: 29, label: "管理方案" },
    metrics: ["饮食建议", "运动安排", "生活方式"],
    position: "top",
    scrollDistance: 1220,
  },
  {
    eyebrow: "05 / 每日首页",
    title: "每天打开首页，知道今天吃动是否平衡",
    story: "摄入、消耗、还可摄入和营养素集中展示，员工能及时调整下一餐或运动。",
    value: "降低日常执行的不确定感，也提升平台日活和健康参与率。",
    image: "/weight-management/figure-05.jpeg",
    visual: "mobile",
    cue: { x: 50, y: 25, label: "还可摄入" },
    metrics: ["摄入", "消耗", "还可摄入"],
    position: "top",
    scrollDistance: 550,
  },
  {
    eyebrow: "06 / 餐食反馈",
    title: "一餐一反馈，让饮食管理落到行为",
    story: "员工记录饮食后，平台把餐食转化为热量和营养素分析。",
    value: "健康管理从宣教进入真实餐食行为，每餐都能得到反馈。",
    image: "/weight-management/figure-06.jpeg",
    visual: "mobile",
    cue: { x: 50, y: 39, label: "营养结构" },
    metrics: ["蛋白质", "脂肪", "碳水"],
    position: "top",
    scrollDistance: 420,
  },
  {
    eyebrow: "07 / 复盘报告",
    title: "日报和阶段报告，让员工看到坚持效果",
    story: "营养日报展示当天饮食结构，阶段报告呈现一段时间内的变化和改善建议。",
    value: "员工改善过程有据可看，项目也便于阶段性成果展示。",
    image: "/weight-management/figure-07.jpeg",
    visual: "mobile",
    cue: { x: 50, y: 23, label: "阶段报告" },
    metrics: ["日报", "趋势", "建议"],
    position: "top",
    scrollDistance: 1680,
  },
  {
    eyebrow: "08 / 运动干预",
    title: "运动有内容可跟，减少不知道怎么动",
    story: "平台提供按目标分类的课程，员工可以选择适合自己的内容跟练。",
    value: "降低线下组织课程成本，让饮食和运动形成完整闭环。",
    image: "/weight-management/figure-09.png",
    visual: "mobile",
    cue: { x: 50, y: 39, label: "选择课程" },
    metrics: ["减脂", "塑形", "保持体态"],
  },
  {
    eyebrow: "09 / AI 营养师",
    title: "遇到具体问题，员工能继续往前走",
    story: "这顿饭怎么调整、运动后怎么吃、哪些食物更适合自己，都可以即时提问。",
    value: "减少人工咨询压力，让健康服务覆盖更多员工。",
    image: "/weight-management/figure-10.png",
    visual: "mobile",
    cue: { x: 86, y: 93, label: "语音提问" },
    metrics: ["即时回答", "个性建议", "规模化服务"],
  },
  {
    eyebrow: "10 / 活动运营",
    title: "活动和排行，把个人坚持变成组织氛围",
    story: "跳绳、健步走、减重挑战等活动，让员工获得反馈和激励。",
    value: "后台通过打卡排行查看参与情况，降低活动统计成本。",
    image: "/weight-management/figure-11.png",
    visual: "mobile",
    cue: { x: 50, y: 34, label: "活动打卡" },
    metrics: ["活动", "打卡", "排行"],
  },
  {
    eyebrow: "11 / 管理汇报",
    title: "后台统计，让员工关怀可量化",
    story: "PC 端展示参与人数、累计减重、BMI 正常率、人群分布等数据。",
    value: "客户看到的不只是做了一场活动，而是项目效果能复盘、有数据能汇报。",
    image: "/weight-management/figure-13.jpeg",
    visual: "desktop",
    cue: { x: 47, y: 52, label: "统计图表" },
    metrics: ["参与人数", "累计减重", "BMI 正常率"],
    position: "top",
  },
  {
    eyebrow: "12 / 长期服务",
    title: "从一次活动，变成长期健康服务",
    story: "后台可以维护人员、发布营养知识和健康活动，并延伸到团体膳食监控。",
    value: "体重管理不只是个人工具，也能支撑企业理解整体员工健康状态。",
    image: "/weight-management/figure-17.png",
    visual: "desktop",
    cue: { x: 64, y: 31, label: "团体监控" },
    metrics: ["人员运营", "内容运营", "团体监控"],
  },
];

function StepRail({ active }: { active: number }) {
  return (
    <div className="wm-rail" aria-hidden="true">
      <span>WEIGHT MANAGEMENT</span>
      {steps.map((item, index) => (
        <b
          className={[
            index === active ? "is-active" : "",
            index < active ? "is-done" : "",
          ]
            .filter(Boolean)
            .join(" ")}
          key={item.title}
        >
          {String(index + 1).padStart(2, "0")}
        </b>
      ))}
    </div>
  );
}

function PhoneVisual({ step }: { step: StoryStep }) {
  const imageStyle = step.scrollDistance
    ? ({ "--scroll-distance": `${step.scrollDistance}px` } as CSSProperties)
    : undefined;

  return (
    <div className="wm-phone-shell">
      <div className="wm-phone-status">
        <span>2:09</span>
        <i />
      </div>
      <div className="wm-phone-screen">
        <img
          className={[
            "wm-shot",
            `wm-shot--${step.position ?? "center"}`,
            step.scrollDistance ? "wm-shot--scroll" : "",
          ]
            .filter(Boolean)
            .join(" ")}
          src={step.image}
          alt={step.title}
          style={imageStyle}
        />
        <OperationCue point={step.cue} />
      </div>
    </div>
  );
}

function DesktopVisual({ step }: { step: StoryStep }) {
  return (
    <div className="wm-desktop-shell">
      <div className="wm-browser-bar">
        <i />
        <i />
        <i />
        <span>PC 端体重管理运营后台</span>
      </div>
      <div className="wm-desktop-screen">
        <img
          className={`wm-shot wm-shot--${step.position ?? "center"}`}
          src={step.image}
          alt={step.title}
        />
        <OperationCue point={step.cue} />
      </div>
    </div>
  );
}

export default function WeightManagementChapter({ step }: ChapterStepProps) {
  const current = steps[Math.min(step, steps.length - 1)]!;

  return (
    <section className={`wm-scene wm-scene--${current.visual}`}>
      <StepRail active={step} />
      <div className="wm-copy">
        <p className="wm-eyebrow">{current.eyebrow}</p>
        <h1>{current.title}</h1>
        <div className="wm-rule" />
        <p className="wm-story">{current.story}</p>
        <div className="wm-value">
          <span>客户价值</span>
          <strong>{current.value}</strong>
        </div>
        <div className="wm-metrics">
          {current.metrics.map((metric) => (
            <span key={metric}>{metric}</span>
          ))}
        </div>
      </div>
      <div className="wm-visual">
        {current.visual === "mobile" ? (
          <PhoneVisual step={current} />
        ) : (
          <DesktopVisual step={current} />
        )}
      </div>
      <footer className="wm-footer">
        <strong>体重管理产品场景化介绍</strong>
        <span>
          {String(step + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
        </span>
      </footer>
    </section>
  );
}