// screen-dashboard.jsx — Coordinator worklist (R18 + claims list)
// Shows KPI strip, tabbed filters, and the live claims table.

const PCSD_t = window.PCT;
const PCSD_d = window.PCA;

function DashboardScreen() {
  const store = useStore();
  const claims = store.state.claims;
  const mode = store.state.mode;

  const [filter, setFilter] = React.useState('all');

  // Group claims by filter buckets
  const groups = React.useMemo(() => {
    const active = claims.filter(c => !['SETTLED','CLOSED','SHORTPAID'].includes(c.status));
    return {
      all: claims,
      active,
      preauth: claims.filter(c => ['PREAUTH_SUBMITTED','PREAUTH_QUERY','DOCS_PENDING','PREAUTH_READY'].includes(c.status)),
      stay: claims.filter(c => ['ACTIVE_STAY','PREAUTH_APPROVED','PREAUTH_PARTIAL'].includes(c.status)),
      ready: claims.filter(c => ['CLAIM_READY','DISCHARGE_PENDING'].includes(c.status)),
      query: claims.filter(c => c.queries && c.queries.some(q => q.status === 'OPEN')),
      settled: claims.filter(c => ['SETTLED','CLOSED'].includes(c.status)),
      denied: claims.filter(c => ['DENIED','PREAUTH_DENIED','SELF_PAY'].includes(c.status)),
    };
  }, [claims]);

  const shown = groups[filter] || groups.all;

  // KPI calculations
  const kpis = React.useMemo(() => {
    const now = Date.now();
    const slaBreach = claims.filter(c => c.slaDeadlineAt && c.slaDeadlineAt < now && c.status === 'PREAUTH_SUBMITTED').length;
    const queries = groups.query.length;
    const submittedToday = claims.filter(c => c.preauthSubmittedAt && (now - c.preauthSubmittedAt) < 24*3600*1000).length;
    const docsPending = claims.filter(c => c.status === 'DOCS_PENDING').length;
    return { active: groups.active.length, slaBreach, queries, docsPending, submittedToday };
  }, [claims, groups]);

  return (
    <Shell
      active="home"
      breadcrumb={[mode === 'standalone' ? 'My worklist' : 'Revenue', 'Claims']}
      headerRight={
        <div style={{ display:'flex', gap:8 }}>
          <AppBtn icon="filter" size="md">Filters</AppBtn>
          <a href="#/claims/new" style={{ textDecoration:'none' }}>
            <AppBtn icon="plus" size="md" kind="dark">New claim</AppBtn>
          </a>
        </div>
      }
    >
      <div style={{ padding:'24px 24px 80px' }}>
        {/* KPI strip */}
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10,
          marginBottom:20,
        }}>
          <KPI label="Active claims"        value={kpis.active}        accent={PCSD_t.c.accent}/>
          <KPI label="SLA breaches"         value={kpis.slaBreach}     tone={kpis.slaBreach > 0 ? 'error' : null}/>
          <KPI label="Queries pending"      value={kpis.queries}       tone={kpis.queries > 0 ? 'warning' : null}/>
          <KPI label="Docs pending"         value={kpis.docsPending}/>
          <KPI label="Submitted (24h)"      value={kpis.submittedToday} tone="success"/>
        </div>

        {/* Tab filters */}
        <div style={{
          display:'flex', alignItems:'center', gap:10, marginBottom:14,
          flexWrap:'wrap',
        }}>
          {[
            { id:'all',     label:'All',                count: groups.all.length },
            { id:'preauth', label:'Pre-auth in flight', count: groups.preauth.length },
            { id:'stay',    label:'In-stay',            count: groups.stay.length },
            { id:'query',   label:'Queries',            count: groups.query.length, dot: PCSD_t.c.warning },
            { id:'ready',   label:'Ready to submit',    count: groups.ready.length, dot: PCSD_t.c.accent },
            { id:'denied',  label:'Denied · self-pay',  count: groups.denied.length },
            { id:'settled', label:'Settled',            count: groups.settled.length, muted: true },
          ].map(t => (
            <button key={t.id} onClick={() => setFilter(t.id)} style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'6px 10px', borderRadius:7,
              background: filter === t.id ? PCSD_t.c.text : 'transparent',
              color: filter === t.id ? '#fff' : t.muted ? PCSD_t.c.textDim : PCSD_t.c.text,
              fontSize:12.5, fontWeight: filter === t.id ? 500 : 400,
              border:'none', cursor:'pointer', fontFamily: PCSD_t.f.sans,
            }}>
              {t.dot && <span style={{ width:5, height:5, borderRadius:'50%', background: t.dot }}/>}
              {t.label}
              <span style={{
                fontFamily: PCSD_t.f.mono, fontSize:10,
                background: filter === t.id ? 'rgba(255,255,255,.15)' : PCSD_t.c.surface2,
                color: filter === t.id ? '#fff' : PCSD_t.c.textMuted,
                padding:'1px 6px', borderRadius:4,
              }}>{t.count}</span>
            </button>
          ))}
          <div style={{ flex:1 }}/>
        </div>

        {/* Table */}
        <AppCard pad={0}>
          <TableHeader/>
          {shown.length === 0
            ? <AppEmpty icon="claims" title="No claims in this view" body="Try a different filter, or create a new claim."/>
            : shown.map((c, i) => <ClaimRow key={c.id} claim={c} dim={c.status === 'SETTLED'}/>) }
        </AppCard>

        {/* Keyboard hint */}
        <div style={{
          display:'flex', alignItems:'center', gap:8, marginTop:14,
          fontSize:11, color: PCSD_t.c.textDim,
        }}>
          <AppIcon name="kbd" size={13} color={PCSD_t.c.textDim}/>
          <span>
            <AppKBD>J</AppKBD> <AppKBD>K</AppKBD> move ·
            <AppKBD>↵</AppKBD> open ·
            <AppKBD>N</AppKBD> new claim ·
            <AppKBD>?</AppKBD> shortcuts
          </span>
        </div>
      </div>
    </Shell>
  );
}

