// DEPLOY_CONFIG: {"triggers": [{"name": "notify-members-on-harvest-logged", "on": "collection.add", "collection": "harvests", "actions": [{"type": "notification", "to": "all_members", "subject": "New harvest logged", "body": "A new harvest has been logged. Check the app for details."}]}], "cron": [{"name": "weekly-garden-status-email-digest", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "weekly-garden-status-email-digest"}}]}
import { useEffect, useMemo, useState } from 'react';
import { useAuth, usePresence, useProxy } from '@deplixo/sdk';
import { GardenGrid } from './components/GardenGrid.jsx';
import { HarvestCalendar } from './components/HarvestCalendar.jsx';
import { MyPlots } from './components/MyPlots.jsx';
import { PlotModal } from './components/PlotModal.jsx';

function PresenceBar({ currentUser }) {
  const { users, update } = usePresence({
    status: 'online',
    name: currentUser?.name,
    avatar: currentUser?.avatar,
    email: currentUser?.email,
  });

  const [presenceState, setPresenceState] = useState('online');
  const [lastActivityAt, setLastActivityAt] = useState(Date.now());

  useEffect(() => {
    const setActive = () => {
      setPresenceState('online');
      setLastActivityAt(Date.now());
      update?.({
        status: 'online',
        lastSeenAt: Date.now(),
      });
    };

    const setIdle = () => {
      setPresenceState('idle');
      update?.({
        status: 'idle',
        lastSeenAt: Date.now(),
      });
    };

    const handleVisibilityChange = () => {
      if (document.hidden) {
        setIdle();
      } else {
        setActive();
      }
    };

    const activityEvents = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll'];
    const idleTimer = setInterval(() => {
      if (Date.now() - lastActivityAt > 60 * 1000) {
        setIdle();
      }
    }, 15000);

    activityEvents.forEach(eventName => window.addEventListener(eventName, setActive, { passive: true }));
    document.addEventListener('visibilitychange', handleVisibilityChange);

    setActive();

    return () => {
      activityEvents.forEach(eventName => window.removeEventListener(eventName, setActive));
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearInterval(idleTimer);
      update?.({ status: 'offline', lastSeenAt: Date.now() });
    };
  }, [lastActivityAt, update]);

  const presentUsers = useMemo(() => {
    return (users || []).filter(user => user?.status !== 'offline');
  }, [users]);

  return (
    <div className="presence-bar">
      <div className="presence-summary">
        <span className={`presence-dot presence-dot-${presenceState}`} />
        <span className="presence-text">
          {presentUsers.length} {presentUsers.length === 1 ? 'member' : 'members'} at the garden
        </span>
      </div>

      <div className="presence-list" aria-label="Members currently at the garden">
        {presentUsers.length === 0 ? (
          <span className="presence-empty">No one is active right now</span>
        ) : (
          presentUsers.map(user => (
            <span
              key={user.id}
              className={`presence-user presence-user-${user.status || 'online'}`}
              title={`${user.name || 'Member'} · ${user.status || 'online'}`}
            >
              {user.avatar ? (
                <img className="presence-avatar" src={user.avatar} alt={user.name || 'Member'} />
              ) : (
                <span className="presence-avatar presence-avatar-fallback">{user.name?.charAt(0)?.toUpperCase() || 'G'}</span>
              )}
              <span className="presence-user-name">{user.name || 'Member'}</span>
              <span className="presence-user-status">{user.status || 'online'}</span>
            </span>
          ))
        )}
      </div>
    </div>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('garden');
  const [selectedPlot, setSelectedPlot] = useState(null);

  const tabs = [
    { id: 'garden', label: '🌱 Garden Map', icon: '🗺️' },
    { id: 'myplots', label: '🥕 My Plots', icon: '🥕' },
    { id: 'calendar', label: '📅 Harvests', icon: '📅' },
  ];

  if (loading) {
    return <div className="auth-loading">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="auth-screen">
        <div className="auth-card">
          <h1 className="auth-title">🌿 Community Garden</h1>
          <p className="auth-subtitle">Sign in with Google to join your members garden.</p>
          <button className="btn btn-primary auth-google-btn" onClick={() => login?.('google')}>
            <span className="auth-google-icon">G</span>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <h1 className="app-title">🌿 Community Garden</h1>
          <p className="app-subtitle">Grow together, harvest together</p>
          <div className="member-bar">
            <div className="member-info">
              {user.avatar ? (
                <img className="member-avatar" src={user.avatar} alt={user.name} />
              ) : (
                <div className="member-avatar member-avatar-fallback">{user.name?.charAt(0)?.toUpperCase() || 'G'}</div>
              )}
              <div className="member-meta">
                <span className="member-name">{user.name}</span>
                <span className="member-email">{user.email}</span>
              </div>
            </div>
            <button className="btn btn-secondary btn-sm" onClick={logout}>Sign Out</button>
          </div>
          <PresenceBar currentUser={user} />
          <WeatherAdviceBar />
        </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="main-content">
        {activeTab === 'garden' && <GardenGrid onSelectPlot={setSelectedPlot} />}
        {activeTab === 'myplots' && <MyPlots onSelectPlot={setSelectedPlot} />}
        {activeTab === 'calendar' && <HarvestCalendar />}
      </main>

      {selectedPlot !== null && (
        <PlotModal plotId={selectedPlot} onClose={() => setSelectedPlot(null)} />
      )}
    </div>
  );
}


function WeatherAdviceBar() {
  const { fetch: proxyFetch, loading: proxyLoading, error: proxyError } = useProxy();
  const [weather, setWeather] = useState(null);
  const [advice, setAdvice] = useState([]);
  const [locationLabel, setLocationLabel] = useState('your area');

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

    const loadWeather = async () => {
      try {
        const forecast = await proxyFetch('https://api.weatherapi.com/v1/forecast.json?key=${WEATHER_KEY}&q=auto:ip&days=3&aqi=no&alerts=no', {
          method: 'GET'
        });

        if (cancelled || !forecast) return;

        setWeather(forecast);
        setLocationLabel(forecast?.location?.name ? `${forecast.location.name}, ${forecast.location.region || forecast.location.country || ''}`.trim().replace(/,$/, '') : 'your area');
      } catch (err) {
        if (!cancelled) {
          setWeather(null);
        }
      }
    };

    loadWeather();

    return () => {
      cancelled = true;
    };
  }, [proxyFetch]);

  useEffect(() => {
    const nextAdvice = [];
    const currentTempC = weather?.current?.temp_c;
    const chanceOfRain = weather?.forecast?.forecastday?.[0]?.day?.daily_chance_of_rain;
    const willFreezeNight = weather?.forecast?.forecastday?.some(day => (day?.day?.mintemp_c ?? 99) <= 1) || false;
    const conditionText = weather?.current?.condition?.text || '';

    if (typeof currentTempC === 'number') {
      if (currentTempC < 5) {
        nextAdvice.push('Too cold for sensitive seedlings: start indoors or wait for warmer soil.');
      } else if (currentTempC <= 12) {
        nextAdvice.push('Good for cool-season crops like lettuce, peas, spinach, and radishes.');
      } else if (currentTempC <= 24) {
        nextAdvice.push('Great planting weather for most vegetables and herbs.');
      } else {
        nextAdvice.push('Warm conditions: water new transplants well and mulch to conserve moisture.');
      }
    }

    if (typeof chanceOfRain === 'number') {
      if (chanceOfRain >= 70) {
        nextAdvice.push('Rain is likely soon: avoid heavy watering and consider direct sowing hardy seeds.');
      } else if (chanceOfRain >= 35) {
        nextAdvice.push('Moderate rain chance: water lightly and watch for damp-soil fungal issues.');
      } else {
        nextAdvice.push('Low rain chance: plan to water after planting if the topsoil dries out.');
      }
    }

    if (willFreezeNight) {
      nextAdvice.push('Frost risk ahead: protect tender plants with covers or delay planting warm-season crops.');
    }

    if (/storm|thunder|snow|sleet|freezing/i.test(conditionText)) {
      nextAdvice.push('Adverse conditions detected: avoid transplanting today if possible.');
    }

    if (nextAdvice.length === 0) {
      nextAdvice.push('Weather data is loading. Check back for planting guidance in a moment.');
    }

    setAdvice(nextAdvice);
  }, [weather]);

  return (
    <section className="weather-advice-bar" aria-label="Weather planting advice">
      <div className="weather-advice-header">
        <div>
          <span className="weather-advice-title">🌦️ Planting forecast</span>
          <p className="weather-advice-location">{locationLabel}</p>
        </div>
        <div className="weather-advice-meta">
          {proxyLoading && <span className="weather-advice-pill">Loading weather...</span>}
          {!proxyLoading && weather?.current && (
            <span className="weather-advice-pill">
              {weather.current.temp_c}°C · {weather.current.condition?.text || 'Current conditions'}
            </span>
          )}
        </div>
      </div>

      {proxyError && !weather ? (
        <p className="weather-advice-error">Weather preview unavailable right now. Please try again later.</p>
      ) : (
        <>
          <ul className="weather-advice-list">
            {advice.map((item, index) => (
              <li key={`${index}-${item}`} className="weather-advice-item">
                {item}
              </li>
            ))}
          </ul>
          {weather?.forecast?.forecastday?.[0] && (
            <div className="weather-advice-forecast">
              {weather.forecast.forecastday.slice(0, 3).map(day => (
                <span key={day.date} className="weather-advice-day">
                  <strong>{day.date}</strong>
                  <span>{day.day?.avgtemp_c}°C avg</span>
                  <span>{day.day?.daily_chance_of_rain || 0}% rain</span>
                </span>
              ))}
            </div>
          )}
        </>
      )}
    </section>
  );
}

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