Space-Game/archive/legacy-static/js/demos/refining.js

window.GDD = window.GDD || {};

const { useState, useEffect, useCallback, useRef } = React;

function RefiningDemo() {
  const [inventory, setInventory] = useState([]);
  const [orePrices, setOrePrices] = useState({});
  const [selectedOre, setSelectedOre] = useState(null);
  const [refineQty, setRefineQty] = useState(0);
  const [skillLevel, setSkillLevel] = useState(2);
  const [refining, setRefining] = useState(false);
  const [results, setResults] = useState([]);
  const [manufacturingTab, setManufacturingTab] = useState(false);
  const [manufacturingJobs, setManufacturingJobs] = useState([]);
  const [notifications, setNotifications] = useState([]);
  const timerRef = useRef(null);

  const mineralData = {
    Veldspar: { mineral: 'Tritanium', yield: 415, batch: 333, time: 45 },
    Scordite: { mineral: 'Pyerite', yield: 171, batch: 333, time: 45 },
    Pyroxeres: { mineral: 'Nocxium', yield: 8, batch: 333, time: 60 },
    Kernite: { mineral: 'Isogen', yield: 107, batch: 200, time: 60 },
    Omber: { mineral: 'Isogen', yield: 86, batch: 500, time: 75 },
    Jaspet: { mineral: 'Zydrine', yield: 8, batch: 500, time: 75 },
    Hemorphite: { mineral: 'Nocxium', yield: 21, batch: 500, time: 90 },
    Arkonor: { mineral: 'Megacyte', yield: 18, batch: 200, time: 120 },
  };

  const manufacturingRecipes = [
    { id: 1, product: 'Mining Laser I', minerals: { Tritanium: 200, Pyerite: 80 }, time: 300, skill: 1 },
    { id: 2, product: '150mm Railgun', minerals: { Tritanium: 400, Pyerite: 150, Nocxium: 20 }, time: 900, skill: 2 },
    { id: 3, product: 'Shield Booster I', minerals: { Tritanium: 300, Isogen: 50 }, time: 600, skill: 2 },
    { id: 4, product: 'Frigate Hull', minerals: { Tritanium: 2000, Pyerite: 800, Nocxium: 100 }, time: 1800, skill: 3 },
    { id: 5, product: '1MN Afterburner', minerals: { Tritanium: 150, Pyerite: 50, Isogen: 20 }, time: 480, skill: 2 },
  ];

  const [playerMinerals, setPlayerMinerals] = useState({
    Tritanium: 0, Pyerite: 0, Nocxium: 0, Isogen: 0, Zydrine: 0, Megacyte: 0,
  });

  const skillEfficiency = { 0: 0.50, 1: 0.60, 2: 0.70, 3: 0.80, 4: 0.875, 5: 0.95 };

  useEffect(() => {
    window.GDD.api.getPlayerInventory().then(i => {
      setInventory(i);
      if (i.length > 0) { setSelectedOre(i[0].item); setRefineQty(i[0].quantity); }
    });
    window.GDD.api.getOrePrices().then(p => setOrePrices(p));
  }, []);

  const addNotif = useCallback((msg, color) => {
    const id = Date.now();
    setNotifications(prev => [...prev, { id, msg, color }]);
    setTimeout(() => setNotifications(prev => prev.filter(n => n.id !== id)), 3500);
  }, []);

  const handleRefine = useCallback(async () => {
    if (!selectedOre || refineQty <= 0) return;
    const data = mineralData[selectedOre];
    if (!data) return;
    if (refineQty < data.batch) {
      addNotif(`Need at least ${data.batch} units for a batch.`, 'var(--red)');
      return;
    }

    setRefining(true);
    const inv = inventory.find(i => i.item === selectedOre);
    const batches = Math.floor(refineQty / data.batch);
    const used = batches * data.batch;
    const eff = skillEfficiency[skillLevel];
    const mineralYield = Math.floor(batches * data.yield * eff);
    const rawValue = used * (orePrices[selectedOre] || 0);
    const mineralValue = mineralYield * Math.floor((orePrices[selectedOre] || 0) * 2.5);

    // Simulate delay
    await new Promise(r => setTimeout(r, data.time * 10));

    setPlayerMinerals(prev => ({
      ...prev,
      [data.mineral]: prev[data.mineral] + mineralYield,
    }));

    setInventory(prev => prev.map(i =>
      i.item === selectedOre
        ? { ...i, quantity: i.quantity - used }
        : i
    ).filter(i => i.quantity > 0));

    setResults(prev => [{
      ore: selectedOre,
      batches,
      used,
      mineral: data.mineral,
      yield: mineralYield,
      efficiency: eff,
      rawValue,
      mineralValue,
      better: mineralValue > rawValue,
    }, ...prev.slice(0, 9)]);

    setRefining(false);
    addNotif(`Refined ${used.toLocaleString()} ${selectedOre} → ${mineralYield.toLocaleString()} ${data.mineral} (${(eff * 100).toFixed(0)}% eff)`, 'var(--green)');
  }, [selectedOre, refineQty, skillLevel, inventory, orePrices, addNotif]);

  const handleManufacture = useCallback((recipe) => {
    if (skillLevel < recipe.skill) {
      addNotif(`Need Industry level ${recipe.skill} to manufacture ${recipe.product}.`, 'var(--red)');
      return;
    }
    // Check minerals
    for (const [mineral, qty] of Object.entries(recipe.minerals)) {
      if ((playerMinerals[mineral] || 0) < qty) {
        addNotif(`Not enough ${mineral}. Need ${qty}, have ${playerMinerals[mineral] || 0}.`, 'var(--red)');
        return;
      }
    }
    // Deduct minerals
    setPlayerMinerals(prev => {
      const next = { ...prev };
      for (const [mineral, qty] of Object.entries(recipe.minerals)) {
        next[mineral] -= qty;
      }
      return next;
    });

    const job = {
      id: Date.now(),
      product: recipe.product,
      totalTime: recipe.time,
      remaining: recipe.time,
      started: Date.now(),
    };
    setManufacturingJobs(prev => [...prev, job]);
    addNotif(`Manufacturing job started: ${recipe.product}. ETA: ${Math.floor(recipe.time / 60)}m ${recipe.time % 60}s`, 'var(--cyan)');
  }, [skillLevel, playerMinerals, addNotif]);

  // Manufacturing timer
  useEffect(() => {
    const interval = setInterval(() => {
      setManufacturingJobs(prev => {
        const updated = prev.map(j => ({
          ...j,
          remaining: Math.max(0, j.remaining - 1),
        }));
        const completed = updated.filter(j => j.remaining <= 0 && prev.find(p => p.id === j.id && p.remaining > 0));
        completed.forEach(j => {
          addNotif(`Manufacturing complete: ${j.product}`, 'var(--green)');
        });
        return updated.filter(j => j.remaining > 0);
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [addNotif]);

  const formatTime = (s) => `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, '0')}s`;

  return (
    <div className="content-inner">
      <a href="#overview" style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', fontSize: '0.75rem', fontFamily: 'var(--font-mono)', color: 'var(--muted)', textDecoration: 'none', marginBottom: 'var(--sp-3)', transition: 'color 0.15s' }} onMouseEnter={e => e.currentTarget.style.color='var(--fg-bright)'} onMouseLeave={e => e.currentTarget.style.color='var(--muted)'}>← Back to Docs</a>
      <h1 style={{ marginBottom: '8px' }}>Refining & Manufacturing Demo</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem' }}>
        Refine raw ore into minerals, then use minerals to manufacture ships and modules.
        Industry skill level determines refining efficiency — higher skill means more minerals per batch.
      </p>

      {/* HUD-style industry strip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 'var(--sp-4)',
        padding: 'var(--sp-3) var(--sp-4)', marginTop: 'var(--sp-4)', marginBottom: 'var(--sp-3)',
        background: 'rgba(15,22,35,0.88)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(8px)',
        fontFamily: 'var(--font-mono)', fontSize: '0.75rem',
      }}>
        <span style={{ color: 'var(--fg-bright)', fontWeight: 600, fontSize: '0.8rem' }}>INDUSTRY</span>
        <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
        <span style={{ color: 'var(--muted)', fontSize: '0.65rem' }}>SKILL</span>
        <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Lvl {skillLevel}</span>
        <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
        <span style={{ color: 'var(--muted)', fontSize: '0.65rem' }}>EFFICIENCY</span>
        <span style={{ color: 'var(--cyan)', fontWeight: 600 }}>{(skillEfficiency[skillLevel] * 100).toFixed(0)}%</span>
        <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
        <span style={{ color: 'var(--muted)', fontSize: '0.65rem' }}>MINERALS</span>
        <span style={{ color: 'var(--green)', fontWeight: 600 }}>{Object.values(playerMinerals).reduce((a, b) => a + b, 0).toLocaleString()}</span>
        <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
        <span style={{ color: 'var(--muted)', fontSize: '0.65rem' }}>JOBS</span>
        <span style={{ color: 'var(--purple)', fontWeight: 600 }}>{manufacturingJobs.length}</span>
      </div>

      {/* Notifications */}
      <div style={{ position: 'fixed', top: 'var(--sp-4)', right: 'var(--sp-4)', zIndex: 1000, display: 'flex', flexDirection: 'column', gap: 'var(--sp-2)' }}>
        {notifications.map(n => (
          <div key={n.id} style={{
            background: 'var(--surface)', border: `1px solid ${n.color}40`,
            borderRadius: 'var(--radius-md)', padding: 'var(--sp-3) var(--sp-4)',
            fontSize: '0.8rem', color: n.color, boxShadow: 'var(--shadow-md)',
          }}>
            {n.msg}
          </div>
        ))}
      </div>

      {/* Tab toggle */}
      <div style={{ display: 'flex', gap: 'var(--sp-2)', marginBottom: 'var(--sp-5)' }}>
        <button className={`btn btn-sm${!manufacturingTab ? ' btn-primary' : ''}`} onClick={() => setManufacturingTab(false)}>
          Refining
        </button>
        <button className={`btn btn-sm${manufacturingTab ? ' btn-primary' : ''}`} onClick={() => setManufacturingTab(true)}>
          Manufacturing
        </button>
      </div>

      {/* Stats */}
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))' }}>
        <div className="stat-card">
          <div className="stat-value" style={{ color: 'var(--accent)' }}>Lvl {skillLevel}</div>
          <div className="stat-label">Industry Skill</div>
        </div>
        <div className="stat-card">
          <div className="stat-value" style={{ color: 'var(--cyan)' }}>{(skillEfficiency[skillLevel] * 100).toFixed(0)}%</div>
          <div className="stat-label">Refine Efficiency</div>
        </div>
        <div className="stat-card">
          <div className="stat-value" style={{ color: 'var(--green)' }}>
            {Object.values(playerMinerals).reduce((a, b) => a + b, 0).toLocaleString()}
          </div>
          <div className="stat-label">Total Minerals</div>
        </div>
        <div className="stat-card">
          <div className="stat-value" style={{ color: 'var(--purple)' }}>{manufacturingJobs.length}</div>
          <div className="stat-label">Active Jobs</div>
        </div>
      </div>

      {!manufacturingTab ? (
        /* ===== REFINING ===== */
        <>
          <div className="demo-container">
            <div className="demo-toolbar">
              <span className="demo-title">Reprocessing Plant</span>
              <span style={{ color: 'var(--muted)' }}>|</span>
              <span style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Jita IV — Moon 4</span>
              {refining && (
                <span style={{ marginLeft: 'auto', color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: '0.7rem' }}>
                  ◌ REFINING...
                </span>
              )}
            </div>

            <div style={{ display: 'flex', minHeight: '300px' }}>
              {/* Ore selection */}
              <div style={{ width: '280px', borderRight: '1px solid var(--border)', overflowY: 'auto' }}>
                <div style={{ padding: 'var(--sp-3) var(--sp-4)', borderBottom: '1px solid var(--border)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: 'var(--accent)', textTransform: 'uppercase' }}>
                    Your Ore
                  </div>
                </div>
                {inventory.map(item => {
                  const data = mineralData[item.item];
                  return (
                    <div key={item.item} style={{
                      padding: 'var(--sp-3) var(--sp-4)',
                      borderBottom: '1px solid var(--border)',
                      cursor: 'pointer',
                      background: selectedOre === item.item ? 'var(--accent-bg)' : 'transparent',
                    }} onClick={() => { setSelectedOre(item.item); setRefineQty(item.quantity); }}>
                      <div style={{ fontSize: '0.8rem', color: selectedOre === item.item ? 'var(--fg-bright)' : 'var(--fg-dim)' }}>
                        {item.item}
                      </div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: 'var(--muted)' }}>
                        {item.quantity.toLocaleString()} units · → {data?.mineral || '?'}
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Refining panel */}
              <div style={{ flex: 1, padding: 'var(--sp-5)' }}>
                {selectedOre && mineralData[selectedOre] ? (
                  <>
                    <h3 style={{ marginBottom: 'var(--sp-4)' }}>{selectedOre}</h3>
                    <div className="grid-2" style={{ marginBottom: 'var(--sp-5)' }}>
                      <div>
                        <div style={{ fontSize: '0.75rem', color: 'var(--muted)', marginBottom: 'var(--sp-1)' }}>Yields Mineral</div>
                        <div style={{ color: 'var(--cyan)', fontWeight: 600 }}>{mineralData[selectedOre].mineral}</div>
                      </div>
                      <div>
                        <div style={{ fontSize: '0.75rem', color: 'var(--muted)', marginBottom: 'var(--sp-1)' }}>Batch Size</div>
                        <div style={{ fontFamily: 'var(--font-mono)' }}>{mineralData[selectedOre].batch.toLocaleString()} units</div>
                      </div>
                    </div>

                    <div style={{ marginBottom: 'var(--sp-4)' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-1)' }}>
                        <span style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>Quantity to Refine</span>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--fg-dim)' }}>
                          {Math.floor(refineQty / mineralData[selectedOre].batch)} batches
                        </span>
                      </div>
                      <input type="range" min={0} max={inventory.find(i => i.item === selectedOre)?.quantity || 0}
                        value={refineQty} onChange={e => setRefineQty(parseInt(e.target.value))}
                        style={{ width: '100%', accentColor: 'var(--accent)' }}
                      />
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: 'var(--fg-bright)', textAlign: 'center' }}>
                        {refineQty.toLocaleString()} units
                      </div>
                    </div>

                    {/* Skill selector */}
                    <div style={{ marginBottom: 'var(--sp-5)' }}>
                      <div style={{ fontSize: '0.75rem', color: 'var(--muted)', marginBottom: 'var(--sp-2)' }}>Industry Skill Level</div>
                      <div style={{ display: 'flex', gap: 'var(--sp-1)' }}>
                        {[0, 1, 2, 3, 4, 5].map(lvl => (
                          <button key={lvl} className={`btn btn-sm${skillLevel === lvl ? ' btn-primary' : ''}`}
                            style={{ minWidth: '36px' }} onClick={() => setSkillLevel(lvl)}>
                            {lvl}
                          </button>
                        ))}
                      </div>
                    </div>

                    {/* Preview */}
                    {refineQty >= mineralData[selectedOre].batch && (
                      <div className="card" style={{ marginBottom: 'var(--sp-4)' }}>
                        <h4 style={{ marginBottom: 'var(--sp-3)' }}>Refining Preview</h4>
                        {(() => {
                          const data = mineralData[selectedOre];
                          const batches = Math.floor(refineQty / data.batch);
                          const used = batches * data.batch;
                          const eff = skillEfficiency[skillLevel];
                          const minYield = Math.floor(batches * data.yield * eff);
                          const rawValue = used * (orePrices[selectedOre] || 0);
                          const mineralValue = minYield * Math.floor((orePrices[selectedOre] || 0) * 2.5);
                          return (
                            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>
                              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-2)' }}>
                                <span style={{ color: 'var(--muted)' }}>Ore consumed</span>
                                <span>{used.toLocaleString()} {selectedOre}</span>
                              </div>
                              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-2)' }}>
                                <span style={{ color: 'var(--muted)' }}>Mineral yield</span>
                                <span style={{ color: 'var(--cyan)' }}>{minYield.toLocaleString()} {data.mineral}</span>
                              </div>
                              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-2)' }}>
                                <span style={{ color: 'var(--muted)' }}>Efficiency</span>
                                <span style={{ color: 'var(--accent)' }}>{(eff * 100).toFixed(0)}%</span>
                              </div>
                              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--sp-2)', marginTop: 'var(--sp-2)' }}>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-1)' }}>
                                  <span style={{ color: 'var(--muted)' }}>Sell raw value</span>
                                  <span>₢{rawValue.toLocaleString()}</span>
                                </div>
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                  <span style={{ color: 'var(--muted)' }}>Refined value (est.)</span>
                                  <span style={{ color: mineralValue > rawValue ? 'var(--green)' : 'var(--red)' }}>
                                    ₢{mineralValue.toLocaleString()} {mineralValue > rawValue ? '▲' : '▼'}
                                  </span>
                                </div>
                              </div>
                            </div>
                          );
                        })()}
                      </div>
                    )}

                    <button className="btn btn-primary" style={{ width: '100%' }}
                      disabled={refining || refineQty < (mineralData[selectedOre]?.batch || 999)}
                      onClick={handleRefine}>
                      {refining ? 'Refining...' : 'Refine Ore'}
                    </button>
                  </>
                ) : (
                  <div style={{ textAlign: 'center', padding: 'var(--sp-8)', color: 'var(--muted)' }}>
                    Select an ore type to begin refining
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Refining history */}
          {results.length > 0 && (
            <div style={{ marginTop: 'var(--sp-5)' }}>
              <h3>Refining History</h3>
              <table className="data-table" style={{ marginTop: 'var(--sp-3)' }}>
                <thead>
                  <tr>
                    <th>Ore</th>
                    <th>Batches</th>
                    <th>Mineral</th>
                    <th>Yield</th>
                    <th>Efficiency</th>
                    <th>Raw Value</th>
                    <th>Refined Value</th>
                    <th>Verdict</th>
                  </tr>
                </thead>
                <tbody>
                  {results.map((r, i) => (
                    <tr key={i}>
                      <td style={{ color: 'var(--accent)' }}>{r.ore}</td>
                      <td className="mono">{r.batches}</td>
                      <td style={{ color: 'var(--cyan)' }}>{r.mineral}</td>
                      <td className="mono">{r.yield.toLocaleString()}</td>
                      <td className="mono">{(r.efficiency * 100).toFixed(0)}%</td>
                      <td className="mono">₢{r.rawValue.toLocaleString()}</td>
                      <td className="mono" style={{ color: r.better ? 'var(--green)' : 'var(--red)' }}>
                        ₢{r.mineralValue.toLocaleString()}
                      </td>
                      <td>
                        <span className={`pill ${r.better ? 'pill-green' : 'pill-red'}`}>
                          {r.better ? 'REFINE ▲' : 'SELL RAW ▼'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>
      ) : (
        /* ===== MANUFACTURING ===== */
        <>
          <div className="grid-2">
            {/* Mineral inventory */}
            <div className="card">
              <h4 style={{ color: 'var(--cyan)', marginBottom: 'var(--sp-4)' }}>Mineral Inventory</h4>
              {Object.entries(playerMinerals).map(([mineral, qty]) => (
                <div key={mineral} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: 'var(--sp-2) 0', borderBottom: '1px solid var(--border)',
                }}>
                  <span style={{ fontSize: '0.85rem', color: qty > 0 ? 'var(--fg-bright)' : 'var(--muted)' }}>{mineral}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: qty > 0 ? 'var(--cyan)' : 'var(--muted)' }}>
                    {qty.toLocaleString()}
                  </span>
                </div>
              ))}
              <div className="callout callout-info" style={{ marginTop: 'var(--sp-4)', fontSize: '0.75rem' }}>
                Refine ore to accumulate minerals for manufacturing.
              </div>
            </div>

            {/* Active jobs */}
            <div className="card">
              <h4 style={{ color: 'var(--accent)', marginBottom: 'var(--sp-4)' }}>Manufacturing Jobs</h4>
              {manufacturingJobs.length === 0 ? (
                <div style={{ color: 'var(--muted)', fontSize: '0.85rem', padding: 'var(--sp-4)', textAlign: 'center' }}>
                  No active jobs. Start one from the recipe list below.
                </div>
              ) : (
                manufacturingJobs.map(job => (
                  <div key={job.id} style={{
                    padding: 'var(--sp-3)', marginBottom: 'var(--sp-3)',
                    background: 'var(--surface-raised)', borderRadius: 'var(--radius-md)',
                    border: '1px solid var(--border)',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--sp-2)' }}>
                      <span style={{ fontSize: '0.85rem', color: 'var(--fg-bright)' }}>{job.product}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--cyan)' }}>
                        {formatTime(job.remaining)}
                      </span>
                    </div>
                    <div className="progress-bar" style={{ height: '6px' }}>
                      <div className="fill" style={{
                        width: `${((job.totalTime - job.remaining) / job.totalTime) * 100}%`,
                        background: 'var(--accent)',
                      }} />
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          {/* Recipe list */}
          <div style={{ marginTop: 'var(--sp-6)' }}>
            <h3>Blueprints</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 'var(--sp-4)', marginTop: 'var(--sp-4)' }}>
              {manufacturingRecipes.map(recipe => {
                const canBuild = skillLevel >= recipe.skill &&
                  Object.entries(recipe.minerals).every(([m, q]) => (playerMinerals[m] || 0) >= q);
                return (
                  <div key={recipe.id} className="card" style={{ marginBottom: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--sp-3)' }}>
                      <h4 style={{ margin: 0, color: 'var(--accent)' }}>{recipe.product}</h4>
                      <span className={`pill ${canBuild ? 'pill-green' : 'pill-red'}`}>
                        {canBuild ? 'READY' : skillLevel < recipe.skill ? `LVL ${recipe.skill}` : 'NEED MATS'}
                      </span>
                    </div>
                    <div style={{ fontSize: '0.8rem', color: 'var(--fg-dim)', marginBottom: 'var(--sp-3)' }}>
                      {Object.entries(recipe.minerals).map(([m, q]) => {
                        const have = playerMinerals[m] || 0;
                        return (
                          <div key={m} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
                            <span style={{ color: 'var(--muted)' }}>{m}</span>
                            <span style={{ fontFamily: 'var(--font-mono)', color: have >= q ? 'var(--green)' : 'var(--red)' }}>
                              {have.toLocaleString()} / {q.toLocaleString()}
                            </span>
                          </div>
                        );
                      })}
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--muted)' }}>
                        Time: {formatTime(recipe.time)} · Skill: Lvl {recipe.skill}
                      </span>
                      <button className="btn btn-sm btn-primary" disabled={!canBuild}
                        onClick={() => handleManufacture(recipe)}>
                        Manufacture
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

window.GDD.RefiningDemo = RefiningDemo;