// Part 4: 产品成本计算方法 (5 methods)

const P4 = { C: () => theme.colors, F: () => theme.fonts };

function P4Opening() {
  const { localTime } = useSprite();
  return <OpeningShell
    partNumber="04"
    title={<>产品成本<br/>计算方法</>}
    subtitle="从原料到成品，成本怎么归集？"
    chips={['品种法','分批法','分步法','分类法','估计成本']}
    localTime={localTime}
  />;
}

// ── 16. 品种法 ──────────────────────────────────────────────────────────────
function M16() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P4.C(), F = P4.F();
  return <Scene
    chapter="第四篇 · 产品成本计算" section="16 / 20" color={C.teal}
    title={<MethodTitleBlock number="16" chinese="品种法" english="Process Costing" color={C.teal} localTime={localTime}/>}
    sub="品种法 = 总成本除以总产量。为大批量单一品种生产而生。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>💡 自来水厂 · 发电厂 · 水泥厂</div>
            <div style={{ padding: 20, background: C.paper, border: `3px solid ${C.ink}`, borderRadius: 14, marginBottom: 12 }}>
              <div style={{ fontFamily: F.body, fontSize: 18, color: C.pencil, marginBottom: 8 }}>本月全部成本</div>
              {[
                ['直接材料', '400万'], ['直接人工', '150万'], ['制造费用', '250万'],
              ].map((r, i) => (
                <div key={i} style={{ display:'flex', padding:'6px 0', borderBottom: i<2?`1px dashed ${C.rule}`:'none' }}>
                  <div style={{ flex: 1, fontFamily: F.body, fontSize: 20, color: C.ink }}>{r[0]}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 20, color: C.ink, fontWeight: 700 }}>{r[1]}</div>
                </div>
              ))}
              <div style={{ marginTop: 8, paddingTop: 8, borderTop: `2px solid ${C.ink}`, display:'flex' }}>
                <div style={{ flex: 1, fontFamily: F.body, fontSize: 22, fontWeight: 700, color: C.teal }}>合计</div>
                <div style={{ fontFamily: F.mono, fontSize: 24, fontWeight: 900, color: C.teal }}>800 万</div>
              </div>
            </div>
            <LocalSprite start={5} end={28}>
              <div style={{ padding: 20, background: C.ink, color: C.cream, borderRadius: 14 }}>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?24:28, fontWeight: 800 }}>
                  800万 ÷ 发电 <span style={{ color: C.mustard }}>1亿度</span>
                </div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?28:34, color: C.mustard, fontWeight: 900, marginTop: 6 }}>
                  = ¥ 0.08 / 度
                </div>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 17. 分批法 ──────────────────────────────────────────────────────────────
