// screens2.jsx — Menu, DishDetail, Delivery, Booking
// Exposes: MenuScreen, DishDetail, DeliveryScreen, BookingScreen
const tr2 = (o, lang) => o ? o[lang] ?? o.de : '';

// ── Dine-in Menu ─────────────────────────────────────────
function MenuScreen({ lang, setLang, onOpenDish, onDelivery, onNavigate }) {
  const [active, setActive] = React.useState(SHIKI_MENU[0].id);
  const scrollRef = React.useRef(null);
  const secRefs = React.useRef({});
  const isJumping = React.useRef(false);

  const jump = (id) => {
    setActive(id);
    isJumping.current = true;
    setTimeout(() => { isJumping.current = false; }, 800);
    const el = secRefs.current[id];
    const cont = scrollRef.current;
    if (el && cont) cont.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
  };

  const onScroll = () => {
    if (isJumping.current) return;
    const cont = scrollRef.current;if (!cont) return;
    const y = cont.scrollTop + 80;
    let cur = SHIKI_MENU[0].id;
    for (const cat of SHIKI_MENU) {
      const el = secRefs.current[cat.id];
      if (el && el.offsetTop <= y) cur = cat.id;
    }
    setActive(cur);
  };

  const [showHintRight, setShowHintRight] = React.useState(true);
  const [showHintLeft, setShowHintLeft] = React.useState(false);
  const [mounted, setMounted] = React.useState(false);

  const onChipsScroll = (e) => {
    const t = e.target;
    setShowHintRight(t.scrollWidth - t.scrollLeft - t.clientWidth > 10);
    setShowHintLeft(t.scrollLeft > 10);
  };

  React.useEffect(() => {
    // Check initial state after render
    const chipsEl = document.querySelector('.chips');
    if (chipsEl) {
      setShowHintRight(chipsEl.scrollWidth > chipsEl.clientWidth);
      setShowHintLeft(chipsEl.scrollLeft > 10);
    }
    
    // Trigger entrance animation
    requestAnimationFrame(() => {
      requestAnimationFrame(() => setMounted(true));
    });
  }, []);

  return (
    <div className={`screen menu ${mounted ? 'mounted' : ''}`}>
      <div className="menu-head" style={{
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(-15px)',
        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out'
      }}>
        <TopBar lang={lang} setLang={setLang}
        kicker={tr2(SHIKI_STRINGS.menuKicker, lang)}
        title={tr2(SHIKI_STRINGS.menuTitle, lang)} jp="お品書き" />
        <div className="container">
          <div className={`chips-wrap ${showHintRight ? 'show-hint-right' : ''} ${showHintLeft ? 'show-hint-left' : ''}`}>
            <div className="scroll-hint-left"><Icon name="chevL" size={16} /></div>
            <div className="chips" onScroll={onChipsScroll}>
              {SHIKI_MENU.map((cat) =>
              <button key={cat.id} className={'chip ' + (active === cat.id ? 'on' : '')} onClick={() => jump(cat.id)}>
                  {tr2(cat.title, lang)}
                </button>
              )}
            </div>
            <div className="scroll-hint"><Icon name="chevR" size={16} /></div>
          </div>
        </div>
      </div>
      <div className="menu-scroll" ref={scrollRef} onScroll={onScroll} style={{
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s'
      }}>
        {SHIKI_MENU.map((cat) =>
        <section key={cat.id} ref={(el) => secRefs.current[cat.id] = el} className="menu-section container">
            <div className="sec-head">
              <span className="sec-jp">{cat.jp}</span>
              <span className="sec-title">{tr2(cat.title, lang)}</span>
              <span className="sec-rule" />
            </div>
            {cat.dishes.map((d) =>
          <button key={d.id} className={`dish ${d.signature ? 'dish-is-signature' : ''}`} onClick={() => onOpenDish(d)}>
                <Photo kind={d.photo} className="dish-thumb" />
                <div className="dish-body">
                  <div className="dish-top">
                    <span className="dish-name">{tr2(d.name, lang)}</span>
                    <span className="dish-price">{d.price} €</span>
                  </div>
                  {d.signature && <span className="dish-sig">{tr2(SHIKI_STRINGS.signature, lang)}</span>}
                  <div className="dish-desc">{tr2(d.desc, lang)}</div>
                </div>
              </button>
          )}
          </section>
        )}
        <button className="menu-delivery-link" onClick={onDelivery}>
          <Icon name="scooter" size={18} />
          <span>{tr2(SHIKI_STRINGS.toDelivery, lang)}</span>
          <Icon name="chevR" size={15} />
        </button>
        <div style={{ height: 30 }} />
        <SiteFooter lang={lang} onNavigate={onNavigate} />
      </div>
    </div>);

}