function KPI({ label, value, tone, accent }) {
  const tones = { error: PCSD_t.c.error, warning: PCSD_t.c.warning, success: PCSD_t.c.success };
  const c = tones[tone] || accent || PCSD_t.c.text;
  return (
    <div style={{
      background: PCSD_t.c.surface,
      border: `1px solid ${PCSD_t.c.border}`,
      borderRadius: 10,
      padding: '14px 16px',
      display:'flex', flexDirection:'column', gap:6,
    }}>
      <div style={{
        fontSize:11, color: PCSD_t.c.textMuted,
        fontWeight:500, letterSpacing:'.01em',
      }}>{label}</div>
      <div style={{
        fontFamily: PCSD_t.f.mono, fontSize:28, fontWeight:600,
        color: c, lineHeight:1, letterSpacing:'-.02em',
        fontVariantNumeric:'tabular-nums',
      }}>{value}</div>
    </div>
  );
}

function TableHeader() {
  return (
    <div style={{
      display:'grid',
      gridTemplateColumns:'34px minmax(220px,1.5fr) 1fr 130px 130px 110px 1fr 100px 40px',
      gap:14, padding:'10px 18px',
      borderBottom: `1px solid ${PCSD_t.c.border}`,
      fontFamily: PCSD_t.f.mono, fontSize:10, fontWeight:600,
      letterSpacing:'.06em', textTransform:'uppercase',
      color: PCSD_t.c.textMuted,
    }}>
      <div></div>
      <div>Patient · Claim</div>
      <div>Payer · Policy</div>
      <div style={{ textAlign:'right' }}>Approved / Est.</div>
      <div>Status</div>
      <div>SLA</div>
      <div>Flags</div>
      <div style={{ textAlign:'right' }}>Updated</div>
      <div></div>
    </div>
  );
}

