// screen-settings.jsx — Insurer roster + tariff schedule uploads
// Two tabs: Insurers (read-only display of seeded checklists) + Tariffs (upload CSV)

const PCSS_t = window.PCT;
const PCSS_d = window.PCA;

function SettingsScreen({ tab }) {
  const mode = useStore().state.mode;
  return (
    <Shell
      active="settings"
      breadcrumb={[mode === 'standalone' ? 'Setup' : 'Setup', 'RCM settings']}
    >
      <div style={{ padding:'24px 24px 80px', maxWidth:1200 }}>
        <div style={{ marginBottom:24 }}>
          <div style={{ fontSize:24, fontWeight:600, letterSpacing:'-.015em' }}>RCM settings</div>
          <div style={{ fontSize:13, color: PCSS_t.c.textMuted, marginTop:4 }}>
            Insurer roster, tariff schedules and hospital configuration.
          </div>
        </div>

        {/* Hospital config card */}
        <AppCard pad={20} style={{ marginBottom:18 }}>
          <AppSectionLabel>Hospital · stamped on every claim PDF</AppSectionLabel>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18, marginTop:14 }}>
            <ConfigField label="Name"            value={PCSS_d.tenant.name}/>
            <ConfigField label="ROHINI ID"       value={PCSS_d.tenant.rohini} mono/>
            <ConfigField label="GST registration"value={PCSS_d.tenant.gst} mono/>
            <ConfigField label="Hospital reg."   value={PCSS_d.tenant.regNumber} mono/>
          </div>
          <div style={{
            marginTop:14, padding:'10px 12px',
            background: PCSS_t.c.successTint, borderRadius:6,
            fontSize:11.5, color: PCSS_t.c.success, fontWeight:500,
            display:'flex', gap:8, alignItems:'center',
          }}>
            <AppIcon name="check" size={14} color={PCSS_t.c.success}/>
            <span>ROHINI verified against IRDAI database · all claim submissions enabled.</span>
          </div>
        </AppCard>

        {/* Tab switcher */}
        <div style={{
          display:'flex', gap:2, padding:4,
          background: PCSS_t.c.surface2,
          borderRadius:8, width:'fit-content', marginBottom:18,
        }}>
          {[
            { id:'insurers', label:'Insurers & TPAs',   icon:'shield', href:'#/settings/insurers' },
            { id:'tariffs',  label:'Tariff schedules',  icon:'money',  href:'#/settings/tariffs' },
          ].map(s => (
            <a key={s.id} href={s.href} style={{
              display:'flex', alignItems:'center', gap:7,
              padding:'8px 14px', borderRadius:6,
              background: tab === s.id ? '#fff' : 'transparent',
              color: tab === s.id ? PCSS_t.c.text : PCSS_t.c.textMuted,
              fontSize:12.5, fontWeight: tab === s.id ? 600 : 500,
              textDecoration:'none',
              boxShadow: tab === s.id ? '0 1px 2px rgba(0,0,0,.06)' : 'none',
            }}>
              <AppIcon name={s.icon} size={13}/>
              {s.label}
            </a>
          ))}
        </div>

        {tab === 'insurers' && <InsurersPanel/>}
        {tab === 'tariffs'  && <TariffsPanel/>}
      </div>
    </Shell>
  );
}

function ConfigField({ label, value, mono }) {
  return (
    <div>
      <div style={{
        fontFamily: PCSS_t.f.mono, fontSize:9.5, fontWeight:600,
        letterSpacing:'.1em', textTransform:'uppercase',
        color: PCSS_t.c.textMuted, marginBottom:6,
      }}>{label}</div>
      <div style={{ fontSize:13.5, fontFamily: mono ? PCSS_t.f.mono : PCSS_t.f.sans, color: PCSS_t.c.text, fontWeight:500 }}>{value}</div>
    </div>
  );
}

