/* machine.jsx — H&H's Snackomat (kompakter Basalt-Monolith)
   Layout: snacks + dispenser left, [display | keypad | logo] stacked right. */
const { useState, useEffect, useRef, useMemo } = React;

const PRODUCTS = [
  // Reihe 1 — Snacks salzig & süß
  { code:'11', label:'NERDS',          sub:'USA Candy',     price:'2,80', photo:'produkte/11.png' },
  { code:'12', label:'AOSTE STICKADO', sub:'Salami-Sticks', price:'2,20', photo:'produkte/12.png' },
  { code:'13', label:'HUOBER BREZEL',  sub:'Bio',           price:'1,80', photo:'produkte/13.png' },
  { code:'14', label:'BULDAK',         sub:'Carbo · KR',    price:'3,90', photo:'produkte/14.png' },
  // Reihe 2 — Schokolade
  { code:'21', label:'ENGELSHAAR',     sub:'Schoko BE',     price:'4,50', photo:'produkte/21.png' },
  { code:'22', label:'NIC NACS',       sub:'Erdnuss',       price:'1,80', photo:'produkte/22.png' },
  { code:'23', label:"HERSHEY'S",      sub:'USA',           price:'2,80', photo:'produkte/23.png' },
  { code:'24', label:'KITKAT',         sub:'Pink Lemonade', price:'2,80', photo:'produkte/24.webp' },
  // Reihe 3 — Nüsse & Riegel
  { code:'31', label:'ÜLTJE',          sub:'Erdnüsse',      price:'2,20', photo:'produkte/31.webp' },
  { code:'32', label:'KINDER BUENO',   sub:'Riegel',        price:'1,60', photo:'produkte/32.webp' },
  { code:'33', label:'CRAZY DIPS',     sub:'Candy',         price:'1,80', photo:'produkte/33.webp' },
  { code:'34', label:'SNICKERS',       sub:'Wafer Rolls',   price:'2,80', photo:'produkte/34.webp' },
  // Reihe 4 — Getränke
  { code:'41', label:'COLA',           sub:'0,33L',         price:'2,00', photo:'produkte/41.png' },
  { code:'42', label:'RED BULL',       sub:'0,25L',         price:'2,50', photo:'produkte/42.webp' },
  { code:'43', label:'RED BULL',       sub:'Spring Edition',price:'2,50', photo:'produkte/43.webp' },
  { code:'44', label:'FANTA',          sub:'Lemon',         price:'2,00', photo:'produkte/44.webp' },
];

/* ---------- Product slot ---------- */
function Slot({ p, isHover, isActive, isDispensing, onEnter, onLeave, selected }) {
  return (
    <div
      className={`slot ${isHover?'hov':''} ${isActive?'active':''} ${isDispensing?'dispensing':''} ${selected?'selected':''}`}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
    >
      <div className="slot-stratum"/>
      <div className="slot-product">
        <image-slot
          id={`prod-${p.code}`}
          src={p.photo}
          fit="contain"
          placeholder={`${p.label} — Foto droppen`}
        ></image-slot>
      </div>
      <svg className="slot-spiral" viewBox="0 0 130 14" preserveAspectRatio="none" aria-hidden="true">
        <path d="M2 10 Q 8 2, 14 10 Q 20 18, 26 10 Q 32 2, 38 10 Q 44 18, 50 10 Q 56 2, 62 10 Q 68 18, 74 10 Q 80 2, 86 10 Q 92 18, 98 10 Q 104 2, 110 10 Q 116 18, 122 10 Q 128 2, 134 10"
              stroke="rgba(255,209,58,0.55)" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      </svg>
      <div className="slot-label">
        <span className="slot-code">{p.code}</span>
        <span className="slot-price">{p.price.replace(',', '.')}</span>
      </div>
    </div>
  );
}

/* ---------- Display "Crater" (CRT) ---------- */
function CraterDisplay({ text, phase, ruckel, selectedLabel }) {
  const sub = phase === 'idle' ? 'BEREIT'
            : phase === 'input' ? (selectedLabel || 'EINGABE')
            : phase === 'dispensing' ? 'MOTOR'
            : 'AUSGABE';
  return (
    <div className={`display ${ruckel?'ruckel':''}`}>
      <div className="display-frame">
        <div className="display-screen">
          <div className="scanlines"/>
          <div className="phosphor display-font">
            <span className="display-text">{text}</span>
          </div>
          <div className="display-sub">
            <span className="grotesk">{sub}</span>
          </div>
          <div className="crt-glare"/>
          <div className="crt-vignette"/>
        </div>
      </div>
      <div className="display-rivets"><i/><i/><i/><i/></div>
    </div>
  );
}

/* ---------- Keypad ---------- */
const KEYS = ['1','2','3','4','5','6','7','8','9','C','0','⌫'];

