/* ============================================================
   REQUEST DETAIL — role-aware, governance-enforced
   ============================================================ */
(function(){
const {Icon,Btn,StatusBadge,PriorityBadge,RoleBadge,Avatar,Field,Textarea,Select,Banner,Modal,PermDenied}=window;
const {useState}=React;
const G=()=>window.GOV;

const TARGET_LABEL={under_review:'Move to Under Review',needs_info:'Request Information',approved:'Approve',rejected:'Reject',closed:'Close case'};
const TARGET_VARIANT={approved:'primary',rejected:'danger',needs_info:'accent'};

function RequestDetail(){
  const store=window.useStore();
  const {state,me,route,go,sel,dispatch,toast,helpers}=store;
  const req=sel.request(route.id);
  const [reason,setReason]=useState(null);   // {to}
  const [reasonText,setReasonText]=useState('');
  const [assignOpen,setAssignOpen]=useState(false);
  const [noteScope,setNoteScope]=useState('partner');
  const [noteText,setNoteText]=useState('');
  const [respondText,setRespondText]=useState('');
  const [respondFiles,setRespondFiles]=useState([]);

  if(!req) return <PermDenied what="find that request"/>;
  if(!G().canViewRequest(me,req)) return <PermDenied what="view this request"/>;

  const isPartner=me.role==='partner';
  const isTeam=!isPartner;
  const settings=state.settings;
  const allowed=G().transitionsFor(req.status, me, settings);
  const canDecide=G().can(me,'change_status',settings);
  const canRecommend=G().can(me,'recommend')&&!canDecide;
  const canAssign=G().can(me,'assign_reviewer');
  const canInternal=G().can(me,'add_internal_note');
  const readOnly=['rejected','closed'].includes(req.status);
  const notes=G().visibleNotes(me,req);
  const files=G().visibleFiles(me,req);
  const reviewer=req.reviewerId?sel.user(req.reviewerId):null;
  const reviewers=state.users.filter(u=>u.role==='reviewer'&&u.status==='active');

  function doStatus(to,reasonVal){
    dispatch({type:'STATUS',reqId:req.id,to,reason:reasonVal||''});
    toast({kind:'audit',icon:'shield',title:G().STATUS[to].label,desc:'Status changed · recorded to audit trail.'});
  }
  function clickTransition(to){
    if(G().REASON_REQUIRED.includes(to)){ setReason({to}); setReasonText(''); }
    else doStatus(to);
  }
  function confirmReason(){
    if(!reasonText.trim()) return;
    doStatus(reason.to,reasonText.trim());
    setReason(null);
  }
  function assign(reviewerId){
    dispatch({type:'ASSIGN',reqId:req.id,reviewerId});
    setAssignOpen(false);
    toast({kind:'audit',icon:'userCheck',title:'Reviewer assigned',desc:sel.userName(reviewerId)+' · recorded to audit.'});
  }
  function recommend(rec){
    dispatch({type:'RECOMMEND',reqId:req.id,rec});
    toast({kind:'audit',icon:'shield',title:'Recommendation sent',desc:'An admin will make the final decision.'});
  }
  function addNote(){
    if(!noteText.trim()) return;
    dispatch({type:'NOTE',reqId:req.id,scope:noteScope,body:noteText.trim()});
    toast({title:noteScope==='internal'?'Internal note added':'Note added',desc:noteScope==='internal'?'Hidden from the partner.':'Visible to the partner.'});
    setNoteText('');
  }
  function respond(){
    if(!respondText.trim()) return;
    dispatch({type:'RESPOND',reqId:req.id,body:respondText.trim(),files:respondFiles});
    toast({kind:'success',title:'Response sent',desc:'Request moved back to Under Review.'});
    setRespondText(''); setRespondFiles([]);
  }
  function download(file){
    // real, scope-checked download (server enforces visibility + logs the audit)
    window.open('/api/files/'+file.id,'_blank');
    toast({title:'Download started',desc:file.name+(isTeam?' · logged to audit':'')});
  }
  function addRespondFile(){
    const n=respondFiles.length+1;
    setRespondFiles(x=>[...x,{name:'follow-up-'+n+'.pdf',type:'Additional report'}]);
  }

  const backTo=isPartner?'requests':(me.role==='reviewer'?'queue':'requests');

  return <div className="content-in">
    {/* header */}
    <div className="row aic gap-3" style={{marginBottom:6}}>
      <Btn variant="ghost" size="sm" icon="chevL" onClick={()=>go(backTo,{status:'all'})}>Back</Btn>
      <span className="mut sm">{isTeam?sel.hospitalName(req.hospitalId):'Request'}</span>
    </div>
    <div className="page-head" style={{alignItems:'center'}}>
      <div className="page-head__t">
        <div className="row aic gap-3 wrap">
          <h1 style={{margin:0,whiteSpace:'nowrap'}}>{req.id}</h1>
          <StatusBadge s={req.status}/>
          <PriorityBadge p={req.urgency}/>
        </div>
        <p style={{marginTop:8}}>Submitted {helpers.fmtDate(req.createdAt)} by {sel.userName(req.submittedById)} · updated {helpers.timeAgo(req.updatedAt)}</p>
      </div>
    </div>

    {/* partner needs-info action */}
    {isPartner && req.status==='needs_info' && <div style={{marginBottom:18}}>
      <Banner variant="needs" title="This request needs your information" style={{marginBottom:12}}>
        A reviewer has asked for more details. Add a note (and any files) below to continue — this moves your request back to Under Review.
      </Banner>
      <div className="card card-pad">
        <Field label="Your response" style={{marginBottom:12}}>
          <Textarea value={respondText} onChange={e=>setRespondText(e.target.value)} placeholder="Reply to the reviewer's request…" rows={3}/></Field>
        {respondFiles.length>0 && <div className="row wrap gap-2" style={{marginBottom:12}}>{respondFiles.map((f,i)=>
          <span key={i} className="chip"><Icon name="file" size={13}/>{f.name}<span className="x" onClick={()=>setRespondFiles(x=>x.filter((_,j)=>j!==i))}><Icon name="x" size={13}/></span></span>)}</div>}
        <div className="row aic gap-3">
          <Btn variant="accent" icon="send" disabled={!respondText.trim()} onClick={respond}>Send response</Btn>
          <Btn size="sm" icon="paperclip" onClick={addRespondFile}>Attach file</Btn>
        </div>
      </div>
    </div>}

    <div className="grid" style={{gridTemplateColumns:'1.55fr 1fr',alignItems:'start'}}>
      {/* ---------------- LEFT: case content ---------------- */}
      <div className="col gap-4" style={{minWidth:0}}>
        <InfoCard title="Patient information" icon="user" rows={[
          ['Reference', <span className="mono">{req.patient.ref}</span>],
          ['Initials', req.patient.initials||'—'],
          ['Age', req.patient.age?req.patient.age+' yrs':'—'],
          ['Gender', req.patient.gender||'—'],
          ['Diagnosis', req.patient.diagnosis],
          ['Condition', req.patient.condition||'—'],
        ]}/>
        <InfoCard title="Request" icon="file" rows={[
          ['Type', req.request.type],
          ['Reason', req.request.reason],
          ['Contact', req.request.contact||'—'],
          ['Reviewer', reviewer? reviewer.name : <span className="mut">Unassigned</span>],
          req.request.partnerNote?['Partner note', req.request.partnerNote]:null,
        ].filter(Boolean)}/>

        {/* files */}
        <div className="card">
          <div className="card-hd"><Icon name="file" size={17}/><h3>Files</h3><span className="mut sm" style={{marginLeft:'auto'}}>{files.length} file{files.length!==1?'s':''}</span></div>
          <div className="col gap-2" style={{padding:'14px 16px'}}>
            {files.length===0 && <div className="mut sm" style={{padding:'8px 0'}}>No files attached.</div>}
            {files.map(file=><div key={file.id} className="file-row">
              <span className="file-row__ico"><Icon name="file" size={18}/></span>
              <div className="f1" style={{minWidth:0}}>
                <div style={{fontWeight:600,fontSize:13.5,color:'var(--fg-1)'}}>{file.name}
                  {file.scope==='internal'&&<span className="gov-note" style={{marginLeft:8}}><Icon name="lock" size={11}/>Internal</span>}</div>
                <div className="xs mut">{file.type} · {sel.userName(file.by)} · {helpers.timeAgo(file.at)}</div>
              </div>
              <Btn size="sm" icon="download" onClick={()=>download(file)}>Download</Btn>
            </div>)}
          </div>
        </div>

        {/* notes */}
        <div className="card">
          <div className="card-hd"><Icon name="message" size={17}/><h3>Notes</h3>
            {isTeam&&<span className="gov-note" style={{marginLeft:'auto'}}><Icon name="eyeOff" size={11}/>You see internal notes</span>}</div>
          <div className="col gap-3" style={{padding:'14px 16px'}}>
            {notes.length===0 && <div className="mut sm">No notes yet.</div>}
            {notes.map(n=>{const au=sel.user(n.authorId);return <div key={n.id} className={'note'+(n.scope==='internal'?' note--internal':'')}>
              <div className="note__hd">
                <Avatar name={au?au.name:'?'} size={24}/>
                <span style={{fontWeight:600,fontSize:13,color:'var(--fg-1)'}}>{au?au.name:'—'}</span>
                {au&&<RoleBadge role={au.role}/>}
                {n.scope==='internal'&&<span className="gov-note"><Icon name="lock" size={11}/>Internal — hidden from partner</span>}
                <span className="xs mut" style={{marginLeft:'auto'}}>{helpers.timeAgo(n.at)}</span>
              </div>
              <div className="note__body">{n.body}</div>
            </div>;})}

            {/* composer */}
            {isTeam && !readOnly && <div className="note__composer">
              {canInternal && <div className="seg" style={{marginBottom:10}}>
                <button className={noteScope==='partner'?'on':''} onClick={()=>setNoteScope('partner')}><Icon name="user" size={14}/>Partner-visible</button>
                <button className={noteScope==='internal'?'on':''} onClick={()=>setNoteScope('internal')}><Icon name="lock" size={14}/>Internal-only</button>
              </div>}
              <Textarea value={noteText} onChange={e=>setNoteText(e.target.value)} rows={2}
                placeholder={noteScope==='internal'?'Internal note — the partner will NOT see this…':'Note the partner will see…'}/>
              <div className="row jcb aic" style={{marginTop:10}}>
                <span className="xs mut">{noteScope==='internal'?'Only BHF team members can read this.':'Visible to the partner hospital.'}</span>
                <Btn variant="primary" size="sm" icon="send" disabled={!noteText.trim()} onClick={addNote}>Add note</Btn>
              </div>
            </div>}
            {isPartner && !readOnly && req.status!=='needs_info' && <div className="note__composer">
              <Textarea value={noteText} onChange={e=>setNoteText(e.target.value)} rows={2} placeholder="Add a note for the BHF team…"/>
              <div className="row jce" style={{marginTop:10}}><Btn variant="primary" size="sm" icon="send" disabled={!noteText.trim()} onClick={()=>{setNoteScope('partner');dispatch({type:'NOTE',reqId:req.id,scope:'partner',body:noteText.trim()});toast({title:'Note added'});setNoteText('');}}>Add note</Btn></div>
            </div>}
            {readOnly && <div className="perm-deny"><Icon name="lock" size={14}/>This request is {G().STATUS[req.status].label.toLowerCase()} — notes are read-only.</div>}
          </div>
        </div>

        {/* history */}
        <div className="card">
          <div className="card-hd"><Icon name="clock" size={17}/><h3>Status history</h3></div>
          <div style={{padding:'16px 16px 16px 22px'}}><div className="tl">
            {[...req.history].reverse().map((h,i)=><div key={i} className="tl__item">
              <div className="row aic gap-2 wrap">
                {h.from && <><StatusBadge s={h.from} sm/><Icon name="arrowR" size={13} cls="mut"/></>}
                <StatusBadge s={h.to} sm/>
              </div>
              <div className="xs mut" style={{marginTop:5}}>{sel.userName(h.byId)} · {helpers.fmtDate(h.at)}{h.reason?' · “'+h.reason+'”':''}</div>
            </div>)}
          </div></div>
        </div>
      </div>

      {/* ---------------- RIGHT: action rail ---------------- */}
      <div className="col gap-4">
        {isTeam && <div className="card">
          <div className="card-hd" style={{background:'var(--bhf-bg-blue)'}}><Icon name="shield" size={17}/><h3>Case actions</h3></div>
          <div className="col gap-4" style={{padding:'16px'}}>
            {/* assignment */}
            <div>
              <div className="field-l">Assigned reviewer</div>
              <div className="row aic gap-2">
                <div className="f1">{reviewer? <span className="chip" style={{width:'100%'}}><Avatar name={reviewer.name} size={20}/>{reviewer.name}</span> : <span className="mut sm">Unassigned</span>}</div>
                {canAssign && <Btn size="sm" icon="userCheck" onClick={()=>setAssignOpen(true)}>{reviewer?'Reassign':'Assign'}</Btn>}
              </div>
              {!canAssign && <div className="perm-deny" style={{marginTop:6}}><Icon name="lock" size={12}/>Only admins assign reviewers</div>}
            </div>
            <hr className="hr"/>

            {/* decision */}
            <div>
              <div className="field-l" style={{marginBottom:10}}>{canDecide?'Change status':'Decision'}</div>
              {readOnly && <div className="perm-deny"><Icon name="lock" size={13}/>{G().STATUS[req.status].label} — no further transitions{me.role!=='reviewer'?' except reopen':''}.</div>}
              {!readOnly && canDecide && <div className="col gap-2">
                {allowed.map(to=><Btn key={to} variant={TARGET_VARIANT[to]||''} icon={to==='approved'?'check':to==='rejected'?'ban':to==='needs_info'?'message':to==='closed'?'check':'arrowR'} onClick={()=>clickTransition(to)}>{TARGET_LABEL[to]}</Btn>)}
                {allowed.length===0 && <div className="perm-deny"><Icon name="info" size={13}/>No transitions available.</div>}
              </div>}
              {canDecide && allowed.includes('closed') && false}
              {req.status==='closed' && canDecide && <div className="mt"></div>}

              {/* reviewer recommend mode */}
              {!readOnly && canRecommend && <div className="col gap-2">
                <div className="gov-note" style={{marginBottom:4}}><Icon name="shield" size={11}/>Reviewers recommend — an admin makes the final call</div>
                {req.recommendation && <div className="banner banner-info" style={{padding:'8px 10px',fontSize:12.5,marginBottom:4}}><span className="ico"><Icon name="userCheck" size={15}/></span><div>You recommended <b>{req.recommendation.rec.toUpperCase()}</b></div></div>}
                <Btn variant="primary" icon="check" onClick={()=>recommend('approve')}>Recommend approve</Btn>
                <Btn variant="accent" icon="message" onClick={()=>recommend('needs info')}>Recommend more info</Btn>
                <Btn variant="danger" icon="ban" onClick={()=>recommend('reject')}>Recommend reject</Btn>
              </div>}
            </div>

            {/* show reviewer recommendation to deciders */}
            {canDecide && req.recommendation && <>
              <hr className="hr"/>
              <div className="banner banner-amber" style={{padding:'10px 12px',fontSize:13}}>
                <span className="ico"><Icon name="userCheck" size={16}/></span>
                <div><b>{sel.userName(req.recommendation.byId)}</b> recommended <b>{req.recommendation.rec.toUpperCase()}</b></div>
              </div>
            </>}
          </div>
        </div>}

        {/* who/meta for partner */}
        {isPartner && <div className="card">
          <div className="card-hd"><Icon name="info" size={17}/><h3>Case summary</h3></div>
          <div className="col gap-3" style={{padding:'14px 16px'}}>
            <Meta k="Status" v={<StatusBadge s={req.status}/>}/>
            <Meta k="Priority" v={<PriorityBadge p={req.urgency}/>}/>
            <Meta k="Reviewer" v={reviewer?reviewer.name:<span className="mut">Pending assignment</span>}/>
            <Meta k="Submitted" v={helpers.fmtDate(req.createdAt)}/>
            <Meta k="Last update" v={helpers.timeAgo(req.updatedAt)}/>
          </div>
        </div>}

        {/* governance: permissions on this case */}
        <PermissionsCard me={me} req={req} settings={settings}/>
      </div>
    </div>

    {/* reason modal */}
    <Modal open={!!reason} onClose={()=>setReason(null)} lg
      title={reason&&reason.to==='rejected'?'Reject request':'Request more information'}
      icon={reason&&reason.to==='rejected'?'ban':'message'}
      iconColor={reason&&reason.to==='rejected'?'var(--st-rejected-fg)':'var(--bhf-orange)'}
      footer={<>
        <Btn onClick={()=>setReason(null)}>Cancel</Btn>
        <Btn variant={reason&&reason.to==='rejected'?'danger':'accent'} disabled={!reasonText.trim()} onClick={confirmReason}>
          {reason&&reason.to==='rejected'?'Reject request':'Send to partner'}</Btn>
      </>}>
      <p className="sm mut" style={{marginTop:0}}>A reason is required for this action. It will be {reason&&reason.to==='needs_info'?'shown to the partner and ':''}recorded in the status history and audit log.</p>
      <Field label="Reason" req style={{marginBottom:0}}>
        <Textarea value={reasonText} onChange={e=>setReasonText(e.target.value)} rows={4} autoFocus
          placeholder={reason&&reason.to==='rejected'?'Explain why this case cannot proceed…':'What information do you need from the partner?'}/>
      </Field>
    </Modal>

    {/* assign modal */}
    <Modal open={assignOpen} onClose={()=>setAssignOpen(false)} title="Assign reviewer" icon="userCheck">
      <div className="col gap-2">
        {reviewers.map(r=><button key={r.id} className={'persona'+(req.reviewerId===r.id?' sel':'')} onClick={()=>assign(r.id)}>
          <Avatar name={r.name} size={34}/>
          <div className="persona__meta"><div className="persona__name">{r.name}</div>
            <div className="persona__sub">{state.requests.filter(x=>x.reviewerId===r.id).length} active case(s)</div></div>
          {req.reviewerId===r.id && <Icon name="check" size={18} style={{color:'var(--bhf-blue)'}}/>}
        </button>)}
      </div>
    </Modal>
  </div>;
}

function InfoCard({title,icon,rows}){
  return <div className="card">
    <div className="card-hd"><Icon name={icon} size={17}/><h3>{title}</h3></div>
    <div style={{padding:'6px 16px 14px'}}>
      {rows.map((r,i)=><div key={i} className="row" style={{padding:'9px 0',borderBottom:i<rows.length-1?'1px solid var(--border-default)':0,gap:16}}>
        <div className="mut sm" style={{width:96,flex:'none',paddingTop:1}}>{r[0]}</div>
        <div className="f1" style={{fontSize:14,color:'var(--fg-1)',lineHeight:1.5}}>{r[1]}</div>
      </div>)}
    </div>
  </div>;
}
function Meta({k,v}){ return <div className="row jcb aic"><span className="mut sm">{k}</span><span style={{fontSize:13.5,color:'var(--fg-1)',fontWeight:500}}>{v}</span></div>; }

/* governance summary card */
function PermissionsCard({me,req,settings}){
  const G=window.GOV;
  const can=(a)=>G.can(me,a,settings);
  const list=[
    ['View this case', true],
    ['Download files', true],
    ['Add partner-visible note', !['rejected','closed'].includes(req.status)],
    ['Add internal-only note', can('add_internal_note')],
    ['View internal notes', can('view_internal')],
    ['Assign reviewer', can('assign_reviewer')],
    ['Change status', can('change_status')],
    me.role==='reviewer'?['Recommend a decision', true]:null,
  ].filter(Boolean);
  return <div className="card">
    <div className="card-hd"><Icon name="shield" size={16}/><h3 style={{fontSize:14}}>Your permissions here</h3></div>
    <div className="col" style={{padding:'10px 16px 14px',gap:8}}>
      <div className="row aic gap-2" style={{marginBottom:2}}><RoleBadge role={me.role}/>
        {me.role==='reviewer'&&<span className="xs mut">{settings.reviewersCanDecide?'can decide (admin setting on)':'recommend-only'}</span>}</div>
      {list.map((p,i)=><div key={i} className="row aic gap-2" style={{fontSize:13}}>
        <span style={{color:p[1]?'var(--st-approved-fg)':'var(--fg-3)',flex:'none'}}><Icon name={p[1]?'check':'x'} size={14}/></span>
        <span style={{color:p[1]?'var(--fg-1)':'var(--fg-3)'}}>{p[0]}</span></div>)}
    </div>
  </div>;
}

window.RequestDetail=RequestDetail;
})();