/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * StandupForm — Form for submitting daily standup [components/StandupForm.jsx]
 * DigestView — Daily digest of all team standups [components/DigestView.jsx]
 * HistoryView — Browse past days' standups [components/HistoryView.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "daily-standup-reminder", "schedule": "0 9 * * *", "action": "event", "config": {"event_type": "standup.reminder.daily"}}, {"name": "weekly-standup-summary", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "standup.summary.weekly"}}], "triggers": [{"name": "send-standup-reminder-email", "on": "event", "event": "standup.reminder.daily", "actions": [{"type": "email", "to": "team_members_without_standup", "subject": "Reminder: Please submit your standup", "body": "Hi team, this is a reminder to submit your standup for today if you haven't done so yet."}]}, {"name": "send-weekly-standup-summary-email", "on": "event", "event": "standup.summary.weekly", "actions": [{"type": "ai", "provider": "openai", "api_key_secret": "OPENAI_API_KEY", "prompt": "Aggregate all standup submissions for the past week and analyze team progress. Produce a concise team summary with: overall progress, notable patterns, recurring blockers, and any velocity changes compared to the previous week. Return a polished email-ready report addressed to the team lead."}, {"type": "email", "to": "team_lead", "subject": "Weekly Standup Summary: Team Progress & Blockers", "body": "{{$ai.output}}"}]}], "collections": [{"name": "standup_submissions", "description": "Stores daily standup submissions for history, digest views, and reminder checks.", "schema": {"type": "object", "properties": {"id": {"type": "string"}, "user_id": {"type": "string"}, "submitted_at": {"type": "string", "format": "date-time"}, "standup_date": {"type": "string", "format": "date"}, "yesterday": {"type": "string"}, "today": {"type": "string"}, "blockers": {"type": "string"}, "created_at": {"type": "string", "format": "date-time"}, "updated_at": {"type": "string", "format": "date-time"}}, "required": ["user_id", "submitted_at", "standup_date"]}}]}


import { useState } from 'react';
import { useAuth } from '@deplixo/sdk';
import { StandupForm } from './components/StandupForm.jsx';
import { DigestView } from './components/DigestView.jsx';
import { HistoryView } from './components/HistoryView.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('digest');
  const { user, loading, logout } = useAuth();

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-pulse"></div>
        <p>Loading standup...</p>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="auth-screen">
        <div className="auth-card">
          <div className="auth-brand">
            <span className="header-icon">🔄</span>
            <h1>Async Standup</h1>
          </div>
          <p className="auth-copy">
            Sign in with Google to access team standups, digests, history, and team management.
          </p>
          <a className="google-signin-btn" href="#" onClick={(e) => e.preventDefault()}>
            Sign in with Google
          </a>
          <p className="auth-footnote">
            Google OAuth is handled by Deplixo auth. Use the login flow to continue.
          </p>
        </div>
      </div>
    );
  }

  const tabs = [
    { id: 'digest', label: "Today's Digest", icon: '📋' },
    { id: 'submit', label: 'My Standup', icon: '✍️' },
    { id: 'history', label: 'History', icon: '📅' },
  ];

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="header-title">
            <span className="header-icon">🔄</span>
            <h1>Async Standup</h1>
          </div>
          <div className="header-user">
            <span className="user-dot"></span>
            <span className="user-name">{user?.name}</span>
            <button className="logout-btn" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {activeTab === 'digest' && <DigestView userId={user?.id} />}
        {activeTab === 'submit' && <StandupForm user={user} onSubmitted={() => setActiveTab('digest')} />}
        {activeTab === 'history' && <HistoryView />}
      </main>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up the async standup shell

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