// screen-claim-hub.jsx — Claim detail wrapper + tab router + header + overview tab
// Each other tab lives in its own file (tab-*.jsx) and registers a global.

const PCCH_t = window.PCT;
const PCCH_d = window.PCA;

function ClaimHubScreen({ claimId, tab }) {
  const store = useStore();
  const claim = store.findClaim(claimId);
  const mode = store.state.mode;

  if (!claim) {
    return (
      <Shell active="claims" breadcrumb={['Claims', 'Not found']}>
        <div style={{ padding: 40 }}>
          <AppEmpty
            icon="claims"
            title="Claim not found"
            body={`No claim with ID ${claimId}.`}
            action={<a href="#/" style={{ textDecoration:'none' }}><AppBtn kind="ghost" icon="left">Back to dashboard</AppBtn></a>}
          />
        </div>
      </Shell>
    );
  }

  const insurer = PCCH_d.findInsurer(claim.insurer);
  const tabs = [
    { id:'overview',  label:'Overview',            icon:'list' },
    { id:'documents', label:'Documents',           icon:'docs' },
    { id:'preauth',   label:'Pre-auth',            icon:'shield' },
    { id:'charges',   label:'Stay & charges',      icon:'money' },
    { id:'queries',   label:'Queries',             icon:'denial', badge: claim.queries?.filter(q => q.status === 'OPEN').length },
    { id:'discharge', label:'Discharge check',     icon:'check' },
    { id:'dossier',   label:'Self-pay / Dossier',  icon:'send' },
  ];

  return (
    <Shell
      active="claims"
      breadcrumb={[mode === 'standalone' ? 'My worklist' : 'Revenue', 'Claims', claim.id]}
      headerRight={
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          {mode === 'integrated' && <HmsBadge>HMS-linked</HmsBadge>}
          <AppBtn icon="phone" size="md">Call patient</AppBtn>
          {claim.flags?.includes('sla-breach') && (
            <AppBtn icon="alert" size="md" kind="danger">Escalate</AppBtn>
          )}
        </div>
      }
    >
      <div style={{ padding: '20px 24px 80px' }}>
        <ClaimHeaderCard claim={claim} insurer={insurer}/>

        {/* Tab bar */}
        <div style={{
          display:'flex', gap:2, padding:'0 4px',
          borderBottom: `1px solid ${PCCH_t.c.border}`,
          marginTop:18, marginBottom:18,
          overflowX:'auto',
        }}>
          {tabs.map(t => (
            <a key={t.id} href={`#/claims/${claim.id}/${t.id}`} style={{
              display:'flex', alignItems:'center', gap:7,
              padding:'10px 14px',
              color: tab === t.id ? PCCH_t.c.text : PCCH_t.c.textMuted,
              fontSize:13, fontWeight: tab === t.id ? 600 : 500,
              borderBottom: tab === t.id ? `2px solid ${PCCH_t.c.brand}` : '2px solid transparent',
              marginBottom:'-1px',
              textDecoration:'none', cursor:'pointer', whiteSpace:'nowrap',
              fontFamily: PCCH_t.f.sans,
            }}>
              <AppIcon name={t.icon} size={14} color={tab === t.id ? PCCH_t.c.text : PCCH_t.c.textMuted}/>
              {t.label}
              {t.badge > 0 && (
                <span style={{
                  background: PCCH_t.c.warning, color:'#fff',
                  fontSize:10, fontWeight:600,
                  padding:'0 6px', borderRadius:8, lineHeight:1.6,
                  fontFamily: PCCH_t.f.mono,
                }}>{t.badge}</span>
              )}
            </a>
          ))}
        </div>

        {/* Tab content */}
        {tab === 'overview'   && <OverviewTab claim={claim} insurer={insurer}/>}
        {tab === 'documents'  && window.DocumentsTab && <window.DocumentsTab claim={claim} insurer={insurer}/>}
        {tab === 'preauth'    && window.PreAuthTab   && <window.PreAuthTab   claim={claim} insurer={insurer}/>}
        {tab === 'charges'    && window.ChargesTab   && <window.ChargesTab   claim={claim} insurer={insurer}/>}
        {tab === 'queries'    && window.QueriesTab   && <window.QueriesTab   claim={claim} insurer={insurer}/>}
        {tab === 'discharge'  && window.DischargeTab && <window.DischargeTab claim={claim} insurer={insurer}/>}
        {tab === 'dossier'    && window.DossierTab   && <window.DossierTab   claim={claim} insurer={insurer}/>}
      </div>
    </Shell>
  );
}

