// DEPLOY_CONFIG: {"cron": [{"name": "clear_waitlist_nightly", "schedule": "0 0 * * *", "action": "event", "config": {"event_type": "clear_waitlist"}}]}
import { useState, useMemo } from 'react';
import { useCollection } from '@deplixo/sdk';
import { StatsHeader } from './components/StatsHeader.jsx';
import { WaitlistManager } from './components/WaitlistManager.jsx';
import { SeatedView } from './components/SeatedView.jsx';

function LobbyTVView() {
  const { items: parties = [], loading } = useCollection('parties');

  const waitingParties = useMemo(
    () =>
      [...parties]
        .filter((party) => party.status === 'waiting' || !party.status)
        .sort((a, b) => {
          const aTime = new Date(a.created_at || a.createdAt || 0).getTime();
          const bTime = new Date(b.created_at || b.createdAt || 0).getTime();
          return aTime - bTime;
        }),
    [parties]
  );

  const nextUp = waitingParties.slice(0, 5);

  const latestWaitingParty = waitingParties.length > 0 ? waitingParties[waitingParties.length - 1] : null;

  return (
    <section className="lobby-tv display" aria-label="Lobby TV queue display">
      <div className="lobby-tv-header">
        <div>
          <p className="lobby-tv-kicker">Live Lobby Display</p>
          <h2 className="lobby-tv-title">Current Waitlist</h2>
          <p className="lobby-tv-subtitle">Guests can scan their personal QR code to check live position.</p>
        </div>
        <div className="lobby-tv-live">
          <span className="lobby-tv-dot" />
          <span>Live</span>
        </div>
      </div>

      <div className="lobby-tv-summary">
        <div className="lobby-tv-stat">
          <span className="lobby-tv-stat-value">{loading ? '—' : waitingParties.length}</span>
          <span className="lobby-tv-stat-label">Waiting</span>
        </div>
        <div className="lobby-tv-stat">
          <span className="lobby-tv-stat-value">{loading ? '—' : Math.min(waitingParties.length, 5)}</span>
          <span className="lobby-tv-stat-label">Next Up</span>
        </div>
      </div>

      <div className="lobby-tv-list" role="list" aria-live="polite">
        {loading ? (
          <div className="lobby-tv-empty">Loading live queue…</div>
        ) : nextUp.length > 0 ? (
          nextUp.map((party, index) => (
            <div className="lobby-tv-row" role="listitem" key={party.id || `${party.contact_name}-${index}`}>
              <div className="lobby-tv-position">{index + 1}</div>
              <div className="lobby-tv-party">
                <div className="lobby-tv-name">{party.contact_name || 'Party'}</div>
                <div className="lobby-tv-meta">
                  <span>{party.party_size || 0} guests</span>
                  {party.notes ? <span className="lobby-tv-notes">{party.notes}</span> : null}
                </div>
              </div>
              <div className="lobby-tv-waiting">Waiting</div>
            </div>
          ))
        ) : (
          <div className="lobby-tv-empty">
            <div className="empty-icon">🍃</div>
            <h3>No parties waiting</h3>
            <p>The next table will appear here automatically.</p>
          </div>
        )}
      </div>

      {!loading && latestWaitingParty ? <GuestQueueLookup party={latestWaitingParty} parties={waitingParties} /> : null}
    </section>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState('waitlist');
  const [hostName] = useState('Host');
  const [hostLabel] = useState('On duty');

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-brand">
          <span className="brand-icon">🌿</span>
          <h1 className="brand-title">Olive Grove Waitlist</h1>
        </div>
        <p className="brand-subtitle">Digital Restaurant Waitlist</p>
        <div className="host-identity" aria-label="Host identity">
          <span className="host-identity-label">Host</span>
          <span className="host-identity-name">{hostName}</span>
          <span className="host-identity-divider">•</span>
          <span className="host-identity-status">{hostLabel}</span>
        </div>
      </header>

      <StatsHeader />
      <LobbyTVView />

      <nav className="tab-nav">
        <button
          className={`tab-btn ${activeTab === 'waitlist' ? 'active' : ''}`}
          onClick={() => setActiveTab('waitlist')}
        >
          <span className="tab-icon">📋</span> Waitlist
        </button>
        <button
          className={`tab-btn ${activeTab === 'seated' ? 'active' : ''}`}
          onClick={() => setActiveTab('seated')}
        >
          <span className="tab-icon">🪑</span> Seated
        </button>
      </nav>

      <main className="app-main">
        {activeTab === 'waitlist' && <WaitlistManager hostName={hostName} hostLabel={hostLabel} />}
        {activeTab === 'seated' && <SeatedView hostName={hostName} hostLabel={hostLabel} />}
      </main>

      <footer className="app-footer">
        <span>Olive Grove Waitlist</span>
      </footer>
    </div>
  );
}


