// DataSourcesView.jsx – Data Sources registry + architecture subtoggle
const { useState: useDSV } = React;

const SOURCES = [
  // Hospital-internal
  { id:'ehr', group:'hospital', name:'Electronic Health Records', short:'EHR', origin:'Hospital Information System (KIS)', desc:'Longitudinal clinical record: encounters, diagnoses, medications, clinical notes.', coverage:94, std:'FHIR R4 + LOINC', integration:'Live', maturity:5, phases:['Pre-Clinic','Visit','Diagnostic','Decision','Implementation','Advanced'] },
  { id:'lis', group:'hospital', name:'Laboratory Information System', short:'LIS', origin:'Clinical Laboratory (Swisslab)', desc:'Renal function, LFT, urinalysis, molecular panels.', coverage:98, std:'LOINC + UCUM', integration:'Live', maturity:5, phases:['Diagnostic','Decision','Implementation','Advanced'] },
  { id:'pacs', group:'hospital', name:'Imaging Database', short:'PACS', origin:'Radiology (Syngo.via)', desc:'MRI / CT / ultrasound; AI-TKV segmentation outputs for ADPKD.', coverage:82, std:'DICOM + SNOMED', integration:'Live', maturity:4, phases:['Diagnostic','Decision','Advanced'] },
  { id:'pharmacy', group:'hospital', name:'Pharmacy Records', short:'Pharmacy', origin:'Hospital Pharmacy', desc:'Dispensing, adherence, REMS monitoring for Tolvaptan.', coverage:76, std:'ATC + FHIR', integration:'Live', maturity:4, phases:['Implementation','Advanced'] },
  { id:'genetics', group:'hospital', name:'Genetic Testing Reports', short:'Genetics', origin:'Genetic Counseling Services', desc:'PKD1 / PKD2 sequencing, ACMG classification.', coverage:39, std:'HGVS + VCF', integration:'Live', maturity:4, phases:['Diagnostic','Decision'] },
  { id:'registry', group:'hospital', name:'Nephrology Patient Registry', short:'Registry', origin:'Nephrology Department', desc:'Longitudinal cohort registry, outcomes, research consents.', coverage:88, std:'MII-Kerndatensatz', integration:'Live', maturity:5, phases:['Pre-Clinic','Diagnostic','Implementation','Advanced'] },
  { id:'medic', group:'hospital', name:'MeDIC – Medical Data Integration Center', short:'MeDIC', origin:'DIZ-UKK · central hub', desc:'The DICE-CD integration center — harmonises all hospital + external sources into FHIR R4 with MII profiles.', coverage:100, std:'FHIR R4 · MII profiles', integration:'Live · hub', maturity:5, phases:['All phases'], hub:true },

  // Patient-originated
  { id:'pghd', group:'patient', name:'Patient-Generated Health Data', short:'PGHD', origin:'Patient portals, mobile health apps', desc:'Self-reported symptoms, questionnaires, home BP readings.', coverage:34, std:'FHIR Observation', integration:'Pilot', maturity:2, phases:['Pre-Clinic','Visit','Implementation'] },
  { id:'apps', group:'patient', name:'Health & Wellness Apps', short:'Health Apps', origin:'Mobile health (consumer)', desc:'Activity, sleep, fluid intake — external app ecosystems.', coverage:12, std:'Apple HealthKit + FHIR', integration:'Planned', maturity:1, phases:['Pre-Clinic','Implementation'] },

  // External / Public
  { id:'ehis', group:'external', name:'EHIS / NHANES / GEDA / DEGS', short:'Public Health', origin:'Federal statistics (external)', desc:'Population-level reference data for comparative baselines.', coverage:100, std:'Aggregate', integration:'Scheduled pulls', maturity:3, phases:['Pre-Clinic','Diagnostic'] },
  { id:'trials', group:'external', name:'Clinical Trial Databases', short:'Clinical Trials', origin:'R&D / ClinicalTrials.gov', desc:'Trial eligibility matching, protocol adherence, outcomes.', coverage:100, std:'CDISC + FHIR', integration:'Live', maturity:3, phases:['Decision','Implementation'] },
  { id:'insurance', group:'external', name:'Insurance Claims', short:'Insurance', origin:'GKV / PKV billing systems', desc:'Coverage, reimbursement, prescription claims, Care level.', coverage:88, std:'§301 SGB V', integration:'Live', maturity:4, phases:['Advanced'] },
  { id:'social', group:'external', name:'Social Media & Online Forums', short:'Social Media', origin:'External patient communities', desc:'Qualitative signal: patient experience, concerns, misinformation.', coverage:'—', std:'Unstructured', integration:'Research only', maturity:1, phases:['Pre-Clinic'] },
];

