/* global React, FoodPhoto, SubHead, Confirm */
const { useState: useStateF, useEffect: useEffectF } = React;

// ============================================================
// FORECAST / AI
// ============================================================
function ForecastScreen({ onBack }) {
  const [done, setDone] = useStateF({});
  const bars = [
    { en:'HOT & CRISPY', hi:'हॉट एंड क्रिस्पी', v:40, max:50 },
    { en:'ZINGER BURGER', hi:'ज़िंगर', v:20, max:50 },
    { en:'TENDERS', hi:'टेंडर्स', v:15, max:50 },
    { en:'POPCORN CHK', hi:'पॉपकॉर्न', v:28, max:50 },
    { en:'HOT WINGS', hi:'हॉट विंग्स', v:22, max:50 },
    { en:'KRUSHERS', hi:'क्रशर्स', v:18, max:50 },
  ];
  const sugg = [
    { id:'s1', en:'DEFROST 2 TRAYS OF TENDERS NOW', hi:'टेंडर्स की 2 ट्रे डीफ्रॉस्ट करें', cta:'CONFIRM PREP' },
    { id:'s2', en:'START EXTRA FRYER BATCH IN 20 MIN', hi:'20 मिनट में अतिरिक्त बैच', cta:'SET REMINDER', alt:true },
    { id:'s3', en:'PRE-MARINATE 4kg ZINGER FILLETS', hi:'4 किलो ज़िंगर मैरीनेट करें', cta:'CONFIRM PREP' },
    { id:'s4', en:'INCREASE HOLDING CABINET BY 2 RACKS', hi:'होल्डिंग कैबिनेट बढ़ाएँ', cta:'SET REMINDER', alt:true },
  ];
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="AI FORECAST" hi="एआई पूर्वानुमान"
        stats={[{v:'2 hr', l:'WINDOW'},{v:'92%', l:'CONFIDENCE'},{v:'18:42', l:'UPDATED'}]}/>
      <div className="forecast">
        <div className="ai-summary">
          <div className="head">
            <div className="ai-mark"><span className="material-symbols-rounded">auto_awesome</span></div>
            <h2>NEXT 2 HOURS<small>✦ AI FORECAST · DEMAND PREDICTION</small></h2>
          </div>
          <div className="ai-line">
            Expect <strong style={{color:'var(--kfc-gold)'}}>85–100 customers</strong>. Prep <strong>40 Hot &amp; Crispy</strong>, <strong>20 Zingers</strong>, <strong>15 Tenders</strong>.
            <span className="hi">अगले 2 घंटों में 85–100 ग्राहक. तैयार रखें: 40 हॉट एंड क्रिस्पी, 20 ज़िंगर, 15 टेंडर्स</span>
          </div>
          <div className="row">
            <div className="stat"><div className="v">85–100</div><div className="l">Guests</div><div className="delta">+18%</div></div>
            <div className="stat"><div className="v">₹38K</div><div className="l">Est. Revenue</div><div className="delta">+12%</div></div>
            <div className="stat"><div className="v">19:30</div><div className="l">Peak Hour</div></div>
            <div className="stat"><div className="v">3</div><div className="l">Staff Needed</div></div>
          </div>
        </div>

        <div className="fc-chart-card">
          <h3>PREDICTED DEMAND <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)', fontSize:18, fontWeight:600, marginLeft:8}}>अनुमानित माँग</span></h3>
          <div className="sub">By product · units required next 2 hr</div>
          <div className="bars">
            {bars.map((b,i)=>(
              <div key={i} className="bar-row">
                <div className="name">{b.en}<small className="hindi-text">{b.hi}</small></div>
                <div className="track"><div className="fill" style={{width: (b.v/b.max*100)+'%'}}>{b.v}</div></div>
                <div className="num">{b.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="fc-suggestions">
          <h3>PRE-PREP SUGGESTIONS</h3>
          <div className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)', fontSize:14, marginTop:-8, marginBottom:12}}>तैयारी सुझाव</div>
          {sugg.map(s => (
            <div key={s.id} className={"suggest " + (done[s.id]?'done':'')}>
              <div className="ic">
                <span className="material-symbols-rounded">{done[s.id]?'check':'tips_and_updates'}</span>
              </div>
              <div className="text">
                <strong>{s.en}</strong>
                <small className="hindi-text">{s.hi}</small>
              </div>
              <button className={s.alt?'alt':''} onClick={()=>setDone(d=>({...d,[s.id]:!d[s.id]}))}>
                {done[s.id]? '✓ DONE' : s.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// DEVICES
// ============================================================
const DEVICES_INIT = [
  { id:'f1', name:'FRYER 1', sub:'STATION B · 12kW', icon:'local_fire_department', status:'online', last:'2 min ago' },
  { id:'f2', name:'FRYER 2', sub:'STATION B · 12kW', icon:'local_fire_department', status:'online', last:'1 min ago' },
  { id:'g1', name:'GRILL', sub:'STATION C · GAS', icon:'outdoor_grill', status:'online', last:'3 min ago' },
  { id:'h1', name:'HOLDING CABINET', sub:'PASS · 60°C HOLD', icon:'kitchen', status:'service', last:'18 min ago' },
  { id:'p1', name:'POS TERMINAL', sub:'COUNTER 1', icon:'point_of_sale', status:'online', last:'just now' },
  { id:'t1', name:'TABLET A', sub:'KITCHEN · iPad', icon:'tablet', status:'online', last:'just now' },
  { id:'t2', name:'TABLET B', sub:'COUNTER · iPad', icon:'tablet', status:'offline', last:'42 min ago' },
  { id:'k1', name:'KDS DISPLAY', sub:'WALL · 32"', icon:'desktop_windows', status:'online', last:'just now' },
  { id:'p2', name:'LABEL PRINTER', sub:'PASS · ZEBRA', icon:'print', status:'online', last:'5 min ago' },
];

function DevicesScreen({ onBack }) {
  const [devs] = useStateF(DEVICES_INIT);
  const [confirm, setConfirm] = useStateF(null);
  const offline = devs.filter(d=>d.status!=='online');
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="DEVICES & EQUIPMENT" hi="उपकरण स्थिति"
        stats={[{v:devs.filter(d=>d.status==='online').length, l:'ONLINE'},{v:offline.length, l:'ATTENTION', urgent:offline.length>0}]}/>
      <div className="devices">
        {offline.length>0 && (
          <div className="dev-alert">
            <div className="ic"><span className="material-symbols-rounded">error</span></div>
            <div>
              <strong>{offline.length} DEVICE{offline.length>1?'S':''} NEED ATTENTION · </strong>
              <span className="hindi-text" style={{fontFamily:'var(--hi)'}}>{offline.length} उपकरण ध्यान चाहिए:</span>
              <span style={{marginLeft:8}}>{offline.map(d=>d.name).join(', ')}</span>
            </div>
          </div>
        )}
        <div className="dev-grid">
          {devs.map(d => {
            const stCls = d.status==='online'?'ready':d.status==='service'?'warn':'urgent';
            const stLabel = d.status==='online'?'ONLINE':d.status==='service'?'NEEDS SERVICE':'OFFLINE';
            return (
              <div key={d.id} className={"dev-card " + (d.status!=='online'?'offline':'')}>
                <div className="head">
                  <div className="ic"><span className="material-symbols-rounded">{d.icon}</span></div>
                  <div>
                    <div className="name">{d.name}<small>{d.sub}</small></div>
                  </div>
                </div>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                  <div className={"pill " + stCls}><span className="dot"></span>{stLabel}</div>
                  <div className="last">⌚ {d.last}</div>
                </div>
                <div className="actions">
                  <button onClick={()=>setConfirm({title:'TURN OFF '+d.name, hi:'बंद करें'})}>
                    <span className="material-symbols-rounded">power_settings_new</span>OFF
                  </button>
                  <button onClick={()=>setConfirm({title:'RESTART '+d.name, hi:'पुनः शुरू'})}>
                    <span className="material-symbols-rounded">restart_alt</span>RESTART
                  </button>
                  <button onClick={()=>setConfirm({title:'REPORT '+d.name, hi:'रिपोर्ट'})}>
                    <span className="material-symbols-rounded">flag</span>REPORT
                  </button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="dev-scan">
          <button className="scan-btn">
            <div className="radar"></div>
            SCAN FOR NEW DEVICES <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-gold)', fontSize:18, fontWeight:600, marginLeft:8}}>नए उपकरण खोजें</span>
          </button>
        </div>
      </div>
      {confirm && (
        <Confirm danger title={confirm.title} hi={confirm.hi}
          body="Action will be logged."
          onYes={()=>setConfirm(null)} onNo={()=>setConfirm(null)} />
      )}
    </div>
  );
}

// ============================================================
// INVENTORY
// ============================================================
const INV_DATA = {
  'CHICKEN / चिकन': [
    { name:'Chicken Pieces 9-Cut', hi:'चिकन कट', stock:62, max:100, unit:'kg' },
    { name:'Boneless Strips', hi:'बोनलेस', stock:14, max:60, unit:'kg' },
    { name:'Wings (Hot)', hi:'विंग्स', stock:38, max:50, unit:'kg' },
    { name:'Popcorn Mix', hi:'पॉपकॉर्न', stock:8, max:40, unit:'kg' },
    { name:'Zinger Fillet', hi:'ज़िंगर फिलेट', stock:42, max:60, unit:'pc' },
  ],
  'SAUCES / सॉस': [
    { name:'Mayo Pack', hi:'मेयो', stock:120, max:200, unit:'pc' },
    { name:'Hot Sauce', hi:'हॉट सॉस', stock:16, max:100, unit:'pc' },
    { name:'Garlic Sauce', hi:'गार्लिक', stock:84, max:150, unit:'pc' },
    { name:'Ketchup', hi:'केचप', stock:240, max:300, unit:'pc' },
  ],
  'PACKAGING / पैकेजिंग': [
    { name:'Bucket (8pc)', hi:'8 पीस बकेट', stock:45, max:100, unit:'pc' },
    { name:'Burger Box', hi:'बर्गर बॉक्स', stock:180, max:250, unit:'pc' },
    { name:'Tray', hi:'ट्रे', stock:28, max:200, unit:'pc' },
    { name:'Bag Large', hi:'बड़ा बैग', stock:140, max:200, unit:'pc' },
  ],
  'BEVERAGES / पेय': [
    { name:'Pepsi 500ml', hi:'पेप्सी 500', stock:48, max:120, unit:'pc' },
    { name:'Mirinda 250ml', hi:'मिरिंडा 250', stock:72, max:120, unit:'pc' },
    { name:'7UP 500ml', hi:'7अप 500', stock:56, max:120, unit:'pc' },
    { name:'Krushers Choco', hi:'क्रशर्स चोको', stock:22, max:50, unit:'pc' },
  ],
};
function levelOf(p) {
  const r = p.stock / p.max;
  return r > 0.5 ? 'green' : r > 0.25 ? 'warn' : 'red';
}

function InventoryScreen({ onBack }) {
  const [requested, setRequested] = useStateF({});
  const allItems = Object.values(INV_DATA).flat();
  const low = allItems.filter(p => levelOf(p) !== 'green').length;
  const critical = allItems.filter(p => levelOf(p) === 'red').length;
  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="REAL-TIME INVENTORY" hi="लाइव स्टॉक"
        stats={[{v:allItems.length, l:'ITEMS'},{v:low, l:'LOW'},{v:critical, l:'CRITICAL', urgent:true}]} />
      <div className="inventory">
        {Object.entries(INV_DATA).map(([cat, items]) => {
          const [en, hi] = cat.split(' / ');
          return (
            <div key={cat} className="inv-cat">
              <div className="inv-cat-head">
                <div className="lbl-en">{en}</div>
                <div className="lbl-hi">{hi}</div>
                <div className="count-pill">{items.length} ITEMS</div>
              </div>
              <div className="inv-grid">
                {items.map(p => {
                  const lvl = levelOf(p);
                  const isReq = requested[p.name];
                  return (
                    <div key={p.name} className="inv-card">
                      <FoodPhoto className="photo" name={p.name} />
                      <div className="info">
                        <div className="name">{p.name}</div>
                        <div className="name-hi">{p.hi}</div>
                        <div className="progress"><div className={"progress-fill " + lvl} style={{width:(p.stock/p.max*100)+'%'}}></div></div>
                        <div className="stock-row">
                          <div className="num">{p.stock}<small>/{p.max} {p.unit}</small></div>
                          <div className={"pill " + (lvl==='green'?'ready':lvl==='warn'?'warn':'urgent')}>
                            <span className="dot"></span>{lvl==='green'?'OK':lvl==='warn'?'LOW':'CRIT'}
                          </div>
                        </div>
                      </div>
                      <button className={"restock-btn" + (isReq?' requested':'')}
                        onClick={()=>setRequested(r=>({...r,[p.name]:!r[p.name]}))}>
                        <span className="material-symbols-rounded">{isReq?'check':'add_shopping_cart'}</span>
                        {isReq ? 'REQUESTED' : <>'RESTOCK '<span className="hindi-text">/ पुनःभरण</span></>}
                      </button>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { ForecastScreen, DevicesScreen, InventoryScreen });