/* ============================================================
   SHARED LIST + PARTNER SCREENS
   ============================================================ */
(function(){
const {Icon,Btn,StatusBadge,PriorityBadge,Avatar,Field,Input,Textarea,Select,Banner,EmptyState}=window;
const {useState}=React;

/* ---------------- reusable request table ---------------- */
function RequestTable({requests, columns, emptyTitle='No requests', emptyDesc, emptyAction}){
  const {go,sel,helpers}=window.useStore();
  const [sort,setSort]=useState({k:'updatedAt',dir:-1});
  if(!requests.length) return <div className="card"><EmptyState icon="list" title={emptyTitle} desc={emptyDesc} action={emptyAction}/></div>;
  const sorted=[...requests].sort((a,b)=>{
    let va,vb;
    if(sort.k==='updatedAt'){va=a.updatedAt;vb=b.updatedAt;}
    else if(sort.k==='id'){va=a.id;vb=b.id;}
    else if(sort.k==='prio'){const o={urgent:0,normal:1,low:2};va=o[a.urgency];vb=o[b.urgency];}
    else {va=a[sort.k];vb=b[sort.k];}
    return (va>vb?1:va<vb?-1:0)*sort.dir;
  });
  const th=(k,label,sortable)=> <th className={sortable?'sortable':''} onClick={sortable?()=>setSort(s=>({k,dir:s.k===k?-s.dir:1})):undefined}>
    {label}{sortable&&sort.k===k?(sort.dir===1?' ▲':' ▼'):''}</th>;
  return <div className="card" style={{overflow:'hidden'}}>
    <div style={{overflowX:'auto'}}><table className="tbl">
      <thead><tr>
        {columns.includes('id')&&th('id','Request',true)}
        {columns.includes('ref')&&<th>Patient ref</th>}
        {columns.includes('hospital')&&<th>Hospital</th>}
        {columns.includes('type')&&<th>Type</th>}
        {columns.includes('prio')&&th('prio','Priority',true)}
        {columns.includes('status')&&<th>Status</th>}
        {columns.includes('reviewer')&&<th>Reviewer</th>}
        {columns.includes('updated')&&th('updatedAt','Updated',true)}
        <th></th>
      </tr></thead>
      <tbody>{sorted.map(r=><tr key={r.id} onClick={()=>go('detail',r.id)}>
        {columns.includes('id')&&<td><span className="id">{r.id}</span></td>}
        {columns.includes('ref')&&<td className="mono" style={{fontSize:12.5}}>{r.patient.ref}</td>}
        {columns.includes('hospital')&&<td>{sel.hospitalName(r.hospitalId)}</td>}
        {columns.includes('type')&&<td>{r.request.type}</td>}
        {columns.includes('prio')&&<td><PriorityBadge p={r.urgency}/></td>}
        {columns.includes('status')&&<td><StatusBadge s={r.status}/></td>}
        {columns.includes('reviewer')&&<td className="mut">{r.reviewerId?sel.userName(r.reviewerId):<span style={{color:'var(--fg-3)'}}>Unassigned</span>}</td>}
        {columns.includes('updated')&&<td className="mut">{helpers.timeAgo(r.updatedAt)}</td>}
        <td style={{textAlign:'right',color:'var(--fg-3)'}}><Icon name="chevR" size={16}/></td>
      </tr>)}</tbody>
    </table></div>
  </div>;
}
window.RequestTable=RequestTable;

/* activity feed item from history */
function activityFeed(requests, sel){
  const items=[];
  requests.forEach(r=> r.history.forEach(h=> items.push({reqId:r.id, ...h})));
  return items.sort((a,b)=>b.at-a.at).slice(0,6);
}

/* ---------------- Partner Dashboard ---------------- */
function PartnerDashboard(){
  const {me,state,go,sel,helpers}=window.useStore();
  const mine=sel.visibleRequests();
  const c={total:mine.length,
    review:mine.filter(r=>r.status==='under_review').length,
    needs:mine.filter(r=>r.status==='needs_info').length,
    approved:mine.filter(r=>r.status==='approved').length};
  const hosp=sel.hospital(me.hospitalId);

  if(!mine.length) return <div className="content-in">
    <div className="card card-pad" style={{background:'linear-gradient(120deg,#eaf6fe,#fff)'}}>
      <EmptyState icon="plus" title="Submit your first patient"
        desc="You haven't submitted any cases yet. Start a new patient case and our team will review it."
        action={<Btn variant="accent" icon="plus" onClick={()=>go('submit')}>Submit New Patient</Btn>}/>
    </div></div>;

  const stat=(n,label,dot,onClick,emph)=> <button className={'stat'+(emph?' stat--emph':'')} onClick={onClick}>
    <div className="stat__n">{n}</div><div className="stat__l">{dot&&<span className="dot" style={{background:dot}}/>}{label}</div></button>;

  return <div className="content-in">
    <div className="card" style={{background:'linear-gradient(110deg,var(--bhf-blue) 0%,#0b5e8e 100%)',color:'#fff',padding:'22px 24px',marginBottom:18,border:0,display:'flex',alignItems:'center',gap:18,flexWrap:'wrap'}}>
      <div className="f1" style={{minWidth:200}}>
        <div style={{fontSize:13,opacity:.85,fontWeight:600,letterSpacing:'.03em'}}>WELCOME BACK</div>
        <div style={{fontSize:24,fontWeight:800,letterSpacing:'-.02em',margin:'2px 0'}}>{me.name}</div>
        <div style={{opacity:.9,fontSize:14}}>{hosp.name} · {hosp.city}</div>
      </div>
      <Btn variant="accent" size="lg" icon="plus" onClick={()=>go('submit')} style={{boxShadow:'0 8px 24px rgba(0,0,0,.2)'}}>Submit New Patient</Btn>
    </div>

    {c.needs>0 && <div style={{marginBottom:18}}><Banner variant="needs" title={c.needs+' request'+(c.needs>1?'s':'')+' need your information'}>
      Add the requested details so our reviewers can continue. <a href="#" onClick={e=>{e.preventDefault();go('requests',{status:'needs_info'});}}>View {c.needs>1?'them':'it'} →</a>
    </Banner></div>}

    <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
      {stat(c.total,'Total',null,()=>go('requests',{status:'all'}))}
      {stat(c.review,'Under Review','var(--st-review-dot)',()=>go('requests',{status:'under_review'}))}
      {stat(c.needs,'Needs Info','var(--st-needs-dot)',()=>go('requests',{status:'needs_info'}),c.needs>0)}
      {stat(c.approved,'Approved','var(--st-approved-dot)',()=>go('requests',{status:'approved'}))}
    </div>

    <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr',alignItems:'start'}}>
      <div className="card">
        <div className="card-hd"><h3>My Requests</h3><div style={{flex:1}}/><a href="#" onClick={e=>{e.preventDefault();go('requests',{status:'all'});}} style={{fontSize:13}}>View all →</a></div>
        <RequestTable requests={mine.slice(0,5)} columns={['id','type','prio','status','updated']}/>
      </div>
      <div className="card">
        <div className="card-hd"><h3>Recent updates</h3></div>
        <div style={{padding:'8px 16px 16px'}}><div className="tl" style={{marginTop:8}}>
          {activityFeed(mine,sel).map((it,i)=><div key={i} className="tl__item">
            <div style={{fontSize:13.5,color:'var(--fg-1)'}}><b>{it.reqId}</b> {it.to==='submitted'?'submitted':'→ '+window.GOV.STATUS[it.to].label}</div>
            <div className="xs mut" style={{marginTop:2}}>{helpers.timeAgo(it.at)}</div>
          </div>)}
        </div></div>
      </div>
    </div>
  </div>;
}

/* ---------------- Submit New Patient ---------------- */
const TYPES=['Reconstructive surgery','Scar revision','Consultation','Imaging / diagnostics','Other'];
const Section=({n,title,children})=> <div className="card card-pad" style={{marginBottom:16}}>
  <div className="row aic gap-3" style={{marginBottom:16}}>
    <span style={{width:26,height:26,borderRadius:'50%',background:'var(--bhf-blue-50)',color:'var(--bhf-blue-700)',display:'flex',alignItems:'center',justifyContent:'center',font:'700 13px/1 var(--font-sans)',flex:'none'}}>{n}</span>
    <h3 style={{margin:0,fontSize:16,color:'var(--fg-1)'}}>{title}</h3>
  </div>{children}</div>;
function SubmitPatient(){
  const {dispatch,go,toast}=window.useStore();
  const [f,setF]=useState({ref:'',initials:'',age:'',gender:'',diagnosis:'',condition:'',
    type:'',urgency:'normal',reason:'',contact:'',partnerNote:''});
  const [files,setFiles]=useState([]);
  const [confirm,setConfirm]=useState(false);
  const [touched,setTouched]=useState({});
  const [submitting,setSubmitting]=useState(false);
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  const blur=(k)=>setTouched(t=>({...t,[k]:true}));

  const errs={};
  if(!f.ref.trim()) errs.ref='Reference code is required';
  if(!f.diagnosis.trim()) errs.diagnosis='Diagnosis summary is required';
  if(!f.type) errs.type='Select a request type';
  if(!f.reason.trim()) errs.reason='A reason for the request is required';
  const valid=Object.keys(errs).length===0 && confirm;

  const fileTypes=['Medical report','Lab report','Imaging','Referral letter','Other'];
  function addFile(){
    const t=fileTypes[files.length%fileTypes.length];
    const nm=t.toLowerCase().replace(/[^a-z]/g,'-')+'-'+(files.length+1)+(t==='Imaging'?'.jpg':'.pdf');
    setFiles(x=>[...x,{name:nm,type:t}]);
  }
  function submit(){
    setTouched({ref:1,diagnosis:1,type:1,reason:1});
    if(!valid) return;
    setSubmitting(true);
    setTimeout(()=>{
      dispatch({type:'SUBMIT',data:{
        urgency:f.urgency,
        patient:{ref:f.ref,initials:f.initials,age:f.age,gender:f.gender,diagnosis:f.diagnosis,condition:f.condition},
        request:{type:f.type,reason:f.reason,contact:f.contact,partnerNote:f.partnerNote},
        files}});
      toast({kind:'success',title:'Request submitted',desc:'Our team has been notified.'});
      go('success');
    },650);
  }

  return <div className="content-in" style={{maxWidth:840}}>
    <div className="page-head"><div className="page-head__t"><h1>Submit New Patient</h1>
      <p>Provide the case details below. Fields marked <span style={{color:'var(--bhf-red)'}}>*</span> are required.</p></div>
      <div className="page-head__actions"><Btn icon="chevL" onClick={()=>go('requests',{status:'all'})}>Cancel</Btn></div>
    </div>

    <Section n="1" title="Patient information">
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr'}}>
        <Field label="Reference code" req error={touched.ref&&errs.ref} hint="Your hospital's patient reference">
          <Input value={f.ref} onChange={e=>set('ref',e.target.value)} onBlur={()=>blur('ref')} error={touched.ref&&errs.ref} placeholder="e.g. PT-2240"/></Field>
        <Field label="Initials" opt><Input value={f.initials} onChange={e=>set('initials',e.target.value)} placeholder="e.g. S.K." maxLength={6}/></Field>
        <Field label="Age" opt><Input value={f.age} onChange={e=>set('age',e.target.value.replace(/\D/g,''))} placeholder="years" maxLength={3}/></Field>
        <Field label="Gender" opt><Select value={f.gender} onChange={e=>set('gender',e.target.value)}><option value="">Select…</option><option>Female</option><option>Male</option><option>Other</option></Select></Field>
      </div>
      <Field label="Diagnosis summary" req error={touched.diagnosis&&errs.diagnosis}>
        <Textarea value={f.diagnosis} onChange={e=>set('diagnosis',e.target.value)} onBlur={()=>blur('diagnosis')} error={touched.diagnosis&&errs.diagnosis} placeholder="Brief clinical summary of the burn injury / condition" rows={2}/></Field>
      <Field label="Current condition" opt style={{marginBottom:0}}><Input value={f.condition} onChange={e=>set('condition',e.target.value)} placeholder="e.g. Stable, limited grip"/></Field>
    </Section>

    <Section n="2" title="Request information">
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr'}}>
        <Field label="Request type" req error={touched.type&&errs.type}>
          <Select value={f.type} onChange={e=>{set('type',e.target.value);blur('type');}} error={touched.type&&errs.type}><option value="">Select…</option>{TYPES.map(t=><option key={t}>{t}</option>)}</Select></Field>
        <Field label="Urgency" req>
          <div className="seg" style={{width:'100%'}}>{['low','normal','urgent'].map(u=>
            <button key={u} type="button" className={f.urgency===u?'on':''} style={{flex:1,textTransform:'capitalize'}} onClick={()=>set('urgency',u)}>{u}</button>)}</div></Field>
      </div>
      <Field label="Reason for request" req error={touched.reason&&errs.reason}>
        <Textarea value={f.reason} onChange={e=>set('reason',e.target.value)} onBlur={()=>blur('reason')} error={touched.reason&&errs.reason} placeholder="Why is BHF support needed for this patient?" rows={3}/></Field>
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr',marginBottom:0}}>
        <Field label="Preferred contact person" opt style={{marginBottom:0}}><Input value={f.contact} onChange={e=>set('contact',e.target.value)} placeholder="Name"/></Field>
        <Field label="Partner note" opt style={{marginBottom:0}}><Input value={f.partnerNote} onChange={e=>set('partnerNote',e.target.value)} placeholder="Anything else for our team"/></Field>
      </div>
    </Section>

    <Section n="3" title="Files">
      <div className="dropzone" onClick={addFile}>
        <Icon name="upload" size={22}/><div style={{marginTop:8,fontWeight:600,color:'var(--fg-2)'}}>Drag &amp; drop or click to add files</div>
        <div className="xs mut" style={{marginTop:4}}>Medical &amp; lab reports, scans / imaging, referral letter · PDF, JPG, PNG up to 10MB</div>
      </div>
      {files.length>0 && <div className="row wrap gap-2" style={{marginTop:12}}>{files.map((file,i)=>
        <span key={i} className="chip"><Icon name="file" size={13}/><span>{file.name}</span><span className="mut xs">· {file.type}</span>
          <span className="x" onClick={()=>setFiles(x=>x.filter((_,j)=>j!==i))}><Icon name="x" size={13}/></span></span>)}</div>}
    </Section>

    <div className="card card-pad" style={{background:'var(--bhf-bg-blue)',borderColor:'var(--bhf-blue-100)'}}>
      <label className="row aic gap-3" style={{cursor:'pointer'}}>
        <input type="checkbox" checked={confirm} onChange={e=>setConfirm(e.target.checked)} style={{width:18,height:18,accentColor:'var(--bhf-blue)'}}/>
        <span style={{fontSize:14,color:'var(--fg-1)'}}>I confirm the information above is accurate to the best of my knowledge.</span>
      </label>
      <div className="row aic gap-3" style={{marginTop:16}}>
        <Btn variant="accent" size="lg" icon={submitting?null:'send'} disabled={!valid||submitting} onClick={submit}>
          {submitting?<><Icon name="refresh" size={16} cls="spin"/> Submitting…</>:'Submit Request'}</Btn>
        {!valid && <span className="perm-deny"><Icon name="info" size={14}/>Complete required fields &amp; confirm to submit</span>}
      </div>
    </div>
  </div>;
}

/* ---------------- Submission Success ---------------- */
function SubmitSuccess(){
  const {state,go}=window.useStore();
  const code=state.lastCreated;
  return <div className="content-in" style={{maxWidth:620}}>
    <div className="card card-pad" style={{textAlign:'center',paddingTop:36,paddingBottom:36}}>
      <div style={{width:68,height:68,borderRadius:'50%',background:'var(--st-approved-bg)',color:'var(--st-approved-fg)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 18px'}}><Icon name="circleCheck" size={36}/></div>
      <h2 style={{margin:'0 0 6px',fontSize:26}}>Request {code} submitted</h2>
      <p style={{color:'var(--fg-3)',margin:'0 0 24px'}}>Your case has been received and our team has been notified.</p>
      <div className="card" style={{textAlign:'left',background:'var(--bhf-bg-soft)',border:0,marginBottom:24}}>
        <div style={{padding:'16px 18px'}}>
          <div className="eyebrow" style={{marginBottom:12}}>What happens next</div>
          {[['1','BHF reviews your submission'],['2','A reviewer is assigned to the case'],['3','You’re notified of the decision — or if more info is needed']].map(s=>
            <div key={s[0]} className="row aic gap-3" style={{padding:'7px 0'}}>
              <span style={{width:24,height:24,borderRadius:'50%',background:'#fff',border:'1.5px solid var(--border-strong)',display:'flex',alignItems:'center',justifyContent:'center',font:'700 12px/1 var(--font-sans)',color:'var(--bhf-blue)',flex:'none'}}>{s[0]}</span>
              <span style={{fontSize:14}}>{s[1]}</span></div>)}
        </div>
      </div>
      <div className="row gap-3" style={{justifyContent:'center'}}>
        <Btn variant="primary" iconR="arrowR" onClick={()=>go('detail',code)}>View request</Btn>
        <Btn icon="plus" onClick={()=>go('submit')}>Submit another</Btn>
      </div>
    </div>
  </div>;
}

/* ---------------- My Requests ---------------- */
function MyRequests({admin}){
  const {state,me,route,sel,go}=window.useStore();
  const init=(route.id&&route.id.status)||'all';
  const [status,setStatus]=useState(init);
  const [prio,setPrio]=useState('all');
  const [q,setQ]=useState('');
  React.useEffect(()=>{ if(route.id&&route.id.status) setStatus(route.id.status); },[route.id]);

  let reqs=sel.visibleRequests();
  if(status!=='all') reqs=reqs.filter(r=>r.status===status);
  if(prio!=='all') reqs=reqs.filter(r=>r.urgency===prio);
  if(q.trim()){const s=q.toLowerCase();reqs=reqs.filter(r=>r.id.toLowerCase().includes(s)||r.patient.ref.toLowerCase().includes(s)||r.request.type.toLowerCase().includes(s));}

  const cols=admin?['id','ref','hospital','type','prio','status','reviewer','updated']:['id','ref','type','prio','status','updated'];

  return <div className="content-in">
    <div className="page-head"><div className="page-head__t">
      <h1>{admin?'All Requests':'My Requests'}</h1>
      <p>{admin?'Every case across all partner hospitals.':'Cases submitted by '+sel.hospitalName(me.hospitalId)+'.'}</p></div>
      {!admin && <div className="page-head__actions"><Btn variant="accent" icon="plus" onClick={()=>go('submit')}>Submit New Patient</Btn></div>}
    </div>

    <div className="filterbar">
      <div className="topbar__search" style={{maxWidth:260,margin:0}}><Icon name="search" size={16}/><input placeholder="Search ID, ref, type…" value={q} onChange={e=>setQ(e.target.value)}/></div>
      <Select value={status} onChange={e=>setStatus(e.target.value)} style={{width:'auto',minWidth:150}}>
        <option value="all">All statuses</option>{window.GOV.STATUS_ORDER.map(s=><option key={s} value={s}>{window.GOV.STATUS[s].label}</option>)}</Select>
      <Select value={prio} onChange={e=>setPrio(e.target.value)} style={{width:'auto',minWidth:130}}>
        <option value="all">All priorities</option><option value="urgent">Urgent</option><option value="normal">Normal</option><option value="low">Low</option></Select>
      {(status!=='all'||prio!=='all'||q)&&<Btn variant="ghost" size="sm" icon="x" onClick={()=>{setStatus('all');setPrio('all');setQ('');}}>Clear</Btn>}
      <div style={{marginLeft:'auto'}} className="mut sm">{reqs.length} request{reqs.length!==1?'s':''}</div>
    </div>

    <RequestTable requests={reqs} columns={cols}
      emptyTitle={q||status!=='all'?'No matching requests':'No requests yet'}
      emptyDesc={q||status!=='all'?'Try clearing filters.':(admin?'':'Submit your first patient to get started.')}
      emptyAction={!admin&&!(q||status!=='all')&&<Btn variant="accent" icon="plus" onClick={()=>go('submit')}>Submit New Patient</Btn>}/>
  </div>;
}

Object.assign(window,{PartnerDashboard,SubmitPatient,SubmitSuccess,MyRequests});
})();