/* roster.jsx — class roster + student detail + chest + crafting modals.
   Globals: VillagerCard, StudentDetail, ChestBanner, DonateModal, ClassCraftModal, GiftModal
*/

(function () {
const { useState, useEffect } = React;

// ===========================================================
// VillagerCard
// ===========================================================
function VillagerCard({ student, onOpen }) {
  const firstName = student.name.split(' ')[0];

  const baseKeys      = ['water', 'paddenstoel', 'zand'];
  const rareKeys      = ['lava', 'zeewier', 'fles'];
  const legendaryKeys = ['enderparel', 'enderpoeder'];

  return (
    <div className="villager-card" onClick={onOpen}>
      <div className="inner">
        <h3 className="villager-name">{firstName}</h3>

        <Avatar student={student}/>

        <div className="rows">
          <div className="row-strip tier-1">
            {baseKeys.map(k => {
              const qty = student.inventory[k] || 0;
              return (
                <div key={k} className={`slot ${qty === 0 ? 'zero' : ''}`} title={ITEMS[k].name}>
                  <ItemIcon itemKey={k} size={20}/> {qty}
                </div>
              );
            })}
          </div>

          <div className="row-strip tier-2">
            {rareKeys.map(k => {
              const qty = student.inventory[k] || 0;
              return (
                <div key={k} className={`slot ${qty === 0 ? 'zero' : ''}`} title={ITEMS[k].name}>
                  <ItemIcon itemKey={k} size={20}/> {qty}
                </div>
              );
            })}
          </div>

          <div className="row-strip tier-3">
            {legendaryKeys.map(k => {
              const qty = student.inventory[k] || 0;
              return (
                <div key={k} className={`slot ${qty === 0 ? 'zero' : ''}`} title={ITEMS[k].name}>
                  <ItemIcon itemKey={k} size={20}/> {qty}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ===========================================================
// StudentDetail
// ===========================================================
function StudentDetail({ student, adminMode, recipes, onClose, onCraft, onDonate, onGift, onUploadAvatar }) {
  useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const firstName = student.name.split(' ')[0];

  const craftable = recipes.filter(r => r.cost.every(([k, q]) => (student.inventory[k] || 0) >= q));

  const ownedKeys = Object.entries(student.inventory)
    .filter(([, v]) => v > 0)
    .map(([k]) => k)
    .sort((a, b) => (ITEMS[a]?.tier ?? 9) - (ITEMS[b]?.tier ?? 9));

  return (
    <div className="detail-overlay" onClick={onClose}>
      <div className="detail-panel" onClick={(e) => e.stopPropagation()}>
        <div className="detail-inner">
          <div className="detail-head">
            <Avatar student={student} allowUpload={adminMode} onUpload={onUploadAvatar}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <h2 className="name">Werkbank van {firstName}</h2>
              <div className="meta">Inwoner · ID {String(student.id).padStart(3,'0')}</div>
            </div>
            <button className="detail-close" onClick={onClose} title="Sluit (Esc)">✕</button>
          </div>

          <div className="detail-body">
            <p className="section-eyebrow">Inventaris</p>
            <div className="you-have">
              {ownedKeys.length === 0 && <span className="muted">Lege inventaris.</span>}
              {ownedKeys.map(k => (
                <span key={k} className="have-chip" title={ITEMS[k]?.name}>
                  <ItemIcon itemKey={k} size={16}/>
                  <span>{ITEMS[k]?.name}</span>
                  <span style={{ color: 'var(--ender-hi)' }}>×{student.inventory[k]}</span>
                </span>
              ))}
            </div>

            <div style={{ height: 30 }}/>

            <p className="section-eyebrow">Wat {firstName} nu kan maken</p>
            <h2 className="section-heading">
              {craftable.length === 0
                ? 'Nog niets — verzamel meer materialen!'
                : `${craftable.length} recept${craftable.length === 1 ? '' : 'en'} klaar`}
            </h2>

            {craftable.length > 0 && (
              <div className="recipe-grid">
                {craftable.map(r => (
                  <RecipeCard
                    key={r.key}
                    recipe={r}
                    supply={student.inventory}
                    onCraft={(recipe, e) => onCraft(student.id, recipe, e)}
                    craftLabel="Maak het"
                  />
                ))}
              </div>
            )}

            <div className="cta-bar">
              {adminMode && (
                <button className="btn-pixel violet" onClick={onGift}>
                  <span>＋</span> Geef materiaal
                </button>
              )}
              <button className="btn-pixel" onClick={onDonate}>
                <span>★</span> Doneer aan Klaskist
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===========================================================
// ChestBanner — compact horizontal class chest at top of roster
// ===========================================================
function ChestBanner({ classChest, classRewards, adminMode, recipes, onOpenClassCraft, onGiftToChest }) {
  const trackedKeys = [
    'water', 'paddenstoel', 'zand',
    'lava', 'zeewier', 'fles',
    'enderparel', 'enderpoeder',
  ];
  const totalDonated = trackedKeys.reduce((a, k) => a + (classChest[k] || 0), 0);
  const classRecipes = recipes.filter(r => r.category === 'class');
  const anyCraftable = classRecipes.some(r =>
    r.cost.every(([k, q]) => (classChest[k] || 0) >= q));

  const handleBannerClick = adminMode
    ? (e) => {
        if (e.target.closest('button')) return;
        onGiftToChest?.();
      }
    : undefined;

  return (
    <div
      className={`chest-banner ${adminMode ? 'clickable' : ''}`}
      onClick={handleBannerClick}
      role={adminMode ? 'button' : undefined}
      title={adminMode ? 'Klik om materiaal aan de kist te geven' : undefined}
    >
      <div className="inner">
        <div className="title">
          <div className="title-mark">⬛</div>
          <div>
            <h2>Klaskist</h2>
            <div className="sub">
              {totalDonated} gedoneerd
              {classRewards.length > 0 && ` · ${classRewards.length} klasbeloning${classRewards.length === 1 ? '' : 'en'}`}
              {adminMode && <span className="gift-hint"> · klik om te geven</span>}
            </div>
          </div>
        </div>

        <div className="chest-stash">
          {trackedKeys.map(k => {
            const qty = classChest[k] || 0;
            return (
              <span key={k} className={`stash-slot ${qty > 0 ? 'has' : 'empty'}`} title={ITEMS[k].name}>
                <ItemIcon itemKey={k} size={20} glow={qty > 0}/>
                <span className="val">{qty}</span>
              </span>
            );
          })}
        </div>

        <div className="actions">
          <button
            className="btn-pixel violet"
            onClick={(e) => { e.stopPropagation(); onOpenClassCraft(); }}
            disabled={!anyCraftable}
            style={!anyCraftable ? { opacity: 0.55, cursor: 'not-allowed' } : null}
          >
            <span>★</span> Klas Craften
          </button>
          {classRewards.length > 0 && (
            <div className="rewards-line" title="Behaalde klasbeloningen">
              {classRewards.map((r, i) => (
                <ItemIcon key={i} itemKey={r.key} size={14} glow/>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ===========================================================
// DonateModal
// ===========================================================
function DonateModal({ student, onCancel, onConfirm }) {
  const donatableKeys = [
    'water', 'paddenstoel', 'zand',
    'lava', 'zeewier', 'fles',
    'enderparel', 'enderpoeder',
  ];
  const [picks, setPicks] = useState({});

  const bump = (k, delta) => {
    setPicks(p => {
      const cur = p[k] || 0;
      const max = student.inventory[k] || 0;
      const next = Math.min(max, Math.max(0, cur + delta));
      return { ...p, [k]: next };
    });
  };

  const total = Object.values(picks).reduce((a, b) => a + b, 0);
  const firstName = student.name.split(' ')[0];

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal wide" onClick={(e)=>e.stopPropagation()}>
        <div className="modal-inner">
          <h3>Doneer aan Klaskist</h3>
          <p>Kies hoeveel {firstName} van elk item wil doneren.</p>

          {donatableKeys.map(k => {
            const have = student.inventory[k] || 0;
            const pick = picks[k] || 0;
            if (have === 0) return null;
            return (
              <div key={k} className="donate-row">
                <div className="icon-box"><ItemIcon itemKey={k} size={22}/></div>
                <span className="name">{ITEMS[k].name}</span>
                <span className="have-count">heeft: {have}</span>
                <div className="qty-picker">
                  <button onClick={()=>bump(k,-1)} disabled={pick === 0}>−</button>
                  <span className="val">{pick}</span>
                  <button onClick={()=>bump(k,+1)} disabled={pick >= have}>+</button>
                </div>
              </div>
            );
          })}

          {donatableKeys.every(k => (student.inventory[k] || 0) === 0) && (
            <p className="muted">Nog niets om te doneren.</p>
          )}

          <div className="modal-actions" style={{ marginTop: 18 }}>
            <button className="btn-pixel ghost" onClick={onCancel}>Annuleer</button>
            <button
              className="btn-pixel violet"
              disabled={total === 0}
              style={total === 0 ? { opacity: 0.5, cursor: 'not-allowed' } : null}
              onClick={() => onConfirm(picks)}
            >
              Doneer {total > 0 && `· ${total}`}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===========================================================
// ClassCraftModal
// ===========================================================
function ClassCraftModal({ classChest, recipes, onCancel, onConfirm }) {
  const classRecipes = recipes.filter(r => r.category === 'class');
  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal wide" onClick={(e)=>e.stopPropagation()} style={{ width: 'min(760px, 100%)' }}>
        <div className="modal-inner">
          <h3 style={{ color: 'var(--ender-hi)' }}>★ Klas Craften</h3>
          <p>Gebruik materialen uit de Klaskist om een ultra-zeldzame beloning te maken voor iedereen.</p>

          <div className="recipe-grid" style={{ marginTop: 10 }}>
            {classRecipes.map(r => (
              <RecipeCard
                key={r.key}
                recipe={r}
                supply={classChest}
                onCraft={(recipe, e) => onConfirm(recipe, e)}
                craftLabel="Maak"
              />
            ))}
          </div>

          <div className="modal-actions" style={{ marginTop: 18 }}>
            <button className="btn-pixel ghost" onClick={onCancel}>Sluit</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===========================================================
// GiftModal — generic add/remove picker
// ===========================================================
function GiftModal({
  title,
  subtitle,
  currentMap,
  broadcast = false,
  confirmLabel = 'Toepassen',
  onCancel,
  onConfirm,
}) {
  const trackedKeys = [
    'water', 'paddenstoel', 'zand',
    'lava', 'zeewier', 'fles',
    'enderparel', 'enderpoeder',
  ];

  const [picks, setPicks] = useState({});

  const bump = (k, delta) => {
    setPicks(p => {
      const cur = p[k] || 0;
      let next = cur + delta;
      if (broadcast && next < 0) next = 0;
      return { ...p, [k]: next };
    });
  };

  const setAll = (delta) => {
    setPicks(p => {
      const next = { ...p };
      for (const k of trackedKeys) {
        const cur = next[k] || 0;
        const v = cur + delta;
        next[k] = broadcast && v < 0 ? 0 : v;
      }
      return next;
    });
  };

  const anyDelta = trackedKeys.some(k => (picks[k] || 0) !== 0);

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal wide" onClick={(e)=>e.stopPropagation()} style={{ width: 'min(640px, 100%)' }}>
        <div className="modal-inner">
          <h3>{title}</h3>
          {subtitle && <p>{subtitle}</p>}

          <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
            <button className="btn-pixel ghost" style={{ padding: '8px 12px', fontSize: 10 }} onClick={() => setAll(+1)}>
              + 1 van alles
            </button>
            {!broadcast && (
              <button className="btn-pixel ghost" style={{ padding: '8px 12px', fontSize: 10 }} onClick={() => setAll(-1)}>
                − 1 van alles
              </button>
            )}
            <button className="btn-pixel ghost" style={{ padding: '8px 12px', fontSize: 10 }} onClick={() => setPicks({})}>
              Reset
            </button>
          </div>

          {trackedKeys.map(k => {
            const cur = currentMap?.[k] ?? 0;
            const pick = picks[k] || 0;
            const next = Math.max(0, cur + pick);
            const pickColor = pick > 0 ? 'var(--green)' : pick < 0 ? 'var(--danger)' : 'var(--ink-faint)';
            return (
              <div key={k} className="donate-row">
                <div className="icon-box"><ItemIcon itemKey={k} size={22}/></div>
                <span className="name">{ITEMS[k].name}</span>
                {!broadcast && (
                  <span className="have-count">
                    {cur}{pick !== 0 && <> → <b style={{ color: 'var(--ink)' }}>{next}</b></>}
                  </span>
                )}
                <div className="qty-picker">
                  <button onClick={()=>bump(k,-1)} disabled={broadcast && pick === 0}>−</button>
                  <span className="val" style={{ color: pickColor }}>
                    {pick > 0 ? `+${pick}` : pick}
                  </span>
                  <button onClick={()=>bump(k,+1)}>+</button>
                </div>
              </div>
            );
          })}

          <div className="modal-actions" style={{ marginTop: 18 }}>
            <button className="btn-pixel ghost" onClick={onCancel}>Annuleer</button>
            <button
              className="btn-pixel violet"
              disabled={!anyDelta}
              style={!anyDelta ? { opacity: 0.5, cursor: 'not-allowed' } : null}
              onClick={() => onConfirm(picks)}
            >
              {confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VillagerCard, StudentDetail, ChestBanner, DonateModal, ClassCraftModal, GiftModal });
})();