/* TischTap digital menu — guest link page + menu screens */

const DMIcon = ({ name, size = 20, color }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size } });
    }
  }, [name, size]);
  return <span ref={ref} style={{ display: 'inline-flex', color }} />;
};

const RESTAURANT = {
  name: 'Gusto by Giovanni',
  tag: 'Premium Italian · Pizza & Classics',
  meta: 'Koblenz · Mittelrhein',
  initials: 'G',
  wifi: { ssid: 'Gusto-Guest', pass: 'buonappetito' },
};

const LINKS = [
  { id: 'menu', icon: 'utensils', lbl: 'Digitales Menü', sub: 'Mehrsprachig · immer aktuell', action: 'menu' },
  { id: 'wifi', icon: 'wifi', lbl: 'WLAN verbinden', sub: 'Kostenlos für Gäste', action: 'wifi' },
  { id: 'google', icon: 'star', lbl: 'Google bewerten', sub: 'Bewertung in 30 Sekunden' },
  { id: 'web', icon: 'globe', lbl: 'Website', sub: 'gusto-koblenz.de' },
  { id: 'insta', icon: 'camera', lbl: 'Instagram', sub: '@gusto.koblenz' },
  { id: 'fb', icon: 'thumbs-up', lbl: 'Facebook', sub: 'Gusto by Giovanni' },
];

const HOURS = [
  ['Mo – Do', '11:30 – 22:00'],
  ['Fr – Sa', '11:30 – 23:30'],
  ['Sonntag', '12:00 – 22:00'],
];
const TODAY_IDX = 0;

const MENU = [
  { cat: 'Vorspeisen', items: [
    { nm: 'Bruschetta Classica', ds: 'Tomate, Basilikum, Knoblauch', pr: '6,90 €' },
    { nm: 'Burrata Pugliese', ds: 'Cremige Burrata, Rucola, Öl', pr: '9,50 €' },
  ]},
  { cat: 'Pizza', items: [
    { nm: 'Margherita', ds: 'San-Marzano-Tomaten, Mozzarella, Basilikum', pr: '9,90 €' },
    { nm: 'Diavola', ds: 'Scharfe Salami, Mozzarella, Chili', pr: '12,90 €' },
    { nm: 'Quattro Formaggi', ds: 'Vier Käsesorten, Honig', pr: '13,50 €' },
  ]},
  { cat: 'Pasta', items: [
    { nm: 'Spaghetti Bolognese', ds: 'Rinderragout, Parmesan', pr: '11,90 €' },
    { nm: 'Tagliatelle al Tartufo', ds: 'Trüffel, Sahne, Parmesan', pr: '15,90 €' },
  ]},
  { cat: 'Getränke', items: [
    { nm: 'Aperol Spritz', ds: 'Aperol, Prosecco, Soda', pr: '7,50 €' },
    { nm: 'Espresso', ds: 'Doppio', pr: '2,80 €' },
  ]},
];

/* ---- Link page ---- */
function LinkPage({ onOpenMenu }) {
  const [wifiOpen, setWifiOpen] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const copy = () => { setCopied(true); setTimeout(() => setCopied(false), 1400); };

  const handle = (l) => {
    if (l.action === 'menu') onOpenMenu();
    else if (l.action === 'wifi') setWifiOpen(o => !o);
  };

  return (
    <div className="dm">
      <div className="dm-logo"><span>{RESTAURANT.initials}</span></div>
      <h1 className="dm-name">{RESTAURANT.name}</h1>
      <p className="dm-tag">{RESTAURANT.tag}</p>
      <p className="dm-meta">{RESTAURANT.meta}</p>

      <div className="dm-actions">
        <button className="dm-action"><span className="ic"><DMIcon name="phone" size={20} /></span>Anrufen</button>
        <button className="dm-action"><span className="ic"><DMIcon name="mail" size={20} /></span>E-Mail</button>
        <button className="dm-action"><span className="ic"><DMIcon name="map-pin" size={20} /></span>Route</button>
      </div>

      <div className="dm-rows">
        {LINKS.map(l => (
          <React.Fragment key={l.id}>
            <button className="dm-row" onClick={() => handle(l)}>
              <span className="badge"><DMIcon name={l.icon} size={21} /></span>
              <span className="txt">
                <span className="lbl" style={{ display: 'block' }}>{l.lbl}</span>
                <span className="sub">{l.sub}</span>
              </span>
              <span className="chev">
                <DMIcon name={l.action === 'menu' ? 'chevron-right' : (l.action === 'wifi' ? (wifiOpen ? 'chevron-up' : 'chevron-down') : 'arrow-up-right')} size={20} />
              </span>
            </button>
            {l.action === 'wifi' && wifiOpen && (
              <div className="dm-wifi">
                <div className="dm-wifi-field"><div><div className="k">Netzwerk</div><div className="v">{RESTAURANT.wifi.ssid}</div></div></div>
                <div className="dm-wifi-field">
                  <div><div className="k">Passwort</div><div className="v">{RESTAURANT.wifi.pass}</div></div>
                  <button className="dm-copy" onClick={copy}>{copied ? 'Kopiert ✓' : 'Kopieren'}</button>
                </div>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      <div className="dm-hours">
        <h4>Öffnungszeiten</h4>
        {HOURS.map((h, i) => (
          <div key={i} className={'dm-hours-row' + (i === TODAY_IDX ? ' today' : '')}>
            <span>{h[0]}</span><span>{h[1]}</span>
          </div>
        ))}
      </div>

      <p className="dm-foot">Powered by <b>TischTap</b></p>
    </div>
  );
}

/* ---- Menu screen ---- */
function MenuScreen({ onBack }) {
  const [tab, setTab] = React.useState(0);
  const cat = MENU[tab];
  return (
    <div className="dm dm--menu">
      <div className="dm-mtop">
        <button className="dm-back" onClick={onBack}><DMIcon name="chevron-left" size={18} /> Zurück</button>
        <div className="dm-mtitle">Speisekarte</div>
        <div className="dm-tabs">
          {MENU.map((c, i) => (
            <button key={c.cat} className={'dm-tab' + (i === tab ? ' active' : '')} onClick={() => setTab(i)}>{c.cat}</button>
          ))}
        </div>
      </div>
      <div className="dm-items">
        <div className="dm-cat-h">{cat.cat}</div>
        {cat.items.map((it, i) => (
          <div key={i} className="dm-item">
            <div className="thumb" />
            <div className="info">
              <div className="nm">{it.nm}</div>
              <div className="ds">{it.ds}</div>
              <div className="pr">{it.pr}</div>
            </div>
            <button className="dm-add">+</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function MenuApp() {
  const [screen, setScreen] = React.useState('link');
  return (
    <IOSDevice>
      {screen === 'link'
        ? <LinkPage onOpenMenu={() => setScreen('menu')} />
        : <MenuScreen onBack={() => setScreen('link')} />}
    </IOSDevice>
  );
}

Object.assign(window, { MenuApp });