// CaseConference.jsx – structured case conference + follow-up scheduling
const { useState: useStateCC } = React;

const PARTICIPANTS = [
  { role:'Nephrology', name:'Dr. K. Steiner', avatar:'KS', color:'#5B7FA6' },
  { role:'Radiology', name:'Dr. M. Kamps', avatar:'MK', color:'#7A6FA6' },
  { role:'Pharmacy', name:'Pharm. L. Rios', avatar:'LR', color:'#4A8C6F' },
  { role:'Data Steward', name:'T. Braun (DIZ)', avatar:'TB', color:'#A67A4A' },
];

const FOLLOWUP_TYPES = {
  'Lab':'#5B7FA6', 'Imaging':'#7A6FA6', 'Visit':'#4A8C6F', 'Lab (recurring)':'#C77700'
};

const STATUS_COLS = [
  { id:'pending', label:'Pending review', color:'#E5E5E7', textColor:'#4A4A4A' },
  { id:'active', label:'Decision active', color:'#FFFBEB', textColor:'#C77700' },
  { id:'decided', label:'Documented', color:'#F0FDF4', textColor:'#2E7D5B' },
];

function Avatar({ initials, color, size=32 }) {
  return (
    <div style={{
      width:size, height:size, borderRadius:'50%', background:color,
      display:'flex', alignItems:'center', justifyContent:'center',
      color:'#fff', fontSize:size*0.34, fontWeight:700, flexShrink:0
    }}>{initials}</div>
  );
}

function FollowUpCard({ task, due, type }) {
  return (
    <div style={{
      padding:'9px 12px', border:'1px solid #E5E5E7', borderRadius:4,
      background:'#fff', display:'flex', alignItems:'flex-start', gap:10
    }}>
      <div style={{
        width:8, height:8, borderRadius:'50%', background: FOLLOWUP_TYPES[type]||'#4A4A4A',
        marginTop:4, flexShrink:0
      }}/>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:12, fontWeight:500, color:'#1A1A1A'}}>{task}</div>
        <div style={{fontSize:11, color:'#4A4A4A', marginTop:2}}>
          <span style={{
            padding:'1px 6px', borderRadius:2, fontSize:10, fontWeight:600,
            background: FOLLOWUP_TYPES[type]?`${FOLLOWUP_TYPES[type]}22`:'#F7F7F8',
            color: FOLLOWUP_TYPES[type]||'#4A4A4A', marginRight:6
          }}>{type}</span>
          {due}
        </div>
      </div>
    </div>
  );
}

