// HomePage.jsx – DICE-CD overview dashboard / entry screen
const { useState: useStateHP } = React;

// ── KPI tiles ────────────────────────────────────────────────────────────────

function KpiTile({ label, value, unit, sub, color, onClick }) {
  return (
    <div onClick={onClick} style={{
      background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:'16px 20px',
      cursor: onClick ? 'pointer' : 'default', flex:1, minWidth:0,
      transition:'border-color 0.15s, box-shadow 0.15s'
    }}
    onMouseEnter={e=>{ if(onClick){ e.currentTarget.style.borderColor='#D32027'; e.currentTarget.style.boxShadow='0 2px 10px rgba(211,32,39,0.08)'; }}}
    onMouseLeave={e=>{ e.currentTarget.style.borderColor='#E5E5E7'; e.currentTarget.style.boxShadow='none'; }}>
      <div style={{fontSize:10, fontWeight:700, color:'#4A4A4A', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:8}}>{label}</div>
      <div style={{fontSize:28, fontWeight:800, color: color||'#1A1A1A', lineHeight:1}}>
        {value}
        {unit && <span style={{fontSize:13, fontWeight:400, color:'#4A4A4A', marginLeft:4}}>{unit}</span>}
      </div>
      {sub && <div style={{fontSize:11, color:'#4A4A4A', marginTop:5}}>{sub}</div>}
    </div>
  );
}

// ── Mini funnel ──────────────────────────────────────────────────────────────

const FUNNEL_STEPS = [
  { label:'Confirmed Dx',      n:312, color:'#1A1A1A' },
  { label:'Rapid progressors', n:198, color:'#3A3A4A' },
  { label:'Screened',          n:156, color:'#C77700' },
  { label:'MDT reviewed',      n:89,  color:'#D06020' },
  { label:'Tolvaptan started', n:67,  color:'#D32027' },
  { label:'Active monitoring', n:54,  color:'#D32027' },
];

function MiniFunnel({ onNavigate }) {
  const [hovered, setHovered] = useStateHP(null);
  const maxN = FUNNEL_STEPS[0].n;
  return (
    <div style={{background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:'16px 20px'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14}}>
        <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Pipeline Funnel</div>
        <button onClick={()=>onNavigate('pipeline')} style={{fontSize:11, color:'#D32027', background:'none', border:'none', cursor:'pointer', fontWeight:600}}>Full view →</button>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:6}}>
        {FUNNEL_STEPS.map((s, i) => {
          const pct = s.n / maxN;
          const isHov = hovered === i;
          return (
            <div key={i}
              onMouseEnter={()=>setHovered(i)} onMouseLeave={()=>setHovered(null)}
              style={{display:'flex', alignItems:'center', gap:10, cursor:'default'}}>
              <div style={{fontSize:11, color:'#4A4A4A', width:130, flexShrink:0}}>{s.label}</div>
              <div style={{flex:1, height:16, background:'#F7F7F8', borderRadius:2, overflow:'hidden'}}>
                <div style={{
                  width:`${pct*100}%`, height:'100%', background:s.color,
                  borderRadius:2, opacity: isHov ? 1 : 0.75,
                  transition:'width 0.6s ease, opacity 0.15s'
                }}/>
              </div>
              <div style={{fontSize:12, fontWeight:700, color:s.color, width:32, textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{s.n}</div>
            </div>
          );
        })}
      </div>
      <div style={{marginTop:10, fontSize:10, color:'#4A4A4A'}}>n=312 simulated DIZ cohort · DICE-CD synthetic data</div>
    </div>
  );
}

// ── Activity feed ─────────────────────────────────────────────────────────────

