// Housekeeping mobile — telefonska aplikacija za sobarice in vzdrževalce
// Ena stran z dnevnim seznamom + detajl sobe + akcije

function HKApp({ dark }) {
  const [tab, setTab] = React.useState('list');
  const [task, setTask] = React.useState(null);

  return <div style={{height:'100%', display:'flex', flexDirection:'column', background:dark?'#0F1419':'#F5F5F5', color:dark?'#E5E5E5':'#1A1A1A', fontFamily:'inherit'}}>
    {/* Header */}
    <div style={{padding:'12px 20px 14px', background:dark?'#1A1A1A':'#fff', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:11, color:dark?'#9A9A9A':'#707070', fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>28. april · sreda</div>
          <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, marginTop:2}}>Anita K.</div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'linear-gradient(135deg,#9C27B0,#673AB7)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:13}}>AK</div>
      </div>
    </div>

    {tab==='list' && !task && <HKList dark={dark} onPick={setTask}/>}
    {tab==='list' && task   && <HKDetail dark={dark} task={task} onBack={()=>setTask(null)}/>}
    {tab==='reports' && <HKReports dark={dark}/>}
    {tab==='profile' && <HKProfile dark={dark}/>}

    {/* Tab bar */}
    <div style={{height:74, paddingBottom:18, background:dark?'#1A1A1A':'#fff', borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex'}}>
      {[
        ['list',    'cleaning', 'Naloge'],
        ['reports', 'wrench',   'Napake'],
        ['profile', 'users',    'Profil'],
      ].map(([k,ic,l])=>{
        const a = tab===k;
        return <button key={k} onClick={()=>{setTab(k); setTask(null);}} style={{flex:1, background:'transparent', border:'none', display:'flex', flexDirection:'column', alignItems:'center', gap:3, paddingTop:8, color: a?'#9C27B0':(dark?'#9A9A9A':'#707070'), fontFamily:'inherit', cursor:'pointer'}}>
          <HIcon name={ic} size={22}/>
          <div style={{fontSize:10, fontWeight: a?700:500}}>{l}</div>
        </button>;
      })}
    </div>
  </div>;
}

function HKList({ dark, onPick }){
  const muted = dark?'#9A9A9A':'#707070';
  const stIcon = {pending:'dot', in_progress:'sparkle', done:'check'};
  const stColor = {pending:'#9A9A9A', in_progress:'#FF9800', done:'#2DD164'};
  const stLbl = {pending:'Čaka', in_progress:'V teku', done:'Končano'};
  const taskLbl = {departure:'Po odhodu', arrival:'Pred prihodom', stayover:'Bivanje', maintenance:'Vzdrževanje', inspection:'Pregled'};
  const priColor = {urgent:'#E53935', high:'#FF9800', med:'#2196F3', low:'#9A9A9A'};

  const my = HK_TASKS.filter(t=>t.assigned==='Anita K.');
  const done = my.filter(t=>t.status==='done').length;

  return <div style={{flex:1, overflowY:'auto', paddingBottom:16}}>
    <div style={{padding:'18px 20px 14px'}}>
      <div style={{display:'flex', gap:12, marginBottom:14}}>
        <div style={{flex:1, padding:'14px', background:dark?'#1A1A1A':'#fff', borderRadius:14, borderLeft:'3px solid #9C27B0'}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase'}}>Danes</div>
          <div style={{display:'flex', alignItems:'baseline', gap:4, marginTop:6}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:26, fontWeight:700}}>{done}</div>
            <div style={{fontSize:13, color:muted}}>/ {my.length}</div>
          </div>
        </div>
        <div style={{flex:1, padding:'14px', background:dark?'#1A1A1A':'#fff', borderRadius:14, borderLeft:'3px solid #FF9800'}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase'}}>Čaka</div>
          <div style={{fontFamily:'var(--font-display)', fontSize:26, fontWeight:700, marginTop:6}}>{my.filter(t=>t.status==='pending').length}</div>
        </div>
      </div>

      {/* Progress bar */}
      <div style={{height:6, background:dark?'#2B2B2B':'#E5E5E5', borderRadius:999, overflow:'hidden', marginBottom:18}}>
        <div style={{height:'100%', width:`${(done/my.length)*100}%`, background:'linear-gradient(90deg,#9C27B0,#673AB7)', borderRadius:999, transition:'width 300ms'}}/>
      </div>
    </div>

    <div style={{padding:'0 20px'}}>
      {my.map(t=>(
        <button key={t.room} onClick={()=>onPick(t)} style={{
          display:'flex', alignItems:'center', gap:12, width:'100%', padding:'14px',
          background: dark?'#1A1A1A':'#fff', border:'none', borderRadius:14, marginBottom:10,
          textAlign:'left', cursor:'pointer', fontFamily:'inherit',
          opacity: t.status==='done'?0.55:1,
        }}>
          <div style={{width:48, height:48, borderRadius:12, background: dark?'#2B2B2B':'#F5F5F5', color: dark?'#fff':'#1A1A1A',
            display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, flexShrink:0,
            borderLeft: `3px solid ${priColor[t.priority]}`}}>{t.room}</div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:8}}>
              <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{taskLbl[t.task]}</div>
              <div style={{fontSize:11, color:muted, fontFamily:'var(--font-mono)'}}>{t.due}</div>
            </div>
            <div style={{fontSize:12, color:muted, marginTop:2}}>{t.type} · {t.est}{t.notes? ` · ⚑ ${t.notes}`:''}</div>
          </div>
          <div style={{width:28, height:28, borderRadius:'50%', background: t.status==='done'?stColor[t.status]:'transparent', border:`2px solid ${stColor[t.status]}`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            {t.status==='done' && <HIcon name="check" size={14}/>}
            {t.status==='in_progress' && <div style={{width:8, height:8, borderRadius:'50%', background:stColor[t.status]}}/>}
          </div>
        </button>
      ))}
    </div>
  </div>;
}

function HKDetail({ dark, task, onBack }){
  const muted = dark?'#9A9A9A':'#707070';
  const taskLbl = {departure:'Po odhodu', arrival:'Pred prihodom', stayover:'Bivanje', maintenance:'Vzdrževanje', inspection:'Pregled'};
  const checklist = [
    ['Pospraviti posteljo','done'],
    ['Sesati', task.status==='done'?'done':'pending'],
    ['Brisati prah',task.status==='done'?'done':'pending'],
    ['Očistiti kopalnico',task.status==='done'?'done':'pending'],
    ['Zamenjati brisače','pending'],
    ['Dopolniti minibar','pending'],
    ['Preveriti tehniko','pending'],
  ];
  return <div style={{flex:1, overflowY:'auto', paddingBottom:80, position:'relative'}}>
    <div style={{padding:'14px 20px', background:dark?'#1A1A1A':'#fff', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', alignItems:'center', gap:10}}>
      <button onClick={onBack} style={{background:'transparent', border:'none', padding:6, cursor:'pointer', color:dark?'#fff':'#1A1A1A', display:'flex'}}><HIcon name="chevleft" size={20}/></button>
      <div>
        <div style={{fontSize:11, color:muted, fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>Soba</div>
        <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700}}>{task.room} · {taskLbl[task.task]}</div>
      </div>
    </div>

    <div style={{padding:'20px'}}>
      {task.notes && <div style={{padding:'12px 14px', background: dark?'rgba(255,152,0,.15)':'#FFF8E1', borderLeft:'3px solid #FF9800', borderRadius:8, fontSize:13, marginBottom:16, color: dark?'#FFD54F':'#E65100', fontWeight:500}}>⚑ {task.notes}</div>}

      <div style={{padding:'14px', background:dark?'#1A1A1A':'#fff', borderRadius:12, marginBottom:14}}>
        <div style={{display:'flex', justifyContent:'space-between', fontSize:13}}>
          <div><span style={{color:muted}}>Tip · </span><b>{task.type}</b></div>
          <div><span style={{color:muted}}>Predvideno · </span><b>{task.est}</b></div>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', fontSize:13, marginTop:6}}>
          <div><span style={{color:muted}}>Do · </span><b>{task.due}</b></div>
          <div><span style={{color:muted}}>Prioriteta · </span><b style={{color: task.priority==='urgent'?'#E53935':'#FF9800', textTransform:'capitalize'}}>{task.priority}</b></div>
        </div>
      </div>

      <div style={{fontSize:12, fontWeight:700, color:muted, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:10}}>Kontrolni seznam</div>
      <div style={{background:dark?'#1A1A1A':'#fff', borderRadius:12, overflow:'hidden', marginBottom:18}}>
        {checklist.map(([l,s],i)=>(
          <div key={l} style={{display:'flex', alignItems:'center', gap:12, padding:'14px 16px', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none'}}>
            <div style={{width:24, height:24, borderRadius:'50%', background: s==='done'?'#2DD164':'transparent', border:`2px solid ${s==='done'?'#2DD164':'#9A9A9A'}`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
              {s==='done' && <HIcon name="check" size={12}/>}
            </div>
            <div style={{flex:1, fontSize:14, textDecoration: s==='done'?'line-through':'none', color: s==='done'?muted:(dark?'#fff':'#1A1A1A')}}>{l}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex', gap:10, marginBottom:14}}>
        <button style={{flex:1, padding:'14px', background:dark?'#2B2B2B':'#fff', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:12, fontSize:13, fontWeight:600, fontFamily:'inherit', color:dark?'#E5E5E5':'#4D4D4D', display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
          <HIcon name="eye" size={16}/> Foto
        </button>
        <button style={{flex:1, padding:'14px', background:dark?'#2B2B2B':'#fff', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:12, fontSize:13, fontWeight:600, fontFamily:'inherit', color:'#FF9800', display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
          <HIcon name="wrench" size={16}/> Javi napako
        </button>
      </div>
    </div>

    <div style={{position:'absolute', bottom:16, left:16, right:16}}>
      <button style={{width:'100%', padding:'16px', background:'linear-gradient(135deg,#9C27B0,#673AB7)', color:'#fff', border:'none', borderRadius:14, fontSize:15, fontWeight:700, fontFamily:'inherit', cursor:'pointer'}}>Zaključi sobo</button>
    </div>
  </div>;
}

function HKReports({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, overflowY:'auto', padding:'20px'}}>
    <button style={{width:'100%', padding:'16px', background:'linear-gradient(135deg,#FF9800,#F57C00)', color:'#fff', border:'none', borderRadius:14, fontSize:14, fontWeight:700, fontFamily:'inherit', display:'flex', alignItems:'center', justifyContent:'center', gap:8, marginBottom:18}}>
      <HIcon name="plus" size={18}/> Javi novo napako
    </button>
    <div style={{fontSize:12, fontWeight:700, color:muted, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:10}}>Aktivne napake</div>
    {[
      ['418','TV ne dela','urgent','V obdelavi · Tomaž V.','#E53935'],
      ['207','Pipa kaplja','med','Čaka · pred 2 dni','#FF9800'],
      ['305','Šibka WiFi povezava','low','Čaka · pred 3 dni','#9A9A9A'],
    ].map(([r,t,p,d,c])=>
      <div key={t} style={{padding:'14px', background:dark?'#1A1A1A':'#fff', borderRadius:12, marginBottom:10, borderLeft:`3px solid ${c}`}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4}}>
          <div style={{fontSize:14, fontWeight:600}}><span style={{fontFamily:'var(--font-mono)'}}>{r}</span> · {t}</div>
          <HBadge tone={p==='urgent'?'danger':p==='med'?'orange':'neutral'}>{p}</HBadge>
        </div>
        <div style={{fontSize:11, color:muted}}>{d}</div>
      </div>
    )}
  </div>;
}

function HKProfile({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, overflowY:'auto', padding:'20px'}}>
    <div style={{textAlign:'center', padding:'24px 0'}}>
      <div style={{width:80, height:80, borderRadius:'50%', background:'linear-gradient(135deg,#9C27B0,#673AB7)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:28, fontFamily:'var(--font-display)', margin:'0 auto 12px'}}>AK</div>
      <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700}}>Anita Koren</div>
      <div style={{fontSize:13, color:muted, marginTop:2}}>Housekeeping · Hotel Triglav Bled</div>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:18}}>
      {[['142','sob ta mes.'],['98%','ocena'],['07–15','smena']].map(([v,l])=>
        <div key={l} style={{padding:'14px 8px', background:dark?'#1A1A1A':'#fff', borderRadius:12, textAlign:'center'}}>
          <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700}}>{v}</div>
          <div style={{fontSize:10, color:muted, marginTop:4, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>{l}</div>
        </div>
      )}
    </div>
    {['Predaja smene','Moj urnik','Plačilna lista','Dopust','Odjava'].map((l,i)=>
      <button key={l} style={{display:'flex', justifyContent:'space-between', alignItems:'center', width:'100%', padding:'14px 16px', background:dark?'#1A1A1A':'#fff', border:'none', borderRadius:12, marginBottom:8, fontSize:14, fontWeight:500, fontFamily:'inherit', color: i===4?'#E53935':(dark?'#fff':'#1A1A1A'), cursor:'pointer'}}>
        {l} <HIcon name="chevright" size={14} color={muted}/>
      </button>
    )}
  </div>;
}

Object.assign(window, { HKApp });