// screens/files.jsx — patient files/products browser

function ScreenFiles({ role, onRoleClick }) {
  const [selected, setSelected] = useState('zhang');
  const p = PATIENTS[selected];

  return (
    <div>
      <TopBar role={role} onRoleClick={onRoleClick} title="患者档案" subtitle="只读 · 跨系统产物聚合" />

      {/* Search */}
      <div style={{ padding: '0 16px 12px' }}>
        <div style={{
          display:'flex', alignItems:'center', gap: 8,
          padding: '10px 12px', borderRadius: 11,
          background: '#fff', border: '1px solid var(--border)',
        }}>
          <I.Search size={16} />
          <input placeholder="搜索患者 / 病历号 / 计划" style={{
            border:'none', outline:'none', flex:1, background:'transparent',
            fontSize: 14, color:'var(--t1)',
          }}/>
        </div>
      </div>

      {/* Patient picker */}
      <div style={{ padding: '0 16px 12px', display:'flex', gap: 8 }}>
        {ALL_PATIENTS.map(pid => {
          const pp = PATIENTS[pid];
          const active = selected === pid;
          return (
            <button key={pid} onClick={() => setSelected(pid)} style={{
              flex: 1,
              display:'flex', flexDirection:'column', alignItems:'center', gap: 4,
              padding: '10px 6px', borderRadius: 12,
              background: active ? 'var(--brand-soft)' : '#fff',
              border: active ? '1px solid var(--brand)' : '1px solid var(--border)',
              cursor:'pointer',
            }}>
              <PatientSigil tag={pp.photoTag} size={28}/>
              <div style={{ fontSize: 12, fontWeight: 600, color: active?'var(--brand)':'var(--t1)' }}>{pp.name}</div>
            </button>
          );
        })}
      </div>

      {/* Tabs */}
      <SectionLabel right={`${p.name} · ${p.dx.split(' · ')[0]}`}>档案分类</SectionLabel>

      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          {FILE_CATEGORIES.map((cat, i) => (
            <div key={cat.id} style={{
              padding: '14px 16px',
              display:'flex', alignItems:'center', gap: 12,
              borderBottom: i < FILE_CATEGORIES.length-1 ? '1px solid var(--border-soft)' : 'none',
              cursor: 'pointer',
            }}>
              <span style={{
                width: 36, height: 36, borderRadius: 9,
                background: cat.bg, color: cat.ink,
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                {cat.icon}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color:'var(--t1)' }}>{cat.label}</div>
                <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: 2 }}>{cat.sub}</div>
              </div>
              <span className="mono" style={{ fontSize: 12, color:'var(--t2)' }}>{cat.count}</span>
              <I.Chevron size={12} />
            </div>
          ))}
        </Card>
      </div>

      {/* Recent products */}
      <SectionLabel right="时间倒序">最近产物</SectionLabel>
      <div style={{ padding: '0 16px', display:'flex', flexDirection:'column', gap: 10 }}>
        {RECENT_PRODUCTS.map(item => (
          <Card key={item.id} pad={0}>
            <div style={{ padding: '12px 14px', display:'flex', alignItems:'center', gap: 12 }}>
              <ProductThumb kind={item.kind} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color:'var(--t1)' }}>{item.name}</div>
                <div style={{ fontSize: 11.5, color:'var(--t3)', marginTop: 2 }}>
                  来自 {item.src} · <span className="mono">{item.at}</span>
                </div>
              </div>
              <Chip kind="pending" mono>{item.size}</Chip>
            </div>
          </Card>
        ))}
      </div>

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

const FILE_CATEGORIES = [
  { id:'ct',     label:'CT / 模拟定位影像', sub:'120 层 · 3 序列',  count:'1 项', icon: <I.Image size={18}/>, bg:'#EAF2FB', ink:'#1F5AA8' },
  { id:'cbct',   label:'CBCT 验证影像',      sub:'分次内影像 18 套', count:'18 项', icon: <I.Image size={18}/>, bg:'#EAF2FB', ink:'#1F5AA8' },
  { id:'struct', label:'RT Struct (勾画)',   sub:'GTV / CTV / PTV · OAR', count:'1 项', icon: <I.Stack size={18}/>, bg:'#E6F2EE', ink:'#0E8C6D' },
  { id:'plan',   label:'RT Plan / Dose',     sub:'v2 · VMAT · 2 弧',  count:'2 项', icon: <I.Doc size={18}/>,  bg:'var(--brand-soft)', ink:'var(--brand)' },
  { id:'qa',     label:'QA 报告',            sub:'Gamma 通过率 · γ(3%/3mm)', count:'1 项', icon: <I.Doc size={18}/>, bg:'#FFF6E5', ink:'#A66700' },
  { id:'rx',     label:'处方与签名',         sub:'电子签名 · 审计链',  count:'4 份', icon: <I.Lock size={18}/>, bg:'#F2EAFB', ink:'#7A5AE0' },
  { id:'rec',    label:'治疗记录 RT Record', sub:'按分次归档',         count:'18 项', icon: <I.Doc size={18}/>,  bg:'#FBECEC', ink:'#C0252F' },
];

const RECENT_PRODUCTS = [
  { id:1, name:'Plan2_VMAT_60Gy.dcm', src:'TPS', at:'05-14 14:08', kind:'plan',   size:'2.4 MB' },
  { id:2, name:'RT_Structure_HN_v3.dcm', src:'TPS', at:'05-12 17:20', kind:'struct', size:'480 KB' },
  { id:3, name:'CT_Sim_Head_AC.zip', src:'OIS',  at:'05-09 14:30', kind:'image',  size:'88 MB' },
  { id:4, name:'QA_Gamma_98.4.pdf', src:'QA',   at:'04-30 16:02', kind:'pdf',    size:'520 KB' },
];

function ProductThumb({ kind }) {
  const map = {
    plan:   { bg:'var(--brand-soft)', ink:'var(--brand)', text:'PLAN' },
    struct: { bg:'#E6F2EE',           ink:'#0E8C6D',      text:'STR'  },
    image:  { bg:'#EAF2FB',           ink:'#1F5AA8',      text:'CT'   },
    pdf:    { bg:'#FFF6E5',           ink:'#A66700',      text:'PDF'  },
  };
  const c = map[kind] || map.plan;
  return (
    <div style={{
      width: 38, height: 38, borderRadius: 9,
      background: c.bg, color: c.ink,
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 700,
      letterSpacing: 0.5,
    }}>{c.text}</div>
  );
}

Object.assign(window, { ScreenFiles });