// Support Agent — clickinPMS Customer Support: tiketi, klepet, baza znanja, SLA

function SPDashboard({ dark, onNav }){
  const muted = dark?'#9A9A9A':'#707070';
  const tickets = [
    {id:'#4821', sub:'Kiosk se ne odzove na dotik',  org:'Hotel Triglav Bled',  oi:'TB', priority:'urgent', status:'open',     sla:'12 min', age:'18 min', agent:null,        ch:'klepet'},
    {id:'#4820', sub:'AJPES poročanje vrača napako',  org:'Vila Bled Resort',     oi:'VB', priority:'high',   status:'in_progress', sla:'1h 24m', age:'36 min', agent:'M. Lavrič',  ch:'mail'},
    {id:'#4819', sub:'Booking.com sinhronizacija',     org:'Hotel Cubo LJ',       oi:'HC', priority:'high',   status:'open',     sla:'2h 10m', age:'52 min', agent:null,        ch:'mail'},
    {id:'#4818', sub:'Tiskalnik računov ne tiska',     org:'Hostel Celica',        oi:'HC', priority:'med',    status:'in_progress', sla:'3h 40m', age:'1h 12m',  agent:'P. Korošec', ch:'klepet'},
    {id:'#4817', sub:'Kako dodati novo sobo?',         org:'Hotel Astoria Bled',  oi:'HA', priority:'low',    status:'waiting',  sla:'7h 50m', age:'2h 04m',  agent:'M. Lavrič',  ch:'klepet'},
    {id:'#4816', sub:'Dvakratno zaračunavanje',        org:'Penzion Pri Lojzetu', oi:'PL', priority:'urgent', status:'in_progress', sla:'42 min', age:'2h 30m',  agent:'A. Hribar',  ch:'telefon'},
    {id:'#4815', sub:'Pogrešam račun za marec',        org:'Hotel Cubo LJ',       oi:'HC', priority:'low',    status:'waiting',  sla:'15h',    age:'4h 10m',  agent:'M. Lavrič',  ch:'mail'},
    {id:'#4814', sub:'Salto API timeout',              org:'Hotel Triglav Bled',  oi:'TB', priority:'med',    status:'open',     sla:'5h 20m', age:'5h 02m',  agent:null,        ch:'mail'},
  ];
  const prMap={urgent:['danger','Nujno'],high:['orange','Visoka'],med:['blue','Srednja'],low:['neutral','Nizka']};
  const stMap={open:['orange','Odprt'],in_progress:['blue','V obdelavi'],waiting:['purple','Čaka stranko']};
  const chMap={klepet:'cyan',mail:'blue',telefon:'success'};

  return <>
    <HPageHeader dark={dark} title="Vrsta tiketov" subtitle="14 odprtih · 4 nujne · povprečen odzivni čas 8 min"
      actions={<><HBtn variant="ghost" dark={dark} icon="filter">Filtri</HBtn><HBtn variant="primary" icon="plus">Nov tiket</HBtn></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="red"    label="Nujni"        value="4"  delta="+1"/>
      <HStat dark={dark} tone="orange" label="Visoka pri."  value="6"/>
      <HStat dark={dark} tone="blue"   label="V obdelavi"   value="8"/>
      <HStat dark={dark} tone="green"  label="Rešeno (24h)" value="34" delta="+12"/>
      <HStat dark={dark} tone="purple" label="CSAT 7d"      value="4,7"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontSize:14, fontWeight:600}}>Aktivni tiketi</div>
          <div style={{display:'flex', gap:6}}>
            {['Vsi','Moji','Brez nosilca','Nujni'].map((t,i)=>
              <button key={t} style={{padding:'5px 12px', fontSize:11, fontWeight:600, fontFamily:'inherit',
                background:i===0?'#FF9800':'transparent', color:i===0?'#fff':muted,
                border:`1px solid ${i===0?'#FF9800':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:999, cursor:'pointer'}}>{t}</button>)}
          </div>
        </div>
        <HTable dark={dark} compact columns={[
          {key:'id', label:'#', render:t=><span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'#FF9800'}}>{t.id}</span>},
          {key:'sub', label:'Zadeva', render:t=><div>
            <div style={{fontWeight:600}}>{t.sub}</div>
            <div style={{fontSize:11, color:muted, display:'flex', alignItems:'center', gap:6, marginTop:2}}>
              <span style={{width:18, height:18, borderRadius:4, background:'#E3F2FD', color:'#0D47A1', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:700}}>{t.oi}</span>
              {t.org} · <HBadge tone={chMap[t.ch]}>{t.ch}</HBadge>
            </div>
          </div>},
          {key:'priority', label:'Prioriteta', render:t=><HBadge tone={prMap[t.priority][0]}>{prMap[t.priority][1]}</HBadge>},
          {key:'sla',   label:'SLA', render:t=><span style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, color: t.sla.includes('min')?'#E53935':t.sla.startsWith('1h')||t.sla.startsWith('2h')?'#FF9800':muted}}>⏱ {t.sla}</span>},
          {key:'age',   label:'Starost', render:t=><span style={{fontSize:11, color:muted}}>{t.age}</span>},
          {key:'agent', label:'Nosilec', render:t=>t.agent ? <span style={{fontSize:12}}>{t.agent}</span> : <HBadge tone="orange">Nedodeljeno</HBadge>},
          {key:'status', label:'Status', render:t=><HBadge tone={stMap[t.status][0]}>{stMap[t.status][1]}</HBadge>},
        ]} rows={tickets}/>
      </HCard>

      <div style={{display:'flex', flexDirection:'column', gap:16}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Live klepeti</div>
          {[
            {n:'Hotel Triglav Bled',m:'Sobe 213 ne morem dodeliti…',t:'sedaj',a:true},
            {n:'Hostel Celica',     m:'Lahko mi pošljete…',         t:'pred 2 min',a:true},
            {n:'Hotel Cubo LJ',     m:'Mhm super, deluje',          t:'pred 8 min',a:false},
          ].map((c,i)=>
            <div key={i} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', alignItems:'center', gap:10}}>
              <div style={{position:'relative'}}>
                <div style={{width:36, height:36, borderRadius:'50%', background:'linear-gradient(135deg,#FF9800,#F57C00)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{c.n.split(' ').slice(0,2).map(w=>w[0]).join('')}</div>
                {c.a && <span style={{position:'absolute', bottom:0, right:0, width:10, height:10, borderRadius:'50%', background:'#2DD164', border:`2px solid ${dark?'#1A1A1A':'#fff'}`}}/>}
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:12, fontWeight:600}}>{c.n}</div>
                <div style={{fontSize:11, color:muted, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{c.m}</div>
              </div>
              <span style={{fontSize:10, color:muted}}>{c.t}</span>
            </div>
          )}
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Baza znanja — vroče</div>
          {[
            ['Programiranje ključev Salto','254 ogledov 7d'],
            ['AJPES poročanje napake','187 ogledov'],
            ['Channel manager — Booking.com sync','152 ogledov'],
            ['FURS davčna blagajna setup','98 ogledov'],
            ['Stripe payments — chargeback','72 ogledov'],
          ].map(([t,d],i)=>
            <div key={i} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', gap:10, alignItems:'center', cursor:'pointer'}}>
              <HIcon name="book" size={14} color={muted}/>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:12, fontWeight:600}}>{t}</div>
                <div style={{fontSize:11, color:muted}}>{d}</div>
              </div>
            </div>
          )}
        </HCard>
      </div>
    </div>
  </>;
}

Object.assign(window, { SPDashboard });