/* global React, FoodPhoto, SubHead */
const { useState: useStateD, useEffect: useEffectD } = React;

// ============================================================
// SHIFT MANAGEMENT
// ============================================================
function ShiftScreen({ onBack }) {
  const [now, setNow] = useStateD(new Date());
  useEffectD(()=>{ const id=setInterval(()=>setNow(new Date()),1000); return ()=>clearInterval(id); },[]);
  const hh = String(now.getHours()).padStart(2,'0');
  const mm = String(now.getMinutes()).padStart(2,'0');
  const ss = String(now.getSeconds()).padStart(2,'0');
  const staff = [
    { i:'RK', n:'Ravi Kumar', r:'SHIFT MANAGER', s:'COMMAND' },
    { i:'PS', n:'Priya Sharma', r:'CASHIER', s:'FOH-1' },
    { i:'AM', n:'Amit Mehta', r:'COOK', s:'FRYER 1' },
    { i:'SK', n:'Suresh K.', r:'COOK', s:'GRILL' },
    { i:'NV', n:'Neha Verma', r:'PACKER', s:'MOH' },
    { i:'RG', n:'Rajat G.', r:'CLEANING', s:'FLOOR' },
  ];
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="SHIFT MANAGEMENT" hi="शिफ्ट प्रबंधन"
        stats={[{v:'6/8',l:'CHECKED IN'},{v:'18:42',l:'SHIFT START'}]}/>
      <div className="shift">
        <div className="clock-card">
          <div className="now">{hh}:{mm}<span style={{opacity:0.4}}>:{ss}</span></div>
          <div className="day">TUESDAY · EVENING SHIFT</div>
          <div className="actions">
            <button className="clock-btn in"><span className="material-symbols-rounded" style={{fontSize:36}}>login</span>CLOCK IN<small className="hindi-text">हाजिर</small></button>
            <button className="clock-btn out"><span className="material-symbols-rounded" style={{fontSize:36}}>logout</span>CLOCK OUT<small className="hindi-text">छुट्टी</small></button>
          </div>
        </div>
        <div className="staff-card">
          <h3>STATION ASSIGNMENT <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)', fontSize:18, fontWeight:600, marginLeft:8}}>स्टेशन आवंटन</span></h3>
          {staff.map(s=>(
            <div key={s.i} className="staff-row">
              <div className="av">{s.i}</div>
              <div className="info"><div className="name">{s.n}</div><div className="role">{s.r}</div></div>
              <div className="station">{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// WASTE LOG
// ============================================================
const WASTE_ITEMS = [
  'Hot & Crispy', 'Zinger Burger', 'Chicken Tenders', 'Popcorn Chk', 'Hot Wings',
  'Boneless', 'Veg Zinger', 'Krushers', 'Fries Lg', 'Coleslaw', 'Rice Bowl', 'Bucket 8pc',
];
const WASTE_HI = ['हॉट क्रिस्पी','ज़िंगर','टेंडर्स','पॉपकॉर्न','विंग्स','बोनलेस','वेज ज़िंगर','क्रशर्स','फ्राइज़','कोलस्लॉ','राइस बाउल','बकेट'];
const REASONS = [
  { en:'EXPIRED', hi:'समाप्त', ic:'schedule' },
  { en:'DROPPED', hi:'गिरा', ic:'water_drop' },
  { en:'BURNT', hi:'जला', ic:'local_fire_department' },
  { en:'CUSTOMER RETURN', hi:'वापसी', ic:'undo' },
];

function WasteScreen({ onBack }) {
  const [sel, setSel] = useStateD(0);
  const [qty, setQty] = useStateD(1);
  const [reason, setReason] = useStateD(0);
  const [logged, setLogged] = useStateD(false);

  const log = () => {
    setLogged(true);
    setTimeout(()=>{ setLogged(false); setQty(1); }, 1200);
  };
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="WASTE LOG" hi="अपशिष्ट लॉग"
        stats={[{v:'12',l:'ITEMS TODAY'},{v:'₹420',l:'COST'}]} />
      <div className="waste">
        <div className="waste-grid">
          {WASTE_ITEMS.map((it,i)=>(
            <div key={i} className={"waste-tile" + (sel===i?' selected':'')} onClick={()=>setSel(i)}>
              <FoodPhoto className="photo" name={it} />
              <div className="label">{it}<small className="hindi-text">{WASTE_HI[i]}</small></div>
            </div>
          ))}
        </div>
        <div className="waste-panel">
          <h3>LOG WASTE <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)', fontSize:16, fontWeight:600, marginLeft:6}}>दर्ज करें</span></h3>
          <div className="selected-name">{WASTE_ITEMS[sel]} <span className="hindi-text" style={{color:'var(--kfc-red)', fontFamily:'var(--hi)'}}>· {WASTE_HI[sel]}</span></div>
          <div className="qty-stepper">
            <button onClick={()=>setQty(q=>Math.max(1,q-1))}><span className="material-symbols-rounded">remove</span></button>
            <div className="num">{qty}<small>QUANTITY <span className="hindi-text">· मात्रा</span></small></div>
            <button onClick={()=>setQty(q=>q+1)}><span className="material-symbols-rounded">add</span></button>
          </div>
          <div className="reason-row">
            {REASONS.map((r,i)=>(
              <button key={i} className={"reason" + (reason===i?' active':'')} onClick={()=>setReason(i)}>
                <span className="material-symbols-rounded" style={{fontSize:20}}>{r.ic}</span>
                {r.en}<small className="hindi-text">{r.hi}</small>
              </button>
            ))}
          </div>
          <button className="log-btn" onClick={log} disabled={logged}>
            <span className="material-symbols-rounded">{logged?'check_circle':'edit_note'}</span>
            {logged ? 'LOGGED ✓' : <>'LOG WASTE '<span className="hindi-text">/ दर्ज करें</span></>}
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// TEMPERATURE LOG
// ============================================================
const TEMPS = [
  { en:'FRYER 1 OIL', hi:'फ्रायर 1 तेल', val:182, range:'170 – 190 °C', alert:false },
  { en:'FRYER 2 OIL', hi:'फ्रायर 2 तेल', val:178, range:'170 – 190 °C', alert:false },
  { en:'HOLDING CABINET', hi:'होल्डिंग कैबिनेट', val:54, range:'60 – 65 °C', alert:true },
  { en:'WALK-IN COOLER', hi:'वॉक-इन कूलर', val:3, range:'1 – 4 °C', alert:false },
  { en:'FREEZER', hi:'फ्रीज़र', val:-19, range:'-22 – -18 °C', alert:false },
  { en:'GRILL SURFACE', hi:'ग्रिल सतह', val:218, range:'200 – 230 °C', alert:false },
];
function TempScreen({ onBack }) {
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="TEMPERATURE LOG" hi="तापमान लॉग"
        stats={[{v:'5/6',l:'WITHIN RANGE'},{v:'1',l:'OUT OF RANGE',urgent:true}]}/>
      <div className="temp">
        {TEMPS.map((t,i)=>(
          <div key={i} className={"temp-card" + (t.alert?' alert':'')}>
            <div>
              <div className="name">{t.en}</div>
              <div className="name-hi">{t.hi}</div>
              <div className="range">RANGE: {t.range}</div>
            </div>
            <div className="reading">{t.val}<small>°C</small></div>
            <div className="actions">
              <button>− 1°</button>
              <button>+ 1°</button>
              <button className="log">LOG <span className="hindi-text">/ दर्ज</span></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// KDS WALL DISPLAY
// ============================================================
function KdsScreen({ onBack }) {
  const orders = [
    { id:1042, src:'DINEIN', t:92, items:[{q:1,n:'H&C 8pc'},{q:2,n:'Pepsi 500'}] },
    { id:1043, src:'SWIGGY', t:384, items:[{q:2,n:'Zinger Burger'},{q:1,n:'Popcorn Lg'}] },
    { id:1044, src:'ZOMATO', t:642, items:[{q:1,n:'Tenders 5pc'},{q:1,n:'Boneless 6'}] },
    { id:1045, src:'DINEIN', t:156, items:[{q:1,n:'Veg Zinger'},{q:1,n:'Krushers'}] },
    { id:1046, src:'SWIGGY', t:720, items:[{q:1,n:'Family Feast'},{q:4,n:'Pepsi 250'}] },
    { id:1047, src:'DINEIN', t:48, items:[{q:1,n:'Hot Wings 6'},{q:1,n:'Rice Bowl'}] },
    { id:1048, src:'ZOMATO', t:240, items:[{q:1,n:'Bucket 12pc'},{q:2,n:'Coleslaw'}] },
    { id:1049, src:'DINEIN', t:520, items:[{q:1,n:'Krushers Choco ×3'}] },
  ];
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="KDS WALL DISPLAY" hi="किचन डिस्प्ले"
        stats={[{v:orders.length,l:'IN QUEUE'},{v:'4:12',l:'AVG'}]}/>
      <div className="kds">
        {orders.map(o => {
          const min = o.t/60;
          const cls = min<5?'':min<10?'warn':'urgent';
          const mm = Math.floor(min);
          const ss = Math.floor(o.t%60);
          return (
            <div key={o.id} className={"kds-card "+cls}>
              <div className="head">
                <div className="num">#{o.id}</div>
                <div className="clock">{mm}:{String(ss).padStart(2,'0')}</div>
              </div>
              <ul>{o.items.map((it,i)=><li key={i}><strong>×{it.q}</strong>{it.n}</li>)}</ul>
              <div className="src">{o.src}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { ShiftScreen, WasteScreen, TempScreen, KdsScreen });