// ── Claim header (always rendered at top of every tab) ────
function ClaimHeaderCard({ claim, insurer }) {
  const totalCharges = (claim.charges || []).reduce((s, c) => s + (c.amount * (c.qty || 1)), 0);
  const moneyTitle = claim.status === 'SETTLED' ? 'Settled' :
                     claim.approvedAmount != null ? 'Approved' : 'Estimated';
  const moneyValue = claim.finalSettled ?? claim.approvedAmount ?? claim.estimatedCost;
  const ageMs = Date.now() - claim.admittedAt;
  const ageDays = Math.floor(ageMs / (24 * 3600 * 1000));

  return (
    <AppCard pad={0} style={{ overflow:'hidden' }}>
      <div data-demo="clm-overview" style={{
        display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr',
      }}>
        {/* Patient */}
        <div style={{ padding:'18px 22px', borderRight:`1px solid ${PCCH_t.c.border}` }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <AppAvatar name={claim.patient.name} size={40} bg="#FCE7F3"/>
            <div style={{ minWidth:0 }}>
              <div style={{ fontSize:16, fontWeight:600, letterSpacing:'-.005em' }}>{claim.patient.name}</div>
              <div style={{ fontSize:11, color: PCCH_t.c.textMuted, fontFamily: PCCH_t.f.mono, marginTop:2 }}>
                {claim.patient.uhid} · {claim.patient.age}{claim.patient.gender} · {claim.patient.phone}
              </div>
            </div>
          </div>
          <div style={{ fontSize:11.5, color: PCCH_t.c.textMuted, lineHeight:1.6, marginTop:14 }}>
            <div><span style={{ color: PCCH_t.c.textDim, display:'inline-block', width:56 }}>Doctor</span>{claim.doctor}</div>
            <div><span style={{ color: PCCH_t.c.textDim, display:'inline-block', width:56 }}>Bed</span>{claim.ward}</div>
            <div><span style={{ color: PCCH_t.c.textDim, display:'inline-block', width:56 }}>Admitted</span>{PCCH_d.dayOnly(claim.admittedAt)} · day {ageDays + 1}</div>
          </div>
        </div>

        {/* Payer */}
        <div style={{ padding:'18px 22px', borderRight:`1px solid ${PCCH_t.c.border}` }}>
          <CardLabel>Payer · {claim.claimType}</CardLabel>
          <div style={{ marginTop:10 }}>
            <AppPayerChip insurerId={claim.insurer} size={36}/>
          </div>
          <div style={{
            fontFamily: PCCH_t.f.mono, fontSize:11, color: PCCH_t.c.textMuted,
            marginTop:10, letterSpacing:'.01em', wordBreak:'break-all',
          }}>{claim.policyNumber}</div>
        </div>

        {/* Diagnosis */}
        <div style={{ padding:'18px 22px', borderRight:`1px solid ${PCCH_t.c.border}` }}>
          <CardLabel>Diagnosis · ICD-10</CardLabel>
          <div style={{ display:'flex', alignItems:'baseline', gap:8, marginTop:10 }}>
            <span style={{
              fontFamily: PCCH_t.f.mono, fontSize:13, fontWeight:600,
              padding:'2px 7px', background: PCCH_t.c.surface2,
              borderRadius:5, color: PCCH_t.c.text,
            }}>{claim.icd}</span>
            <span style={{ fontSize:12.5, color: PCCH_t.c.text }}>{claim.icdLabel}</span>
          </div>
          <div style={{ fontSize:11, color: PCCH_t.c.textMuted, marginTop:8, lineHeight:1.5 }}>
            {claim.symptomOnset}
          </div>
        </div>

        {/* Money + status */}
        <div style={{ padding:'18px 22px', background:'#FAFAF9' }}>
          <CardLabel>{moneyTitle}</CardLabel>
          <div style={{ marginTop:6 }}>
            <AppMoney value={moneyValue} strong size={22}/>
          </div>
          <div style={{ marginTop:10 }}>
            <AppStatusPill status={claim.status}/>
          </div>
          {claim.slaDeadlineAt && claim.status === 'PREAUTH_SUBMITTED' && (
            <div style={{ marginTop:10 }}>
              <AppSLATimer deadline={claim.slaDeadlineAt}/>
            </div>
          )}
          {claim.charges?.length > 0 && (
            <div style={{ fontSize:11, color: PCCH_t.c.textMuted, marginTop:10, lineHeight:1.5 }}>
              Charges to date: <strong style={{ color: PCCH_t.c.text, fontFamily: PCCH_t.f.mono }}>{PCCH_d.inr(totalCharges)}</strong>
              {claim.approvedAmount != null && (
                <span> · {Math.round((totalCharges/claim.approvedAmount)*100)}% of cap</span>
              )}
            </div>
          )}
        </div>
      </div>
    </AppCard>
  );
}

function CardLabel({ children }) {
  return (
    <div style={{
      fontFamily: PCCH_t.f.mono, fontSize:9.5, fontWeight:600,
      letterSpacing:'.1em', textTransform:'uppercase',
      color: PCCH_t.c.textMuted,
    }}>{children}</div>
  );
}

// ── OVERVIEW TAB ─────────────────────────────────────────
function OverviewTab({ claim, insurer }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <LifecycleCard claim={claim}/>
        <AuditTrailCard claim={claim}/>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <NextActionCard claim={claim}/>
        <FinancialSummaryCard claim={claim}/>
        <PayerInfoCard insurer={insurer}/>
      </div>
    </div>
  );
}

