/* arenden.jsx — kundens supportärenden: lista, nytt ärende, chatt med förslag att godkänna.
   Rutter i hash: #/ (lista) · #/ny[?kat=…&typ=forslag] · #/t/<id>. På dator två spalter (lista + ärende), på mobil en vy i taget.
   Data via tickets.js; delade bitar i tickets-ui.jsx. */
const TK=window.HemsTickets;
const CATS=TK.CATEGORIES;
/* S3 (backend 26/9): "Har du läst …?" när kategorin är vald, före textfältet. Avsnitten i help-content.json valda efter vad de tar upp:
   Felsökning = sensorer och data som saknas, Vanliga frågor = varför HEMS gör som det gör, bil, planer och villkor, Kommandon = flöden för bil och laster. */
const HELP_FOR={'Styrning':[['troubleshooting','Felsökning'],['faq','Vanliga frågor']],'Data saknas':[['troubleshooting','Felsökning']],'Bil':[['faq','Vanliga frågor'],['commands','Kommandon']],'Laster':[['commands','Kommandon']],'Inställningar':[['faq','Vanliga frågor']],'Betalning':[['faq','Vanliga frågor']],'Annat':[['faq','Vanliga frågor']]};

function route(h){ const s=(h||'#/').replace(/^#/,''); let m; if((m=s.match(/^\/ny(?:\?(.*))?$/))){ const q=new URLSearchParams(m[1]||''); return {p:'ny',kat:q.get('kat'),typ:q.get('typ')==='forslag'?'forslag':'fel'}; } if((m=s.match(/^\/t\/(.+)$/))) return {p:'t',id:decodeURIComponent(m[1])}; return {p:'list'}; }

function TopBar({title,sub,back}){
  return <>
    <header className="tk-top">
      <a className="tk-back" href={back} title="Tillbaka"><TkIco n="chev"/></a>
      <a className="tk-brand tk-hide-m" href="index.html"><img src="gravio-mark.svg" alt=""/>Gravio HEMS</a>
      <div style={{minWidth:0}}><h1>{title}</h1>{sub&&<div className="sub">{sub}</div>}</div>
    </header>
    {/* Krav 5 (5/10): demoläget som band över hela bredden, inte en liten tagg. Visas bara med ?tickets=mock. */}
    {TK.isMock()&&<div className="tk-demo" role="status">Demoläge · exempeldata i din webbläsare. Inget här är dina riktiga ärenden.</div>}
  </>;
}

function statusTag(t){
  /* S2: förslag visar sin status (Mottaget, Planerat, Byggt, Avböjt) i stället för ärendets läge. */
  if(t.type==='forslag') return <span className="tk-tags">{t.unread_customer>0&&<span className="tk-tag unread">Nytt svar</span>}<TkIdeaTag t={t}/></span>;
  if(t.unread_customer>0) return <span className="tk-tag unread">Nytt svar</span>;
  if(t.status==='closed') return <span className="tk-tag done">Avslutat</span>;
  const w=TK.waitingOn(t);
  if(w==='new') return <span className="tk-tag new">Mottaget</span>;
  if(w==='customer') return <span className="tk-tag wait">Väntar på dig</span>;
  return <span className="tk-tag">Hos supporten</span>;
}

function TicketList({data,active}){
  const open=data.tickets.filter(t=>t.status!=='closed'), closed=data.tickets.filter(t=>t.status==='closed');
  return <div className="tk-card tk-list">
    <div style={{padding:'14px 14px 12px',display:'flex',alignItems:'center',gap:12,borderBottom:'1px solid var(--line)'}}>
      <div style={{flex:1,minWidth:0}}><div className="tk-k">Supportkod</div><div className="tk-mono tk-code" style={{fontSize:22,marginTop:2}}>{data.support_code||'—'}</div></div>
      <a className="tk-btn sm" href="#/ny">Rapportera problem</a>
    </div>
    {data.tickets.length===0&&<div className="tk-empty">Inga ärenden ännu.</div>}
    {[...open,...closed].map(t=><a key={t.id} href={`#/t/${encodeURIComponent(t.id)}`} className={`tk-row ${active===t.id?'on':''}`} style={t.status==='closed'?{opacity:.6}:null}>
      <span style={{minWidth:0}}><span className="tk-row-t"><span className="tk-mono tk-code" style={{fontSize:12,color:'var(--ink-2)',marginRight:8}}>{t.id}</span>{t.subject}</span><span className="v">{TK.rowSub(t)}</span></span>
      {statusTag(t)}
    </a>)}
  </div>;
}

function NewTicket({kat,typ,setTyp,supportCode,onCreated}){
  const [cat,setCat]=React.useState(kat&&CATS.includes(kat)?kat:null);
  const [text,setText]=React.useState(''), [files,setFiles]=React.useState([]), [busy,setBusy]=React.useState(false), [err,setErr]=React.useState(null);
  const fileRef=React.useRef();
  const idea=typ==='forslag';
  /* F1: När uppstod problemet? Förvalt nu, max nu, min 14 dygn bakåt. Skickas som occurred_at (epok-ms). Inte för förslag. */
  const loc=(ts)=>{ const d=new Date(ts), p=n=>String(n).padStart(2,'0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`; };
  const [t0]=React.useState(()=>Date.now()), [occ,setOcc]=React.useState(()=>loc(t0));
  const occTs=occ?new Date(occ).getTime():NaN, occOk=Number.isFinite(occTs)&&occTs<=Date.now()+6e4&&occTs>=Date.now()-14*864e5;
  const ok=cat&&text.trim().length>=10&&(idea||occOk);
  /* Valen skrivs in i adressen utan ny historikpost, så att Tillbaka från Hjälp landar på samma val. */
  const keep=(c,ty)=>{ try{ const q=new URLSearchParams(); if(c) q.set('kat',c); if(ty==='forslag') q.set('typ','forslag'); const s=q.toString(); history.replaceState(history.state,'','#/ny'+(s?'?'+s:'')); }catch(_){} };
  const pickCat=(c)=>{ setCat(c); keep(c,typ); };
  const pickTyp=(v)=>{ setTyp(v); keep(cat,v); };
  const add=async(e)=>{ const fs=[...e.target.files]; e.target.value=''; const out=[]; for(const f of fs){ try{ out.push(await TK.fileToDataUrl(f)); }catch(er){ setErr(er.message); } } setFiles(x=>[...x,...out].slice(0,4)); };
  const send=async()=>{ if(!ok) return; setBusy(true); setErr(null); try{ const b={type:typ,category:cat,text:text.trim(),attachments:files,page_build:TK.build}; if(!idea) b.occurred_at=Math.min(occTs,Date.now()); const t=await TK.create(b); onCreated(t); }catch(er){ setErr(er&&(er.status===422||er.status===403)&&er.message&&!/^HTTP /.test(er.message)?er.message:`Kunde inte skicka ${idea?'förslaget':'ärendet'} (${er.message||'fel'}). Försök igen.`); setBusy(false); } };
  const help=cat&&HELP_FOR[cat];
  return <>
    <div className="tk-card">
      {/* S1 (backend 26/9): fel eller förslag överst, skickas som type. Standard är fel. */}
      <div className="tk-seg" role="radiogroup" aria-label="Vad vill du skicka?">{[['fel','Fel eller problem'],['forslag','Förslag på förbättring']].map(([v,l])=><button key={v} type="button" role="radio" aria-checked={typ===v} className={typ===v?'on':''} onClick={()=>pickTyp(v)}>{l}</button>)}</div>
      <div className="tk-k" style={{marginTop:16}}>Vad gäller det?</div>
      <div className="tk-chips">{CATS.map(c=><button key={c} className={`tk-chip ${cat===c?'on':''}`} onClick={()=>pickCat(c)}>{c}</button>)}</div>
      {help&&<div className="tk-helpq"><TkIco n="info" size={16}/><span>Har du läst {help.map(([id,l],i)=><React.Fragment key={id}>{i>0?' och ':''}<a href={`help.html#${id}`}>{l}</a></React.Fragment>)} i Hjälp?</span></div>}
      {!idea&&<label className="tk-occ"><span className="tk-k">När uppstod problemet?</span><input className="tk-in" type="datetime-local" value={occ} max={loc(Date.now())} min={loc(t0-14*864e5)} onChange={e=>setOcc(e.target.value)}/><span className="tk-hint">Ungefär räcker, till exempel i natt kl 03.</span></label>}
      <textarea className="tk-ta" value={text} onChange={e=>setText(e.target.value)} placeholder={idea?'Vad skulle du vilja kunna göra?':'Vad hände och vad väntade du dig?'}/>
      <div style={{display:'flex',gap:8,marginTop:10,alignItems:'center'}}>
        <button className="tk-btn g sm" onClick={()=>fileRef.current.click()} disabled={files.length>=4}><TkIco n="image" size={14}/>Bifoga bild</button>
        <input ref={fileRef} type="file" accept="image/*" multiple hidden onChange={add}/>
        <span className="tk-hint">Skärmdump eller foto, upp till 4 bilder.</span>
      </div>
      {files.length>0&&<div className="tk-thumbs">{files.map((f,i)=><div key={i} className="tk-thumb"><img src={f.url} alt={f.name}/><button onClick={()=>setFiles(x=>x.filter((_,j)=>j!==i))} title="Ta bort">×</button></div>)}</div>}
    </div>
    <div className="tk-snap"><div className="tk-k">Följer med ärendet</div>
      {/* Bygget följer med i POST (page_build) men visas inte för kunden (André 24/9). */}
      <ul><li>Supportkod {supportCode||'—'}</li><li>Ögonblicksbild av dina inställningar och data-status, tagen när ärendet skickas</li></ul>
      <p>Supporten kan se dina inställningar i det här ärendet. Inget ändras utan att du godkänner det.</p>
    </div>
    {err&&<div className="tk-err">{err}</div>}
    <button className="tk-btn w" onClick={send} disabled={busy||!ok}>{busy?'Skickar…':idea?'Skicka förslaget':'Skicka ärendet'}</button>
    {!ok&&<div className="tk-hint" style={{textAlign:'center'}}>{!cat?'Välj vad det gäller.':!idea&&!occOk?'Välj en tidpunkt inom de senaste 14 dygnen.':'Skriv några ord till.'}</div>}
  </>;
}

function Thread({id,onChanged}){
  const [t,setT]=React.useState(null), [err,setErr]=React.useState(null), [busy,setBusy]=React.useState(false), [zoom,setZoom]=React.useState(null);
  const loadT=React.useCallback(async()=>{ try{ const x=await TK.get(id); setT(x); if(x.unread_customer>0){ await TK.read(id); onChanged&&onChanged(); } }catch(e){ setErr(e.status===404?'Ärendet finns inte.':'Kunde inte hämta ärendet.'); } },[id]);
  React.useEffect(()=>{ setT(null); setErr(null); /* v863: som i admin.jsx — inget nytt varv medan förra pågår eller när fliken är dold; hämtas direkt när fliken syns igen. */
    let busy=false; const tick=async()=>{ if(busy||document.hidden) return; busy=true; try{ await loadT(); }finally{ busy=false; } }; const vis=()=>{ if(!document.hidden) tick(); };
    tick(); const iv=setInterval(tick,20000); document.addEventListener('visibilitychange',vis); return ()=>{ clearInterval(iv); document.removeEventListener('visibilitychange',vis); }; },[loadT]);
  React.useEffect(()=>{ if(t) window.scrollTo(0,document.body.scrollHeight); },[t&&t.messages.length]);
  if(err) return <div className="tk-err">{err}</div>;
  if(!t) return <div className="tk-empty">Laddar…</div>;
  const send=async(b)=>{ setBusy(true); try{ setT(await TK.send(id,b)); onChanged&&onChanged(); setBusy(false); return true; }catch(e){ setErr('Kunde inte skicka. Försök igen.'); setBusy(false); return false; } };
  const decide=async(pid,d)=>{ setBusy(true); try{ setT(await TK.decide(id,pid,d)); onChanged&&onChanged(); }catch(e){ setErr('Kunde inte spara beslutet.'); } setBusy(false); };
  const sub=[t.type==='forslag'?'Förslag':null, t.category, t.assignee?`hanteras av ${t.assignee.name}`:(t.status!=='closed'?'väntar på supporten':null), `öppnat ${TK.fmtTime(t.created_at)}`].filter(Boolean).join(' · ');
  return <>
    <div className="tk-card" style={{padding:'12px 16px'}}>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <span className="tk-mono tk-code" style={{fontSize:18}}>{t.id}</span>
        <div style={{flex:1,minWidth:0}}><div style={{fontWeight:600,fontSize:14,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{t.subject}</div><div className="tk-hint">{sub}</div></div>
        <TkIdeaTag t={t}/>
        {t.status==='closed'&&<span className="tk-tag done">Avslutat</span>}
      </div>
    </div>
    <TkMessages t={t} view="customer" onDecide={decide} busy={busy} onZoom={setZoom}/>
    {t.status==='closed'&&<div className="tk-sys">Ärendet är avslutat. Skriver du här öppnas det igen.</div>}
    <TkComposer onSend={send} busy={busy}/>
    {zoom&&<TkLightbox src={zoom} onClose={()=>setZoom(null)}/>}
  </>;
}

function ArendenApp(){
  const [ready,setReady]=React.useState(false), [data,setData]=React.useState(null), [err,setErr]=React.useState(null);
  const hash=tkUseHash(), r=route(hash);
  /* S1: valet fel/förslag byter rubriken. Nollställs när adressen byts (att välja skriver om den utan hashchange). */
  const [nyTyp,setNyTyp]=React.useState(null);
  React.useEffect(()=>{ setNyTyp(null); },[hash]);
  /* Krav 2–3 (5/10): utan session eller vid 401/403 visas inloggning, inte demodata; 404, 5xx och nätfel ger feltext med Försök igen. */
  const refresh=React.useCallback(async()=>{ try{ setData(await TK.list()); setErr(null); }catch(e){ setErr(e.status===401||e.status===403?{kind:'auth'}:{kind:'net'}); } },[]);
  React.useEffect(()=>{ let iv; TK.ready().then((m)=>{ setReady(true); if(m==='nokey'){ setErr({kind:'auth'}); return; } refresh(); iv=setInterval(refresh,30000); }); return ()=>clearInterval(iv); },[refresh]);
  React.useEffect(()=>{ window.scrollTo(0,0); },[hash]);
  if(!ready) return <div className="tk-app"><div className="tk-empty">Laddar…</div></div>;
  if(err&&err.kind==='auth'&&!data) return <div className="tk-app"><TopBar title="Support" back="help.html"/>
    <div className="tk-main"><div className="tk-card" style={{textAlign:'center',padding:'28px 20px'}}>
      <div style={{fontSize:16,fontWeight:600,color:'var(--ink)'}}>Logga in för att se dina ärenden</div>
      <p className="tk-hint" style={{marginTop:8}}>Dina ärenden hos Gravio visas när du är inloggad på den här enheten.</p>
      <a className="tk-btn" href="login.html" style={{marginTop:14,display:'inline-flex'}}>Logga in</a>
    </div></div></div>;
  const typ=nyTyp||r.typ||'fel';
  const title=r.p==='ny'?(typ==='forslag'?'Föreslå en förbättring':'Rapportera problem'):r.p==='t'?`Ärende ${r.id}`:'Support';
  const sub=r.p==='list'?'Dina ärenden hos Gravio':r.p==='ny'?`Supportkod ${data?(data.support_code||'—'):'…'}`:null;
  const pane=r.p==='ny'?<NewTicket key={hash} kat={r.kat} typ={typ} setTyp={setNyTyp} supportCode={data&&data.support_code} onCreated={(t)=>{ refresh(); location.hash=`#/t/${encodeURIComponent(t.id)}`; }}/>
    :r.p==='t'?<Thread key={r.id} id={r.id} onChanged={refresh}/>:null;
  return <div className="tk-app">
    <TopBar title={title} sub={sub} back={r.p==='list'?'help.html':'#/'}/>
    {err&&<div className="tk-main"><div className="tk-err" style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}><span style={{flex:1,minWidth:160}}>{err.kind==='auth'?'Du är inte inloggad längre.':'Kunde inte hämta ärenden just nu.'}</span>{err.kind==='auth'?<a className="tk-btn sm" href="login.html">Logga in</a>:<button type="button" className="tk-btn sm" onClick={refresh}>Försök igen</button>}</div></div>}
    {data&&<div className="tk-split">
      <div className={`tk-side ${r.p!=='list'?'tk-hide-m':''}`}>
        <TicketList data={data} active={r.p==='t'?r.id:null}/>
        <div className="tk-hint" style={{marginTop:10}}>Avslutade ärenden visas i 12 månader. Text och bilder raderas med kontot.</div>
      </div>
      <div className="tk-main">{pane||<div className="tk-card tk-empty tk-hide-m">Välj ett ärende till vänster, eller rapportera ett problem.</div>}</div>
    </div>}
  </div>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<ArendenApp/>);