function CaseConference({ patient }) {
  const cc = patient.caseConference;
  const [decisionStatus, setDecisionStatus] = useStateCC(cc ? 'decided' : 'pending');
  const [activeParticipants, setActiveParticipants] = useStateCC(
    cc ? PARTICIPANTS.map(p=>p.role) : ['Nephrology']
  );
  const [preference, setPreference] = useStateCC(cc ? cc.patientPrefs : '');
  const [notes, setNotes] = useStateCC(cc ? cc.notes : '');
  const [showAddFollowUp, setShowAddFollowUp] = useStateCC(false);
  const [followUps, setFollowUps] = useStateCC(cc ? cc.followUps : []);

  const toggleParticipant = (role) => {
    setActiveParticipants(prev =>
      prev.includes(role) ? prev.filter(r=>r!==role) : [...prev, role]
    );
  };

  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}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <h1 style={{fontSize:18, fontWeight:700, color:'#1A1A1A', marginBottom:2}}>Case Conference</h1>
            <p style={{fontSize:13, color:'#4A4A4A'}}>
              {patient.alias} · {patient.id} · Decision: Tolvaptan therapy eligibility
            </p>
          </div>
          <div style={{display:'flex', gap:8}}>
            {STATUS_COLS.map(s => (
              <button key={s.id} onClick={()=>setDecisionStatus(s.id)} style={{
                padding:'5px 12px', borderRadius:4, fontSize:11, fontWeight:600,
                border: decisionStatus===s.id ? `2px solid ${s.textColor}` : '1px solid #E5E5E7',
                background: decisionStatus===s.id ? s.color : '#fff',
                color: decisionStatus===s.id ? s.textColor : '#4A4A4A',
                cursor:'pointer'
              }}>{s.label}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{flex:1, overflow:'auto', padding:20, display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, alignContent:'start'}}>

        {/* Left column */}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>

          {/* Participants */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA'}}>
              <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Participants</div>
            </div>
            <div style={{padding:14, display:'flex', flexDirection:'column', gap:8}}>
              {PARTICIPANTS.map(p => (
                <div key={p.role} style={{
                  display:'flex', alignItems:'center', gap:10, padding:'8px 10px',
                  borderRadius:4, background: activeParticipants.includes(p.role)?'#F7F7F8':'#fff',
                  border: activeParticipants.includes(p.role)?`1px solid ${p.color}44`:'1px solid transparent',
                  cursor:'pointer', transition:'all 0.15s'
                }} onClick={()=>toggleParticipant(p.role)}>
                  <Avatar initials={p.avatar} color={activeParticipants.includes(p.role)?p.color:'#D1D1D6'} size={30}/>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12, fontWeight:500, color:'#1A1A1A'}}>{p.name}</div>
                    <div style={{fontSize:11, color:'#4A4A4A'}}>{p.role}</div>
                  </div>
                  <div style={{width:16, height:16, borderRadius:3, border:`2px solid ${activeParticipants.includes(p.role)?p.color:'#D1D1D6'}`, background:activeParticipants.includes(p.role)?p.color:'transparent', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {activeParticipants.includes(p.role) && <span style={{color:'#fff', fontSize:10, lineHeight:1}}>✓</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Decision options */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA'}}>
              <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Decision options</div>
            </div>
            <div style={{padding:14, display:'flex', flexDirection:'column', gap:6}}>
              {[
                { label:'Initiate Tolvaptan – 45/15 mg titration', recommended:true },
                { label:'Defer 6 months – repeat eGFR + MRI', recommended:false },
                { label:'Enrol in ADPKD registry only', recommended:false },
                { label:'Not eligible – supportive care', recommended:false },
              ].map((opt, i) => (
                <div key={i} style={{
                  padding:'9px 12px', borderRadius:4, fontSize:12,
                  border: opt.recommended && cc ? '2px solid #2E7D5B' : '1px solid #E5E5E7',
                  background: opt.recommended && cc ? '#F0FDF4' : '#fff',
                  display:'flex', alignItems:'center', gap:8, cursor:'pointer'
                }}>
                  <div style={{width:14, height:14, borderRadius:'50%', border:`2px solid ${opt.recommended&&cc?'#2E7D5B':'#D1D1D6'}`, background:opt.recommended&&cc?'#2E7D5B':'transparent', flexShrink:0}}/>
                  <span style={{color:opt.recommended&&cc?'#2E7D5B':'#1A1A1A', fontWeight:opt.recommended&&cc?600:400}}>{opt.label}</span>
                  {opt.recommended && cc && <span style={{marginLeft:'auto', fontSize:10, fontWeight:600, color:'#2E7D5B'}}>SELECTED</span>}
                </div>
              ))}
            </div>
            {cc && (
              <div style={{padding:'0 14px 14px'}}>
                <div style={{padding:'8px 10px', background:'#F0FDF4', border:'1px solid #2E7D5B33', borderRadius:4, fontSize:12, color:'#2E7D5B', fontWeight:500}}>
                  ✓ Documented: {cc.decision}
                </div>
              </div>
            )}
          </div>

          {/* Patient preferences */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA'}}>
              <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Patient preferences</div>
            </div>
            <div style={{padding:14}}>
              <textarea
                value={preference}
                onChange={e=>setPreference(e.target.value)}
                placeholder="Document patient's stated preferences, concerns, and informed consent notes…"
                rows={4}
                style={{
                  width:'100%', fontSize:12, color:'#1A1A1A', border:'1px solid #E5E5E7',
                  borderRadius:4, padding:'8px 10px', resize:'vertical', outline:'none',
                  background:'#FAFAFA', lineHeight:1.5
                }}
              />
            </div>
          </div>
        </div>

        {/* Right column */}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>

          {/* Conference notes */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Conference notes</div>
              {cc && <span style={{fontSize:11, color:'#4A4A4A'}}>{cc.date}</span>}
            </div>
            <div style={{padding:14}}>
              <textarea
                value={notes}
                onChange={e=>setNotes(e.target.value)}
                placeholder="Clinical reasoning, contraindication review, monitoring plan…"
                rows={5}
                style={{
                  width:'100%', fontSize:12, color:'#1A1A1A', border:'1px solid #E5E5E7',
                  borderRadius:4, padding:'8px 10px', resize:'vertical', outline:'none',
                  background:'#FAFAFA', lineHeight:1.5
                }}
              />
            </div>
          </div>

          {/* Auto-generated follow-ups */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div>
                <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Auto-scheduled follow-ups</div>
                <div style={{fontSize:11, color:'#4A4A4A', marginTop:1}}>Generated from Tolvaptan initiation protocol</div>
              </div>
              <button onClick={()=>setShowAddFollowUp(o=>!o)} style={{
                padding:'4px 10px', border:'1px solid #E5E5E7', borderRadius:4,
                background:'#fff', fontSize:11, cursor:'pointer', color:'#1A1A1A'
              }}>+ Add</button>
            </div>
            <div style={{padding:12, display:'flex', flexDirection:'column', gap:6}}>
              {followUps.length === 0 && (
                <div style={{fontSize:12, color:'#4A4A4A', textAlign:'center', padding:'16px 0'}}>
                  No follow-ups scheduled yet.<br/>
                  <span style={{fontSize:11}}>Documenting a decision will auto-generate the monitoring schedule.</span>
                </div>
              )}
              {followUps.map((fu, i) => (
                <FollowUpCard key={i} {...fu}/>
              ))}
            </div>
            {followUps.length > 0 && (
              <div style={{padding:'8px 14px', background:'#F7F7F8', borderTop:'1px solid #E5E5E7', fontSize:11, color:'#4A4A4A'}}>
                {followUps.length} items · Synced to KIS scheduler · Tolvaptan monitoring protocol v2.1
              </div>
            )}
          </div>

          {/* Pharmacy check */}
          <div style={{border:'1px solid #E5E5E7', borderRadius:5, overflow:'hidden'}}>
            <div style={{padding:'10px 14px', borderBottom:'1px solid #E5E5E7', background:'#FAFAFA'}}>
              <div style={{fontSize:12, fontWeight:700, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'0.06em'}}>Pharmacy safety check</div>
            </div>
            <div style={{padding:14, display:'flex', flexDirection:'column', gap:6}}>
              {[
                { item:'Hepatic contraindication (ALT/AST)', status:'Clear', ok:true },
                { item:'Aquaretic effect counselling', status:'Documented', ok:true },
                { item:'Drug–drug interactions', status:'No relevant interactions', ok:true },
                { item:'Pregnancy / WOCBP counselling', status:'Confirmed', ok:true },
                { item:'REMS enrolment (if applicable)', status:'Pending', ok:false },
              ].map((check, i) => (
                <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:12}}>
                  <span style={{color:check.ok?'#2E7D5B':'#C77700', fontSize:13, flexShrink:0}}>{check.ok?'✓':'⚠'}</span>
                  <span style={{flex:1, color:'#1A1A1A'}}>{check.item}</span>
                  <span style={{fontSize:11, color:check.ok?'#2E7D5B':'#C77700', fontWeight:500}}>{check.status}</span>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CaseConference });