// DEPLOY_CONFIG: {"triggers": [{"name": "menu_item_sold_out_notify_staff", "on": "collection.update", "collection": "menu_items", "actions": [{"type": "email", "to": "{{staff_notification_email}}", "subject": "Menu item sold out: {{name}}", "body": "Menu item '{{name}}' has been marked unavailable/sold out and may need attention."}], "conditions": [{"field": "available", "operator": "changed_to", "value": false}]}]}
import { useMemo, useState } from 'react';
import { useAuth } from '@deplixo/sdk';
import { MenuCreator } from './components/MenuCreator.jsx';
import { CustomerMenu } from './components/CustomerMenu.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [view, setView] = useState('creator');

  const publicMenuUrl = useMemo(() => {
    if (typeof window === 'undefined') return '';
    const { origin, pathname } = window.location;
    return `${origin}${pathname}#menu=customer`;
  }, []);

  const qrCodeUrl = useMemo(() => {
    if (!publicMenuUrl) return '';
    return `https://api.qrserver.com/v1/create-qr-code/?size=280x280&margin=12&data=${encodeURIComponent(publicMenuUrl)}`;
  }, [publicMenuUrl]);

  const handlePrintTableQr = () => {
    window.print();
  };

  if (loading) {
    return (
      <div className="app-shell">
        <main className="app-main auth-gate">
          <div className="auth-card">
            <div className="auth-spinner" aria-hidden="true" />
            <h2>Loading your workspace...</h2>
            <p>Preparing MenuCraft for you.</p>
          </div>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <main className="app-main auth-gate">
          <div className="auth-card">
            <span className="auth-emoji">🍽️</span>
            <h1 className="auth-title">Welcome to MenuCraft</h1>
            <p className="auth-copy">
              Sign in with Google to manage your restaurant menu, add categories,
              and publish a beautiful customer preview.
            </p>
            <button className="btn btn-primary auth-button" onClick={() => login('google')}>
              <span className="toggle-icon">🔐</span>
              Continue with Google
            </button>
            <p className="auth-note">Restaurant owner access only</p>
          </div>
        </main>
      </div>
    );
  }

  const isCustomerView = typeof window !== 'undefined' && window.location.hash === '#menu=customer';

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="logo-icon">🍽️</span>
          <h1 className="app-title">MenuCraft</h1>
        </div>
        <div className="header-right">
          <div className="owner-badge" title={user.email}>
            {user.avatar ? (
              <img className="owner-avatar" src={user.avatar} alt={user.name} />
            ) : (
              <span className="owner-avatar owner-avatar-fallback">{user.name?.slice(0, 1)?.toUpperCase()}</span>
            )}
            <div className="owner-meta">
              <span className="owner-label">Signed in as</span>
              <span className="owner-name">{user.name}</span>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={logout}>
            Sign Out
          </button>
        </div>
        <nav className="view-toggle">
          <button
            className={`toggle-btn ${view === 'creator' ? 'active' : ''}`}
            onClick={() => setView('creator')}
          >
            <span className="toggle-icon">✏️</span>
            <span>Editor</span>
          </button>
          <button
            className={`toggle-btn ${view === 'customer' ? 'active' : ''}`}
            onClick={() => setView('customer')}
          >
            <span className="toggle-icon">👁️</span>
            <span>Preview</span>
          </button>
        </nav>
      </header>

      <main className="app-main">
        {view === 'creator' ? <MenuCreator owner={user} /> : <CustomerMenu />}

        <section className="qr-share-card" aria-label="Public menu QR code">
          <div className="section-header">
            <h2 className="section-title">Table QR Code</h2>
            <button className="btn btn-ghost btn-sm" onClick={handlePrintTableQr}>
              Print
            </button>
          </div>
          <div className="qr-share-layout">
            <div className="qr-code-panel print-qr-only">
              {qrCodeUrl ? (
                <img className="qr-code-image" src={qrCodeUrl} alt="QR code linking to the public menu" />
              ) : (
                <div className="qr-code-placeholder">QR code unavailable</div>
              )}
            </div>
            <div className="qr-share-details no-print">
              <p className="qr-share-copy">
                Share this scannable code with guests to open the public menu view on their phone.
              </p>
              <div className="qr-share-link-wrap">
                <label className="form-label">Public menu link</label>
                <input className="form-input qr-share-link" value={publicMenuUrl} readOnly />
              </div>
              <p className="form-help-text">
                Tip: use Print to generate a clean, table-friendly QR sheet for placing at each table.
              </p>
            </div>
          </div>
          <div className="qr-print-sheet print-only">
            <div className="qr-print-brand">MenuCraft</div>
            <h3>Scan to view our menu</h3>
            <p>{publicMenuUrl}</p>
            {qrCodeUrl && <img className="qr-code-image qr-code-image-print" src={qrCodeUrl} alt="QR code linking to the public menu" />}
          </div>
        </section>
      </main>
    </div>
  );
}

export default App;

if (typeof ReactDOM !== 'undefined' && ReactDOM.createRoot) {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}