/* global React, FoodPhoto, SubHead */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

// ============================================================
// MRD MODULE — Make Ready Discard
// ============================================================
const MRD_CATEGORIES = [
  { id:'chicken', en:'CHICKEN PRODUCTS', hi:'चिकन प्रोडक्ट्स', icon:'egg_alt' },
  { id:'veg', en:'VEG PRODUCTS', hi:'वेज प्रोडक्ट्स', icon:'eco' },
  { id:'breads', en:'BREADS', hi:'ब्रेड', icon:'bakery_dining' },
  { id:'sauces', en:'SAUCES & CONDIMENTS', hi:'सॉस', icon:'liquor' },
  { id:'beverages', en:'BEVERAGES', hi:'पेय पदार्थ', icon:'local_bar' },
  { id:'other', en:'OTHER', hi:'अन्य', icon:'inventory_2' },
];

const PRODUCTS = {
  chicken: [
    { id:'hc',  name:'Hot & Crispy', hi:'हॉट एंड क्रिस्पी', batch:18, unit:'pcs', code:'KFC-HC-001', cookMin:12, shelfMin:90 },
    { id:'zs',  name:'Zinger Strips', hi:'ज़िंगर स्ट्रिप्स', batch:12, unit:'pcs', code:'KFC-ZS-002', cookMin:8, shelfMin:60 },
    { id:'pc',  name:'Popcorn Chicken', hi:'पॉपकॉर्न चिकन', batch:500, unit:'g', code:'KFC-PC-003', cookMin:6, shelfMin:60 },
    { id:'cl',  name:'Chicken Leg Piece', hi:'चिकन लेग पीस', batch:8, unit:'pcs', code:'KFC-CL-004', cookMin:14, shelfMin:90 },
    { id:'cb',  name:'Chicken Breast', hi:'चिकन ब्रेस्ट', batch:6, unit:'pcs', code:'KFC-CB-005', cookMin:13, shelfMin:90 },
    { id:'cust',name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-000', cookMin:10, shelfMin:60, isCustom:true },
  ],
  veg: [
    { id:'vz', name:'Veg Zinger Patty', hi:'वेज ज़िंगर पैटी', batch:12, unit:'pcs', code:'KFC-VZ-101', cookMin:8, shelfMin:60 },
    { id:'pf', name:'Paneer Fillet', hi:'पनीर फिलेट', batch:10, unit:'pcs', code:'KFC-PF-102', cookMin:7, shelfMin:60 },
    { id:'vp', name:'Veg Popcorn', hi:'वेज पॉपकॉर्न', batch:400, unit:'g', code:'KFC-VP-103', cookMin:5, shelfMin:60 },
    { id:'cust', name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-100', cookMin:8, shelfMin:60, isCustom:true },
  ],
  breads: [
    { id:'bb', name:'Burger Bun', hi:'बर्गर बन', batch:24, unit:'pcs', code:'KFC-BB-201', cookMin:2, shelfMin:240 },
    { id:'wr', name:'Wrap Tortilla', hi:'रैप टॉर्टिला', batch:30, unit:'pcs', code:'KFC-WR-202', cookMin:1, shelfMin:240 },
    { id:'cust', name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-200', cookMin:2, shelfMin:240, isCustom:true },
  ],
  sauces: [
    { id:'mayo', name:'Mayo Pack', hi:'मेयो', batch:50, unit:'pcs', code:'KFC-MY-301', cookMin:0, shelfMin:480 },
    { id:'hot', name:'Hot Sauce', hi:'हॉट सॉस', batch:50, unit:'pcs', code:'KFC-HS-302', cookMin:0, shelfMin:480 },
    { id:'cust', name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-300', cookMin:0, shelfMin:480, isCustom:true },
  ],
  beverages: [
    { id:'pep', name:'Pepsi 500ml', hi:'पेप्सी 500', batch:24, unit:'pcs', code:'KFC-PB-401', cookMin:0, shelfMin:1440 },
    { id:'krm', name:'Krushers Mix', hi:'क्रशर्स', batch:5, unit:'L', code:'KFC-KM-402', cookMin:0, shelfMin:240 },
    { id:'cust', name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-400', cookMin:0, shelfMin:480, isCustom:true },
  ],
  other: [
    { id:'fry', name:'Fries Cut', hi:'फ्राइज़', batch:1000, unit:'g', code:'KFC-FR-501', cookMin:4, shelfMin:30 },
    { id:'cs',  name:'Coleslaw Mix', hi:'कोलस्लॉ', batch:500, unit:'g', code:'KFC-CS-502', cookMin:0, shelfMin:240 },
    { id:'cust', name:'Custom', hi:'कस्टम', batch:0, unit:'pcs', code:'KFC-CST-500', cookMin:5, shelfMin:60, isCustom:true },
  ],
};

function MrdBanner({ remaining, total }) {
  if (remaining == null) return null;
  const pct = remaining / total;
  const cls = pct > 0.33 ? '' : pct > 0.17 ? 'warn' : 'danger';
  const mm = String(Math.floor(remaining/60)).padStart(2,'0');
  const ss = String(Math.floor(remaining%60)).padStart(2,'0');
  return (
    <div className={"mrd-banner " + cls}>
      <div className="ic"><span className="material-symbols-rounded">timer</span></div>
      <div className="lbl">PRINT WINDOW · MARINATED BATCH<small className="hindi-text">प्रिंट विंडो · मैरिनेटेड</small></div>
      <div className="clock">{mm}:{ss}</div>
    </div>
  );
}

function MrdScreen({ onBack }) {
  const [step, setStep] = useStateM('cat');     // cat | type | machine | products | confirm | sticker
  const [category, setCategory] = useStateM(null);
  const [isMarinated, setIsMarinated] = useStateM(false);
  const [machineState, setMachineState] = useStateM('spinning'); // spinning | ready | expired
  const [windowRemain, setWindowRemain] = useStateM(null);

  const [product, setProduct] = useStateM(null);
  const [batch, setBatch] = useStateM(null);
  const [showKeypad, setShowKeypad] = useStateM(false);
  const [customUnit, setCustomUnit] = useStateM('pcs');
  const [customVal, setCustomVal] = useStateM('');

  const [yesText, setYesText] = useStateM('');
  const [yesBad, setYesBad] = useStateM(false);
  const [printing, setPrinting] = useStateM(false);
  const [printed, setPrinted] = useStateM(false);

  // window timer for marinated path
  useEffectM(() => {
    if (machineState !== 'ready' || windowRemain == null) return;
    if (windowRemain <= 0) { setMachineState('expired'); return; }
    const id = setTimeout(() => setWindowRemain(r => Math.max(0, r-1)), 1000);
    return () => clearTimeout(id);
  }, [windowRemain, machineState]);

  const reset = () => {
    setStep('cat'); setCategory(null); setIsMarinated(false);
    setMachineState('spinning'); setWindowRemain(null);
    setProduct(null); setBatch(null); setShowKeypad(false);
    setCustomVal(''); setYesText(''); setYesBad(false);
    setPrinting(false); setPrinted(false);
  };

  const goBack = () => {
    if (step === 'cat') { onBack(); return; }
    if (step === 'type') { setCategory(null); setStep('cat'); return; }
    if (step === 'machine') { setStep('type'); setMachineState('spinning'); setWindowRemain(null); return; }
    if (step === 'products') {
      setProduct(null); setBatch(null);
      if (isMarinated) setStep('machine'); else setStep('type');
      return;
    }
    if (step === 'confirm') { setYesText(''); setYesBad(false); setStep('products'); return; }
    if (step === 'sticker') { reset(); return; }
  };

  const banner = (isMarinated && (machineState === 'ready' || step === 'sticker' || step === 'confirm') && windowRemain != null)
    ? <MrdBanner remaining={windowRemain} total={1800} />
    : null;

  const selectedProduct = product;
  const effectiveBatch = batch === 'custom' && customVal ? { v: parseInt(customVal,10), unit: customUnit } : batch;

  const stats = (() => {
    if (step === 'cat') return [{v:'7', l:'CATEGORIES'}];
    if (step === 'type' || step === 'machine') return [{v: category?.en.split(' ')[0] || '', l:'CATEGORY'}];
    if (step === 'products') return [{v: selectedProduct?.name?.toUpperCase().split(' ')[0] || '—', l:'PRODUCT'}];
    if (step === 'confirm') return [{v:'2FA', l:'GATE', urgent:true}];
    if (step === 'sticker') return [{v:'PRINT', l:'STAGE'}];
    return [];
  })();

  const titleByStep = {
    cat:      { en:'MRD · CATEGORY', hi:'श्रेणी चुनें' },
    type:     { en:'MRD · PRODUCE TYPE', hi:'प्रकार चुनें' },
    machine:  { en:'MRD · MARINATOR', hi:'मैरिनेटर स्थिति' },
    products: { en:'MRD · PRODUCT', hi:'प्रोडक्ट चुनें' },
    confirm:  { en:'MRD · CONFIRMATION', hi:'पुष्टि करें' },
    sticker:  { en:'MRD · STICKER', hi:'स्टिकर' },
  };

  return (
    <div className="view view-enter">
      <SubHead onBack={goBack} en={titleByStep[step].en} hi={titleByStep[step].hi} stats={stats} />
      <div className="mrd-page">
        {banner}

        {/* MRD-1: Category */}
        {step === 'cat' && (
          <div className="mrd-cat-grid">
            {MRD_CATEGORIES.map(c => (
              <div key={c.id} className="mrd-cat" onClick={() => {
                setCategory(c);
                if (c.id === 'chicken') setStep('type');
                else { setIsMarinated(false); setStep('products'); }
              }}>
                <div className="ic-big"><span className="material-symbols-rounded">{c.icon}</span></div>
                <div className="en">{c.en}</div>
                <div className="hi">{c.hi}</div>
              </div>
            ))}
          </div>
        )}

        {/* MRD-2A: Produce type */}
        {step === 'type' && (
          <div className="mrd-2a">
            <div className="produce-card fresh" onClick={() => { setIsMarinated(false); setStep('products'); }}>
              <div className="ic"><span className="material-symbols-rounded">restaurant_menu</span></div>
              <div className="info">
                <div className="en">FRESH PRODUCE</div>
                <div className="hi">ताजा माल</div>
                <div className="sub">No marination required<small className="hindi-text">मैरिनेशन की जरूरत नहीं</small></div>
              </div>
              <div className="arrow"><span className="material-symbols-rounded">arrow_forward</span></div>
            </div>
            <div className="produce-card marinated" onClick={() => { setIsMarinated(true); setStep('machine'); setMachineState('spinning'); }}>
              <div className="ic"><span className="material-symbols-rounded">cyclone</span></div>
              <div className="info">
                <div className="en">MARINATED PRODUCE</div>
                <div className="hi">मैरिनेटेड माल</div>
                <div className="sub">Check marination machine<small className="hindi-text">मशीन चेक करें</small></div>
              </div>
              <div className="arrow"><span className="material-symbols-rounded">arrow_forward</span></div>
            </div>
          </div>
        )}

        {/* MRD-2B: Machine status */}
        {step === 'machine' && (
          <div className="mrd-2b">
            {machineState === 'spinning' && (
              <div className="machine-card locked">
                <div className="lock-overlay"><span className="material-symbols-rounded">lock</span> LOCKED</div>
                <div className="pulse-ring">
                  <span className="material-symbols-rounded drum">cyclone</span>
                </div>
                <h2>MACHINE RUNNING</h2>
                <div className="machine-hi">मशीन चल रही है</div>
                <div className="machine-sub">MRD can only be printed after machine stops.<br/><span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)'}}>मशीन रुकने के बाद ही MRD प्रिंट होगा.</span></div>
                <div className="signal-strip"><span className="live-dot"></span> IMU SENSOR · LAST SIGNAL: 2s AGO · MARINATOR #1</div>
                <button className="mrd-cta" style={{background:'var(--kfc-black)', boxShadow:'0 7px 0 #000', marginTop: 8}} onClick={()=>{ setMachineState('ready'); setWindowRemain(1740); }}>
                  <span className="material-symbols-rounded">stop_circle</span>
                  SIMULATE: MACHINE STOPPED
                </button>
              </div>
            )}
            {machineState === 'ready' && (
              <div className="machine-card">
                <div className="check-ring"><span className="material-symbols-rounded">check_circle</span></div>
                <h2 style={{color:'var(--state-ready-deep)'}}>MACHINE STOPPED</h2>
                <div className="machine-hi" style={{color:'var(--state-ready-deep)'}}>मशीन रुक गई</div>
                <BigTimer remaining={windowRemain} total={1800} />
                <div className="machine-sub">Print window closes in time shown.<br/><span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)'}}>प्रिंट विंडो बंद होगी</span></div>
                <button className="mrd-cta" onClick={()=>setStep('products')}>
                  <span className="material-symbols-rounded">arrow_forward</span>
                  SELECT PRODUCT <span className="hi">/ प्रोडक्ट चुनें</span>
                </button>
              </div>
            )}
            {machineState === 'expired' && (
              <div className="expired-screen" style={{borderRadius:20, width:'100%'}}>
                <div className="core">
                  <div className="ic"><span className="material-symbols-rounded">schedule</span></div>
                  <h2>PRINT WINDOW EXPIRED</h2>
                  <div className="hi">प्रिंट विंडो बंद हो गई</div>
                  <p>Please run a new marination cycle.<br/><span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)'}}>नया मैरिनेशन साइकल चलाएं</span></p>
                  <button className="mrd-cta" style={{maxWidth:380, margin:'18px auto 0'}}>
                    <span className="material-symbols-rounded">support_agent</span>
                    REPORT TO MANAGER <span className="hi hindi-text">/ मैनेजर को बताएं</span>
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {/* MRD-3: Product selection */}
        {step === 'products' && (
          <div className="mrd-products">
            <div className="mrd-prod-grid">
              {PRODUCTS[category.id].map(p => (
                <React.Fragment key={p.id + (p.isCustom?'-c':'')}>
                  <div className={"prod-card" + (selectedProduct?.id===p.id ? ' selected' : '')}
                       onClick={()=>{ setProduct(p); setBatch(null); }}>
                    <FoodPhoto className="photo" name={p.name} sub={p.code} />
                    <div className="info">
                      <div className="name">{p.name.toUpperCase()}</div>
                      <div className="name-hi">{p.hi}</div>
                      {!p.isCustom ? (
                        <span className="default-batch">{p.batch} {p.unit} <span className="hindi-text">/ डिफ़ॉल्ट</span></span>
                      ) : (
                        <span className="default-batch" style={{background:'var(--kfc-black)', color:'white', borderColor:'var(--kfc-black)'}}>✏ CUSTOM</span>
                      )}
                    </div>
                  </div>
                  {selectedProduct?.id === p.id && (
                    <div className="batch-row">
                      <div className="label">BATCH SIZE<small className="hindi-text">बैच आकार</small></div>
                      {!p.isCustom && [1,2,3].map(m => (
                        <button key={m} className={"batch-tile" + (batch?.v === p.batch*m ? ' active' : '')}
                          onClick={()=>setBatch({v:p.batch*m, unit:p.unit})}>
                          {p.batch*m} {p.unit}
                          <small>{m===1?'STANDARD':m===2?'DOUBLE':'TRIPLE'}</small>
                        </button>
                      ))}
                      <button className={"batch-tile custom" + (batch === 'custom' ? ' active' : '')}
                        onClick={()=>{ setBatch('custom'); setShowKeypad(true); }}>
                        <span className="material-symbols-rounded">edit</span>
                        CUSTOM
                      </button>
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
            <div className="mrd-foot">
              <button className="mrd-cta" disabled={!selectedProduct || !effectiveBatch || (batch==='custom' && !customVal)}
                onClick={()=>setStep('confirm')}>
                <span className="material-symbols-rounded">verified_user</span>
                NEXT: CONFIRM <span className="hi">/ आगे: पुष्टि</span>
              </button>
            </div>
            {showKeypad && (
              <Keypad
                unit={customUnit} setUnit={setCustomUnit}
                value={customVal} setValue={setCustomVal}
                onClose={()=>setShowKeypad(false)}
                onConfirm={()=>{ setShowKeypad(false); }}
              />
            )}
          </div>
        )}

        {/* MRD-4: 2FA */}
        {step === 'confirm' && (
          <ConfirmScreen
            product={selectedProduct} batch={effectiveBatch} category={category}
            isMarinated={isMarinated}
            yesText={yesText} setYesText={setYesText}
            yesBad={yesBad} setYesBad={setYesBad}
            onPrint={()=>{ setPrinting(true); setStep('sticker'); setTimeout(()=>{ setPrinting(false); setPrinted(true); }, 1200); }}
          />
        )}

        {/* MRD-5: Sticker preview */}
        {step === 'sticker' && (
          <StickerScreen
            product={selectedProduct} batch={effectiveBatch} category={category}
            isMarinated={isMarinated} printing={printing} printed={printed}
            onHome={onBack} onAgain={reset}
          />
        )}
      </div>
    </div>
  );
}

function BigTimer({ remaining, total }) {
  const r = 124;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(1, remaining / total));
  const offset = c * (1 - pct);
  const stroke = pct > 0.33 ? 'var(--kfc-gold)' : pct > 0.17 ? '#FF8B00' : 'var(--kfc-red)';
  const mm = String(Math.floor(remaining/60)).padStart(2,'0');
  const ss = String(Math.floor(remaining%60)).padStart(2,'0');
  return (
    <div className="big-timer">
      <svg viewBox="0 0 280 280">
        <circle className="bg" cx="140" cy="140" r={r} />
        <circle className="fg" cx="140" cy="140" r={r}
          strokeDasharray={c} strokeDashoffset={offset}
          style={{ stroke }} />
      </svg>
      <div className="center">
        <div className="time">{mm}:{ss}</div>
        <div className="time-lbl">PRINT WINDOW<small className="hindi-text">प्रिंट विंडो</small></div>
      </div>
    </div>
  );
}

function Keypad({ unit, setUnit, value, setValue, onClose, onConfirm }) {
  const press = (k) => {
    if (k === 'back') setValue(v => v.slice(0,-1));
    else if (value.length < 4) setValue(v => v + k);
  };
  return (
    <div className="keypad-sheet">
      <div className="kp-head">
        <div className="title">CUSTOM BATCH <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)', fontSize:18}}>/ कस्टम</span></div>
        <div className="unit-toggle">
          <button className={unit==='pcs'?'active':''} onClick={()=>setUnit('pcs')}>PIECES <span className="hindi-text">/ टुकड़े</span></button>
          <button className={unit==='g'?'active':''} onClick={()=>setUnit('g')}>GRAMS <span className="hindi-text">/ ग्राम</span></button>
        </div>
      </div>
      <div className="keypad-input">{value || '0'} <span style={{fontSize:24, color:'#888'}}>{unit}</span></div>
      <div className="keypad-grid">
        {['1','2','3','4','5','6','7','8','9'].map(k => <button key={k} onClick={()=>press(k)}>{k}</button>)}
        <button className="clear" onClick={()=>setValue('')}>CLEAR <span className="hindi-text">/ साफ़</span></button>
        <button onClick={()=>press('0')}>0</button>
        <button className="confirm" onClick={onConfirm}>CONFIRM ✓</button>
      </div>
    </div>
  );
}

function ConfirmScreen({ product, batch, category, isMarinated, yesText, setYesText, yesBad, setYesBad, onPrint }) {
  const inputRef = useRefM(null);
  useEffectM(() => { inputRef.current?.focus(); }, []);

  const now = new Date();
  const fmt = (d) => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
  const ready = new Date(now.getTime() + product.cookMin*60000);
  const discard = new Date(ready.getTime() + product.shelfMin*60000);
  const ok = yesText === 'YES';

  const handleChange = (e) => {
    const v = e.target.value.toUpperCase().slice(0,3);
    setYesText(v);
    if (v.length >= 3) {
      if (v !== 'YES') { setYesBad(true); setTimeout(()=>setYesBad(false), 500); }
      else setYesBad(false);
    } else { setYesBad(false); }
  };

  return (
    <div className="mrd-2fa">
      <div className="review-card">
        <div className="review-row full">
          <div className="lbl">PRODUCT</div>
          <div className="val">🍗 {product.name.toUpperCase()} <small className="hindi-text">{product.hi}</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">BATCH</div>
          <div className="val">{batch.v} {batch.unit} <small className="hindi-text">{batch.unit === 'g' ? 'ग्राम' : 'टुकड़े'}</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">TYPE</div>
          <div className="val">{isMarinated ? 'MARINATED' : 'FRESH'} <small className="hindi-text">{isMarinated?'मैरिनेटेड':'ताजा'}</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">MACHINE</div>
          <div className="val">{isMarinated ? 'MARINATOR #1' : '—'}</div>
        </div>
        <div className="review-row">
          <div className="lbl">PRINTED BY</div>
          <div className="val">RAVI K. <small>STAFF-042</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">MAKE TIME</div>
          <div className="val">{fmt(now)} <small className="hindi-text">आज</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">READY TIME</div>
          <div className="val">{fmt(ready)} <small>+ {product.cookMin} min</small></div>
        </div>
        <div className="review-row">
          <div className="lbl">DISCARD TIME</div>
          <div className="val urgent">⚠️ {fmt(discard)} <small>+ {product.shelfMin} min</small></div>
        </div>
      </div>

      <div className="confirm-input-card">
        <div className="lbl-en">TYPE <span style={{color:'var(--kfc-gold)'}}>YES</span> TO CONFIRM &amp; PRINT</div>
        <div className="lbl-hi">पुष्टि के लिए YES टाइप करें</div>
        <input ref={inputRef} type="text"
          className={"yes-input" + (ok?' ok':'') + (yesBad?' bad':'')}
          placeholder="YES" value={yesText} onChange={handleChange} maxLength={3} />
        <div className="err">
          {yesBad && <><span className="material-symbols-rounded" style={{fontSize:18}}>error</span> Type YES exactly <span className="hindi-text">· बिल्कुल YES टाइप करें</span></>}
        </div>
      </div>

      <button className="mrd-cta" disabled={!ok} onClick={onPrint}
        style={ok ? null : { background:'#777', boxShadow:'0 7px 0 #555' }}>
        <span className="material-symbols-rounded">print</span>
        {ok ? 'PRINT MRD STICKER' : 'TYPE YES TO UNLOCK'}
        <span className="hi">/ {ok?'स्टिकर प्रिंट करें':'YES टाइप करें'}</span>
      </button>
    </div>
  );
}

function StickerScreen({ product, batch, category, isMarinated, printing, printed, onHome, onAgain }) {
  const now = new Date();
  const fmt = (d) => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
  const ready = new Date(now.getTime() + product.cookMin*60000);
  const discard = new Date(ready.getTime() + product.shelfMin*60000);
  const mrdId = `MRD-${now.getFullYear()}${String(now.getMonth()+1).padStart(2,'0')}${String(now.getDate()).padStart(2,'0')}-0042`;

  return (
    <div className="mrd-5">
      <div className="sticker-shadow">
        <div className="sticker">
          <div className="st-head">
            <div className="logo">KFC</div>
            <div className="tag">🏷️ MRD</div>
          </div>
          <div className="st-name">{product.name.toUpperCase()}</div>
          <div className="st-name-hi">{product.hi}</div>
          <div className="st-batch">BATCH: {batch.v} {batch.unit} · {isMarinated?'MARINATED':'FRESH'} · {category.en.split(' ')[0]}</div>
          <div className="st-times">
            <div className="t"><div className="t-lbl">MAKE</div><div className="t-val">{fmt(now)}</div></div>
            <div className="t"><div className="t-lbl">READY</div><div className="t-val">{fmt(ready)}</div></div>
            <div className="t use"><div className="t-lbl">USE BY</div><div className="t-val">{fmt(discard)}</div></div>
          </div>
          <div className="st-qr-row">
            <div className="qr"><div className="qr-meta-extra"></div></div>
            <div className="st-qr-info">
              <div className="scan">SCAN FOR FULL DETAILS</div>
              <div>OPERATOR: STAFF-042 (Ravi K.)</div>
              <div>STORE: KFC-IN-DL-047 · CP-082</div>
              <div>PRODUCT CODE: {product.code}</div>
              <div>{mrdId}</div>
            </div>
          </div>
          <div className="st-foot">
            <span>KFC INDIA · CONNAUGHT PL.</span>
            <span>v4.2 · {now.toISOString().slice(0,10)}</span>
          </div>
        </div>
      </div>

      {printing && (
        <div className="print-status">
          <div className="spinner"></div>
          PRINTING... <span className="hindi-text" style={{fontFamily:'var(--hi)', color:'var(--kfc-red)'}}>प्रिंट हो रहा है...</span>
        </div>
      )}
      {printed && (
        <div className="print-status success">
          <span className="material-symbols-rounded" style={{fontSize:32}}>check_circle</span>
          MRD PRINTED <span className="hindi-text">· MRD प्रिंट हो गया</span>
        </div>
      )}

      {printed && (
        <div className="actions">
          <button className="home" onClick={onHome}>
            <span className="material-symbols-rounded">home</span>
            BACK TO HOME <span className="hindi-text">/ होम</span>
          </button>
          <button className="again" onClick={onAgain}>
            <span className="material-symbols-rounded">add</span>
            PRINT ANOTHER <span className="hindi-text">/ और प्रिंट</span>
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MrdScreen });