// POS — Recepcijski POS (split-screen, kategorije + košarica)

function RCPos({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const [cat, setCat] = React.useState('drinks');
  const [cart, setCart] = React.useState([
    {id:'i2', qty:2}, {id:'i7', qty:1}, {id:'i26', qty:2},
  ]);
  const [pay, setPay] = React.useState('room'); // room | card | cash | split

  const addItem = (id) => setCart(c=>{
    const ex = c.find(x=>x.id===id);
    return ex ? c.map(x=>x.id===id?{...x, qty:x.qty+1}:x) : [...c, {id, qty:1}];
  });
  const incItem = (id, d) => setCart(c=>c.map(x=>x.id===id?{...x, qty:Math.max(0,x.qty+d)}:x).filter(x=>x.qty>0));
  const removeItem = (id) => setCart(c=>c.filter(x=>x.id!==id));

  const items = POS_ITEMS.filter(i=>i.cat===cat);
  const cartItems = cart.map(c => ({...POS_ITEMS.find(i=>i.id===c.id), qty:c.qty}));
  const subtotal = cartItems.reduce((s,i)=>s + i.price*i.qty, 0);
  const taxLow = cartItems.filter(i=>i.vat==='9.5%').reduce((s,i)=>s + (i.price*i.qty)*0.095/1.095, 0);
  const taxHigh = cartItems.filter(i=>i.vat==='22%').reduce((s,i)=>s + (i.price*i.qty)*0.22/1.22, 0);
  const total = subtotal;

  return <>
    <HPageHeader dark={dark}
      title="POS · Recepcija"
      subtitle="POS-01 · FURS online · Maja Kranjc · 2026-04202"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Odprti računi (3)</HBtn>
        <HBtn variant="ghost" dark={dark} icon="x">Prekliči</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:14, alignItems:'start'}}>
      {/* LEFT — items grid */}
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        {/* Categories */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(8,1fr)', gap:0, padding:'14px 14px 0', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
          {POS_CATS.map(c=>{
            const a = cat===c.id;
            return <button key={c.id} onClick={()=>setCat(c.id)} style={{
              padding:'14px 8px 12px', background:'transparent', border:'none',
              borderBottom: a?`3px solid ${c.color}`:'3px solid transparent',
              fontFamily:'inherit', cursor:'pointer',
              display:'flex', flexDirection:'column', alignItems:'center', gap:6,
              color: a?(dark?'#fff':'#1A1A1A'):muted, fontSize:11, fontWeight: a?700:500,
            }}>
              <div style={{width:32, height:32, borderRadius:8, background: a?c.color:(dark?'#2B2B2B':'#F5F5F5'), color:a?'#fff':muted, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <HIcon name={c.icon} size={14}/>
              </div>
              {c.name}
            </button>;
          })}
        </div>

        {/* Items grid */}
        <div style={{padding:'14px', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
          {items.map(i=>{
            const inCart = cart.find(c=>c.id===i.id);
            return <button key={i.id} onClick={()=>addItem(i.id)} style={{
              padding:'14px', background:dark?'#2B2B2B':'#fff', border:`1px solid ${inCart?(POS_CATS.find(c=>c.id===cat).color):(dark?'#333':'#E5E5E5')}`,
              borderRadius:10, fontFamily:'inherit', cursor:'pointer', textAlign:'left',
              position:'relative', overflow:'hidden',
              boxShadow: inCart? `0 0 0 1px ${POS_CATS.find(c=>c.id===cat).color}`:'none',
            }}>
              {inCart && <div style={{position:'absolute', top:6, right:6, minWidth:22, height:22, padding:'0 6px', background:POS_CATS.find(c=>c.id===cat).color, color:'#fff', borderRadius:11, fontSize:11, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>{inCart.qty}</div>}
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A', marginBottom:6, paddingRight:24, lineHeight:1.3, minHeight:34}}>{i.name}</div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700, color:POS_CATS.find(c=>c.id===cat).color}}>€{i.price.toFixed(2)}</div>
                <div style={{fontSize:10, color:muted, fontFamily:'var(--font-mono)'}}>DDV {i.vat}</div>
              </div>
            </button>;
          })}
        </div>
      </HCard>

      {/* RIGHT — cart panel (dark like a POS terminal) */}
      <div style={{background:'#1A1A1A', borderRadius:14, color:'#fff', padding:0, overflow:'hidden', position:'sticky', top:18}}>
        <div style={{padding:'14px 18px', borderBottom:'1px solid #2B2B2B', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:11, fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase', color:'#9A9A9A'}}>Račun {pay==='room'?`· soba 305`:''}</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, marginTop:2}}>James Schmidt · VIP</div>
          </div>
          <button style={{background:'transparent', border:'none', color:'#9A9A9A', cursor:'pointer', display:'flex'}}><HIcon name="users" size={16}/></button>
        </div>

        {/* Cart items */}
        <div style={{maxHeight:340, overflowY:'auto'}}>
          {cartItems.length===0 && <div style={{padding:'40px', textAlign:'center', color:'#707070', fontSize:13}}>Ni izdelkov v košarici</div>}
          {cartItems.map(i=>
            <div key={i.id} style={{padding:'12px 18px', borderBottom:'1px solid #2B2B2B', display:'flex', alignItems:'center', gap:10}}>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13, fontWeight:500}}>{i.name}</div>
                <div style={{fontSize:11, color:'#9A9A9A', marginTop:2}}>€{i.price.toFixed(2)} · DDV {i.vat}</div>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:6}}>
                <button onClick={()=>incItem(i.id,-1)} style={{width:26, height:26, borderRadius:6, background:'#2B2B2B', color:'#fff', border:'none', cursor:'pointer'}}>−</button>
                <div style={{minWidth:24, textAlign:'center', fontFamily:'var(--font-mono)', fontWeight:700}}>{i.qty}</div>
                <button onClick={()=>incItem(i.id,+1)} style={{width:26, height:26, borderRadius:6, background:'#2B2B2B', color:'#fff', border:'none', cursor:'pointer'}}>+</button>
              </div>
              <div style={{minWidth:60, textAlign:'right', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13}}>€{(i.price*i.qty).toFixed(2)}</div>
              <button onClick={()=>removeItem(i.id)} style={{background:'transparent', border:'none', color:'#707070', cursor:'pointer', display:'flex'}}><HIcon name="x" size={14}/></button>
            </div>
          )}
        </div>

        {/* Totals */}
        <div style={{padding:'14px 18px', background:'#0F1419', borderTop:'1px solid #2B2B2B'}}>
          {[
            ['Vmesna vsota', `€ ${(subtotal-taxLow-taxHigh).toFixed(2)}`],
            ['DDV 9,5 %',    `€ ${taxLow.toFixed(2)}`],
            ['DDV 22 %',     `€ ${taxHigh.toFixed(2)}`],
          ].map(([l,v])=>
            <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'4px 0', fontSize:12, color:'#9A9A9A'}}>
              <span>{l}</span><span style={{fontFamily:'var(--font-mono)'}}>{v}</span>
            </div>
          )}
          <div style={{display:'flex', justifyContent:'space-between', padding:'10px 0 0', borderTop:'1px solid #2B2B2B', marginTop:6}}>
            <span style={{fontSize:14, fontWeight:600}}>Skupaj</span>
            <span style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:800, color:'#4DD0E1'}}>€ {total.toFixed(2)}</span>
          </div>
        </div>

        {/* Payment methods */}
        <div style={{padding:'14px 18px', borderTop:'1px solid #2B2B2B'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6, marginBottom:12}}>
            {[['room','Soba 305','door'],['card','Kartica','box'],['cash','Gotovina','box'],['split','Razdelitev','users']].map(([k,l,ic])=>{
              const a = pay===k;
              return <button key={k} onClick={()=>setPay(k)} style={{padding:'10px 4px', background:a?'#2196F3':'#2B2B2B', color:'#fff', border:'none', borderRadius:8, fontFamily:'inherit', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:4, fontSize:11, fontWeight:600}}>
                <HIcon name={ic} size={16}/>{l}
              </button>;
            })}
          </div>
          <button style={{width:'100%', padding:'14px', background:'#2DD164', color:'#fff', border:'none', borderRadius:10, fontFamily:'inherit', fontSize:15, fontWeight:700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
            <HIcon name="check" size={16}/> Zaključi račun · €{total.toFixed(2)}
          </button>
          <div style={{marginTop:8, padding:'8px 10px', background:'rgba(45,209,100,.15)', borderRadius:6, fontSize:11, color:'#2DD164', fontWeight:600, display:'flex', alignItems:'center', gap:6, justifyContent:'center'}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#2DD164'}}/> FURS · EOR pripravljen, ZOI poslan
          </div>
        </div>
      </div>
    </div>
  </>;
}

Object.assign(window, { RCPos });