// labelos.jsx — LabelOS workflow animation engine + shared label + 3 variations
const { useState, useEffect, useRef } = React;

/* ============ DATA ============ */
const DATA = {
  company: 'Annapurna Foods Pvt. Ltd.',
  address: 'Plot 22, MIDC Bhosari, Pune 411026',
  fssai: '11522998000147',
  ingredients: [
    ['Whole Wheat Flour', '62%'],
    ['Refined Palm Oil', '18%'],
    ['Cane Sugar', '12%'],
    ['Iodised Salt', '1.2%'],
    ['Raising Agent (INS 500(ii))', '0.8%'],
  ],
  // name, value, unit, decimals
  nutrition: [
    ['Energy', 478, 'kcal', 0],
    ['Protein', 7.4, 'g', 1],
    ['Total Fat', 21.3, 'g', 1],
    ['Carbohydrate', 63.2, 'g', 1],
    ['Total Sugars', 14.1, 'g', 1],
    ['Sodium', 0.41, 'g', 2],
  ],
  netWeight: '200 g',
  dimensions: '150 × 90 × 40 mm',
  allergen: 'Wheat (Gluten)',
  mfg: '05 / 2026',
  lot: 'AF-2240',
  best: 'Best before 11 months from mfg.',
};

/* ============ TIMELINE ============ */
const STEPS = [
  { key: 'company',     label: 'Company details',        title: 'Tell us about your business', win: [0.4, 2.4] },
  { key: 'fssai',       label: 'FSSAI licence no.',       title: 'Enter your FSSAI licence',     win: [2.6, 4.1] },
  { key: 'ingredients', label: 'Ingredient details',      title: 'Add your ingredients',         win: [4.3, 7.6] },
  { key: 'nutrition',   label: 'Nutrition analysis',      title: 'Calculating nutrition…',       win: [7.9, 10.6] },
  { key: 'packing',     label: 'Packaging & dimensions',  title: 'Packaging & net quantity',     win: [10.9, 12.7] },
  { key: 'label',       label: 'Generate FSSAI label',    title: 'Print-ready FSSAI label',      win: [13.0, 16.2] },
];
const LOOP = 18.5;

const clamp = (x, a, b) => Math.max(a, Math.min(b, x));
const prog  = (t, a, b) => clamp((t - a) / (b - a), 0, 1);
const typed = (str, p) => str.slice(0, Math.round(p * str.length));
const nextStart = (i) => (STEPS[i + 1] ? STEPS[i + 1].win[0] : LOOP);
function activeIndex(t) {
  for (let i = 0; i < STEPS.length; i++) { if (t < nextStart(i)) return i; }
  return STEPS.length - 1;
}

function useLoop(duration) {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf, start = performance.now();
    const tick = (now) => {
      if (window.__forceT != null) { setT(window.__forceT); }
      else { setT(((now - start) / 1000) % duration); }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [duration]);
  return t;
}

/* small UI atoms */
function Caret({ on }) { return on ? <span className="caret">|</span> : null; }