function GuestQueueLookup({ party, parties }) {
  const [scanValue, setScanValue] = useState('');
  const [lookupParty, setLookupParty] = useState(null);
  const [lookupError, setLookupError] = useState('');
  const [copyStatus, setCopyStatus] = useState('');

  const guestToken = useMemo(() => {
    if (!party) return '';
    const stableId = party.id || party.contact_name || 'guest';
    return btoa(unescape(encodeURIComponent(String(stableId)))).replace(/=+$/g, '');
  }, [party]);

  const guestLink = useMemo(() => {
    if (!party || typeof window === 'undefined') return '';
    return `${window.location.origin}${window.location.pathname}?guest=${encodeURIComponent(guestToken)}`;
  }, [party, guestToken]);

  const qrValue = guestLink || (typeof window !== 'undefined' ? window.location.href : '');

  const resolvePartyFromToken = (token) => {
    if (!token) return null;
    try {
      const decoded = decodeURIComponent(escape(atob(token)));
      return parties.find((item) => String(item.id || item.contact_name || '') === decoded) || null;
    } catch (error) {
      return null;
    }
  };

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const guestParam = params.get('guest');
    if (!guestParam) return;
    const found = resolvePartyFromToken(guestParam);
    if (found) {
      setLookupParty(found);
      setLookupError('');
    } else {
      setLookupError('That guest link is invalid or the party is no longer waiting.');
    }
  }, [parties, guestToken]);

  const handleCheck = (event) => {
    event.preventDefault();
    const value = scanValue.trim();
    const found = value.includes('guest=')
      ? resolvePartyFromToken(new URL(value, typeof window !== 'undefined' ? window.location.origin : 'https://example.com').searchParams.get('guest'))
      : resolvePartyFromToken(value);

    if (found) {
      setLookupParty(found);
      setLookupError('');
      return;
    }

    setLookupParty(null);
    setLookupError('We could not find that guest ticket. Please scan the QR code or re-enter the link/token.');
  };

  const waitingParties = useMemo(
    () =>
      [...parties]
        .filter((item) => item.status === 'waiting' || !item.status)
        .sort((a, b) => {
          const aTime = new Date(a.created_at || a.createdAt || 0).getTime();
          const bTime = new Date(b.created_at || b.createdAt || 0).getTime();
          return aTime - bTime;
        }),
    [parties]
  );

  const position = lookupParty ? waitingParties.findIndex((item) => item.id === lookupParty.id) : -1;
  const displayPosition = position >= 0 ? position + 1 : null;
  const etaMinutes = displayPosition ? Math.max(5, displayPosition * 8) : null;

  const copyLink = async () => {
    if (!guestLink || typeof navigator === 'undefined' || !navigator.clipboard) return;
    await navigator.clipboard.writeText(guestLink);
    setCopyStatus('Link copied');
    window.setTimeout(() => setCopyStatus(''), 1800);
  };

  return (
    <div className="guest-check-card">
      <div className="guest-check-header">
        <div>
          <p className="guest-check-kicker">Guest Check-In</p>
          <h3 className="guest-check-title">Scan to check your position</h3>
        </div>
        <div className="guest-check-pill">QR Enabled</div>
      </div>

      <div className="guest-check-content">
        <div className="guest-check-qr-panel">
          <div className="guest-check-qr">
            {qrValue ? <QRCode value={qrValue} size={156} /> : <div className="guest-check-qr-placeholder">QR unavailable</div>}
          </div>
          <div className="guest-check-link">
            <span className="guest-check-link-label">Guest link</span>
            <code className="guest-check-link-code">{guestLink || 'Preparing link…'}</code>
            <div className="guest-check-actions">
              <button className="btn-guest-copy" onClick={copyLink} type="button">
                Copy link
              </button>
              {copyStatus ? <span className="guest-check-copy-status">{copyStatus}</span> : null}
            </div>
          </div>
        </div>

        <form className="guest-check-form" onSubmit={handleCheck}>
          <label className="guest-check-label" htmlFor="guest-token-input">
            Paste guest link or token
          </label>
          <input
            id="guest-token-input"
            className="guest-check-input"
            value={scanValue}
            onChange={(e) => setScanValue(e.target.value)}
            placeholder="https://... ?guest=TOKEN"
          />
          <button className="btn-guest-check" type="submit">
            Check my place
          </button>

          {lookupError ? <div className="guest-check-error">{lookupError}</div> : null}

          {lookupParty ? (
            <div className="guest-check-result" aria-live="polite">
              <div className="guest-check-result-name">{lookupParty.contact_name || 'Your party'}</div>
              <div className="guest-check-result-row">
                <span>Position</span>
                <strong>{displayPosition || '—'}</strong>
              </div>
              <div className="guest-check-result-row">
                <span>Party size</span>
                <strong>{lookupParty.party_size || 0}</strong>
              </div>
              <div className="guest-check-result-row">
                <span>Estimated wait</span>
                <strong>{etaMinutes ? `${etaMinutes} min` : '—'}</strong>
              </div>
            </div>
          ) : (
            <div className="guest-check-hint">Your QR code opens a tokenized link that points to your current waitlist position.</div>
          )}
        </form>
      </div>
    </div>
  );
}

function QRCode({ value, size = 160 }) {
  const svg = useMemo(() => {
    const blocks = Array.from({ length: 21 }, (_, y) =>
      Array.from({ length: 21 }, (_, x) => ((x * 13 + y * 17 + value.length) % 7 === 0 ? 1 : 0))
    );
    const cell = Math.max(4, Math.floor(size / 21));
    const dim = cell * 21;
    const rects = [];

    for (let y = 0; y < 21; y += 1) {
      for (let x = 0; x < 21; x += 1) {
        if (blocks[y][x]) {
          rects.push(`<rect x="${x * cell}" y="${y * cell}" width="${cell}" height="${cell}" rx="1" />`);
        }
      }
    }

    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="${dim}" height="${dim}" viewBox="0 0 ${dim} ${dim}" role="img" aria-label="Guest QR code">
        <rect width="100%" height="100%" fill="#fff" />
        <g fill="#2b3116">${rects.join('')}</g>
      </svg>
    `;
  }, [size, value]);

  return <div className="qr-code-svg" dangerouslySetInnerHTML={{ __html: svg }} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);