function M17() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P4.C(), F = P4.F();
  return <Scene
    chapter="第四篇 · 产品成本计算" section="17 / 20" color={C.tomato}
    title={<MethodTitleBlock number="17" chinese="分批法" english="Job Order Costing" color={C.tomato} localTime={localTime}/>}
    sub="分批法 = 一单一算。为定制化、项目化的生产量身打造。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>📐 造船 · 建筑 · 广告项目</div>
            {[
              { job:'订单 A · 博物馆设计', mat:'800万', lab:'400万', oh:'200万', total:'1,400万', color: C.tomato },
              { job:'订单 B · 写字楼设计', mat:'300万', lab:'200万', oh:'100万', total:'600万',  color: C.teal },
            ].map((j, i) => (
              <div key={i} style={{
                marginBottom: 14, padding: 16,
                background: C.paper, border: `3px solid ${j.color}`, borderRadius: 12,
                opacity: clamp((lt - 0.8 - i*0.8)/0.5, 0, 1),
              }}>
                <div style={{ fontFamily: F.body, fontSize: 20, fontWeight: 700, color: j.color, marginBottom: 8 }}>{j.job}</div>
                <div style={{ display:'flex', gap: 10, fontFamily: F.mono, fontSize: orient==='landscape'?16:18 }}>
                  <span style={{ color: C.inkSoft }}>材 {j.mat}</span>
                  <span style={{ color: C.inkSoft }}>· 人 {j.lab}</span>
                  <span style={{ color: C.inkSoft }}>· 费 {j.oh}</span>
                  <span style={{ marginLeft:'auto', color: j.color, fontWeight: 800 }}>= {j.total}</span>
                </div>
              </div>
            ))}
            <LocalSprite start={5} end={28}>
              <div style={{ padding: 16, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.body, fontSize: 18, lineHeight: 1.5 }}>
                成本计算期 = 项目周期 · 与月度会计期无必然对应
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 18. 分步法 ──────────────────────────────────────────────────────────────
function M18() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P4.C(), F = P4.F();
  return <Scene
    chapter="第四篇 · 产品成本计算" section="18 / 20" color={C.mustard}
    title={<MethodTitleBlock number="18" chinese="分步法" english="Step-by-Step" color={C.mustard} localTime={localTime}/>}
    sub="分步法 = 一步一算、逐步叠加。为多工序连续生产而设计。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>👕 衬衫 · 经过三道工序</div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14 }}>
              {[
                { step:'裁剪', cost:'+30元', total:'30', color: C.tomato },
                { step:'缝制', cost:'+20元', total:'50', color: C.mustard },
                { step:'整烫', cost:'+10元', total:'60', color: C.teal  },
              ].map((s, i) => {
                const show = clamp((lt - 0.8 - i*0.8)/0.5, 0, 1);
                return (
                  <React.Fragment key={i}>
                    <div style={{
                      flex: 1, padding: 14,
                      background: C.paper, border: `3px solid ${s.color}`, borderRadius: 12,
                      textAlign:'center', opacity: show,
                    }}>
                      <div style={{ fontFamily: F.body, fontSize: 20, color: s.color, fontWeight: 700 }}>{s.step}</div>
                      <div style={{ fontFamily: F.mono, fontSize: 18, color: C.inkSoft, marginTop: 4 }}>{s.cost}</div>
                      <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?22:26, fontWeight: 900, color: C.ink, marginTop: 4 }}>= ¥{s.total}</div>
                    </div>
                    {i < 2 && <div style={{ fontSize: 24, color: C.pencil, opacity: show }}>→</div>}
                  </React.Fragment>
                );
              })}
            </div>
            <LocalSprite start={5} end={28}>
              <div style={{ padding: 16, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.body, fontSize: orient==='landscape'?16:18, lineHeight: 1.6 }}>
                <div><span style={{ color: C.mustard, fontWeight:700 }}>逐步结转</span> · 像接力赛，成本随半成品传递</div>
                <div><span style={{ color: C.mustard, fontWeight:700 }}>平行结转</span> · 各步骤独立，汇总到最终产品</div>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 19. 分类法 ──────────────────────────────────────────────────────────────
