/* Shared proposal skill selection: case proposal tab and proposal studio. */
function useProposalSkillSelection(caseData) {
  const {skillCatalog,skillCatalogError,refreshSkillCatalog,saveProposalSkills,showToast}=useStore();
  const initial=()=>({brief:caseData?.proposalSkillIds?.brief??caseData?.proposalBrief?.skill?.id??'',design:caseData?.proposalSkillIds?.design??caseData?.proposalDesign?.skill?.id??''});
  const [value,setValue]=React.useState(initial),[saving,setSaving]=React.useState(false);
  React.useEffect(()=>{setValue(initial());},[caseData?.id,caseData?.proposalSkillIds]);
  React.useEffect(()=>{if(caseData?.id)refreshSkillCatalog().catch(()=>{});},[caseData?.id]);
  const change=async(kind,id)=>{
    if(saving||!caseData)return;
    const previous=value,next={...value,[kind]:id};setValue(next);setSaving(true);
    try{await saveProposalSkills(caseData.id,next);}catch(e){setValue(previous);showToast(e.message,'x');}finally{setSaving(false);}
  };
  const readyFor=kind=>!!caseData&&!saving&&(value[kind]==='none'||(!skillCatalogError&&!!skillCatalog?.items.some(s=>s.id===(value[kind]||skillCatalog.defaults[kind])&&s.kind===kind&&s.enabled)));
  return {value,change,saving,readyFor,catalog:skillCatalog,error:skillCatalogError,reload:refreshSkillCatalog};
}
function ProposalSkillPicker({selection,disabled=false,kinds=['brief','design']}) {
  const {isAdmin,navigate}=useStore();
  const {catalog,value,change,saving,error,reload}=selection;
  return <div style={{margin:'10px 0',padding:12,background:'#fff',border:'1px solid #e7e9f1',borderRadius:10}}>
    <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>{kinds.map(kind=>{
      const label=kind==='brief'?t("skill.brief"):t("skill.design"),items=(catalog?.items||[]).filter(s=>s.kind===kind&&s.enabled),def=items.find(s=>s.id===catalog?.defaults[kind]);
      const unavailable=value[kind]&&value[kind]!=='none'&&!items.some(s=>s.id===value[kind]);
      return <label key={kind} style={{flex:'1 1 200px',minWidth:0,fontSize:12,color:'#737b8b'}}>{label}
        <select aria-label={label} value={value[kind]} disabled={disabled||saving} onChange={e=>change(kind,e.target.value)} style={{...inputStyle,width:'100%',marginTop:5,fontSize:12.5}}>
          <option value="" disabled={!catalog}>{catalog?t('skill.defaultSelection',{name:def?.name||t('an.rankUnset'),version:def?' · '+def.version:''}):t("skill.loading")}</option>
          <option value="none">{t("skill.none")}</option>
          {unavailable&&<option value={value[kind]} disabled>{t("skill.unavailable")}</option>}
          {items.map(s=><option key={s.id} value={s.id}>{s.name} · {s.version}</option>)}
        </select>
      </label>;
    })}</div>
    <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap',marginTop:8,fontSize:11.5,color:'#8a91a0'}}>
      <span>{saving?t("skill.savingSelection"):t("skill.nextGeneration")}</span>
      {isAdmin&&<button type="button" disabled={disabled||saving} onClick={()=>navigate('skills')} style={{border:0,background:'none',color:'#4a5af0',fontFamily:'inherit',cursor:'pointer',marginLeft:'auto'}}>{t("skill.manage")}</button>}
      {error&&<span role="alert" style={{color:'#b91c1c'}}>{localizeMessage(error)} <button type="button" onClick={()=>reload().catch(()=>{})}>{t("common.reload")}</button></span>}
    </div>
  </div>;
}
function UsedProposalSkill({skill,label=t("skill.used")}) {
  if(!skill)return null;
  return <span style={{fontSize:11.5,color:'#7b828d',overflowWrap:'anywhere'}}>{label}: {skill.id==='none'?t('skill.none'):`${skill.name} ${skill.version} · revision ${skill.revision}`}</span>;
}
Object.assign(window,{useProposalSkillSelection,ProposalSkillPicker,UsedProposalSkill});