const ACTIVITY = [
  { time:'Today 09:14', event:'Case conference documented', who:'Dr. Steiner', patient:'P-001 Müller, A.', type:'conference', color:'#2E7D5B' },
  { time:'Today 08:41', event:'eGFR result ingested via FHIR', who:'LIS Swisslab', patient:'P-003 Schmidt, C.', type:'lab', color:'#5B7FA6' },
  { time:'Yesterday', event:'AI-TKV segmentation completed', who:'PACS Syngo.via', patient:'P-006 Hoffmann, F.', type:'imaging', color:'#7A6FA6' },
  { time:'2026-04-18', event:'Eligibility re-evaluated – borderline', who:'System (DICE-CD)', patient:'P-004 Fischer, D.', type:'decision', color:'#C77700' },
  { time:'2026-04-16', event:'Consent renewed (Broad MII)', who:'DIZ MeDIC', patient:'P-007 Wagner, G.', type:'consent', color:'#4A8C6F' },
  { time:'2026-04-15', event:'Genetic report imported', who:'DIZ GenomicsDB', patient:'P-001 Müller, A.', type:'genetics', color:'#A67A4A' },
];

function ActivityFeed({ onSelect, onNavigate }) {
  return (
    <div style={{background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:'16px 20px', overflow:'hidden'}}>
      <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:14}}>Recent activity</div>
      <div style={{display:'flex', flexDirection:'column', gap:0}}>
        {ACTIVITY.map((a, i) => (
          <div key={i}
            onClick={()=>{ const id = a.patient.split(' ')[0]; onSelect(id); onNavigate('dashboard'); }}
            style={{
              display:'flex', gap:10, padding:'8px 0',
              borderBottom: i < ACTIVITY.length-1 ? '1px solid #F7F7F8':'none',
              cursor:'pointer', borderRadius:3, transition:'background 0.1s'
            }}
            onMouseEnter={e=>e.currentTarget.style.background='#FAFAFA'}
            onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
            <div style={{width:6, height:6, borderRadius:'50%', background:a.color, marginTop:5, flexShrink:0}}/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:12, color:'#1A1A1A', fontWeight:500}}>{a.event}</div>
              <div style={{fontSize:11, color:'#4A4A4A', marginTop:1}}>
                <span style={{fontWeight:600, color:a.color}}>{a.patient}</span>
                <span style={{margin:'0 5px', color:'#D1D1D6'}}>·</span>
                {a.who}
              </div>
            </div>
            <div style={{fontSize:10, color:'#AEAEB2', whiteSpace:'nowrap', marginTop:2, flexShrink:0}}>{a.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Maturity overview ─────────────────────────────────────────────────────────

const MATURITY_ITEMS = [
  { label:'Lab (eGFR, LFT)',     level:5 },
  { label:'Imaging / AI-TKV',   level:4 },
  { label:'Genetic data',        level:4 },
  { label:'Clinical notes',      level:2 },
  { label:'Follow-up scheduling',level:3 },
  { label:'Patient preferences', level:1 },
];

function MaturityOverview({ onNavigate }) {
  const avg = MATURITY_ITEMS.reduce((a,b)=>a+b.level,0)/MATURITY_ITEMS.length;
  const color = avg>=4?'#2E7D5B':avg>=3?'#C77700':'#D32027';
  return (
    <div style={{background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:'16px 20px'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14}}>
        <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Data Utilisation Maturity</div>
        <button onClick={()=>onNavigate('provenance')} style={{fontSize:11, color:'#D32027', background:'none', border:'none', cursor:'pointer', fontWeight:600}}>Details →</button>
      </div>
      <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:14}}>
        <div style={{fontSize:36, fontWeight:800, color, lineHeight:1}}>{avg.toFixed(1)}</div>
        <div>
          <div style={{fontSize:11, color:'#4A4A4A'}}>Overall score</div>
          <div style={{display:'flex', gap:3, marginTop:4}}>
            {[1,2,3,4,5].map(l=>(
              <div key={l} style={{width:18,height:8,borderRadius:2,background:l<=Math.round(avg)?color:'#E5E5E7'}}/>
            ))}
          </div>
          <div style={{fontSize:10, color:'#4A4A4A', marginTop:3}}>Target: Level 4 by month 36</div>
        </div>
      </div>
      {MATURITY_ITEMS.map((item, i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap:8, marginBottom:5}}>
          <div style={{flex:1, fontSize:11, color:'#4A4A4A'}}>{item.label}</div>
          <div style={{display:'flex', gap:2}}>
            {[1,2,3,4,5].map(l=>(
              <div key={l} style={{
                width:10, height:10, borderRadius:1,
                background:l<=item.level?(item.level>=4?'#2E7D5B':item.level>=3?'#C77700':'#D32027'):'#E5E5E7'
              }}/>
            ))}
          </div>
          <div style={{fontSize:11, fontWeight:600, color:'#4A4A4A', width:12, textAlign:'right'}}>{item.level}</div>
        </div>
      ))}
    </div>
  );
}

