/* global React, I, MacWindow, CountUp, Button */
const { useState:useStateHD, useEffect:useEffectHD } = React;

/* Wide, centered "medcode.dashboard" hero panel — matches the reference layout:
   breadcrumb + assessment title on the left, audit actions on the right,
   then a row of three animated KPI cards. */
function HeroDashboard(){
  return (
    React.createElement("div",{ className:"hero-dash float" },
      React.createElement(MacWindow,{ title:"medcode.dashboard", style:{ width:"100%" } },
        React.createElement("div",{ className:"hd-pad" },
          React.createElement("div",{ className:"hd-head" },
            React.createElement("div",null,
              React.createElement("div",{ className:"hd-crumb" },
                React.createElement("span",null,"Home"),
                React.createElement("span",{ className:"hd-slash" }," / "),
                React.createElement("span",{ className:"hd-crumb-cur" }, "Coding assessment")),
              React.createElement("div",{ className:"hd-title" },
                "Coding Assessment · Ready",
                React.createElement("span",{ className:"hd-livedot" })),
              React.createElement("div",{ className:"hd-meta" }, "A1c reviewed · Rx management · 99214")),
            React.createElement("div",{ className:"hd-actions" },
              React.createElement("span",{ className:"hd-audit" }, "Audit-ready output"),
              React.createElement("div",{ className:"hd-btns" },
                React.createElement("button",{ className:"hd-b ghost" }, "Add to review"),
                React.createElement("button",{ className:"hd-b dark" }, "Coding studio")))),

          React.createElement("div",{ className:"hd-kpis" },
            React.createElement(Kpi,{ value:94.2, dec:1, suf:"%", label:"MDM accuracy", seed:[3,4,3,5,4,6,5,7,6,8] }),
            React.createElement(Kpi,{ value:40, pre:"~", suf:" s", label:"Avg review time", seed:[4,3,4,3,5,4,6,5,7,6] }),
            React.createElement(Kpi,{ value:99, suf:" series", label:"CPT coverage", seed:[3,5,4,6,5,7,6,8,7,9] })),

          React.createElement(CodeTyper,null)
        )
      )
    )
  );
}

/* live "coding stream" typewriter */
const HD_SCRIPT = [
  { txt:"$ medcode analyze  office_note.txt", c:"mut" },
  { txt:"\u2713 problems  \u00b7 T2DM exacerbation, HTN stable", c:"grn" },
  { txt:"\u2713 data      \u00b7 prior labs + home glucose reviewed", c:"grn" },
  { txt:"\u2713 risk      \u00b7 prescription drug management", c:"grn" },
  { txt:"\u2192 MDM       \u00b7 Moderate", c:"pur" },
  { txt:"\u2192 CPT       \u00b7 99213  (Established \u00b7 Moderate)", c:"pur" },
  { txt:"\u2192 ICD       \u00b7 E11.65 \u00b7 I10 \u00b7 E78.5", c:"blu" },
];
const HD_TOTAL = HD_SCRIPT.reduce((a,l)=>a+l.txt.length,0);
const HD_PAUSE = 70;
function CodeTyper(){
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [n, setN] = useStateHD(reduce ? 99999 : 0);
  useEffectHD(()=>{
    if(reduce || document.hidden){ setN(99999); return; }
    const id = setInterval(()=> setN(p => p > HD_TOTAL + HD_PAUSE ? 0 : p + 1), 34);
    return ()=> clearInterval(id);
  },[]);
  let rem = n;
  const rows = [];
  for(let i=0;i<HD_SCRIPT.length;i++){
    const L = HD_SCRIPT[i];
    if(rem <= 0) break;
    const take = Math.min(L.txt.length, rem);
    rows.push({ c:L.c, shown:L.txt.slice(0,take), active: take < L.txt.length });
    rem -= L.txt.length;
  }
  return React.createElement("div",{ className:"hd-typer" },
    React.createElement("div",{ className:"hd-typer-h" },
      React.createElement("span",{ className:"hd-livedot" }), "coding stream · live"),
    React.createElement("div",{ className:"hd-typer-body" },
      rows.map((r,i)=> React.createElement("div",{ key:i, className:`hd-tline ${r.c}` },
        r.shown, r.active && React.createElement("span",{ className:"caret" })))
    )
  );
}

function Kpi({ value, dec=0, suf="", pre="", label, seed }){
  return React.createElement("div",{ className:"hd-kpi" },
    React.createElement("div",{ className:"hd-kpi-l" },
      React.createElement("div",{ className:"hd-kpi-v" },
        React.createElement(CountUp,{ to:value, decimals:dec, suffix:suf, prefix:pre, dur:1700 })),
      React.createElement("div",{ className:"hd-kpi-cap" }, label)),
    React.createElement(Spark,{ seed })
  );
}
function Spark({ seed }){
  return React.createElement("div",{ className:"hd-spark" },
    seed.map((v,i)=> React.createElement("span",{ key:i, style:{ height:`${v*9+10}%`, animationDelay:`${i*70}ms` } }))
  );
}

Object.assign(window, { HeroDashboard });