// screens/insights.jsx — department analytics

function ScreenInsights({ role, onRoleClick }) {
  return (
    <div>
      <TopBar role={role} onRoleClick={onRoleClick} title="科室洞察" subtitle="流水线 KPI · 瓶颈与负载" />

      {/* Time range */}
      <div style={{ padding: '0 16px 12px' }}>
        <div style={{
          display:'flex', background: '#fff',
          borderRadius: 10, border: '1px solid var(--border)',
          padding: 3, gap: 2,
        }}>
          {['今日','本周','本月','全年'].map((t,i) => (
            <button key={t} style={{
              flex: 1, padding: '7px 0', borderRadius: 7,
              background: i===1 ? 'var(--brand)' : 'transparent',
              color: i===1 ? '#fff' : 'var(--t2)',
              border:'none', fontSize: 12, fontWeight: 500,
              cursor:'pointer',
            }}>{t}</button>
          ))}
        </div>
      </div>

      {/* Pipeline cycle metrics */}
      <SectionLabel right="建档 → 首次治疗">流程周期</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={16}>
          <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
            <span className="mono" style={{ fontSize: 32, fontWeight: 700, color:'var(--t1)', letterSpacing: -1 }}>9.4</span>
            <span style={{ fontSize: 14, color:'var(--t2)' }}>天 · 平均周期</span>
            <span style={{ marginLeft:'auto', fontSize: 12, color:'var(--st-done-ink)', fontWeight: 600 }} className="mono">
              ↓ 1.2 天
            </span>
          </div>
          <div style={{ marginTop: 14 }}>
            <NodeDwellChart />
          </div>
          <div style={{ marginTop: 12, fontSize: 11.5, color:'var(--t3)' }}>
            灰条 = 节点平均停留时长（小时） · 橙色 = 当前瓶颈
          </div>
        </Card>
      </div>

      {/* Bottlenecks */}
      <SectionLabel>瓶颈洞察</SectionLabel>
      <div style={{ padding: '0 16px', display:'flex', flexDirection:'column', gap: 10 }}>
        {BOTTLENECKS.map(b => (
          <Card key={b.id} pad={0}>
            <div style={{ padding: '12px 14px', display:'flex', alignItems:'center', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10,
                background: 'var(--st-block-bg)', color: 'var(--st-block-ink)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, fontWeight: 700,
              }}>{String(b.k).padStart(2,'0')}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{b.label}</div>
                <div style={{ fontSize: 11.5, color:'var(--t3)', marginTop: 2 }}>{b.sub}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--st-block-ink)' }}>{b.val}</div>
                <div style={{ fontSize: 11, color:'var(--t3)' }}>{b.unit}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* Quality KPI grid */}
      <SectionLabel>质量指标</SectionLabel>
      <div style={{ padding: '0 16px', display:'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {QUALITY.map(q => (
          <Card key={q.id} pad={14}>
            <div style={{ display:'flex', alignItems:'center', gap: 4, color:'var(--t3)' }}>
              <span style={{ fontSize: 11, fontWeight: 500 }}>{q.label}</span>
            </div>
            <div style={{ display:'flex', alignItems:'baseline', gap: 4, marginTop: 6 }}>
              <span className="mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4 }}>{q.value}</span>
              <span style={{ fontSize: 12, color:'var(--t3)' }}>{q.unit}</span>
            </div>
            <div style={{ marginTop: 8 }}>
              <MiniBar value={q.bar} target={100} ok={q.ok} width={140}/>
            </div>
            <div style={{ marginTop: 6, fontSize: 11, color: q.ok?'var(--st-done-ink)':'var(--st-block-ink)' }}>
              {q.note}
            </div>
          </Card>
        ))}
      </div>

      {/* Machine utilization */}
      <SectionLabel right="本周">机器利用率</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          {MACHINES.map((m, i) => (
            <div key={m.id} style={{
              padding: '12px 14px',
              borderBottom: i < MACHINES.length-1 ? '1px solid var(--border-soft)' : 'none',
            }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <div style={{
                  width: 8, height: 8, borderRadius: 8, background: m.color,
                }}/>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{m.id} · {m.model}</div>
                <span className="mono" style={{ marginLeft:'auto', fontSize: 13, fontWeight: 600 }}>
                  {m.use}%
                </span>
              </div>
              <div style={{ marginTop: 7, height: 8, borderRadius: 4, background:'#EEF2F4', overflow:'hidden' }}>
                <div style={{ width: m.use+'%', height: '100%', background: m.color, borderRadius: 4 }}/>
              </div>
              <div style={{ marginTop: 6, fontSize: 11, color:'var(--t3)', display:'flex', justifyContent:'space-between' }}>
                <span>{m.fractions} 分次 · {m.patients} 患者</span>
                <span>{m.note}</span>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Role workload */}
      <SectionLabel>角色负载</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          {LOAD.map((l, i) => (
            <div key={l.name} style={{
              padding: '11px 14px',
              borderBottom: i < LOAD.length-1 ? '1px solid var(--border-soft)' : 'none',
              display:'flex', alignItems:'center', gap: 10,
            }}>
              <Avatar name={l.name} color={l.color} size={28}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{l.name}</div>
                <div style={{ fontSize: 11, color:'var(--t3)' }}>{l.role}</div>
              </div>
              <div style={{ width: 80, height: 6, borderRadius: 3, background:'#EEF2F4', overflow:'hidden' }}>
                <div style={{ width: l.pct+'%', height: '100%', background: l.pct > 80 ? '#B14B0E' : 'var(--brand)' }}/>
              </div>
              <span className="mono" style={{ fontSize: 13, fontWeight: 600, minWidth: 32, textAlign:'right' }}>{l.count}</span>
            </div>
          ))}
        </Card>
      </div>

      <div style={{ height: 110 }}/>
    </div>
  );
}

// Node dwell chart — small bars
function NodeDwellChart() {
  const dwell = [
    { k:'建档', h: 4,  bot: false },
    { k:'定位', h: 26, bot: false },
    { k:'勾画', h: 22, bot: false },
    { k:'处方', h: 8,  bot: false },
    { k:'计划', h: 32, bot: true },
    { k:'审核', h: 14, bot: false },
    { k:'QA',   h: 18, bot: false },
    { k:'排程', h: 10, bot: false },
  ];
  const max = 40;
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap: 6, height: 86 }}>
      {dwell.map(d => (
        <div key={d.k} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 4 }}>
          <div style={{
            width: '100%',
            height: `${(d.h/max)*70}px`,
            background: d.bot ? '#B14B0E' : '#C9D1D7',
            borderRadius: 3,
          }}/>
          <div style={{ fontSize: 10, color: d.bot ? '#B14B0E' : 'var(--t3)', fontWeight: d.bot?600:500 }}>{d.k}</div>
        </div>
      ))}
    </div>
  );
}