// ── Quick-nav cards ───────────────────────────────────────────────────────────

function QuickNavCard({ label, desc, icon, color, onClick }) {
  return (
    <div onClick={onClick} style={{
      background:'#fff', border:'1px solid #E5E5E7', borderRadius:5, padding:'14px 16px',
      cursor:'pointer', display:'flex', alignItems:'flex-start', gap:12,
      transition:'border-color 0.15s, box-shadow 0.15s'
    }}
    onMouseEnter={e=>{ e.currentTarget.style.borderColor=color; e.currentTarget.style.boxShadow=`0 2px 10px ${color}18`; }}
    onMouseLeave={e=>{ e.currentTarget.style.borderColor='#E5E5E7'; e.currentTarget.style.boxShadow='none'; }}>
      <div style={{width:32, height:32, borderRadius:4, background:`${color}14`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, flexShrink:0}}>{icon}</div>
      <div style={{minWidth:0}}>
        <div style={{fontSize:13, fontWeight:600, color:'#1A1A1A', marginBottom:3}}>{label}</div>
        <div style={{fontSize:11, color:'#4A4A4A', lineHeight:1.4}}>{desc}</div>
      </div>
    </div>
  );
}

// ── Alerts banner ─────────────────────────────────────────────────────────────

function AlertsBanner({ patients, onSelect, onNavigate }) {
  const alerts = [
    { type:'warn', msg:'P-003 Schmidt – eGFR borderline (26 ml/min); re-confirm before next MDT', id:'P-003' },
    { type:'warn', msg:'P-004 Fischer – PKD1 VUS reclassification pending (DIZ GenomicsDB)', id:'P-004' },
    { type:'info', msg:'2 patients pending MDT case conference scheduling', id:null },
  ];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, marginBottom:16}}>
      {alerts.map((a, i) => (
        <div key={i}
          onClick={()=>{ if(a.id){ onSelect(a.id); onNavigate('dashboard'); }}}
          style={{
            display:'flex', alignItems:'center', gap:10, padding:'8px 14px',
            background: a.type==='warn'?'#FFFBEB':'#EFF6FF',
            border:`1px solid ${a.type==='warn'?'#C77700':'#5B7FA6'}33`,
            borderRadius:4, cursor: a.id?'pointer':'default', fontSize:12
          }}>
          <span style={{fontSize:13, flexShrink:0}}>{a.type==='warn'?'⚠':'ℹ'}</span>
          <span style={{color: a.type==='warn'?'#C77700':'#3B6FA6'}}>{a.msg}</span>
          {a.id && <span style={{marginLeft:'auto', fontSize:11, color:a.type==='warn'?'#C77700':'#3B6FA6', fontWeight:600, flexShrink:0}}>View →</span>}
        </div>
      ))}
    </div>
  );
}

// ── Main HomePage ─────────────────────────────────────────────────────────────