function LifecycleCard({ claim }) {
  const stageOf = PCCH_d.statusMeta[claim.status]?.stage ?? 0;
  const stages = [
    { id:'intake',    label:'Intake',           desc:'Patient registered, documents captured' },
    { id:'preauth',   label:'Pre-auth',         desc:'Submit packet, await TPA response' },
    { id:'stay',      label:'In-stay',          desc:'Charges accumulate vs. approved cap' },
    { id:'discharge', label:'Discharge check',  desc:'Completeness + tariff audit' },
    { id:'submit',    label:'Claim submitted',  desc:'Final packet to TPA portal' },
    { id:'settle',    label:'Settled & posted', desc:'Money received, AR cleared' },
  ];

  return (
    <AppCard pad={20}>
      <AppSectionLabel>Claim lifecycle</AppSectionLabel>
      <div style={{ marginTop:18, display:'flex', flexDirection:'column' }}>
        {stages.map((s, i) => {
          const done = i < stageOf;
          const current = i === stageOf;
          const upcoming = i > stageOf;
          const last = i === stages.length - 1;
          return (
            <div key={s.id} style={{
              display:'flex', gap:14, paddingBottom: last ? 0 : 16, position:'relative',
            }}>
              {!last && <span style={{
                position:'absolute', left:8, top:20, bottom:0, width:1.5,
                background: done ? PCCH_t.c.success : PCCH_t.c.border,
              }}/>}
              <div style={{
                width:18, height:18, borderRadius:'50%', flexShrink:0, marginTop:1,
                background: done ? PCCH_t.c.success : '#fff',
                border: current ? `2.5px solid ${PCCH_t.c.brand}` : done ? `0` : `1.5px solid ${PCCH_t.c.borderStrong}`,
                boxShadow: current ? `0 0 0 4px ${PCCH_t.c.brandSoft}` : 'none',
                display:'grid', placeItems:'center',
              }}>
                {done && <AppIcon name="check" size={10} color="#fff" stroke={2.8}/>}
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{
                  fontSize:13.5, fontWeight: current ? 600 : 500,
                  color: upcoming ? PCCH_t.c.textDim : PCCH_t.c.text,
                  display:'flex', gap:8, alignItems:'center',
                }}>
                  {s.label}
                  {current && <span style={{
                    fontSize:9, fontWeight:600, fontFamily: PCCH_t.f.mono, letterSpacing:'.08em',
                    padding:'1px 5px', borderRadius:3,
                    background: PCCH_t.c.brandSoft, color: PCCH_t.c.brand,
                  }}>NOW</span>}
                </div>
                <div style={{ fontSize:11.5, color: PCCH_t.c.textMuted, marginTop:2 }}>{s.desc}</div>
              </div>
            </div>
          );
        })}
      </div>
    </AppCard>
  );
}

