/* global React, FoodPhoto, TimerRing */
const { useState: useStateH, useEffect: useEffectH } = React;

// ============================================================
// HOME SCREEN
// ============================================================
function HomeScreen({ onNav, lowStock, deviceCount, onlineCount, ordersActive, alertsCount, mrdExpiring = 2 }) {
  const tiles = [
    { id: 'billing', icon: 'receipt_long', en: 'BILLING', hi: 'बिलिंग',
      meta: <span><strong>{ordersActive}</strong> active · <strong>32</strong> today</span>,
      badge: <span className="tile-badge live">LIVE · {ordersActive}</span> },
    { id: 'kitchen', icon: 'soup_kitchen', en: 'KITCHEN', hi: 'किचन',
      meta: <span><strong>14</strong> cooking · <strong>3</strong> ready</span>,
      badge: <span className="tile-badge urgent">3 URGENT</span> },
    { id: 'distribution', icon: 'restaurant', en: 'DISTRIBUTION', hi: 'वितरण',
      meta: <span><strong>FOH</strong> · <strong>MOH</strong> · <strong>BOH</strong></span>,
      badge: <span className="tile-badge live">5 STATIONS</span> },
    { id: 'forecast', icon: 'auto_graph', en: 'FORECAST', hi: 'पूर्वानुमान',
      meta: <span>Next 2hr: <strong>85–100</strong> guests</span>,
      badge: <span className="tile-badge ai">✦ AI</span> },
    { id: 'inventory', icon: 'inventory_2', en: 'STOCK', hi: 'स्टॉक',
      meta: <span><strong>{lowStock}</strong> items low · 2 critical</span>,
      badge: <span className="tile-badge warn">{lowStock} LOW</span> },
    { id: 'devices', icon: 'router', en: 'DEVICES', hi: 'उपकरण',
      meta: <span><strong>{onlineCount}/{deviceCount}</strong> online</span>,
      badge: <span className={"tile-badge " + (onlineCount===deviceCount?"live":"urgent")}>{onlineCount}/{deviceCount}</span> },
    { id: 'mrd', icon: 'sell', en: 'MRD', hi: 'एमआरडी',
      meta: <span>Make · Ready · <strong>Discard</strong></span>,
      badge: mrdExpiring > 0
        ? <span className="tile-badge mrd-amber">{mrdExpiring} EXPIRING</span>
        : <span className="tile-badge live">MRD</span>,
      isMrd: true },
  ];

  return (
    <div className="view view-enter">
      <div className="home">
        <div className="home-hero">
          <div className="greet">
            <div className="eye">SHIFT MANAGER · 18:42 IST · TUE</div>
            <h1>GOOD EVENING<span className="hi hindi-text">शुभ संध्या</span></h1>
          </div>
          <div className="stats">
            <div className="stat">
              <div className="v">₹84,210</div>
              <div className="l">REVENUE TODAY</div>
            </div>
            <div className="stat green">
              <div className="v">186</div>
              <div className="l">ORDERS · 18 H</div>
            </div>
            <div className="stat gold">
              <div className="v">96.4%</div>
              <div className="l">ON-TIME RATE</div>
            </div>
          </div>
        </div>

        <div className="tile-grid">
          {tiles.map(t => (
            <div key={t.id} className={"tile press" + (t.isMrd ? ' mrd-tile' : '')} onClick={() => onNav(t.id)}>
              <div className="top">
                <div className="icon-block">
                  <span className="material-symbols-rounded">{t.icon}</span>
                </div>
                <div className="badge-area">{t.badge}</div>
                <div className="meta">{t.meta}</div>
              </div>
              <div className="bottom">
                <div className="label">
                  <div className="en">{t.en}</div>
                  <div className="hi hindi-text">{t.hi}</div>
                </div>
                <div className="arrow">
                  <span className="material-symbols-rounded">arrow_forward</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="home-foot">
          <div className="card dark">
            <div className="ic"><span className="material-symbols-rounded">campaign</span></div>
            <div className="txt">
              <strong>MANAGER BROADCAST <span className="hindi-text">· प्रबंधक</span></strong>
              <small>Dinner rush starts 19:00. Pre-stage Hot &amp; Crispy now. — Anil (RGM)</small>
            </div>
          </div>
          <div className="card">
            <div className="ic" style={{background:'var(--kfc-gold)', color:'var(--kfc-black)'}}>
              <span className="material-symbols-rounded">thermostat</span>
            </div>
            <div className="txt">
              <strong>TEMP LOG DUE</strong>
              <small>Holding cabinet · 14 min</small>
            </div>
          </div>
          <div className="card">
            <div className="ic" style={{background:'var(--state-ready)'}}>
              <span className="material-symbols-rounded">cleaning_services</span>
            </div>
            <div className="txt">
              <strong>SHIFT CHECK</strong>
              <small>8 of 12 tasks done</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// BILLING SCREEN
// ============================================================
function BillingScreen({ onBack }) {
  const [channel, setChannel] = useStateH('dinein');
  const [orders, setOrders] = useStateH(() => INITIAL_ORDERS);

  // tick elapsed time
  useEffectH(() => {
    const id = setInterval(() => {
      setOrders(o => o.map(x => ({...x, elapsed: x.elapsed + 1})));
    }, 1000);
    return () => clearInterval(id);
  }, []);

  const filtered = orders.filter(o => channel === 'all' ? true : channel === 'dinein' ? o.src === 'dinein' : o.src !== 'dinein');

  const markReady = (id) => setOrders(o => o.filter(x => x.id !== id));

  const counts = {
    all: orders.length,
    dinein: orders.filter(o => o.src === 'dinein').length,
    aggregator: orders.filter(o => o.src !== 'dinein').length
  };

  return (
    <div className="view view-enter">
      <SubHead onBack={onBack} en="BILLING" hi="बिलिंग / ऑर्डर"
        stats={[
          {v: orders.length, l:'IN QUEUE'},
          {v: orders.filter(o=>o.elapsed/60>10).length, l:'OVERDUE', urgent: true},
          {v: '4:12', l:'AVG. PREP'},
        ]}/>
      <div className="billing">
        <aside className="billing-channels">
          <div className={"channel-card dinein press" + (channel==='dinein'?' active':'')} onClick={()=>setChannel('dinein')}>
            <div className="head">
              <div className="ic"><span className="material-symbols-rounded">restaurant</span></div>
              <div>
                <h3>DINE IN / TAKEAWAY</h3>
                <div className="hi hindi-text">डाइनिंग / टेकअवे</div>
              </div>
            </div>
            <div className="row">
              <div className="agg-tile" style={{background:'rgba(255,255,255,0.15)'}}>
                <div className="num">{counts.dinein}</div>
                <div className="lbl">ACTIVE</div>
              </div>
              <div className="agg-tile" style={{background:'rgba(255,255,255,0.15)'}}>
                <div className="num">22</div>
                <div className="lbl">SEATED</div>
              </div>
            </div>
          </div>

          <div className={"channel-card aggregator press" + (channel==='aggregator'?' active':'')} onClick={()=>setChannel('aggregator')}>
            <div className="head">
              <div className="ic"><span className="material-symbols-rounded">delivery_dining</span></div>
              <div>
                <h3>AGGREGATORS</h3>
                <div className="hi hindi-text">डिलीवरी पार्टनर</div>
              </div>
            </div>
            <div className="row">
              <div className="agg-tile swiggy">
                <div className="num">7</div>
                <div className="lbl">SWIGGY</div>
              </div>
              <div className="agg-tile zomato">
                <div className="num">5</div>
                <div className="lbl">ZOMATO</div>
              </div>
              <div className="agg-tile generic">
                <div className="num">2</div>
                <div className="lbl">DIRECT</div>
              </div>
            </div>
          </div>

          <div className="channel-stat">
            <div className="item">
              <div className="v">₹84.2K</div>
              <div className="l">TODAY</div>
            </div>
            <div className="item">
              <div className="v">186</div>
              <div className="l">ORDERS</div>
            </div>
            <div className="item">
              <div className="v">₹452</div>
              <div className="l">AVG.</div>
            </div>
          </div>
        </aside>

        <section className="billing-queue">
          <div className="queue-head">
            <div className="title">ACTIVE QUEUE <span className="hindi-text">/ सक्रिय कतार</span></div>
            <div className="filter-chips">
              <button className={"chip" + (channel==='all'?' active':'')} onClick={()=>setChannel('all')}>
                ALL <span className="count">{counts.all}</span>
              </button>
              <button className={"chip" + (channel==='dinein'?' active':'')} onClick={()=>setChannel('dinein')}>
                DINE IN <span className="count">{counts.dinein}</span>
              </button>
              <button className={"chip" + (channel==='aggregator'?' active':'')} onClick={()=>setChannel('aggregator')}>
                AGG <span className="count">{counts.aggregator}</span>
              </button>
            </div>
          </div>
          <div className="queue-list">
            {filtered.map(o => {
              const min = o.elapsed/60;
              const cls = min < 5 ? '' : min < 10 ? 'warn' : 'urgent';
              const mm = Math.floor(min);
              const ss = Math.floor(o.elapsed % 60);
              return (
                <div key={o.id} className={"order-card " + cls}>
                  <div>
                    <div className="o-head">
                      <div className="num">#{o.id}</div>
                      <div className={"src " + o.src}>{o.src.toUpperCase()}</div>
                    </div>
                    <ul>
                      {o.items.map((it, i) => <li key={i}><strong>×{it.q}</strong>{it.n}</li>)}
                    </ul>
                  </div>
                  <div className="timer">
                    <div className="clock">{mm}:{String(ss).padStart(2,'0')}</div>
                    <div className="pill off" style={{fontSize:11}}>{o.station}</div>
                  </div>
                  <div className="actions">
                    <button className="btn-ready" onClick={() => markReady(o.id)}>
                      <span className="material-symbols-rounded">done_all</span>
                      MARK READY
                    </button>
                    <button className="btn-print">
                      <span className="material-symbols-rounded">print</span>
                      PRINT
                    </button>
                  </div>
                </div>
              );
            })}
            {filtered.length === 0 && (
              <div style={{gridColumn:'1/-1', textAlign:'center', padding:60, color:'#888'}}>
                <span className="material-symbols-rounded" style={{fontSize:60, color:'var(--state-ready)'}}>check_circle</span>
                <div style={{fontFamily:'var(--display)', fontSize:32, marginTop:8, color:'var(--kfc-black)'}}>QUEUE CLEAR</div>
                <div className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)'}}>कतार खाली</div>
              </div>
            )}
          </div>
        </section>
      </div>
    </div>
  );
}

const INITIAL_ORDERS = [
  { id: 1042, src: 'dinein', station: 'TABLE 4', elapsed: 92,
    items: [{q:1,n:'Hot & Crispy 8pc Bucket'},{q:2,n:'Pepsi 500ml'},{q:1,n:'Coleslaw'}] },
  { id: 1043, src: 'swiggy', station: 'PICKUP A', elapsed: 384,
    items: [{q:2,n:'Zinger Burger'},{q:1,n:'Popcorn Chicken Lg'},{q:2,n:'Mirinda'}] },
  { id: 1044, src: 'zomato', station: 'PICKUP B', elapsed: 642,
    items: [{q:1,n:'Chicken Tenders 5pc'},{q:1,n:'Boneless Bucket 6pc'}] },
  { id: 1045, src: 'dinein', station: 'TABLE 11', elapsed: 156,
    items: [{q:1,n:'Veg Zinger Combo'},{q:1,n:'Krushers Choco'}] },
  { id: 1046, src: 'swiggy', station: 'PICKUP A', elapsed: 720,
    items: [{q:1,n:'Family Feast'},{q:4,n:'Pepsi 250ml'}] },
  { id: 1047, src: 'dinein', station: 'TABLE 6', elapsed: 48,
    items: [{q:1,n:'Hot Wings 6pc'},{q:1,n:'Rice Bowl Spicy'}] },
];

Object.assign(window, { HomeScreen, BillingScreen });