/* ============ SHARED: the building label ============ */
function LabelPaper({ t, compact }) {
  const pCo  = prog(t, 0.4, 1.2);
  const pAddr= prog(t, 1.2, 2.3);
  const showFssai = t >= 2.6; const pF = prog(t, 2.6, 4.0);
  const showIngr  = t >= 4.3;
  const pN = prog(t, 8.3, 10.6); const showNut = t >= 8.0;
  const showPack = t >= 10.9;
  const done = t >= 16.0;
  return (
    <div className={'lp' + (done ? ' lp-done' : '') + (compact ? ' lp-compact' : '')}>
      <div className="lp-top">
        <div>
          <div className="lp-brand">{typed(DATA.company, pCo)}<Caret on={pCo > 0 && pCo < 1} /></div>
          <div className="lp-addr">{typed(DATA.address, pAddr)}</div>
        </div>
        <div className="lp-veg" title="Veg mark"><span></span></div>
      </div>

      <div className="lp-grid">
        <div className="lp-col-nut">
          <div className="lp-nh">NUTRITION FACTS <i>per 100 g</i></div>
          <div className="lp-nrule"></div>
          {showNut ? DATA.nutrition.map((r, i) => (
            <div className="lp-nrow" key={i}>
              <span>{r[0]}</span>
              <b>{(r[1] * (pN < 0.05 ? 0 : pN)).toFixed(r[3])} {r[2]}</b>
            </div>
          )) : <div className="lp-calc">{t >= 7.9 ? 'analysing recipe…' : '—'}</div>}
        </div>

        <div className="lp-col-meta">
          <div className="lp-mblock">
            <div className="lp-mh">INGREDIENTS</div>
            <div className="lp-ing">
              {showIngr
                ? DATA.ingredients.filter((_, i) => t >= 4.3 + i * 0.55).map((r, i) => r[0]).join(', ') + '.'
                : '—'}
            </div>
          </div>
          {showIngr && <div className="lp-allerg">CONTAINS: {DATA.allergen.toUpperCase()}</div>}
          <div className="lp-kv"><span>Net Qty</span><b>{showPack ? DATA.netWeight : '—'}</b></div>
          <div className="lp-kv"><span>Dimensions</span><b>{showPack ? DATA.dimensions : '—'}</b></div>
          <div className="lp-kv"><span>FSSAI Lic. No.</span><b className="mono">{showFssai ? typed(DATA.fssai, pF) : '—'}</b></div>
          <div className="lp-kv"><span>Mfg / Lot</span><b>{showPack ? DATA.mfg + ' · ' + DATA.lot : '—'}</b></div>
        </div>
      </div>

      <div className="lp-foot">
        <div className="lp-bars">{Array.from({ length: 26 }).map((_, i) => <i key={i} style={{ opacity: showPack ? 1 : 0.12 }}></i>)}</div>
        <div className="lp-fssaimark">{showFssai ? 'FSSAI' : ''}</div>
      </div>
    </div>
  );
}

/* ============ SHARED: step input panels ============ */
function StepInputs({ stepKey, t, big }) {
  const cls = 'si' + (big ? ' si-big' : '');
  if (stepKey === 'company') {
    const p1 = prog(t, 0.4, 1.2), p2 = prog(t, 1.2, 2.2);
    return (
      <div className={cls}>
        <label>Company name</label>
        <div className="si-input">{typed(DATA.company, p1)}<Caret on={p1 > 0 && p1 < 1} /></div>
        <label>Registered address</label>
        <div className="si-input">{typed(DATA.address, p2)}<Caret on={p2 > 0 && p2 < 1} /></div>
      </div>
    );
  }
  if (stepKey === 'fssai') {
    const p = prog(t, 2.6, 3.9);
    return (
      <div className={cls}>
        <label>FSSAI licence number</label>
        <div className="si-input mono big">{typed(DATA.fssai, p)}<Caret on={p > 0 && p < 1} /></div>
        <div className="si-hint">14-digit licence · validated against FSSAI registry</div>
      </div>
    );
  }
  if (stepKey === 'ingredients') {
    return (
      <div className={cls}>
        <div className="si-tablehead"><span>Ingredient</span><span>%</span></div>
        {DATA.ingredients.map((r, i) => {
          const show = t >= 4.3 + i * 0.55;
          return <div className={'si-trow' + (show ? ' in' : '')} key={i}><span>{r[0]}</span><b className="mono">{r[1]}</b></div>;
        })}
      </div>
    );
  }
  if (stepKey === 'nutrition') {
    const p = prog(t, 8.3, 10.6);
    const calc = t < 8.3;
    return (
      <div className={cls}>
        {calc
          ? <div className="si-calc"><span className="si-spin"></span>Computing energy, macros & micronutrients…</div>
          : <div className="si-nutgrid">
              {DATA.nutrition.map((r, i) => (
                <div className="si-nutcell" key={i}>
                  <div className="si-nv mono">{(r[1] * p).toFixed(r[3])}<u>{r[2]}</u></div>
                  <div className="si-nl">{r[0]}</div>
                </div>
              ))}
            </div>}
      </div>
    );
  }
  if (stepKey === 'packing') {
    const p1 = prog(t, 10.9, 11.7), p2 = prog(t, 11.6, 12.6);
    return (
      <div className={cls}>
        <label>Net quantity</label>
        <div className="si-input">{typed(DATA.netWeight, p1)}<Caret on={p1 > 0 && p1 < 1} /></div>
        <label>Pack dimensions</label>
        <div className="si-input">{typed(DATA.dimensions, p2)}<Caret on={p2 > 0 && p2 < 1} /></div>
      </div>
    );
  }
  // label
  const gp = prog(t, 13.0, 15.8);
  const ready = t >= 15.8;
  return (
    <div className={cls}>
      {ready
        ? <div className="si-ready"><span className="si-check">✓</span>FSSAI-compliant label generated<button className="si-print">⏏ Print label</button></div>
        : <div className="si-gen"><div className="si-genbar"><i style={{ width: (gp * 100) + '%' }}></i></div><div className="si-genlbl">Applying FSSAI Labelling &amp; Display Regulations… {Math.round(gp * 100)}%</div></div>}
    </div>
  );
}