function AuditTrailCard({ claim }) {
  const integrated = useIntegrated();
  // Build a synthetic audit trail from claim properties
  const events = [];
  events.push({
    at: claim.admittedAt,
    kind:'admit',
    title:'Admission registered',
    detail: `${claim.ward} · ${claim.doctor}`,
    who: 'Front Desk',
    src: integrated ? 'hms' : 'manual',
    svc: integrated ? 'front-desk-service' : null,
  });
  if (claim.admittedAt) {
    events.push({
      at: claim.admittedAt + 4 * 60 * 1000,
      kind:'system',
      title: integrated ? 'Draft claim auto-created' : 'Draft claim created',
      detail: integrated
        ? `Pulled patient-service + appointment-service · ROHINI ${PCCH_d.tenant.rohini} stamped`
        : `Manually keyed · ROHINI ${PCCH_d.tenant.rohini}`,
      who: integrated ? 'PulseChart · auto' : claim.coordinator,
      src: integrated ? 'auto' : 'manual',
      svc: integrated ? 'patient-service' : null,
    });
  }
  if (claim.preauthSubmittedAt) {
    events.push({
      at: claim.preauthSubmittedAt - 5 * 60 * 1000,
      kind:'doc',
      title:'Pre-auth packet generated',
      detail: `${claim.documents.length} docs assembled · ${PCCH_d.findInsurer(claim.insurer)?.name} template`,
      who: claim.coordinator,
      src:'manual',
    });
    events.push({
      at: claim.preauthSubmittedAt,
      kind:'submit',
      title:'Pre-auth submitted',
      detail: 'Marked submitted in PulseChart · IRDAI 1-hour SLA started',
      who: claim.coordinator,
      src:'manual',
    });
  }
  if (claim.approvedAmount != null && claim.status !== 'PREAUTH_SUBMITTED') {
    events.push({
      at: claim.preauthSubmittedAt + 38 * 60 * 1000,
      kind:'submit',
      title: claim.approvedAmount === 0 ? 'Pre-auth denied' :
             claim.approvedAmount < claim.estimatedCost ? 'Partial approval received' : 'Pre-auth approved',
      detail: claim.approvedAmount === 0 ? (claim.denialReason || 'Reason logged') :
              `Approved ${PCCH_d.inr(claim.approvedAmount)} of ${PCCH_d.inr(claim.estimatedCost)}`,
      who: claim.coordinator,
      src:'tpa',
    });
  }
  if (integrated && claim.charges && claim.charges.length > 0) {
    events.push({
      at: claim.admittedAt + 6 * 60 * 60 * 1000,
      kind:'system',
      title:'Charges synced from HMS',
      detail: `${claim.charges.length} entries pulled from billing-service · next sync in 4h`,
      who:'PulseChart · auto',
      src:'hms',
      svc:'billing-service',
    });
  }
  if (claim.queries) {
    claim.queries.forEach(q => events.push({
      at: q.raisedAt, kind:'submit',
      title: 'TPA query raised',
      detail: q.plainEnglish || q.rawText.slice(0,90),
      who: claim.coordinator,
      src:'tpa',
    }));
  }
  if (claim.dischargedAt) {
    events.push({
      at: claim.dischargedAt, kind:'admit',
      title:'Discharged',
      detail: `Bed released · day ${Math.floor((claim.dischargedAt - claim.admittedAt) / (24*3600*1000)) + 1} stay`,
      who: 'Front Desk',
      src: integrated ? 'hms' : 'manual',
      svc: integrated ? 'ipd-service' : null,
    });
  }
  if (claim.settledAt) {
    events.push({
      at: claim.settledAt, kind:'doc',
      title:'Claim settled',
      detail: `${PCCH_d.inr(claim.finalSettled || claim.approvedAmount)} received · GL posted`,
      who: integrated ? 'accounting-service' : 'Accounting',
      src: integrated ? 'hms' : 'manual',
      svc: integrated ? 'accounting-service' : null,
    });
  }
  events.sort((a, b) => a.at - b.at);

  const kindStyle = (k) => ({
    admit:    { bg: PCCH_t.c.surface2,    fg: PCCH_t.c.text,    icon:'user' },
    system:   { bg: PCCH_t.c.brandSoft,   fg: PCCH_t.c.brand,   icon:'sparkle' },
    doc:      { bg: PCCH_t.c.accentTint,  fg: PCCH_t.c.accent,  icon:'paperclip' },
    submit:   { bg: PCCH_t.c.warningTint, fg: PCCH_t.c.warning, icon:'send' },
  }[k]);

  return (
    <AppCard pad={20}>
      <AppSectionLabel right={<span style={{ fontSize:11, color: PCCH_t.c.textDim }}>{events.length} events · IST</span>}>
        Audit trail
      </AppSectionLabel>
      <div style={{ display:'flex', flexDirection:'column', marginTop:14 }}>
        {events.length === 0 ? (
          <div style={{ fontSize:12, color: PCCH_t.c.textMuted, padding:'8px 0' }}>No events yet.</div>
        ) : events.map((e, i) => {
          const k = kindStyle(e.kind);
          const last = i === events.length - 1;
          return (
            <div key={i} style={{ display:'flex', gap:12, paddingBottom: last ? 0 : 14, position:'relative' }}>
              {!last && <span style={{
                position:'absolute', left:13, top:30, bottom:0, width:1,
                background: PCCH_t.c.border,
              }}/>}
              <div style={{
                width:26, height:26, borderRadius:7,
                background: k.bg, color: k.fg,
                display:'grid', placeItems:'center', flexShrink:0, marginTop:1,
              }}>
                <AppIcon name={k.icon} size={13} color={k.fg}/>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', justifyContent:'space-between', gap:12 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{e.title}</div>
                    {e.src === 'hms' && <HmsBadge variant="chip">HMS</HmsBadge>}
                    {e.src === 'auto' && <HmsBadge variant="chip">AUTO</HmsBadge>}
                    {e.src === 'tpa' && (
                      <span style={{
                        display:'inline-flex', padding:'1px 6px', borderRadius:4,
                        background: PCCH_t.c.warningTint, color: PCCH_t.c.warning,
                        fontSize:9.5, fontWeight:600, fontFamily: PCCH_t.f.mono,
                        letterSpacing:'.04em', textTransform:'uppercase',
                      }}>TPA</span>
                    )}
                  </div>
                  <div style={{ fontSize:11, color: PCCH_t.c.textDim, fontFamily: PCCH_t.f.mono, flexShrink:0, whiteSpace:'nowrap' }}>{PCCH_d.dateLabel(e.at)}</div>
                </div>
                <div style={{ fontSize:11.5, color: PCCH_t.c.textMuted, marginTop:2, lineHeight:1.5 }}>{e.detail}</div>
                <div style={{ fontSize:10.5, color: PCCH_t.c.textDim, marginTop:3, fontFamily: PCCH_t.f.mono }}>by {e.who}{e.svc && <span style={{ marginLeft:6, color: PCCH_t.c.brand }}>· {e.svc}</span>}</div>
              </div>
            </div>
          );
        })}
      </div>
    </AppCard>
  );
}