// ── Insurers panel ───────────────────────────────────────
function InsurersPanel() {
  const [selected, setSelected] = React.useState(PCSS_d.insurers[0].id);
  const ins = PCSS_d.insurers.find(i => i.id === selected);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:14 }}>
      <AppCard pad={0}>
        <div style={{ padding:'12px 16px', borderBottom: `1px solid ${PCSS_t.c.border}` }}>
          <AppSectionLabel>{PCSS_d.insurers.length} insurers / TPAs configured</AppSectionLabel>
        </div>
        {PCSS_d.insurers.map(i => (
          <div key={i.id} onClick={() => setSelected(i.id)} style={{
            display:'flex', alignItems:'center', gap:11,
            padding:'14px 16px',
            background: i.id === selected ? PCSS_t.c.brandSoft : 'transparent',
            borderLeft: i.id === selected ? `3px solid ${PCSS_t.c.brand}` : '3px solid transparent',
            borderBottom: `1px solid ${PCSS_t.c.border}`,
            cursor:'pointer',
          }}>
            <div style={{
              width:32, height:32, borderRadius:7,
              background: i.color + '18', color: i.color,
              display:'grid', placeItems:'center', flexShrink:0,
              fontFamily: PCSS_t.f.mono, fontWeight:700, fontSize:13,
              border: `1px solid ${i.color}30`,
            }}>{i.logo}</div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight: i.id === selected ? 600 : 500 }}>{i.name}</div>
              <div style={{ fontSize:10.5, color: PCSS_t.c.textDim, fontFamily: PCSS_t.f.mono, letterSpacing:'.04em', textTransform:'uppercase', marginTop:1 }}>{i.type}</div>
            </div>
          </div>
        ))}
        <div style={{ padding:14, borderTop: `1px solid ${PCSS_t.c.border}` }}>
          <AppBtn full size="sm" kind="ghost" icon="plus">Add insurer / TPA</AppBtn>
        </div>
      </AppCard>

      {/* Detail */}
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <AppCard>
          <div style={{ display:'flex', alignItems:'center', gap:14 }}>
            <div style={{
              width:48, height:48, borderRadius:9,
              background: ins.color + '18', color: ins.color,
              display:'grid', placeItems:'center',
              fontFamily: PCSS_t.f.mono, fontWeight:700, fontSize:18,
              border: `1px solid ${ins.color}30`,
            }}>{ins.logo}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:18, fontWeight:600 }}>{ins.name}</div>
              <div style={{ fontSize:12, color: PCSS_t.c.textMuted, marginTop:2 }}>
                {ins.type} · pre-auth SLA <strong style={{ fontFamily: PCSS_t.f.mono }}>{ins.slaPreauthMin}m</strong> · claim submission <strong style={{ fontFamily: PCSS_t.f.mono }}>{ins.slaClaimDays}d</strong>
              </div>
            </div>
            <div style={{
              padding:'5px 10px', borderRadius:5,
              background: PCSS_t.c.successTint, color: PCSS_t.c.success,
              fontSize:10, fontWeight:600, fontFamily: PCSS_t.f.mono,
              letterSpacing:'.06em', textTransform:'uppercase',
            }}>Active</div>
          </div>

          <div style={{
            marginTop:14, padding:'10px 12px',
            background: PCSS_t.c.surface2, borderRadius:6,
            fontSize:11.5, color: PCSS_t.c.textMuted,
          }}>
            <span style={{ fontFamily: PCSS_t.f.mono, fontSize:9.5, fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase', color: PCSS_t.c.textDim, marginRight:6 }}>Portal</span>
            <span style={{ fontFamily: PCSS_t.f.mono, color: PCSS_t.c.accent }}>{ins.portal}</span>
          </div>

          {ins.specialRules && (
            <div style={{
              marginTop:10, padding:'10px 12px',
              background: PCSS_t.c.warningTint, borderRadius:6,
              fontSize:11.5, color:'#92400E', lineHeight:1.55,
              display:'flex', gap:8, alignItems:'flex-start',
            }}>
              <AppIcon name="info" size={13} color={PCSS_t.c.warning}/>
              <span><strong>Special rules:</strong> {ins.specialRules}</span>
            </div>
          )}
        </AppCard>

        <ChecklistDisplay title="Cashless pre-auth checklist" items={ins.preauthChecklist}/>
        <ChecklistDisplay title="Reimbursement checklist" items={ins.reimbursementChecklist} sequenceNote={ins.sequenceNote}/>
      </div>
    </div>
  );
}