function Keypad({ onKey, pressed, easter }) {
  return (
    <div className={`keypad ${easter?'easter':''}`}>
      <div className="slate"/>
      <div className="keys">
        {KEYS.map(k => (
          <button
            key={k}
            className={`key ${pressed===k?'press':''} ${k==='C'?'k-clear':''} ${k==='⌫'?'k-back':''}`}
            onClick={() => onKey(k)}
          >
            <span className="display-font">{k}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ---------- Brand logo plate (replaces brass plaque) ---------- */
function BrandLogo() {
  return (
    <div className="brand-plate">
      <img src="logo.png" alt="H&H's Snackomat" className="brand-plate-img"/>
    </div>
  );
}

/* ---------- Dispenser flap (narrow, sits under snack window) ---------- */
function Dispenser({ open, product }) {
  return (
    <div className={`dispenser ${open?'open':''}`}>
      <div className="dispenser-cavity">
        <div className="cavity-glow"/>
        {open && product && (
          <div className="dropped-product">
            <image-slot
              id={`prod-${product.code}`}
              src={product.photo}
              fit="contain"
              placeholder={product.label}
            ></image-slot>
          </div>
        )}
      </div>
      <div className="dispenser-flap">
        <div className="flap-handle"/>
        <div className="flap-label grotesk">↓  ENTNAHME  ↓</div>
        <div className="flap-window"/>
      </div>
    </div>
  );
}

/* ---------- Main component ---------- */
function VulkanAutomat() {
  const [phase, setPhase] = useState('idle');
  const [input, setInput] = useState('');
  const [hover, setHover] = useState(null);
  const [active, setActive] = useState(null);
  const [pressed, setPressed] = useState(null);
  const [easter, setEaster] = useState(false);
  const userTouched = useRef(false);
  const easterCount = useRef({ key:null, n:0 });

  const productByCode = useMemo(() => {
    const m = {}; PRODUCTS.forEach(p => m[p.code]=p); return m;
  }, []);

  // (Demo cycle entfernt — nur noch User-Interaktion)

  const handleKey = (k) => {
    userTouched.current = true;
    setPressed(k);
    setTimeout(() => setPressed(null), 150);
    if (/^[0-9]$/.test(k)) {
      if (easterCount.current.key === k) easterCount.current.n++;
      else { easterCount.current = { key:k, n:1 }; }
      if (easterCount.current.n >= 10) {
        setEaster(true);
        setTimeout(() => setEaster(false), 1400);
        easterCount.current.n = 0;
      }
      setInput(prev => (prev.length < 2 ? prev + k : prev));
      setPhase('input');
    } else if (k === 'C') {
      setInput(''); setPhase('idle'); setActive(null);
    } else if (k === '⌫') {
      setInput(prev => prev.slice(0, -1));
    }
  };

  // Auto-dispense once a valid 2-digit code is entered, then return to idle
  useEffect(() => {
    if (input.length === 2 && phase === 'input') {
      const p = productByCode[input];
      if (p) {
        setPhase('dispensing'); setActive(p.code);
      }
    }
  }, [input, phase, productByCode]);

  // dispensing → take nach 3s (separater Effekt, damit phase-Wechsel den Timer nicht killt)
  useEffect(() => {
    if (phase !== 'dispensing') return;
    const t = setTimeout(() => setPhase('take'), 3000);
    return () => clearTimeout(t);
  }, [phase]);

  // After 'take', auto-reset to idle so the slot „refills“
  useEffect(() => {
    if (phase !== 'take') return;
    const t = setTimeout(() => {
      setPhase('idle');
      setInput('');
      setActive(null);
    }, 3500);
    return () => clearTimeout(t);
  }, [phase]);

  let displayText = '';
  let selectedLabel = '';
  if (phase === 'idle') displayText = 'CODE EINGEBEN';
  else if (phase === 'input') {
    if (input.length === 0) { displayText = 'CODE EINGEBEN'; }
    else if (input.length === 1) { displayText = `CODE ${input}_`; selectedLabel = 'EINGABE'; }
    else {
      const p = productByCode[input];
      if (!p) { displayText = `${input} UNBEKANNT`; selectedLabel = 'FEHLER'; }
      else { displayText = `AUSWAHL ${input}`; selectedLabel = p.label; }
    }
  }
  else if (phase === 'dispensing') displayText = `AUSGABE ${active||''}`;
  else if (phase === 'take') displayText = `BITTE ENTNEHMEN`;

  const [, tick] = useState(0);
  // (dispense-phase tick removed — static dots avoid layout shift)

  return (
    <div className={`automat ${easter?'rumble':''}`}>
      <div className="shadow-pool"/>

      <div className="body">
        <div className="machine-row">
          {/* ---- LEFT: snacks ---- */}
          <div className="window">
            <div className="window-frame">
              <div className="magma-glow"/>
              <div className="window-glass">
                <div className="grid">
                  {PRODUCTS.map(p => (
                    <Slot
                      key={p.code}
                      p={p}
                      selected={p.code === input}
                      isHover={hover === p.code}
                      isActive={active === p.code}
                      isDispensing={active === p.code && phase === 'dispensing'}
                      onEnter={() => setHover(p.code)}
                      onLeave={() => setHover(null)}
                    />
                  ))}
                </div>
                <div className="glass-reflection"/>
              </div>
            </div>
          </div>

          {/* ---- RIGHT: display, keypad, logo ---- */}
          <div className="controls">
            <CraterDisplay
              text={displayText}
              phase={phase}
              ruckel={easter}
              selectedLabel={selectedLabel}
            />
            <Keypad onKey={handleKey} pressed={pressed} easter={easter}/>
            <BrandLogo/>
          </div>
        </div>

        <Dispenser open={phase === 'take'} product={active ? productByCode[active] : null}/>
      </div>
    </div>
  );
}

window.VulkanAutomat = VulkanAutomat;