// Screen 1: Main Dashboard — 4 variations
// Audience: Admin/billing tracking authorizations & claims across all participants

function DashboardScreen() {
  return (
    <>
      <div className="screen-intro">
        <h2>① Main Dashboard / Home</h2>
        <p>Bird's-eye view for billing admins — at-a-glance health of every active authorization, who's running low, who's over-cap, and what's pending in claims. Four ways to slice the same data.</p>
      </div>

      <div className="legend">
        <span className="hand-2" style={{fontSize:14}}>STATUS LEGEND →</span>
        <span className="item"><span className="dot-st bg-crit"></span>critical / over-cap</span>
        <span className="item"><span className="dot-st bg-warn"></span>at-risk this month</span>
        <span className="item"><span className="dot-st bg-soon"></span>running low (auth)</span>
        <span className="item"><span className="dot-st bg-ok"></span>healthy</span>
        <span className="item"><span className="dot-st bg-info"></span>upcoming auth</span>
      </div>

      <div className="var-grid">

        {/* V1 — KPI cards + alerts feed (sparse) */}
        <Variation num="1" title="KPI cards + Alerts feed" desc="sparse, scannable, exec-style">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="home" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Dashboard · April 2026" />
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:14}}>
                {[
                  ['Active participants','142','+4 this mo','ok'],
                  ['Auth units billed','38,402','this month','info'],
                  ['Claims pending','$24,118','12 claims','warn'],
                  ['At-risk auths','7','need review','crit'],
                ].map(([k,v,sub,s])=>(
                  <div key={k} className="sk-box" style={{padding:'10px 12px'}}>
                    <div className="sk-cap">{k}</div>
                    <div className="hand-2" style={{fontSize:26,lineHeight:1.05}}>{v}</div>
                    <div className="sk-sub" style={{fontSize:13}}>
                      <span className={`dot-st bg-${s}`} style={{marginRight:5}}/>{sub}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:12}}>
                <div className="sk-box" style={{padding:12}}>
                  <SkH kicker="alerts feed">Needs attention</SkH>
                  <div className="sk-col" style={{gap:6}}>
                    {[
                      ['crit','Aguilar, Phillip','Over monthly cap (+12u) · T2021'],
                      ['warn','Kahale, Mei','98% of monthly used · 4 days left'],
                      ['soon','Nakagawa, Joel','Auth ends Feb 27 · renew?'],
                      ['soon','Liu, Karina','12u remaining on H2021'],
                      ['info','Tavares, Roy','New auth starts May 3'],
                    ].map(([s,n,t])=>(
                      <div key={n} className="sk-row" style={{padding:'5px 6px',borderBottom:'1px dashed var(--rule-strong)'}}>
                        <span className={`dot-st bg-${s}`}/>
                        <span className="hand-2" style={{fontSize:13}}>{n}</span>
                        <span className="sk-sub" style={{fontSize:14,marginLeft:'auto'}}>{t}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="sk-box" style={{padding:12}}>
                  <SkH kicker="this week">Units logged</SkH>
                  <Spark data={[18,22,30,28,34,12,8]} height={48}/>
                  <div className="sk-row mono" style={{fontSize:9,justifyContent:'space-between',marginTop:4,color:'var(--ink-mute)'}}>
                    <span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span>
                  </div>
                  <div className="sk-sub" style={{marginTop:8}}>152 units · 23 staff · 38 participants</div>
                </div>
              </div>
              <Note style={{marginTop:14}}>simplest layout — easy to scan in 5 seconds ✦</Note>
            </div>
          </div>
        </Variation>

        {/* V2 — Dense participant grid with usage bars */}
        <Variation num="2" title="Roster grid w/ live usage bars" desc="dense, every participant visible">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="home" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Dashboard · roster view" right={<>
                <span className="sk-pill">filter: active</span>
                <span className="sk-pill">sort: % used ↓</span>
              </>}/>
              <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:8}}>
                {[
                  ['AP','Aguilar, Phillip','T2021 · CLS 1:1', 102, -12, 'crit'],
                  ['KM','Kahale, Mei','H2021 U4', 98, 2, 'warn'],
                  ['NJ','Nakagawa, Joel','T2021', 88, 12, 'warn'],
                  ['LK','Liu, Karina','H2021 U4', 76, 24, 'soon'],
                  ['TR','Tavares, Roy','T2021', 64, 36, 'ok'],
                  ['MS','Makoa, Sela','CLS 1:1', 52, 48, 'ok'],
                  ['HD','Haku, Daniel','H2021', 41, 59, 'ok'],
                  ['OR','Ono, Rae','T2021', 28, 72, 'ok'],
                ].map(([init,n,svc,used,remain,s])=>(
                  <div key={n} className="sk-box" style={{padding:8}}>
                    <div className="sk-row" style={{marginBottom:4}}>
                      <Avatar name={init} tone={s==='crit'?'warn':'sage'}/>
                      <div>
                        <div className="hand-2" style={{fontSize:13,lineHeight:1.1}}>{n}</div>
                        <div className="sk-cap">{svc}</div>
                      </div>
                      <span className={`dot-st bg-${s}`} style={{marginLeft:'auto'}}/>
                    </div>
                    <UsageBar used={Math.max(used,0)} remain={Math.max(remain,1)} warn={s==='crit'||s==='warn'} height={9}/>
                    <div className="sk-row mono" style={{fontSize:10,justifyContent:'space-between',marginTop:3,color:'var(--ink-mute)'}}>
                      <span>used {used}%</span>
                      <span>{remain<0?`+${Math.abs(remain)} OVER`:`${remain}% left`}</span>
                    </div>
                  </div>
                ))}
              </div>
              <Note style={{marginTop:12}}>spreadsheet → cards · still see everyone, no scrolling sideways</Note>
            </div>
          </div>
        </Variation>

        {/* V3 — Calendar heatmap focus */}
        <Variation num="3" title="Year heatmap + claim funnel" desc="visualize utilization across time">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="home" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Dashboard · plan year 2026" />
              <div className="sk-box" style={{padding:12,marginBottom:12}}>
                <SkH kicker="utilization heatmap" right={<span className="sk-pill">all participants</span>}>2026 monthly summary</SkH>
                <div className="sk-col" style={{gap:4}}>
                  {[
                    ['Aguilar, P', [88,92,104,98,null,null,null,null,null,null,null,null]],
                    ['Kahale, M',  [72,80,88,98,null,null,null,null,null,null,null,null]],
                    ['Nakagawa, J',[60,72,84,88,null,null,null,null,null,null,null,null]],
                    ['Liu, K',     [45,52,68,76,null,null,null,null,null,null,null,null]],
                    ['Tavares, R', [30,42,55,64,null,null,null,null,null,null,null,null]],
                  ].map(([n,d])=>(
                    <div key={n} className="sk-row" style={{gap:8}}>
                      <span className="hand-2" style={{fontSize:12,width:90}}>{n}</span>
                      <div style={{flex:1}}><MonthGrid data={d} current={3}/></div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                <div className="sk-box" style={{padding:10}}>
                  <SkH kicker="claim funnel">Apr claims</SkH>
                  <div className="sk-col" style={{gap:6}}>
                    {[['Logged',158,'ok'],['Submitted',142,'info'],['Paid',98,'ok'],['Denied',6,'crit'],['Pending',38,'warn']].map(([l,n,s])=>(
                      <div key={l} className="sk-row" style={{gap:6}}>
                        <span style={{width:80}} className="hand-2">{l}</span>
                        <div style={{flex:1}}><UsageBar used={n} remain={170-n} warn={s==='crit'||s==='warn'} height={9}/></div>
                        <span className="mono" style={{fontSize:11,width:30,textAlign:'right'}}>{n}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="sk-box shade" style={{padding:10}}>
                  <SkH kicker="$ pipeline">Billing pipeline</SkH>
                  <div className="hand-2" style={{fontSize:32,lineHeight:1}}>$184,302</div>
                  <div className="sk-sub">earned this period · 12% above plan</div>
                  <div style={{height:8}}/>
                  <Spark data={[20,28,34,30,42,38,46,52,48,58,62,72]} height={42}/>
                </div>
              </div>
              <Note style={{marginTop:10}}>great for quarterly review meetings</Note>
            </div>
          </div>
        </Variation>

        {/* V4 — Action-oriented split: alerts left, work queue right */}
        <Variation num="4" title="Triage cockpit" desc="action-first, what do I need to DO today">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="home" compact />
            <div style={{flex:1}}>
              <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
                <div className="hand-2" style={{fontSize:22}}>Aloha, Lehua —</div>
                <div className="sk-sub" style={{fontSize:18}}>3 things need you today.</div>
                <span style={{marginLeft:'auto'}} className="sk-pill">◐ Apr 28</span>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:12}}>
                <div className="sk-col" style={{gap:10}}>
                  {[
                    ['crit','Phillip Aguilar is over cap','+12 units past monthly limit on T2021. Review before billing.','Review'],
                    ['soon','3 authorizations end this week','Renew or close out: Nakagawa, Liu, Mahuna.','Open list'],
                    ['warn','12 claims awaiting submission','Total $24,118 — oldest is 6 days.','Submit batch'],
                  ].map(([s,t,d,cta])=>(
                    <div key={t} className="sk-box" style={{padding:12,borderLeft:`5px solid var(--r-${s})`}}>
                      <div className="sk-row">
                        <span className={`dot-st bg-${s}`}/>
                        <div className="hand-2" style={{fontSize:15}}>{t}</div>
                        <span className="sk-btn" style={{marginLeft:'auto'}}>{cta} →</span>
                      </div>
                      <div className="sk-sub" style={{marginTop:4}}>{d}</div>
                    </div>
                  ))}
                </div>
                <div className="sk-col" style={{gap:10}}>
                  <div className="sk-box sage" style={{padding:10}}>
                    <SkH kicker="snapshot">This week</SkH>
                    <div className="sk-row" style={{gap:14,marginTop:4}}>
                      <div><div className="hand-2" style={{fontSize:22}}>152u</div><div className="sk-cap">logged</div></div>
                      <div><div className="hand-2" style={{fontSize:22}}>38</div><div className="sk-cap">participants</div></div>
                      <div><div className="hand-2" style={{fontSize:22}}>23</div><div className="sk-cap">staff</div></div>
                    </div>
                  </div>
                  <div className="sk-box" style={{padding:10}}>
                    <SkH kicker="quick">Jump to</SkH>
                    <div className="sk-col" style={{gap:5}}>
                      {['+ Log service visit','◧ Find participant','▤ Open authorization','⎘ Export billing CSV'].map(x=>(
                        <div key={x} className="sk-input" style={{cursor:'pointer'}}>{x}</div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
              <Note style={{marginTop:12}}>my favorite — turns a dashboard into a to-do list ★</Note>
            </div>
          </div>
        </Variation>

      </div>
    </>
  );
}
window.DashboardScreen = DashboardScreen;