function ClaimRow({ claim, dim }) {
  const meta = PCSD_d.statusMeta[claim.status] || { label: claim.status, tone:'neutral' };
  const insurer = PCSD_d.findInsurer(claim.insurer);
  const moneyToShow = claim.approvedAmount != null ? claim.approvedAmount : claim.estimatedCost;
  const isApproved = claim.approvedAmount != null;
  const gap = isApproved && claim.approvedAmount < claim.estimatedCost ? claim.estimatedCost - claim.approvedAmount : null;

  return (
    <a href={`#/claims/${claim.id}`} style={{
      display:'grid',
      gridTemplateColumns:'34px minmax(220px,1.5fr) 1fr 130px 130px 110px 1fr 100px 40px',
      gap:14, padding:'0 18px', minHeight:60, alignItems:'center',
      borderBottom: `1px solid ${PCSD_t.c.border}`,
      textDecoration:'none', color: PCSD_t.c.text,
      opacity: dim ? .7 : 1,
      cursor:'pointer',
      transition:'background .08s',
    }}
    onMouseEnter={e => e.currentTarget.style.background = '#FAFAF9'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <div onClick={e => e.preventDefault()}>
        <input type="checkbox" style={{ accentColor: PCSD_t.c.accent }}/>
      </div>
      <div style={{ minWidth:0 }}>
        <div style={{
          fontSize:13.5, fontWeight:500, color: PCSD_t.c.text,
          whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
        }}>{claim.patient.name}</div>
        <div style={{ display:'flex', gap:8, fontSize:10.5, color: PCSD_t.c.textMuted, fontFamily: PCSD_t.f.mono, letterSpacing:'.02em', marginTop:2 }}>
          <span>{claim.id}</span>
          <span style={{ color: PCSD_t.c.textDim }}>·</span>
          <span>{claim.patient.uhid}</span>
          <span style={{ color: PCSD_t.c.textDim }}>·</span>
          <span>{claim.ward}</span>
        </div>
      </div>
      <div style={{ minWidth:0 }}>
        <AppPayerChip insurerId={claim.insurer} size={22}/>
      </div>
      <div style={{ textAlign:'right', display:'flex', flexDirection:'column', gap:2 }}>
        <AppMoney value={moneyToShow} strong={isApproved}/>
        {isApproved && gap && (
          <span style={{ fontSize:10, color: PCSD_t.c.warning, fontFamily: PCSD_t.f.mono }}>
            gap −{PCSD_d.inr(gap)}
          </span>
        )}
        {!isApproved && (
          <span style={{ fontSize:10, color: PCSD_t.c.textDim, fontFamily: PCSD_t.f.mono }}>est.</span>
        )}
      </div>
      <div>
        <AppStatusPill status={claim.status}/>
      </div>
      <div>
        {claim.slaDeadlineAt && claim.status === 'PREAUTH_SUBMITTED' ? (
          <AppSLATimer deadline={claim.slaDeadlineAt}/>
        ) : (
          <span style={{ fontSize:11, color: PCSD_t.c.textDim }}>—</span>
        )}
      </div>
      <div style={{ display:'flex', gap:4, flexWrap:'wrap' }}>
        {(claim.flags || []).map(f => <AppFlagChip key={f} kind={f}/>)}
        {(!claim.flags || claim.flags.length === 0) && <span style={{ fontSize:11, color: PCSD_t.c.textDim }}>—</span>}
      </div>
      <div style={{
        textAlign:'right', fontSize:11, color: PCSD_t.c.textMuted,
        whiteSpace:'nowrap',
      }}>{ageText(claim)}</div>
      <div style={{ display:'flex', justifyContent:'flex-end' }}>
        <AppIcon name="right" size={14} color={PCSD_t.c.textDim}/>
      </div>
    </a>
  );
}

function ageText(c) {
  const last = c.preauthSubmittedAt || c.admittedAt;
  if (!last) return '—';
  const m = Math.floor((Date.now() - last) / 60000);
  if (m < 60) return m + 'm ago';
  if (m < 60 * 24) return Math.floor(m/60) + 'h ago';
  if (m < 60 * 24 * 2) return 'Yesterday';
  return Math.floor(m / 60 / 24) + 'd ago';
}

Object.assign(window, { DashboardScreen });