function NextActionCard({ claim }) {
  // Determine the next action based on status
  const tabFor = (s) => {
    if (['INTAKE','DOCS_PENDING'].includes(s)) return { tab:'documents', label:'Complete documents', cta:'Go to documents' };
    if (['PREAUTH_READY'].includes(s))         return { tab:'preauth',   label:'Submit pre-auth',     cta:'Open pre-auth' };
    if (['PREAUTH_SUBMITTED'].includes(s))     return { tab:'preauth',   label:'Log TPA response',    cta:'Open pre-auth' };
    if (['PREAUTH_QUERY','CLAIM_QUERY'].includes(s)) return { tab:'queries', label:'Resolve query', cta:'Open queries' };
    if (['PREAUTH_APPROVED','PREAUTH_PARTIAL','ACTIVE_STAY'].includes(s)) return { tab:'charges', label:'Log daily charges', cta:'Open charges' };
    if (['PREAUTH_DENIED','DENIED'].includes(s)) return { tab:'dossier', label:'Convert to self-pay', cta:'Open self-pay' };
    if (['DISCHARGE_PENDING'].includes(s))     return { tab:'discharge', label:'Complete discharge check', cta:'Open discharge' };
    if (['CLAIM_READY'].includes(s))           return { tab:'discharge', label:'Generate claim package', cta:'Open discharge' };
    if (['CLAIM_SUBMITTED'].includes(s))       return { tab:'overview',  label:'Awaiting payment',    cta:'Track AR', disabled:true };
    return { tab:'overview', label:'Settled · nothing to do', cta:'Open claim', disabled:true };
  };
  const next = tabFor(claim.status);
  return (
    <AppCard>
      <AppSectionLabel>Next action</AppSectionLabel>
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:15, fontWeight:600, lineHeight:1.4, marginBottom:14 }}>{next.label}</div>
        <a href={`#/claims/${claim.id}/${next.tab}`} style={{ textDecoration:'none' }}>
          <AppBtn full kind={next.disabled ? 'ghost' : 'primary'} iconRight="right">{next.cta}</AppBtn>
        </a>
      </div>
    </AppCard>
  );
}