function HomePage({ patients, onSelect, onNavigate, role }) {
  const eligible = patients.filter(p=>p.decision==='Eligible').length;
  const review   = patients.filter(p=>p.decision==='Review').length;
  const rapid    = patients.filter(p=>p.riskTier==='Rapid').length;

  return (
    <div style={{height:'100%', display:'flex', flexDirection:'column', overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'20px 24px 16px', borderBottom:'1px solid #E5E5E7', background:'#fff', flexShrink:0}}>
        <h1 style={{fontSize:18, fontWeight:700, color:'#1A1A1A', marginBottom:3}}>DICE-CD Overview</h1>
        <p style={{fontSize:13, color:'#4A4A4A'}}>
          ADPKD · Tolvaptan eligibility pipeline · April 2026 · Viewing as: <strong>{role}</strong>
        </p>
      </div>

      <div style={{flex:1, overflow:'auto', padding:'20px 24px'}}>

        {/* Alerts */}
        <AlertsBanner patients={patients} onSelect={onSelect} onNavigate={onNavigate}/>

        {/* KPI row */}
        <div style={{display:'flex', gap:12, marginBottom:16}}>
          <KpiTile label="Total cohort" value={patients.length} unit="synthetic" sub="Stand-in for n=312 DIZ" color="#1A1A1A" onClick={()=>onNavigate('list')}/>
          <KpiTile label="Rapid progressors" value={rapid} sub={`${Math.round(rapid/patients.length*100)}% of cohort`} color="#C77700" onClick={()=>onNavigate('list')}/>
          <KpiTile label="Tolvaptan eligible" value={eligible} sub="All criteria met" color="#2E7D5B" onClick={()=>onNavigate('list')}/>
          <KpiTile label="Pending MDT review" value={review} sub="Decision required" color="#D32027" onClick={()=>onNavigate('conference')}/>
          <KpiTile label="Data completeness" value="88" unit="% avg" sub="Across 8 patients" color="#5B7FA6" onClick={()=>onNavigate('provenance')}/>
        </div>

        {/* Main grid */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14}}>
          <MiniFunnel onNavigate={onNavigate}/>
          <ActivityFeed onSelect={onSelect} onNavigate={onNavigate}/>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14}}>
          <MaturityOverview onNavigate={onNavigate}/>

          {/* Quick navigation */}
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:4}}>Quick navigation</div>
            <QuickNavCard label="Patient Cohort" icon="⊞" color="#D32027"
              desc="Sort, filter and inspect all 8 synthetic ADPKD patients. eGFR sparklines, risk tiers, eligibility status."
              onClick={()=>onNavigate('list')}/>
            <QuickNavCard label="Treatment Pipeline" icon="→" color="#C77700"
              desc="Interactive phase funnel with aggregate stats, individual pathways and peer-group comparison."
              onClick={()=>onNavigate('pipeline')}/>
            <QuickNavCard label="Patient Dashboard" icon="◉" color="#2E7D5B"
              desc="4-panel deep-dive: clinical snapshot, imaging, genetics, and Tolvaptan decision assistant with what-if slider."
              onClick={()=>onNavigate('dashboard')}/>
            <QuickNavCard label="Case Conference" icon="◈" color="#5B7FA6"
              desc="MDT decision board, patient preferences, pharmacy safety check, auto-generated follow-up schedule."
              onClick={()=>onNavigate('conference')}/>
            <QuickNavCard label="Data Provenance" icon="⬡" color="#7A6FA6"
              desc="FHIR resource flow, per-field source/LOINC/consent audit, and data utilisation maturity breakdown."
              onClick={()=>onNavigate('provenance')}/>
          </div>
        </div>

        {/* Footer bar */}
        <div style={{padding:'10px 14px', background:'#F7F7F8', border:'1px solid #E5E5E7', borderRadius:5, display:'flex', gap:20, fontSize:11, color:'#4A4A4A'}}>
          <span>Klinik für Translationale Nephrologie · Uniklinik Köln</span>
          <span style={{marginLeft:'auto'}}>DICE-CD · Forschungsprototyp · April 2026</span>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { HomePage });