// DEPLOY_CONFIG: {"cron": [{"name": "friday_evening_weekend_plan", "schedule": "0 18 * * 5", "action": "event", "config": {"event_type": "send_weekend_plan_email"}}], "triggers": [{"name": "send_weekend_plan_email_on_event", "on": "event.send_weekend_plan_email", "actions": [{"type": "email", "to": "{{user.email}}", "subject": "Your Friday Evening Weekend Plan", "body": "Hi {{user.name}}, here\u2019s your weekend plan for Friday evening. Enjoy your weekend!"}]}]}
import { useEffect, useMemo, useState } from 'react';
import { useAI, useAuth, useCollection, renderChart } from '@deplixo/sdk';
import { WeekView } from './components/WeekView.jsx';
import { Favorites } from './components/Favorites.jsx';

function ActivityWeatherChart({ historyItems }) {
  const canvasRef = useState(null)[0];
  const [canvasElement, setCanvasElement] = useState(null);

  const aggregatedData = useMemo(() => {
    const map = new Map();

    historyItems.forEach((item) => {
      const key = String(item?.weatherType || item?.weather_type || item?.weather || 'Unknown');
      map.set(key, (map.get(key) || 0) + 1);
    });

    return Array.from(map.entries())
      .sort((a, b) => b[1] - a[1])
      .map(([label, value]) => ({ label, value }));
  }, [historyItems]);

  useEffect(() => {
    if (canvasElement && aggregatedData.length > 0) {
      renderChart(canvasElement, {
        type: 'bar',
        data: {
          labels: aggregatedData.map((d) => d.label),
          datasets: [
            {
              label: 'Activities Completed',
              data: aggregatedData.map((d) => d.value),
            },
          ],
        },
      });
    }
  }, [aggregatedData, canvasElement]);

  return (
    <section className="chart-card">
      <div className="section-header">
        <h2>Activities by Weather Type</h2>
        <p>See which weather conditions led to the most completed activities.</p>
      </div>

      {aggregatedData.length > 0 ? (
        <div className="chart-wrap">
          <canvas ref={setCanvasElement} />
        </div>
      ) : (
        <div className="empty-state chart-empty">
          <div className="empty-icon">📊</div>
          <h3>No activity history yet</h3>
          <p>Complete activities on different weather days to build your chart here.</p>
        </div>
      )}
    </section>
  );
}