/* ============ VARIATION A — SPLIT (form checklist + live label) ============ */
function VarSplit() {
  const t = useLoop(LOOP);
  const ai = activeIndex(t);
  const pct = ((ai + prog(t, STEPS[ai].win[0], nextStart(ai))) / STEPS.length) * 100;
  const summaries = {
    company: DATA.company, fssai: DATA.fssai, ingredients: '5 ingredients',
    nutrition: '478 kcal / 100 g', packing: '200 g · 150×90×40 mm', label: 'Ready to print',
  };
  return (
    <div className={'vA' + (STEPS[ai].key === 'label' ? ' vA-labelmode' : '')}>
      <div className="vA-form">
        <div className="vA-brand"><span className="dot"></span>Label<i>OS</i><span className="vA-badge mono">new label</span></div>
        <div className="vA-list">
          {STEPS.map((s, i) => {
            const state = i < ai ? 'done' : i === ai ? 'active' : 'todo';
            return (
              <div className={'vA-item ' + state} key={s.key}>
                <div className="vA-irow">
                  <span className="vA-ix mono">{state === 'done' ? '✓' : String(i + 1).padStart(2, '0')}</span>
                  <span className="vA-ilabel">{s.label}</span>
                  {state === 'done' && <span className="vA-isum">{summaries[s.key]}</span>}
                </div>
                {state === 'active' && <div className="vA-ibody">{s.key === 'label'
                  ? <div className="vA-finalwrap"><LabelPaper t={t} compact /></div>
                  : <StepInputs stepKey={s.key} t={t} />}</div>}
              </div>
            );
          })}
        </div>
        <div className="vA-prog"><i style={{ width: pct + '%' }}></i></div>
      </div>
    </div>
  );
}

/* ============ VARIATION B — WIZARD (one focused step at a time) ============ */
function VarWizard() {
  const t = useLoop(LOOP);
  const ai = activeIndex(t);
  const isLabel = STEPS[ai].key === 'label';
  return (
    <div className="vB">
      <div className="vB-head">
        <div className="vB-brand"><span className="dot"></span>Label<i>OS</i></div>
        <div className="vB-stepper">
          {STEPS.map((s, i) => (
            <div className={'vB-dot ' + (i < ai ? 'done' : i === ai ? 'active' : '')} key={s.key}>
              <span>{i < ai ? '✓' : i + 1}</span>
              <em>{s.label}</em>
            </div>
          ))}
          <div className="vB-track"><i style={{ width: (ai / (STEPS.length - 1)) * 100 + '%' }}></i></div>
        </div>
      </div>
      <div className="vB-stage">
        {isLabel
          ? <div className="vB-final" key="final"><LabelPaper t={t} /></div>
          : <div className="vB-card" key={STEPS[ai].key}>
              <div className="vB-title">{STEPS[ai].title}</div>
              <StepInputs stepKey={STEPS[ai].key} t={t} big />
            </div>}
      </div>
    </div>
  );
}

/* ============ VARIATION C — PIPELINE (diagrammatic flow + assembling label) ============ */
function VarPipeline() {
  const t = useLoop(LOOP);
  const ai = activeIndex(t);
  const icons = ['○', '#', '≡', '∑', '□', '▷'];
  return (
    <div className="vC">
      <div className="vC-pipe">
        {STEPS.map((s, i) => {
          const state = i < ai ? 'done' : i === ai ? 'active' : 'todo';
          return (
            <React.Fragment key={s.key}>
              <div className={'vC-node ' + state}>
                <div className="vC-ic">{state === 'done' ? '✓' : icons[i]}</div>
                <div className="vC-nl">{s.label}</div>
              </div>
              {i < STEPS.length - 1 && <div className={'vC-link ' + (i < ai ? 'on' : '')}><span className="vC-pulse" style={{ opacity: i === ai - 0 ? 0 : 0 }}></span></div>}
            </React.Fragment>
          );
        })}
      </div>
      <div className="vC-body">
        <LabelPaper t={t} compact />
      </div>
    </div>
  );
}

Object.assign(window, { DATA, STEPS, LOOP, useLoop, LabelPaper, StepInputs, VarSplit, VarWizard, VarPipeline });