/* @component-map
 * App — Main container, layout shell [app.jsx]
 * DealList — Shows all deals sorted by expiration, flags expired [components/DealList.jsx]
 * AddDeal — Form to add new deals [components/AddDeal.jsx]
 * StatsBar — Summary stats (active deals, expiring soon, expired) [components/StatsBar.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "daily_expiring_deals_reminder", "schedule": "0 9 * * *", "action": "event", "config": {"event_type": "daily_expiring_deals_reminder"}}], "triggers": [{"name": "watched_category_deal_added_email", "on": "collection.add", "collection": "deals", "actions": [{"type": "email", "to": "category_watchers", "subject": "New deal added in a category you watch", "body": "A new deal was added in one of your watched categories. Check it out in the app for more details."}]}]}


import { useState } from 'react';
import { StatsBar } from './components/StatsBar.jsx';
import { DealList } from './components/DealList.jsx';
import { AddDeal } from './components/AddDeal.jsx';
import { useAuth, useCollection } from '@deplixo/sdk';

// PROGRESS:sc_001:complete:Setting up your deal tracker
function App() {
  const { user, loading: authLoading, login, logout } = useAuth();
  const [showAddModal, setShowAddModal] = useState(false);
  const collection = useCollection('deals', { personal: true });

  if (authLoading) {
    return (
      <div className="app-container auth-screen">
        <div className="auth-card">
          <div className="auth-logo">🏷️</div>
          <h1 className="auth-title">DealVault</h1>
          <p className="auth-text">Signing you in...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-container auth-screen">
        <div className="auth-card">
          <div className="auth-logo">🏷️</div>
          <h1 className="auth-title">DealVault</h1>
          <p className="auth-text">Sign in with Google to access your personal deal list.</p>
          <button className="btn-google-auth" onClick={login}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-area">
            <span className="logo-icon">🏷️</span>
            <h1 className="app-title">DealVault</h1>
          </div>
          <p className="app-subtitle">Your coupon & deal tracker</p>
          <div className="user-bar">
            <span className="user-welcome">Welcome, {user.name}</span>
            <button className="btn-signout" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>

      <main className="main-content">
        <StatsBar items={collection.items} loading={collection.loading} />

        <div className="content-header">
          <h2 className="section-title">Your Deals</h2>
          <button className="btn-add" onClick={() => setShowAddModal(true)}>
            <span className="btn-add-icon">+</span> Add Deal
          </button>
        </div>

        <DealList collection={collection} />
      </main>

      {showAddModal && (
        <AddDeal
          onClose={() => setShowAddModal(false)}
          onAdd={collection.add}
        />
      )}
    </div>
  );
}

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