/* @component-map
 * App — Main container, layout shell [app.jsx]
 * WeatherDashboard — Current conditions + forecast display [components/WeatherDashboard.jsx]
 * SearchBar — City search with geocoding [components/SearchBar.jsx]
 * CurrentWeather — Current conditions card with animated icon [components/CurrentWeather.jsx]
 * ForecastCard — Individual forecast day card [components/ForecastCard.jsx]
 * WeatherIcon — Animated SVG weather icon [components/WeatherIcon.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "daily_weather_forecast_email", "schedule": "0 7 * * *", "action": "event", "config": {"event_type": "fetch_daily_weather_and_email_forecast"}}], "triggers": [{"name": "severe_weather_alert", "on": "collection.add", "collection": "weather_alerts", "actions": [{"type": "email", "to": "subscribed_users", "subject": "Severe Weather Alert", "body": "Severe weather conditions have been detected. Please check the dashboard for immediate updates."}]}, {"name": "dashboard_share_invite", "on": "collection.add", "collection": "dashboard_shares", "actions": [{"type": "email", "to": "share_recipient", "subject": "Dashboard Access Shared With You", "body": "A dashboard link has been shared with you. Use the provided secure URL and permissions to access it."}]}]}


import { useState, useEffect } from 'react';
import { WeatherDashboard } from './components/WeatherDashboard.jsx';

function App() {
  useEffect(() => {
    document.title = "Keyton's Weather Page";
  }, []);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-group">
            <svg className="logo-icon" viewBox="0 0 32 32" width="32" height="32">
              <circle cx="16" cy="14" r="6" fill="var(--accent)" opacity="0.9"/>
              <line x1="16" y1="3" x2="16" y2="6" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="16" y1="22" x2="16" y2="25" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="7" y1="14" x2="4" y2="14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="28" y1="14" x2="25" y2="14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="9.3" y1="7.3" x2="7.2" y2="5.2" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="24.8" y1="22.8" x2="22.7" y2="20.7" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="22.7" y1="7.3" x2="24.8" y2="5.2" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <line x1="7.2" y1="22.8" x2="9.3" y2="20.7" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              <ellipse cx="22" cy="24" rx="8" ry="5" fill="var(--primary)" opacity="0.7"/>
            </svg>
            <h1 className="app-title">Keyton's Weather Page</h1>
          </div>
          <p className="app-subtitle">Real-time conditions & forecast</p>
        </div>
      </header>
      <main className="app-main">
        <WeatherDashboard />
      </main>
      <footer className="app-footer">
        <p>Powered by Open-Meteo · Keyton's Weather Page</p>
      </footer>
    </div>
  );
}


export function createShareableDashboardUrl({ baseUrl, dashboardId, accessToken }) {
  const url = new URL(`/dashboard/${encodeURIComponent(dashboardId)}`, baseUrl);
  if (accessToken) url.searchParams.set('access_token', accessToken);
  return url.toString();
}

export async function fetchSharePermissions(dashboardId) {
  const res = await fetch(`/api/dashboards/${encodeURIComponent(dashboardId)}/share-permissions`, {
    credentials: 'include'
  });
  if (!res.ok) throw new Error('Failed to load share permissions');
  return res.json();
}

export async function createDashboardShare(dashboardId, permissions) {
  const res = await fetch(`/api/dashboards/${encodeURIComponent(dashboardId)}/shares`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    body: JSON.stringify({ permissions })
  });
  if (!res.ok) throw new Error('Failed to create dashboard share');
  return res.json();
}

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