function FinancialSummaryCard({ claim }) {
  const totalCharges = (claim.charges || []).reduce((s, c) => s + (c.amount * (c.qty || 1)), 0);
  return (
    <AppCard>
      <AppSectionLabel>Financial summary</AppSectionLabel>
      <div style={{ marginTop:10 }}>
        <Row label="Estimated cost"    value={<AppMoney value={claim.estimatedCost}/>}/>
        <Row label="Pre-auth approved" value={claim.approvedAmount != null ? <AppMoney value={claim.approvedAmount} strong/> : <span style={{ fontSize:12, color: PCCH_t.c.textDim, fontFamily: PCCH_t.f.mono }}>awaiting</span>}/>
        {claim.charges?.length > 0 && (
          <Row label="Charges to date" value={<AppMoney value={totalCharges}/>}/>
        )}
        <Row label="Deposit collected" value={<AppMoney value={claim.depositCollected}/>}/>
        {claim.patientShare != null && (
          <Row label="Patient share" value={<AppMoney value={claim.patientShare} strong/>} highlight={claim.patientShare > 0}/>
        )}
        {claim.finalSettled != null && (
          <Row label="Final settled" value={<AppMoney value={claim.finalSettled} strong/>}/>
        )}
      </div>
    </AppCard>
  );
}

function Row({ label, value, highlight }) {
  return (
    <div style={{
      display:'flex', justifyContent:'space-between', alignItems:'baseline',
      padding:'8px 0', borderBottom: `1px solid ${PCCH_t.c.border}`,
    }}>
      <span style={{ fontSize:12.5, color: highlight ? PCCH_t.c.warning : PCCH_t.c.textMuted }}>{label}</span>
      <span>{value}</span>
    </div>
  );
}

function PayerInfoCard({ insurer }) {
  if (!insurer) return null;
  return (
    <AppCard>
      <AppSectionLabel>Payer rules</AppSectionLabel>
      <div style={{ marginTop:10 }}>
        <Row label="Pre-auth SLA" value={<span style={{ fontFamily: PCCH_t.f.mono, fontSize:12 }}>{insurer.slaPreauthMin} min</span>}/>
        <Row label="Claim submission" value={<span style={{ fontFamily: PCCH_t.f.mono, fontSize:12 }}>{insurer.slaClaimDays} days post-discharge</span>}/>
        <Row label="Portal" value={<span style={{ fontFamily: PCCH_t.f.mono, fontSize:11, color: PCCH_t.c.accent, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', maxWidth:140 }}>{insurer.portal.replace(/https?:\/\/(www\.)?/, '')}</span>}/>
      </div>
      {insurer.specialRules && (
        <div style={{
          marginTop:12, padding:'10px 12px',
          background: PCCH_t.c.warningTint,
          borderRadius:6,
          fontSize:11.5, color:'#92400E', lineHeight:1.55,
          display:'flex', gap:8,
        }}>
          <AppIcon name="info" size={14} color={PCCH_t.c.warning}/>
          <span><strong>Special rule:</strong> {insurer.specialRules}</span>
        </div>
      )}
    </AppCard>
  );
}

Object.assign(window, { ClaimHubScreen });