function M19() {
  const { localTime } = useSprite();
  const C = P4.C(), F = P4.F();
  return <Scene
    chapter="第四篇 · 产品成本计算" section="19 / 20" color={C.sage}
    title={<MethodTitleBlock number="19" chinese="分类法" english="Classification" color={C.sage} localTime={localTime}/>}
    sub="分类法 = 先分类再分配。用分组策略化解品种繁多带来的核算压力。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>🔩 螺栓厂 · 上千种规格</div>
            <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
              {[
                { name:'小型件', cnt:'300种', c: C.tomato },
                { name:'中型件', cnt:'450种', c: C.mustard },
                { name:'大型件', cnt:'250种', c: C.teal },
              ].map((g, i) => {
                const show = clamp((lt - 0.5 - i*0.4)/0.4, 0, 1);
                return (
                  <div key={i} style={{
                    flex: 1, padding: 16,
                    background: C.paper, border: `3px solid ${g.c}`, borderRadius: 12,
                    opacity: show, textAlign: 'center',
                  }}>
                    <div style={{ fontFamily: F.body, fontSize: 20, fontWeight: 700, color: g.c }}>{g.name}</div>
                    <div style={{ fontFamily: F.mono, fontSize: 16, color: C.pencil, marginTop: 4 }}>{g.cnt}</div>
                  </div>
                );
              })}
            </div>
            <LocalSprite start={3} end={28}>
              <div style={{ textAlign:'center', fontSize: 26, color: C.pencil, margin:'6px 0' }}>↓ 按重量/工时比例分摊 ↓</div>
              <div style={{ padding: 16, background: C.sage, color: C.ink, borderRadius: 12, border: `3px solid ${C.ink}`, fontFamily: F.body, fontSize: 18, textAlign:'center' }}>
                类内总成本 × 分配系数 = 每品种成本
              </div>
            </LocalSprite>
            <LocalSprite start={6} end={28}>
              <div style={{ marginTop: 12, padding: 14, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.body, fontSize: 16, lineHeight: 1.5 }}>
                本质：品种法的实用扩展 · 重要性与成本效益原则
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 20. 估计成本法 ──────────────────────────────────────────────────────────
function M20() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P4.C(), F = P4.F();
  return <Scene
    chapter="第四篇 · 产品成本计算" section="20 / 20" color={C.rose}
    title={<MethodTitleBlock number="20" chinese={<>估计<br/>成本法</>} english="Standard Costing" color={C.rose} localTime={localTime}/>}
    sub="估计成本法 = 先定标准、再找差异。既是核算方法，更是管理控制的利器。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ display: 'flex', gap: 14, marginBottom: 14 }}>
              <div style={{ flex: 1, padding: 16, background: C.paper, border: `3px solid ${C.sage}`, borderRadius: 12, opacity: clamp((lt-0.5)/0.5, 0, 1) }}>
                <div style={{ fontFamily: F.body, fontSize: 18, color: C.sage, fontWeight: 700 }}>标准成本</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?28:34, fontWeight: 900, color: C.ink, marginTop: 6 }}>¥ 100</div>
                <div style={{ fontFamily: F.body, fontSize: 14, color: C.pencil, marginTop: 4 }}>事前测算</div>
              </div>
              <div style={{ flex: 1, padding: 16, background: C.paper, border: `3px solid ${C.rose}`, borderRadius: 12, opacity: clamp((lt-2)/0.5, 0, 1) }}>
                <div style={{ fontFamily: F.body, fontSize: 18, color: C.rose, fontWeight: 700 }}>实际成本</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?28:34, fontWeight: 900, color: C.ink, marginTop: 6 }}>¥ 108</div>
                <div style={{ fontFamily: F.body, fontSize: 14, color: C.pencil, marginTop: 4 }}>事后实录</div>
              </div>
            </div>
            <LocalSprite start={4} end={28}>
              <div style={{ padding: 18, background: C.rose, color: C.cream, borderRadius: 12, border: `3px solid ${C.ink}` }}>
                <div style={{ fontFamily: F.body, fontSize: 18, color: C.cream }}>差异 = +¥8 · 超支</div>
                <div style={{ fontFamily: F.mono, fontSize: 14, marginTop: 8, color: C.cream, lineHeight: 1.6 }}>
                  ├ 价格差 +3 → <span style={{ color: C.mustard }}>采购部</span><br/>
                  └ 数量差 +5 → <span style={{ color: C.mustard }}>生产部</span>
                </div>
              </div>
            </LocalSprite>
            <LocalSprite start={6} end={28}>
              <div style={{ marginTop: 12, padding: 14, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.body, fontSize: 16, lineHeight: 1.5 }}>
                "例外管理" · 只关注超出容忍的差异
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

function P4Comparison() {
  const { localTime } = useSprite();
  const C = P4.C();
  return <ChapterComparison
    heading={<>五种成本计算法</>}
    items={[
      { name: '品种法',   use: '大批单一 — 自来水/发电', color: C.teal },
      { name: '分批法',   use: '订单项目 — 造船/建筑', color: C.tomato },
      { name: '分步法',   use: '多工序连续 — 化工/纺织', color: C.mustard },
      { name: '分类法',   use: '品种繁多 — 螺栓/纽扣', color: C.sage },
      { name: '估计成本', use: '标准+差异 — 管理控制', color: C.rose },
    ]}
    footer="💡 看生产组织形式 · 匹配管理需求"
    localTime={localTime}
  />;
}

function Part4() {
  const t = useTime();
  React.useEffect(() => {
    const el = document.querySelector('[data-video-root]');
    if (el) el.setAttribute('data-screen-label', `t=${Math.floor(t)}s`);
  }, [Math.floor(t)]);
  const O=5, M=28, CM=12;
  let c = 0; const s = (d) => { const a = c; c+=d; return { start:a, end:c }; };
  const s_o = s(O);
  const s1=s(M), s2=s(M), s3=s(M), s4=s(M), s5=s(M);
  const s_c = s(CM);
  return (
    <div data-video-root style={{ width:'100%', height:'100%', position:'relative' }}>
      <Sprite {...s_o}><P4Opening/></Sprite>
      <Sprite {...s1}><M16/></Sprite>
      <Sprite {...s2}><M17/></Sprite>
      <Sprite {...s3}><M18/></Sprite>
      <Sprite {...s4}><M19/></Sprite>
      <Sprite {...s5}><M20/></Sprite>
      <Sprite {...s_c}><P4Comparison/></Sprite>
    </div>
  );
}

Object.assign(window, { Part4 });