const BOTTLENECKS = [
  { id:1, k: 5,  label: '计划制定停留过长',  sub: '剂量师人手紧张 + 抢单率低',  val: '32', unit:'平均小时' },
  { id:2, k: 6,  label: '审核排队',           sub: '主任医师审批集中下午',       val: '14', unit:'平均小时' },
  { id:3, k: 2,  label: '定位 → 勾画切换',   sub: '影像推送至 TPS 偶有延时',    val: ' 8', unit:'平均小时' },
];

const QUALITY = [
  { id:1, label:'计划一次通过率', value:'87.5', unit:'%', bar:87, ok:true,  note:'本周 ↑ 3.2 pp' },
  { id:2, label:'QA Gamma 通过率', value:'97.8', unit:'%', bar:97, ok:true,  note:'γ(3%/3mm) 标准' },
  { id:3, label:'IGRT 超阈率',     value:' 2.3', unit:'%', bar:23, ok:false, note:'本周 ↑ 0.8 pp · 关注' },
  { id:4, label:'重计划发生率',    value:' 4.1', unit:'%', bar:41, ok:true,  note:'符合预期' },
];

const MACHINES = [
  { id:'LA-1', model:'TrueBeam',   use: 86, fractions: 142, patients: 28, color:'var(--brand)',  note:'当周 ↑'},
  { id:'LA-2', model:'Halcyon',    use: 78, fractions: 128, patients: 22, color:'#1F5AA8',       note:'平稳'  },
  { id:'LA-3', model:'Halcyon',    use: 64, fractions: 102, patients: 18, color:'#0E8C6D',       note:'有余量'},
];

const LOAD = [
  { name:'王思雨', role:'剂量师',   pct: 92, count: '4 在制', color:'#7A5AE0' },
  { name:'李子涵', role:'剂量师',   pct: 70, count: '3 在制', color:'#7A5AE0' },
  { name:'林志远', role:'高级物理师', pct: 84, count: '6 待审', color:'#1F5AA8' },
  { name:'陈雯',   role:'主治医师', pct: 58, count: '3 待签', color:'var(--brand)' },
];

Object.assign(window, { ScreenInsights });