function ChecklistDisplay({ title, items, sequenceNote }) {
  return (
    <AppCard pad={0}>
      <div style={{
        padding:'14px 18px',
        borderBottom: `1px solid ${PCSS_t.c.border}`,
        display:'flex', justifyContent:'space-between', alignItems:'center',
      }}>
        <AppSectionLabel>{title}</AppSectionLabel>
        <span style={{ fontSize:11, color: PCSS_t.c.textDim, fontFamily: PCSS_t.f.mono }}>
          {items.length} documents
        </span>
      </div>
      <div style={{ padding:14 }}>
        {items.map((item, i) => (
          <div key={item.docType} style={{
            display:'grid', gridTemplateColumns:'30px 1fr 1fr 80px',
            gap:10, padding:'10px 0', alignItems:'center',
            borderBottom: i < items.length - 1 ? `1px solid ${PCSS_t.c.border}` : 'none',
          }}>
            <div style={{
              width:22, height:22, borderRadius:5,
              background: PCSS_t.c.surface2, color: PCSS_t.c.textMuted,
              display:'grid', placeItems:'center',
              fontFamily: PCSS_t.f.mono, fontSize:10, fontWeight:600,
            }}>{i + 1}</div>
            <div style={{ fontSize:12.5, fontWeight:500 }}>{item.label}</div>
            <div style={{
              fontSize:10.5, color: PCSS_t.c.textDim, fontFamily: PCSS_t.f.mono,
              letterSpacing:'.04em', textTransform:'uppercase',
            }}>{item.docType}</div>
            <div style={{ textAlign:'right' }}>
              {item.conditional ? (
                <span style={{
                  fontSize:9.5, fontWeight:600, fontFamily: PCSS_t.f.mono,
                  padding:'2px 6px', borderRadius:4,
                  background: PCSS_t.c.warningTint, color: PCSS_t.c.warning,
                  letterSpacing:'.04em',
                }}>CONDITIONAL</span>
              ) : item.required ? (
                <span style={{
                  fontSize:9.5, fontWeight:600, fontFamily: PCSS_t.f.mono,
                  padding:'2px 6px', borderRadius:4,
                  background: PCSS_t.c.errorTint, color: PCSS_t.c.error,
                  letterSpacing:'.04em',
                }}>REQUIRED</span>
              ) : (
                <span style={{ fontSize:11, color: PCSS_t.c.textDim }}>Optional</span>
              )}
            </div>
          </div>
        ))}
      </div>
      {sequenceNote && (
        <div style={{
          padding:'10px 18px',
          borderTop: `1px solid ${PCSS_t.c.border}`,
          background: PCSS_t.c.accentTint,
          fontSize:11.5, color:'#075985', lineHeight:1.55,
          display:'flex', gap:8, alignItems:'flex-start',
        }}>
          <AppIcon name="info" size={13} color={PCSS_t.c.accent}/>
          <span><strong>Sequence:</strong> {sequenceNote}</span>
        </div>
      )}
    </AppCard>
  );
}

// ── Tariffs panel ───────────────────────────────────────
function TariffsPanel() {
  const store = useStore();
  const schedules = store.state.tariffSchedules;
  const [selected, setSelected] = React.useState(schedules[0]?.id);
  const sched = schedules.find(s => s.id === selected);
  const [uploadOpen, setUploadOpen] = React.useState(false);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:14 }}>
      <AppCard pad={0}>
        <div style={{ padding:'12px 16px', borderBottom: `1px solid ${PCSS_t.c.border}` }}>
          <AppSectionLabel>{schedules.length} tariff schedule{schedules.length !== 1 ? 's' : ''}</AppSectionLabel>
        </div>
        {schedules.length === 0 && (
          <AppEmpty
            icon="money" title="No tariff schedules yet"
            body="Upload your TPA-specific contracted rate CSV to enable line-by-line tariff audit at discharge."
            action={<AppBtn kind="primary" size="sm" icon="upload" onClick={() => setUploadOpen(true)}>Upload tariff</AppBtn>}
          />
        )}
        {schedules.map(s => {
          const ins = PCSS_d.findInsurer(s.insurerId);
          return (
            <div key={s.id} onClick={() => setSelected(s.id)} style={{
              display:'flex', alignItems:'center', gap:11,
              padding:'14px 16px',
              background: s.id === selected ? PCSS_t.c.brandSoft : 'transparent',
              borderLeft: s.id === selected ? `3px solid ${PCSS_t.c.brand}` : '3px solid transparent',
              borderBottom: `1px solid ${PCSS_t.c.border}`,
              cursor:'pointer',
            }}>
              <div style={{
                width:32, height:32, borderRadius:7,
                background: ins.color + '18', color: ins.color,
                display:'grid', placeItems:'center',
                fontFamily: PCSS_t.f.mono, fontWeight:700, fontSize:13,
              }}>{ins.logo}</div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight: s.id === selected ? 600 : 500 }}>{ins.name}</div>
                <div style={{ fontSize:10.5, color: PCSS_t.c.textDim, fontFamily: PCSS_t.f.mono, marginTop:1 }}>
                  Eff {s.effectiveFrom} · {s.rows.length} items
                </div>
              </div>
            </div>
          );
        })}
        <div style={{ padding:14, borderTop: `1px solid ${PCSS_t.c.border}` }}>
          <AppBtn full size="sm" kind="primary" icon="upload" onClick={() => setUploadOpen(true)}>
            Upload tariff CSV
          </AppBtn>
        </div>
      </AppCard>

      {sched && <TariffDetail sched={sched}/>}
      {!sched && schedules.length > 0 && <AppCard><AppEmpty icon="money" title="Pick a tariff schedule"/></AppCard>}

      <UploadTariffModal open={uploadOpen} onClose={() => setUploadOpen(false)}/>
    </div>
  );
}

