// V5 — Editorial base + V2 visit mix + V1 encounter log
// Same chrome and rhythm as V4, but:
//   • The duet's Visit half becomes V2's full-width stacked-bar Visit Mix
//   • Care Setting moves into its own full-width card below
//   • The encounter log returns to V1's collapsible day-group style

// ─ V2 Visit Mix (inlined; V2's local copy isn't on window) ──────────────────
function V5VisitMix() {
  const { newPt, estPt } = MOCK.stats.visitTypes;
  const total = newPt.ytdCount + estPt.ytdCount;
  const newPct = newPt.ytdCount / total;
  return (
    <div style={{
      background: RVU.surface, borderRadius: 18,
      border: `1px solid ${RVU.border}`,
      padding: '16px 18px', margin: '0 16px 12px',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: RVU.navyDark }}>Visit Mix</span>
        <span style={{ fontSize: 10.5, color: RVU.textMuted, fontFamily: RVU.fontMono }}>YTD · {total} visits</span>
      </div>
      <div style={{ display: 'flex', height: 10, borderRadius: 999, overflow: 'hidden', marginBottom: 14 }}>
        <div style={{ width: `${newPct * 100}%`, background: RVU.teal }}/>
        <div style={{ width: `${(1 - newPct) * 100}%`, background: RVU.navy }}/>
      </div>
      <div style={{ display: 'flex', gap: 16 }}>
        <V5VisitRow color={RVU.teal} label="New patient"         count={newPt.ytdCount} rvu={newPt.ytdRVU} mtd={newPt.mtdCount}/>
        <V5VisitRow color={RVU.navy} label="Established patient" count={estPt.ytdCount} rvu={estPt.ytdRVU} mtd={estPt.mtdCount}/>
      </div>
    </div>
  );
}
function V5VisitRow({ color, label, count, rvu, mtd }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
        <div style={{ width: 8, height: 8, borderRadius: 2, background: color }}/>
        <span style={{ fontSize: 11, color: RVU.textSec, fontWeight: 500 }}>{label}</span>
      </div>
      <div style={{
        fontFamily: RVU.fontNum, fontSize: 22, fontWeight: 700,
        color: RVU.navyDark, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.4, lineHeight: 1,
      }}>
        {count}
      </div>
      <div style={{ fontSize: 10.5, color: RVU.textMuted, marginTop: 4, fontFamily: RVU.fontMono }}>
        {fmt.rvu1(rvu)} wRVUs · {mtd} MTD
      </div>
    </div>
  );
}

// ─ Care setting full-width card — pie style from variant A ──────────────────
function V5CareSetting() {
  const data = MOCK.stats.careMix;
  const R = 42, CX = 50, CY = 50;
  let cum = 0;
  const arcs = data.map((d) => {
    const a0 = cum * Math.PI * 2 - Math.PI / 2;
    const a1 = (cum + d.pct) * Math.PI * 2 - Math.PI / 2;
    cum += d.pct;
    const x0 = CX + R * Math.cos(a0), y0 = CY + R * Math.sin(a0);
    const x1 = CX + R * Math.cos(a1), y1 = CY + R * Math.sin(a1);
    const large = d.pct > 0.5 ? 1 : 0;
    return { d: `M${CX} ${CY} L${x0} ${y0} A${R} ${R} 0 ${large} 1 ${x1} ${y1} Z`, color: d.color };
  });
  return (
    <div style={{
      background: RVU.surface, borderRadius: 18,
      border: `1px solid ${RVU.border}`,
      padding: '16px 18px', margin: '0 16px 12px',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: RVU.navyDark }}>wRVUs by Care Setting</span>
        <span style={{ fontSize: 10.5, color: RVU.textMuted, fontFamily: RVU.fontMono }}>YTD share</span>
      </div>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        <svg width="110" height="110" viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
          {arcs.map((a, i) => <path key={i} d={a.d} fill={a.color}/>)}
          <circle cx={CX} cy={CY} r={22} fill={RVU.surface}/>
          <text x={CX} y={CY-2} fontSize="9" fill={RVU.textMuted} textAnchor="middle" fontFamily={RVU.fontUI}>SETTINGS</text>
          <text x={CX} y={CY+9} fontSize="11" fontWeight="700" fill={RVU.navyDark} textAnchor="middle" fontFamily={RVU.fontUI}>4</text>
        </svg>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {data.map(d => (
            <div key={d.label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 8, height: 8, borderRadius: 2, background: d.color }}/>
              <span style={{ fontSize: 12, color: RVU.text, flex: 1 }}>{d.label}</span>
              <span style={{ fontSize: 12, fontWeight: 700, color: RVU.navyDark, fontFamily: RVU.fontMono, fontVariantNumeric: 'tabular-nums' }}>
                {fmt.pct0(d.pct)}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─ V1 Encounter Log (inlined; V1's local copy isn't on window) ──────────────
function V5Log() {
  return (
    <div style={{ margin: '0 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
        <span style={{ fontSize: 16, fontWeight: 700, color: RVU.navyDark }}>Encounter Log</span>
        <span style={{ fontSize: 12, color: RVU.textMuted }}>118 entries</span>
      </div>
      {MOCK.encounterDays.map((day, di) => (
        <div key={di} style={{
          background: RVU.surface, borderRadius: 12, border: `1px solid ${RVU.border}`,
          marginBottom: 8, overflow: 'hidden',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 14px', background: RVU.surfaceAlt,
            borderBottom: `1px solid ${RVU.border}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon.chevDown/>
              <span style={{ fontSize: 13, fontWeight: 600, color: RVU.navyDark }}>{day.date}</span>
            </div>
            <span style={{ fontSize: 13, fontWeight: 600, color: RVU.navy, fontVariantNumeric: 'tabular-nums' }}>
              {fmt.rvu(day.total)} wRVUs
            </span>
          </div>
          {day.rows.map((r, ri) => (
            <div key={ri} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
              borderBottom: ri < day.rows.length - 1 ? `1px solid ${RVU.borderLt}` : 'none',
            }}>
              <span style={{
                background: RVU.navyDark, color: '#fff', fontSize: 11, fontWeight: 700,
                padding: '3px 7px', borderRadius: 4, fontFamily: RVU.fontMono, minWidth: 52, textAlign: 'center',
              }}>{r.code}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: RVU.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.desc}</div>
                <div style={{ fontSize: 11, color: RVU.navy, fontWeight: 600, marginTop: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {fmt.rvu(r.rvu)} <span style={{ color: RVU.textMuted, fontWeight: 400 }}>wRVUs</span>
                </div>
              </div>
              <Icon.ellipsis/>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function DashboardV5() {
  return (
    <PhoneShell>
      <DashV4Header/>
      <div style={{ height: 12 }}/>
      <DashV4Featured/>

      <div style={{ marginTop: 10 }}>
        <DashV4MonthlyCard/>
        <V5VisitMix/>
        <V5CareSetting/>
        <DashV4TopCodes/>
      </div>

      <div style={{ marginTop: 10 }}>
        <V5Log/>
      </div>

      <div style={{ height: 16 }}/>
      <TabBar/>
    </PhoneShell>
  );
}

window.DashboardV5 = DashboardV5;