const GROUPS = [
  { id:'hospital', label:'Hospital-Internal',  color:'#2D5A8E', desc:'Systems inside UKK' },
  { id:'patient',  label:'Patient-Originated', color:'#3D7A5E', desc:'From patients themselves' },
  { id:'external', label:'External / Public',  color:'#6B5FA6', desc:'Outside the hospital walls' },
];

function MaturityDots({ level, color }) {
  return (
    <div style={{display:'flex', gap:2}}>
      {[1,2,3,4,5].map(l => (
        <div key={l} style={{width:7, height:7, borderRadius:1, background:l<=level?color:'#E5E5E7'}}/>
      ))}
    </div>
  );
}

function StatusPill({ text, color }) {
  return (
    <span style={{padding:'2px 7px', borderRadius:3, fontSize:9, fontWeight:700, background:`${color}14`, color, border:`1px solid ${color}30`, textTransform:'uppercase', letterSpacing:'0.04em'}}>
      {text}
    </span>
  );
}

function SourceCard({ s, onHover }) {
  const groupColor = GROUPS.find(g=>g.id===s.group).color;
  const intColor = s.integration.includes('Live') ? '#2E7D5B' : s.integration.includes('Pilot') ? '#C77700' : s.integration.includes('Research') ? '#6B5FA6' : '#4A4A4A';
  const matColor = s.maturity>=4?'#2E7D5B':s.maturity>=3?'#C77700':'#D32027';

  return (
    <div
      onMouseEnter={()=>onHover && onHover(s.id)}
      onMouseLeave={()=>onHover && onHover(null)}
      style={{
        background: s.hub ? '#1A1A1A' : '#fff',
        color: s.hub ? '#fff' : '#1A1A1A',
        border: s.hub ? '2px solid #D32027' : '1px solid #E5E5E7',
        borderRadius:5, padding:'14px 16px',
        position:'relative', transition:'border-color 0.15s, box-shadow 0.15s',
      }}>
      {s.hub && (
        <div style={{position:'absolute', top:-10, right:14, background:'#D32027', color:'#fff', padding:'3px 9px', borderRadius:3, fontSize:9, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase'}}>
          DIZ Hub
        </div>
      )}
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:10, marginBottom:6}}>
        <div>
          <div style={{fontSize:14, fontWeight:700, letterSpacing:'-0.01em'}}>{s.name}</div>
          <div style={{fontSize:11, color: s.hub?'rgba(255,255,255,0.55)':'#4A4A4A', marginTop:2}}>{s.origin}</div>
        </div>
        <div style={{fontSize:10, fontWeight:800, padding:'3px 7px', borderRadius:3, background: s.hub?'rgba(255,255,255,0.1)':`${groupColor}14`, color: s.hub?'#fff':groupColor, whiteSpace:'nowrap', flexShrink:0}}>
          {s.short}
        </div>
      </div>

      <p style={{fontSize:11, color: s.hub?'rgba(255,255,255,0.7)':'#4A4A4A', lineHeight:1.5, marginBottom:10}}>{s.desc}</p>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'6px 12px', fontSize:10, marginBottom:8}}>
        <div>
          <div style={{color: s.hub?'rgba(255,255,255,0.45)':'#AEAEB2', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:2}}>Coverage</div>
          <div style={{fontWeight:700, color: s.hub?'#fff':'#1A1A1A', fontSize:13}}>{typeof s.coverage==='number'?`${s.coverage}%`:s.coverage}</div>
        </div>
        <div>
          <div style={{color: s.hub?'rgba(255,255,255,0.45)':'#AEAEB2', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:2}}>Maturity</div>
          <div style={{display:'flex', alignItems:'center', gap:5, marginTop:2}}>
            <MaturityDots level={s.maturity} color={s.hub?'#fff':matColor}/>
            <span style={{fontSize:10, color: s.hub?'rgba(255,255,255,0.7)':'#4A4A4A'}}>L{s.maturity}</span>
          </div>
        </div>
        <div>
          <div style={{color: s.hub?'rgba(255,255,255,0.45)':'#AEAEB2', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:2}}>Standard</div>
          <div style={{fontSize:11, fontWeight:500, color: s.hub?'#fff':'#1A1A1A'}}>{s.std}</div>
        </div>
        <div>
          <div style={{color: s.hub?'rgba(255,255,255,0.45)':'#AEAEB2', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:2}}>Integration</div>
          <div style={{marginTop:2}}><StatusPill text={s.integration} color={s.hub?'#fff':intColor}/></div>
        </div>
      </div>

      <div style={{paddingTop:8, borderTop:`1px solid ${s.hub?'rgba(255,255,255,0.1)':'#F0F0F0'}`}}>
        <div style={{fontSize:9, fontWeight:700, color: s.hub?'rgba(255,255,255,0.45)':'#AEAEB2', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:4}}>Linked journey phases</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:3}}>
          {s.phases.map((p,i) => (
            <span key={i} style={{padding:'1px 6px', fontSize:10, fontWeight:500, borderRadius:2, background: s.hub?'rgba(255,255,255,0.1)':'#F7F7F8', color: s.hub?'rgba(255,255,255,0.8)':'#4A4A4A', border: s.hub?'1px solid rgba(255,255,255,0.15)':'1px solid #E5E5E7'}}>
              {p}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Architecture view: hub-and-spoke SVG ─────────────────────────────────────
function ArchitectureView() {
  const cx=460, cy=280, r=220;
  const sourceNodes = SOURCES.filter(s=>!s.hub);
  const pos = sourceNodes.map((s, i) => {
    const ang = (Math.PI*2/sourceNodes.length) * i - Math.PI/2;
    return { s, x: cx + Math.cos(ang)*r, y: cy + Math.sin(ang)*r };
  });

  return (
    <div style={{background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:20, overflow:'auto'}}>
      <div style={{marginBottom:10}}>
        <div style={{fontSize:13, fontWeight:700, color:'#1A1A1A', marginBottom:3}}>Integration Architecture</div>
        <div style={{fontSize:11, color:'#4A4A4A'}}>All data flows through MeDIC – the DIZ-UKK integration hub. FHIR R4 with MII profiles.</div>
      </div>
      <svg width={920} height={560} style={{display:'block', margin:'0 auto'}}>
        <defs>
          <marker id="arch-ah" markerWidth="7" markerHeight="6" refX="6" refY="3" orient="auto">
            <path d="M0,0 L7,3 L0,6 Z" fill="#AEAEB2"/>
          </marker>
        </defs>
        {/* Spokes */}
        {pos.map(p => {
          const g = GROUPS.find(gr=>gr.id===p.s.group);
          return (
            <line key={p.s.id} x1={p.x} y1={p.y} x2={cx} y2={cy}
              stroke={`${g.color}55`} strokeWidth={1.2} strokeDasharray={p.s.integration.includes('Planned')?'4 3':undefined}
              markerEnd="url(#arch-ah)"/>
          );
        })}
        {/* Outer nodes */}
        {pos.map(p => {
          const g = GROUPS.find(gr=>gr.id===p.s.group);
          return (
            <g key={p.s.id}>
              <rect x={p.x-60} y={p.y-22} width={120} height={44} rx={4}
                fill="#fff" stroke={g.color} strokeWidth={1.2}/>
              <text x={p.x} y={p.y-2} textAnchor="middle" fontSize={11} fontWeight={700} fill="#1A1A1A" fontFamily="Inter,sans-serif">{p.s.short}</text>
              <text x={p.x} y={p.y+12} textAnchor="middle" fontSize={8.5} fill={g.color} fontFamily="Inter,sans-serif" fontWeight={600}>{g.label.toUpperCase()}</text>
            </g>
          );
        })}
        {/* Hub */}
        <circle cx={cx} cy={cy} r={62} fill="#1A1A1A" stroke="#D32027" strokeWidth={2}/>
        <text x={cx} y={cy-4} textAnchor="middle" fontSize={18} fontWeight={800} fill="#fff" fontFamily="Inter,sans-serif">MeDIC</text>
        <text x={cx} y={cy+14} textAnchor="middle" fontSize={9} fill="rgba(255,255,255,0.7)" fontFamily="Inter,sans-serif" letterSpacing={0.5}>DIZ-UKK · DICE-CD Hub</text>
        <text x={cx} y={cy+28} textAnchor="middle" fontSize={8} fill="rgba(255,255,255,0.45)" fontFamily="Inter,sans-serif">FHIR R4 · MII</text>
      </svg>
    </div>
  );
}

function DataSourcesView({ onNavigate }) {
  const [mode, setMode] = useDSV('grid');
  const [filter, setFilter] = useDSV('all');

  const visible = SOURCES.filter(s => filter==='all' || s.group===filter);

  return (
    <div style={{height:'100%', display:'flex', flexDirection:'column', overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'14px 24px 12px', borderBottom:'1px solid #E5E5E7', background:'#fff', flexShrink:0}}>
        <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:12}}>
          <div>
            <h1 style={{fontSize:17, fontWeight:700, color:'#1A1A1A', letterSpacing:'-0.01em', marginBottom:2}}>Data Sources · Integration Landscape</h1>
            <p style={{fontSize:11, color:'#AEAEB2'}}>13 sources feeding the ADPKD reference journey · all harmonised via MeDIC</p>
          </div>
          {/* Mode toggle */}
          <div style={{display:'flex', gap:3, background:'#F2F3F5', borderRadius:5, padding:3}}>
            {[{id:'grid',l:'Grid'},{id:'arch',l:'Architecture'}].map(m => (
              <button key={m.id} onClick={()=>setMode(m.id)} style={{
                padding:'4px 12px', borderRadius:4, fontSize:11, fontWeight:600,
                background: mode===m.id?'#fff':'transparent',
                color: mode===m.id?'#1A1A1A':'#4A4A4A',
                border:'none', cursor:'pointer',
                boxShadow: mode===m.id?'0 1px 3px rgba(0,0,0,0.08)':'none',
              }}>{m.l}</button>
            ))}
          </div>
        </div>
        {mode==='grid' && (
          <div style={{display:'flex', gap:6}}>
            {[{id:'all',label:'All sources'}, ...GROUPS.map(g=>({id:g.id,label:g.label}))].map(t => (
              <button key={t.id} onClick={()=>setFilter(t.id)} style={{
                padding:'4px 10px', borderRadius:4, fontSize:11, fontWeight:600,
                background: filter===t.id?'#1A1A1A':'#fff',
                color: filter===t.id?'#fff':'#4A4A4A',
                border: filter===t.id?'2px solid #1A1A1A':'1px solid #E5E5E7',
                cursor:'pointer',
              }}>{t.label}</button>
            ))}
          </div>
        )}
      </div>

      <div style={{flex:1, overflow:'auto', padding:'16px 24px 20px'}}>
        {mode==='grid' ? (
          <>
            {GROUPS.map(g => {
              const rows = visible.filter(s => s.group===g.id);
              if (rows.length===0) return null;
              return (
                <div key={g.id} style={{marginBottom:20}}>
                  <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:8}}>
                    <div style={{width:8, height:8, borderRadius:'50%', background:g.color}}/>
                    <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>{g.label}</div>
                    <div style={{fontSize:11, color:'#4A4A4A'}}>{g.desc} · {rows.length} source{rows.length!==1?'s':''}</div>
                  </div>
                  <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:10}}>
                    {rows.map(s => <SourceCard key={s.id} s={s}/>)}
                  </div>
                </div>
              );
            })}
          </>
        ) : (
          <ArchitectureView/>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DataSourcesView });