/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * HabitList — Habit management and daily check-offs [components/HabitList.jsx]
 * Heatmap — GitHub-style heatmap calendar [components/Heatmap.jsx]
 * StreakStats — Current and longest streak display [components/StreakStats.jsx]
 * AddHabitModal — Modal for adding/editing habits [components/AddHabitModal.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "habit_completion_notification_check", "schedule": "0 20 * * *", "action": "event", "config": {"event_type": "check_habit_completions_for_notifications"}}, {"name": "weekly_habit_encouragement_generation", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "generate_weekly_habit_encouragement"}}], "triggers": [{"name": "store_habit_notification_on_missed_completion", "on": "collection.add", "collection": "habit_notifications", "actions": [{"type": "broadcast", "channel": "habit_notifications", "event": "notification_created"}]}, {"name": "deliver_weekly_habit_encouragement_email", "on": "collection.add", "collection": "weekly_habit_encouragements", "actions": [{"type": "email", "to": "{{data.user_email}}", "subject": "Your weekly habit encouragement", "body": "{{data.email_body}}"}, {"type": "broadcast", "channel": "weekly_habit_encouragements", "event": "encouragement_created"}]}], "secrets": {"ai_provider_api_key": "SET_IN_DEPLOY_ENV", "ai_provider_base_url": "SET_IN_DEPLOY_ENV", "email_provider_api_key": "SET_IN_DEPLOY_ENV", "email_from_address": "SET_IN_DEPLOY_ENV"}}


import { useEffect, useState } from 'react';
import { useAuth, useCollection } from '@deplixo/sdk';
import { HabitList } from './components/HabitList.jsx';
import { Heatmap } from './components/Heatmap.jsx';
import { StreakStats } from './components/StreakStats.jsx';
import { AddHabitModal } from './components/AddHabitModal.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('today');
  const [showAddModal, setShowAddModal] = useState(false);
  const [selectedHabitId, setSelectedHabitId] = useState(null);
  const habits = useCollection('habits', { personal: true });
  const completions = useCollection('completions', { personal: true });

  useEffect(() => {
    if (!loading && user && !selectedHabitId && habits.items?.length) {
      setSelectedHabitId(habits.items[0].id);
    }
  }, [loading, user, habits.items, selectedHabitId]);

  if (loading) {
    return <div className="app-container"><div className="loading-container"><div className="skeleton-card" /></div></div>;
  }

  if (!user) {
    return (
      <div className="app-container auth-gate">
        <header className="app-header">
          <h1 className="app-title">Habit Forge</h1>
          <p className="app-subtitle">Shape your days, one habit at a time</p>
        </header>
        <main className="auth-card">
          <h2 className="section-title">Sign in to access your personal habits</h2>
          <p className="auth-copy">Use Google authentication to save and sync your habits, streaks, and heatmap across devices.</p>
          <button className="btn-primary auth-button" onClick={login}>Continue with Google</button>
        </main>
      </div>
    );
  }

  const tabs = [
    { id: 'today', label: 'Today', icon: '✓' },
    { id: 'heatmap', label: 'Heatmap', icon: '🟩' },
    { id: 'streaks', label: 'Streaks', icon: '🔥' }
  ];

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="auth-header-row">
          <div>
            <h1 className="app-title">Habit Forge</h1>
            <p className="app-subtitle">Shape your days, one habit at a time</p>
          </div>
          <div className="user-chip">
            {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : <div className="user-avatar fallback">{user.name?.[0] || 'U'}</div>}
            <div className="user-meta">
              <span className="user-name">{user.name}</span>
              <span className="user-email">{user.email}</span>
            </div>
            <button className="btn-secondary logout-button" onClick={logout}>Logout</button>
          </div>
        </div>
      </header>
      <nav className="tab-nav">
        {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 === 'today' && <HabitList habits={habits} completions={completions} onAdd={() => setShowAddModal(true)} onSelectHabit={setSelectedHabitId} />}
        {activeTab === 'heatmap' && <Heatmap habits={habits} completions={completions} selectedHabitId={selectedHabitId} onSelectHabit={setSelectedHabitId} />}
        {activeTab === 'streaks' && <StreakStats habits={habits} completions={completions} />}
      </main>
      {showAddModal && <AddHabitModal habits={habits} onClose={() => setShowAddModal(false)} />}
    </div>
  );
}

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