function TariffDetail({ sched }) {
  const ins = PCSS_d.findInsurer(sched.insurerId);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <AppCard>
        <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:14 }}>
          <div>
            <AppSectionLabel>{ins.name} · contracted tariff</AppSectionLabel>
            <div style={{ fontSize:18, fontWeight:600, marginTop:8 }}>{sched.fileName}</div>
            <div style={{ fontSize:12, color: PCSS_t.c.textMuted, marginTop:4 }}>
              {sched.rows.length} line items · effective from {sched.effectiveFrom} · uploaded {PCSS_d.dayOnly(sched.uploadedAt)}
            </div>
          </div>
          <div style={{ display:'flex', gap:8 }}>
            <AppBtn kind="ghost" icon="download">Download CSV</AppBtn>
            <AppBtn kind="ghost" icon="upload">Replace</AppBtn>
          </div>
        </div>
      </AppCard>

      <AppCard pad={0}>
        <div style={{
          padding:'10px 18px',
          borderBottom: `1px solid ${PCSS_t.c.border}`,
          display:'grid', gridTemplateColumns:'100px 1fr 140px',
          gap:14,
          fontFamily: PCSS_t.f.mono, fontSize:10, fontWeight:600,
          letterSpacing:'.06em', textTransform:'uppercase',
          color: PCSS_t.c.textMuted,
        }}>
          <div>Code</div>
          <div>Description</div>
          <div style={{ textAlign:'right' }}>Max allowed</div>
        </div>
        {sched.rows.map((r, i) => (
          <div key={r.code} style={{
            display:'grid', gridTemplateColumns:'100px 1fr 140px',
            gap:14, padding:'10px 18px', alignItems:'center',
            borderBottom: i < sched.rows.length - 1 ? `1px solid ${PCSS_t.c.border}` : 'none',
          }}>
            <span style={{ fontFamily: PCSS_t.f.mono, fontSize:11.5, fontWeight:600, color: PCSS_t.c.text }}>{r.code}</span>
            <span style={{ fontSize:12.5 }}>{r.description}</span>
            <div style={{ textAlign:'right' }}><AppMoney value={r.maxAmount} strong/></div>
          </div>
        ))}
      </AppCard>
    </div>
  );
}

function UploadTariffModal({ open, onClose }) {
  const store = useStore();
  const [insurerId, setInsurerId] = React.useState('');
  const [fileName, setFileName] = React.useState('');

  const handleUpload = () => {
    if (!insurerId) return;
    store.addTariff(insurerId, fileName || `${insurerId}-tariff-2026.csv`);
    store.toast({ icon:'whatsapp', title:'Tariff schedule uploaded', body:'Parsed and ready for audit' });
    setInsurerId(''); setFileName('');
    onClose();
  };

  return (
    <AppModal open={open} onClose={onClose}
      title="Upload tariff schedule"
      subtitle="CSV with columns: procedure_code · description · max_amount"
      width={560}
      footer={
        <>
          <AppBtn kind="ghost" onClick={onClose}>Cancel</AppBtn>
          <AppBtn kind="primary" icon="upload" onClick={handleUpload} disabled={!insurerId}>Upload</AppBtn>
        </>
      }
    >
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <AppField label="Insurer / TPA" required>
          <AppSelect value={insurerId} onChange={setInsurerId}
            options={PCSS_d.insurers.map(i => ({ value: i.id, label: `${i.name} · ${i.type}` }))}/>
        </AppField>
        <AppField label="Tariff CSV file">
          <UploadZone
            docType="OTHER"
            label="Drop your tariff CSV here"
            onUpload={(p) => setFileName(p.fileName)}
          />
        </AppField>
        {fileName && (
          <div style={{
            padding:'10px 12px', background: PCSS_t.c.successTint, borderRadius:6,
            fontSize:12, color: PCSS_t.c.success, display:'flex', gap:8, alignItems:'center',
          }}>
            <AppIcon name="check" size={14}/>
            <span><strong>{fileName}</strong> · parsed 12 rows</span>
          </div>
        )}
      </div>
    </AppModal>
  );
}

Object.assign(window, { SettingsScreen });