function App() {
  const { user, loading, logout } = useAuth();
  const { items: historyItems } = useCollection('activity_history', { personal: true });
  const [activeTab, setActiveTab] = useState('planner');

  if (loading) {
    return (
      <div className="app-shell">
        <main className="main-content auth-gate">
          <div className="empty-state">
            <div className="empty-icon">☁️</div>
            <h3>Signing you in...</h3>
            <p>Setting up your personalized activity history.</p>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-area">
            <span className="logo-icon">🌤️</span>
            <h1 className="app-title">Activity Planner</h1>
          </div>
          <p className="app-subtitle">Weather-smart activity suggestions for your week</p>
          <div className="auth-bar">
            {user ? (
              <>
                <div className="auth-user">
                  {user.avatar ? <img className="auth-avatar" src={user.avatar} alt={user.name} /> : <span className="auth-avatar-fallback">👤</span>}
                  <span className="auth-user-name">{user.name}</span>
                </div>
                <button className="auth-btn logout-btn" onClick={logout}>
                  Sign Out
                </button>
              </>
            ) : (
              <div className="auth-user">
                <span className="auth-badge">Google sign-in enabled</span>
              </div>
            )}
          </div>
        </div>
      </header>

      <nav className="tab-nav">
        <button
          className={`tab-btn ${activeTab === 'planner' ? 'active' : ''}`}
          onClick={() => setActiveTab('planner')}
        >
          <span className="tab-icon">📅</span>
          <span>Week Plan</span>
        </button>
        <button
          className={`tab-btn ${activeTab === 'favorites' ? 'active' : ''} ${!user ? 'disabled' : ''}`}
          onClick={() => user && setActiveTab('favorites')}
          disabled={!user}
          title={!user ? 'Sign in to view personal favorites and history' : 'Favorites'}
        >
          <span className="tab-icon">⭐</span>
          <span>Favorites</span>
        </button>
      </nav>

      <main className="main-content">
        {!user ? (
          <section className="auth-gate-card">
            <div className="empty-state">
              <div className="empty-icon">🔐</div>
              <h3>Sign in to save favorites</h3>
              <p>
                Google authentication is required for personal activity history, saved favorites,
                and syncing your recommendations across devices.
              </p>
            </div>
          </section>
        ) : (
          <>
            <WeekendActivityPlan historyItems={historyItems || []} />
            <ActivityWeatherChart historyItems={historyItems || []} />
            {activeTab === 'planner' && <WeekView />}
            {activeTab === 'favorites' && <Favorites />}
          </>
        )}
      </main>
    </div>
  );
}


function WeekendActivityPlan({ historyItems }) {
  const { generate, loading, error } = useAI();
  const [plan, setPlan] = useState(null);
  const [planLoading, setPlanLoading] = useState(false);
  const [planError, setPlanError] = useState('');
  const [refreshKey, setRefreshKey] = useState(0);

  const historySummary = useMemo(() => {
    const weatherCounts = new Map();
    const activityCounts = new Map();

    historyItems.forEach((item) => {
      const weather = String(item?.weatherType || item?.weather_type || item?.weather || 'Unknown');
      const activity = String(item?.activityType || item?.activity_type || item?.activity || item?.title || 'Activity');
      weatherCounts.set(weather, (weatherCounts.get(weather) || 0) + 1);
      activityCounts.set(activity, (activityCounts.get(activity) || 0) + 1);
    });

    return {
      total: historyItems.length,
      topWeather: Array.from(weatherCounts.entries()).sort((a, b) => b[1] - a[1]).slice(0, 3),
      topActivities: Array.from(activityCounts.entries()).sort((a, b) => b[1] - a[1]).slice(0, 5),
    };
  }, [historyItems]);

  useEffect(() => {
    let cancelled = false;

    async function buildPlan() {
      setPlanLoading(true);
      setPlanError('');

      try {
        const system = 'You are an expert weekend activity planner. Create concise, personalized Saturday and Sunday activity suggestions using weather forecast and user history. Return valid JSON only.';
        const userPrompt = JSON.stringify({
          request: 'Generate a personalized weekend activity plan for Saturday and Sunday.',
          userHistory: historySummary,
          weatherForecast: 'Use the current forecast data available in the app context to recommend weather-appropriate activities.',
          instructions: [
            'Include a title, short overview, Saturday plan, Sunday plan, and 3 quick tips.',
            'Base recommendations on the user\'s past preferences from history items.',
            'Make the plan practical, upbeat, and specific to the forecast.',
            'Return JSON with keys: title, overview, saturday, sunday, tips.',
            'For saturday and sunday, include keys: weatherFit, morning, afternoon, evening.',
            'For tips, return an array of 3 strings.'
          ],
        });

        const result = await generate({ system, user: userPrompt, json: true });
        if (!cancelled && result) {
          setPlan(result);
        }
      } catch (err) {
        if (!cancelled) {
          setPlanError('Could not generate a weekend plan right now.');
        }
      } finally {
        if (!cancelled) {
          setPlanLoading(false);
        }
      }
    }

    buildPlan();

    return () => {
      cancelled = true;
    };
  }, [generate, refreshKey, historySummary]);

  const fallbackTips = [
    'Try activities that match the best weather window.',
    'Use your most common activity types as a starting point.',
    'Keep one flexible indoor backup plan ready.'
  ];

  return (
    <section className="weekend-plan-card">
      <div className="section-header plan-header">
        <div>
          <h2>AI Weekend Plan</h2>
          <p>Personalized Saturday and Sunday ideas based on your forecast and activity history.</p>
        </div>
        <button className="auth-btn plan-refresh-btn" onClick={() => setRefreshKey((k) => k + 1)}>
          Refresh Plan
        </button>
      </div>

      {planLoading || loading ? (
        <div className="empty-state plan-loading">
          <div className="empty-icon">🤖</div>
          <h3>Generating your weekend plan...</h3>
          <p>Analyzing your activity history and the forecast to tailor suggestions.</p>
        </div>
      ) : planError || error ? (
        <div className="plan-error empty-state">
          <div className="empty-icon">⚠️</div>
          <h3>Weekend plan unavailable</h3>
          <p>{planError || 'AI planning is temporarily unavailable.'}</p>
        </div>
      ) : (
        <div className="plan-grid">
          <article className="plan-summary">
            <div className="plan-badge">AI Personalized</div>
            <h3>{plan?.title || 'Your Weekend Activity Plan'}</h3>
            <p>{plan?.overview || 'A weekend plan tailored to the weather forecast and your most common activity preferences.'}</p>
            <div className="history-snapshot">
              <h4>Your recent patterns</h4>
              <p>
                {historySummary.total > 0
                  ? `Top weather match: ${historySummary.topWeather[0]?.[0] || 'Unknown'} · Favorite activities: ${historySummary.topActivities.map((item) => item[0]).join(', ')}`
                  : 'No activity history yet, so this plan uses the forecast with general weekend suggestions.'}
              </p>
            </div>
          </article>

          <div className="plan-day-cards">
            <article className="plan-day-card">
              <h4>Saturday</h4>
              <p className="plan-weather-fit">{plan?.saturday?.weatherFit || 'Weather-fit recommendations for Saturday.'}</p>
              <ul>
                <li><strong>Morning:</strong> {plan?.saturday?.morning || 'Start with a flexible morning activity.'}</li>
                <li><strong>Afternoon:</strong> {plan?.saturday?.afternoon || 'Choose an activity that matches the best weather window.'}</li>
                <li><strong>Evening:</strong> {plan?.saturday?.evening || 'Wind down with a low-effort evening plan.'}</li>
              </ul>
            </article>

            <article className="plan-day-card">
              <h4>Sunday</h4>
              <p className="plan-weather-fit">{plan?.sunday?.weatherFit || 'Weather-fit recommendations for Sunday.'}</p>
              <ul>
                <li><strong>Morning:</strong> {plan?.sunday?.morning || 'Start the day with one of your favorite activity types.'}</li>
                <li><strong>Afternoon:</strong> {plan?.sunday?.afternoon || 'Use the forecast to pick an outdoor or indoor backup.'}</li>
                <li><strong>Evening:</strong> {plan?.sunday?.evening || 'End with something restorative and simple.'}</li>
              </ul>
            </article>
          </div>

          <article className="plan-tips">
            <h4>Quick tips</h4>
            <ul>
              {(Array.isArray(plan?.tips) && plan.tips.length > 0 ? plan.tips : fallbackTips).map((tip, index) => (
                <li key={index}>{tip}</li>
              ))}
            </ul>
          </article>
        </div>
      )}
    </section>
  );
}

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