import type { ChapterStepProps } from "../../registry/types";
import { OperationCue } from "../../components/OperationCue";
import "./SmartDish.css";

type Step = {
  eyebrow: string;
  title: string;
  story: string;
  value: string;
  image: string;
  cue: { x: number; y: number };
  metrics: string[];
  pan?: "right" | "down";
};

const steps: Step[] = [
  {
    eyebrow: "01 / 客户故事",
    title: "食堂管理员的一周排菜压力",
    story: "每天服务上千名员工，菜单要兼顾口味、健康、厨房执行、成本和剩菜。",
    value: "客户真正需要的，是把营养、口味、成本和执行标准放在一起考虑的排菜方法。",
    image: "/smart-dish/figure-01.png",
    cue: { x: 75, y: 17 },
    metrics: ["员工愿意吃", "甲方看得懂", "厨房能执行"],
  },
  {
    eyebrow: "02 / 现有入口",
    title: "从现有菜单进入智能排菜",
    story: "管理员先在菜谱管理里查看各餐次菜品结构，再从智能排菜入口生成更合理的菜单。",
    value: "不推翻现有菜品库和工作方式，而是在客户熟悉的菜单管理场景里升级。",
    image: "/smart-dish/figure-01.png",
    cue: { x: 61, y: 15 },
    metrics: ["早餐", "午餐", "晚餐"],
    pan: "right",
  },
  {
    eyebrow: "03 / 周期生成",
    title: "按日期和餐次批量生成菜单",
    story: "选择餐厅、排菜周期，并分别启用早餐、午餐、晚餐、夜宵规则。",
    value: "把每天想菜单变成按周期生成菜单，提前支持采购、备货和厨房生产。",
    image: "/smart-dish/figure-02.png",
    cue: { x: 51, y: 56 },
    metrics: ["选择餐厅", "排菜周期", "餐次规则"],
  },
  {
    eyebrow: "04 / 规则沉淀",
    title: "把经验变成可复用的排菜规则",
    story: "规则名称、菜品来源、总菜品数量、营养标签、创建人和状态集中管理。",
    value: "营养师、厨师和运营人员的经验沉淀下来，成熟方案更容易复制到更多餐厅。",
    image: "/smart-dish/figure-03.png",
    cue: { x: 78, y: 18 },
    metrics: ["规则名称", "菜品来源", "状态管理"],
    pan: "right",
  },
  {
    eyebrow: "05 / 健康标签",
    title: "让健康人群吃到合适菜单",
    story: "规则支持选择健康标签和营养标签，例如高血压友好、低钠、高蛋白、低能量。",
    value: "健康目标不再停留在宣传页，而是落实到每天的菜单选择里。",
    image: "/smart-dish/figure-04.png",
    cue: { x: 40, y: 24 },
    metrics: ["高血压友好", "低钠", "高蛋白"],
    pan: "down",
  },
  {
    eyebrow: "06 / 食材要求",
    title: "把禁忌、偏好和食材要求纳入菜单",
    story: "按分类搜索并勾选食材，明确哪些要包含、哪些要避开。",
    value: "减少口头沟通和执行遗漏，降低特殊饮食风险和跨角色沟通成本。",
    image: "/smart-dish/figure-05.png",
    cue: { x: 55, y: 30 },
    metrics: ["包含食材", "避开食材", "少油少炸"],
    pan: "right",
  },
  {
    eyebrow: "07 / 烹调标准",
    title: "把健康烹调方式变成可执行标准",
    story: "蒸、煮、炖、炒、炸、煎等做法进入规则，成为排菜参考。",
    value: "客户不是只看健康概念，而是希望厨房每天都能按统一标准执行。",
    image: "/smart-dish/figure-06.png",
    cue: { x: 61, y: 53 },
    metrics: ["推荐做法", "非推荐做法", "长期稳定"],
  },
  {
    eyebrow: "08 / 客户价值",
    title: "从能排菜单，到持续提供好菜单",
    story: "智能排菜把人工经验升级为稳定、可复制、可长期运营的营养供餐能力。",
    value: "菜单更均衡，健康目标更清晰，成本和剩菜更可控，供餐体验也能持续优化。",
    image: "/smart-dish/figure-03.png",
    cue: { x: 72, y: 55 },
    metrics: ["均衡结构", "规则可复制", "成本可控制"],
  },
];

function StepRail({ active }: { active: number }) {
  return (
    <div className="sd-rail" aria-hidden="true">
      <span>SMART MENU</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 DesktopVisual({ step }: { step: Step }) {
  return (
    <div className="sd-desktop-shell">
      <div className="sd-browser-bar">
        <i />
        <i />
        <i />
        <span>智慧营养健康餐厅管理系统 / 智能排菜</span>
      </div>
      <div className="sd-desktop-screen">
        <img
          className={["sd-shot", step.pan ? `sd-shot--pan-${step.pan}` : ""]
            .filter(Boolean)
            .join(" ")}
          src={step.image}
          alt={step.title}
        />
        <OperationCue point={step.cue} />
      </div>
    </div>
  );
}

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

  return (
    <section className="sd-scene">
      <StepRail active={step} />
      <div className="sd-copy">
        <p className="sd-eyebrow">{current.eyebrow}</p>
        <h1>{current.title}</h1>
        <div className="sd-rule" />
        <p className="sd-story">{current.story}</p>
        <div className="sd-value">
          <span>客户价值</span>
          <strong>{current.value}</strong>
        </div>
        <div className="sd-metrics">
          {current.metrics.map((metric) => (
            <span key={metric}>{metric}</span>
          ))}
        </div>
      </div>
      <div className="sd-visual">
        <DesktopVisual step={current} />
      </div>
      <footer className="sd-footer">
        <strong>智能排菜产品场景化介绍</strong>
        <span>
          {String(step + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
        </span>
      </footer>
    </section>
  );
}