// ── Dish detail (slide-up overlay) ───────────────────────
function DishDetail({ dish, lang, onClose, isDelivery }) {
  const [qty, setQty] = React.useState(1);
  return (
    <div className="sheet-wrap dish-sheet-wrap" onClick={onClose}>
      <div className="sheet-scrim" />
      <div className="sheet dish-sheet" onClick={(e) => e.stopPropagation()}>
        <button className="sheet-close" onClick={onClose}><Icon name="close" size={20} /></button>
        <Photo kind={dish.photo} src={dish.src} className="sheet-photo">
          {dish.signature && <span className="sheet-sig">{tr2(SHIKI_STRINGS.signature, lang)}</span>}
        </Photo>
        <div className="sheet-body">
          <div className="sheet-info-top">
            <div className="sheet-titlerow">
              <h2 className="sheet-name">{tr2(dish.name, lang)}</h2>
              <span className="sheet-price">{dish.price} €</span>
            </div>
            <p className="sheet-desc">{tr2(dish.desc, lang)}</p>
            <div className="sheet-meta">
              <div className="meta-block">
                <div className="meta-label">{tr2(SHIKI_STRINGS.allergens, lang)}</div>
                <div className="meta-val">{tr2(dish.allergens, lang)}</div>
              </div>
              <div className="meta-block">
                <div className="meta-label">{tr2(SHIKI_STRINGS.pairing, lang)}</div>
                <div className="meta-val">{tr2(dish.pairing, lang)}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ── Delivery ─────────────────────────────────────────────
function DeliveryScreen({ lang, setLang, onOpenDish, onNavigate }) {
  const [sent, setSent] = React.useState(false);
  const order = () => {setSent(true);setTimeout(() => setSent(false), 1900);};
  return (
    <div className="screen delivery" style={{ overflowY:'auto', WebkitOverflowScrolling:'touch' }}>
      <TopBar lang={lang} setLang={setLang}
      kicker={tr2(SHIKI_STRINGS.delKicker, lang)}
      title={tr2(SHIKI_STRINGS.delTitle, lang)} jp="出前" />
      <div className="del-desktop-wrapper">
        <p className="del-blurb" style={{ padding: "0px 24px" }}>{tr2(SHIKI_STRINGS.delBlurb, lang)}</p>
        <div className="del-list" style={{ padding: "2px 18px 0px" }}>
          {SHIKI_DELIVERY.map((d, i) =>
          <div key={d.id} className="del-card stagger" style={{ animationDelay: 0.05 * i + 's' }} onClick={() => onOpenDish && onOpenDish(d)}>
              <div className="del-thumb-wrap">
                <Photo kind={d.photo} src={d.src} className="del-thumb" />
              </div>
              <div className="del-cardbody">
                <div className="del-top-row">
                  <div className="del-name">{tr2(d.name, lang)}</div>
                  <div className="del-price">{d.price} €</div>
                </div>
                <div className="del-desc">{tr2(d.desc, lang)}</div>
                <div className="del-bot-row">
                  <button className="cta-outline del-add-btn">
                    <span>{lang === 'en' ? 'Order' : 'Bestellen'}</span>
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="del-ctawrap">
          <button className={'cta-primary ' + (sent ? 'sent' : '')} onClick={order}>
            {sent ? <Icon name="check" size={20} /> : <Icon name="scooter" size={22} />}
            <span>{sent ? (lang === 'de' ? 'Weiterleitung…' : 'Redirecting…') : tr2(SHIKI_STRINGS.delCta, lang)}</span>
            {!sent && <Icon name="ext" size={15} />}
          </button>
          <div className="del-ext-note">{tr2(SHIKI_STRINGS.delExternal, lang)}</div>
        </div>
      </div>
      <SiteFooter lang={lang} onNavigate={onNavigate} />
    </div>);

}

// ── Booking ──────────────────────────────────────────────
function BookingScreen({ lang, setLang, onNavigate }) {
  const today = new Date(2026, 5, 3); // June 3 2026
  const [month, setMonth] = React.useState(new Date(2026, 5, 1));
  const [date, setDate] = React.useState(new Date(2026, 5, 6));
  const [time, setTime] = React.useState('19:30');
  const [guests, setGuests] = React.useState(2);
  const [done, setDone] = React.useState(false);
  const [showForm, setShowForm] = React.useState(false);

  const [resName, setResName] = React.useState('');
  const [resPhone, setResPhone] = React.useState('');
  const [resEmail, setResEmail] = React.useState('');
  const [phoneTouched, setPhoneTouched] = React.useState(false);
  const [emailTouched, setEmailTouched] = React.useState(false);

  const cleanPhone = resPhone.replace(/[^\d+]/g, '');
  const isValidPhone = resPhone === '' || (cleanPhone.length >= 9 && cleanPhone.length <= 16);
  const isValidEmail = resEmail === '' || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(resEmail);
  const isFormValid = resName.trim().length > 0 && resPhone.trim().length > 0 && isValidPhone && resEmail.trim().length > 0 && isValidEmail;

  const showPhoneErr = phoneTouched && resPhone.trim().length > 0 && !isValidPhone;
  const showEmailErr = emailTouched && resEmail.trim().length > 0 && !isValidEmail;

  const [timePeriod, setTimePeriod] = React.useState('Evening');

  const timeSlots = {
    // Must stay within SHIKI_HOURS (data.jsx): lunch 11:00–14:00, dinner 17:30–22:00.
    // Last seating is 30 min before closing.
    Lunch: [
      { t: '11:00' }, { t: '11:30' }, { t: '12:00' }, { t: '12:30' },
      { t: '13:00' }, { t: '13:30' }
    ],
    Evening: [
      { t: '17:30' }, { t: '18:00' }, { t: '18:30' }, { t: '19:00', dot: true },
      { t: '19:30', dot: true }, { t: '20:00', dot: true }, { t: '20:30', dot: true },
      { t: '21:00' }, { t: '21:30' }
    ]
  };

  const y = month.getFullYear(),m = month.getMonth();
  const first = new Date(y, m, 1);
  const startDow = (first.getDay() + 6) % 7; // Monday-first
  const daysIn = new Date(y, m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= daysIn; d++) cells.push(new Date(y, m, d));

  const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
  const isPast = (d) => d && d < new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const fmtDate = (d) => `${d.getDate()}. ${SHIKI_MONTHS[lang][d.getMonth()]}`;

  if (done) {
    return (
      <div className="screen booking success">
        <div className="succ-inner">
          <div className="succ-ring">
            <svg viewBox="0 0 80 80" width="80" height="80">
              <circle className="succ-circle" cx="40" cy="40" r="36" fill="none" stroke="var(--gold)" strokeWidth="1.5" />
              <path className="succ-check" d="M26 41l9 9 19-21" fill="none" stroke="var(--gold)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div className="succ-kanji">ありがとう</div>
          <h2 className="succ-title">{tr2(SHIKI_STRINGS.successTitle, lang)}</h2>
          <div className="succ-detail">
            {fmtDate(date)} · {time} · {guests} {guests === 1 ? tr2(SHIKI_STRINGS.guest1, lang) : tr2(SHIKI_STRINGS.guestN, lang)}
          </div>
          <p className="succ-msg">{tr2(SHIKI_STRINGS.successMsg, lang)}</p>
          <button className="cta-outline" onClick={() => setDone(false)} style={{ marginTop: 26 }}>
            <span>{tr2(SHIKI_STRINGS.done, lang)}</span>
          </button>
        </div>
      </div>);

  }

  return (
    <div className="screen booking" style={{ overflowY:'auto', WebkitOverflowScrolling:'touch' }}>
      <TopBar lang={lang} setLang={setLang}
      kicker={tr2(SHIKI_STRINGS.bookKicker, lang)}
      title={tr2(SHIKI_STRINGS.bookTitle, lang)} jp="ご予約" />

      <div className="book-desktop-card">
        <div className="book-desktop-layout">
          {/* Left column: Calendar */}
          <div className="book-col-left">
            <div className="book-section">
              <div className="cal-head">
                <button className="cal-nav" onClick={() => setMonth(new Date(y, m - 1, 1))} aria-label="prev"><Icon name="chevL" size={18} /></button>
                <span className="cal-month">{SHIKI_MONTHS[lang][m]} {y}</span>
                <button className="cal-nav" onClick={() => setMonth(new Date(y, m + 1, 1))} aria-label="next"><Icon name="chevR" size={18} /></button>
              </div>
              <div className="cal-grid cal-dow">
                {SHIKI_DOW[lang].map((d, i) => <span key={i} className="cal-dowcell">{d}</span>)}
              </div>
              <div className="cal-grid">
                {cells.map((d, i) => d ?
                <button key={i}
                className={'cal-cell ' + (sameDay(d, date) ? 'sel ' : '') + (isPast(d) ? 'past' : '')}
                disabled={isPast(d)}
                onClick={() => setDate(d)}>
                    {d.getDate()}
                  </button> :
                <span key={i} />)}
              </div>
            </div>
          </div>

          {/* Right column: Time, Guests, CTA */}
          <div className="book-col-right">
            <div className="book-section">
              <div className="field-label"><Icon name="clock" size={15} /> {tr2(SHIKI_STRINGS.time, lang)}</div>
              <div className="time-tabs">
                {['Lunch', 'Evening'].map(p => (
                  <button key={p} className={'time-tab ' + (timePeriod === p ? 'on' : '')} onClick={() => setTimePeriod(p)}>{p}</button>
                ))}
              </div>
              <div className="time-grid">
                {timeSlots[timePeriod].map(({t, disabled, dot}) =>
                  <button key={t} disabled={disabled} className={'time-chip ' + (time === t ? 'on ' : '') + (disabled ? 'disabled' : '')} onClick={() => setTime(t)}>
                    {t}
                    {dot && <span className="time-dot" />}
                  </button>
                )}
              </div>
              <div className="time-legend">
                <span className="time-dot" /> {tr2({ de: 'Wenige Plätze', en: 'Few seats left' }, lang)}
              </div>
            </div>

            <div className="book-section">
              <div className="field-label">{tr2(SHIKI_STRINGS.guests, lang)}</div>
              <div className="stepper book-counter">
                <Icon name="user" size={18} />
                <div className="book-counter-controls">
                  <button className="step-btn" onClick={() => setGuests((g) => Math.max(1, g - 1))} aria-label="minus"><Icon name="minus" size={18} /></button>
                  <span className="step-val">{guests}</span>
                  <button className="step-btn" onClick={() => setGuests((g) => Math.min(12, g + 1))} aria-label="plus"><Icon name="plus" size={18} /></button>
                </div>
              </div>
            </div>

            <div className="book-cta-wrapper">
              <div className="book-summary-sticker">
                {tr2({ de: 'Ihre Auswahl', en: 'Your selection' }, lang)}: <strong>{guests} {guests === 1 ? tr2(SHIKI_STRINGS.guest1, lang) : tr2(SHIKI_STRINGS.guestN, lang)}</strong> | <strong>{fmtDate(date)}</strong> | <strong>{time}</strong>
              </div>
              <button className="cta-primary btn-book" onClick={() => setShowForm(true)}>
                <span>{tr2(SHIKI_STRINGS.confirm, lang)}</span><Icon name="chevR" size={16} />
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {showForm && (
        <div className="res-modal-scrim">
          <div className="res-modal">
            <button className="res-close" onClick={() => setShowForm(false)} aria-label="close">
              <Icon name="close" size={12} />
            </button>
            <div className="res-form-grid">
              <div className="res-summary-area">
                <h2 className="res-title">{tr2(SHIKI_STRINGS.resDetails, lang)}</h2>
                <p className="res-sub">{tr2(SHIKI_STRINGS.resSub, lang)}</p>
                
                <div className="res-pill">
                  <Icon name="book" size={15} /> 
                  {fmtDate(date)} · {time} · {guests} {guests === 1 ? tr2(SHIKI_STRINGS.guest1, lang) : tr2(SHIKI_STRINGS.guestN, lang)}
                </div>
                
                <div className="res-address">
                  <strong>SHIKI Leipzig</strong><br/>
                  Klostergasse 18, 04109 Leipzig
                </div>
              </div>
              
              <div className="res-form-area">
                <label className="res-field">
                  <span className="res-label">{tr2(SHIKI_STRINGS.nameLbl, lang).replace('*','')}<span>*</span></span>
                  <input type="text" className="res-input" placeholder={tr2(SHIKI_STRINGS.namePlh, lang)} value={resName} onChange={(e) => setResName(e.target.value)} />
                </label>

                <label className="res-field">
                  <span className="res-label">{tr2(SHIKI_STRINGS.phoneLbl, lang).replace('*','')}<span>*</span></span>
                  <input type="tel" className={`res-input ${showPhoneErr ? 'error' : ''}`} placeholder={tr2(SHIKI_STRINGS.phonePlh, lang)} value={resPhone} onChange={(e) => setResPhone(e.target.value)} onBlur={() => setPhoneTouched(true)} />
                  {showPhoneErr && <span className="res-error-text">{tr2(SHIKI_STRINGS.phoneErr, lang)}</span>}
                </label>

                <label className="res-field">
                  <span className="res-label">{tr2(SHIKI_STRINGS.emailLbl, lang).replace('*','')}<span>*</span></span>
                  <input type="email" className={`res-input ${showEmailErr ? 'error' : ''}`} placeholder={tr2(SHIKI_STRINGS.emailPlh, lang)} value={resEmail} onChange={(e) => setResEmail(e.target.value)} onBlur={() => setEmailTouched(true)} />
                  {showEmailErr && <span className="res-error-text">{tr2(SHIKI_STRINGS.emailErr, lang)}</span>}
                </label>

                <label className="res-field">
                  <span className="res-label">{tr2(SHIKI_STRINGS.msgLbl, lang)}</span>
                  <textarea className="res-input res-textarea" placeholder={tr2(SHIKI_STRINGS.msgPlh, lang)}></textarea>
                </label>

                <button className="cta-primary res-submit" disabled={!isFormValid} onClick={() => { setShowForm(false); setDone(true); }}>
                  <span>{tr2(SHIKI_STRINGS.submitRes, lang)}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      <SiteFooter lang={lang} onNavigate={onNavigate} />
    </div>);

}

Object.assign(window, { MenuScreen, DishDetail, DeliveryScreen, BookingScreen });