// DEPLOY_CONFIG: {"cron": [{"name": "weekly_running_stats_email_summary", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "weekly_running_stats_email_summary"}}], "triggers": []}
import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, renderChart } from '@deplixo/sdk';
import { RouteMap } from './components/RouteMap.jsx';
import { SavedRoutes } from './components/SavedRoutes.jsx';

function getDistanceKm(route) {
  const raw = route?.distance ?? route?.distanceKm ?? route?.length ?? route?.totalDistance;
  const num = Number(raw);
  return Number.isFinite(num) ? num : 0;
}

function getDateValue(route) {
  const raw = route?.date ?? route?.createdAt ?? route?.updatedAt ?? route?.savedAt;
  const date = raw ? new Date(raw) : null;
  return date && !Number.isNaN(date.getTime()) ? date : null;
}

function getPaceMinutesPerKm(route) {
  if (route?.paceMinutesPerKm != null) {
    const num = Number(route.paceMinutesPerKm);
    return Number.isFinite(num) ? num : null;
  }

  const timeRaw = route?.estimatedTime ?? route?.time ?? route?.duration;
  const distanceKm = getDistanceKm(route);
  const timeMinutes = Number(timeRaw);
  if (Number.isFinite(timeMinutes) && distanceKm > 0) {
    return timeMinutes / distanceKm;
  }

  return null;
}

function formatWeekLabel(date) {
  const d = new Date(date);
  const day = d.getDay();
  const diff = d.getDate() - day + (day === 0 ? -6 : 1);
  const monday = new Date(d);
  monday.setDate(diff);
  monday.setHours(0, 0, 0, 0);
  return monday.toISOString().slice(0, 10);
}

function formatDateLabel(date) {
  return new Date(date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

function AnalyticsCharts({ routes }) {
  const chartIds = {
    runsPerWeek: 'runs-per-week-chart',
    distanceOverTime: 'distance-over-time-chart',
    paceTrends: 'pace-trends-chart',
  };

  const chartData = useMemo(() => {
    const sorted = [...routes]
      .map((route) => ({
        ...route,
        _date: getDateValue(route),
        _distanceKm: getDistanceKm(route),
        _pace: getPaceMinutesPerKm(route),
      }))
      .filter((route) => route._date)
      .sort((a, b) => a._date - b._date);

    const runsByWeek = new Map();
    const distanceByDate = [];
    const paceByDate = [];

    sorted.forEach((route) => {
      const weekKey = formatWeekLabel(route._date);
      runsByWeek.set(weekKey, (runsByWeek.get(weekKey) || 0) + 1);
      distanceByDate.push({ label: formatDateLabel(route._date), value: route._distanceKm });
      if (route._pace != null) {
        paceByDate.push({ label: formatDateLabel(route._date), value: Number(route._pace.toFixed(2)) });
      }
    });

    const weekEntries = Array.from(runsByWeek.entries()).sort((a, b) => a[0].localeCompare(b[0]));

    return {
      runsPerWeek: {
        labels: weekEntries.map(([week]) => week),
        values: weekEntries.map(([, count]) => count),
      },
      distanceOverTime: {
        labels: distanceByDate.map((item) => item.label),
        values: distanceByDate.map((item) => item.value),
      },
      paceTrends: {
        labels: paceByDate.map((item) => item.label),
        values: paceByDate.map((item) => item.value),
      },
    };
  }, [routes]);

  useEffect(() => {
    const renderIfReady = () => {
      const runsCanvas = document.getElementById(chartIds.runsPerWeek);
      const distanceCanvas = document.getElementById(chartIds.distanceOverTime);
      const paceCanvas = document.getElementById(chartIds.paceTrends);

      if (runsCanvas && chartData.runsPerWeek.labels.length > 0) {
        renderChart(runsCanvas, {
          type: 'bar',
          data: {
            labels: chartData.runsPerWeek.labels,
            datasets: [
              {
                label: 'Runs',
                data: chartData.runsPerWeek.values,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
          },
        });
      }

      if (distanceCanvas && chartData.distanceOverTime.labels.length > 0) {
        renderChart(distanceCanvas, {
          type: 'line',
          data: {
            labels: chartData.distanceOverTime.labels,
            datasets: [
              {
                label: 'Distance (km)',
                data: chartData.distanceOverTime.values,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
          },
        });
      }

      if (paceCanvas && chartData.paceTrends.labels.length > 0) {
        renderChart(paceCanvas, {
          type: 'line',
          data: {
            labels: chartData.paceTrends.labels,
            datasets: [
              {
                label: 'Pace (min/km)',
                data: chartData.paceTrends.values,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
          },
        });
      }
    };

    renderIfReady();
  }, [chartData, chartIds.distanceOverTime, chartIds.paceTrends, chartIds.runsPerWeek]);

  const hasAnyData = routes.length > 0;

  return (
    <section className="analytics-section">
      <div className="analytics-header">
        <h2 className="analytics-title">Run Analytics</h2>
        <p className="analytics-copy">Track your weekly activity, distance progression, and pace trends from your saved runs.</p>
      </div>

      {!hasAnyData ? (
        <div className="empty-state analytics-empty">
          <div className="empty-icon">📈</div>
          <h3 className="empty-title">No run data yet</h3>
          <p className="empty-text">Save a few routes to see analytics charts here.</p>
        </div>
      ) : (
        <div className="analytics-grid">
          <div className="analytics-card">
            <div className="analytics-card-header">
              <h3>Runs per week</h3>
            </div>
            {chartData.runsPerWeek.labels.length > 0 ? (
              <canvas id={chartIds.runsPerWeek} className="analytics-canvas" />
            ) : (
              <div className="analytics-no-data">Not enough dated runs to build this chart.</div>
            )}
          </div>

          <div className="analytics-card">
            <div className="analytics-card-header">
              <h3>Distance over time</h3>
            </div>
            {chartData.distanceOverTime.labels.length > 0 ? (
              <canvas id={chartIds.distanceOverTime} className="analytics-canvas" />
            ) : (
              <div className="analytics-no-data">Not enough dated runs to build this chart.</div>
            )}
          </div>

          <div className="analytics-card">
            <div className="analytics-card-header">
              <h3>Pace trends</h3>
            </div>
            {chartData.paceTrends.labels.length > 0 ? (
              <canvas id={chartIds.paceTrends} className="analytics-canvas" />
            ) : (
              <div className="analytics-no-data">Add route pace/duration data to see pace trends.</div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('planner');
  const [editingRoute, setEditingRoute] = useState(null);
  const [loadRoute, setLoadRoute] = useState(null);
  const [location, setLocation] = useState(null);
  const [locationStatus, setLocationStatus] = useState('idle');
  const { items: savedRoutes } = useCollection('routes', { personal: true });

  useEffect(() => {
    if (user) {
      setActiveTab('planner');
    }
  }, [user]);

  useEffect(() => {
    if (!user) return;

    if (!navigator.geolocation) {
      setLocationStatus('unavailable');
      return;
    }

    setLocationStatus('requesting');

    navigator.geolocation.getCurrentPosition(
      (position) => {
        setLocation({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        });
        setLocationStatus('ready');
      },
      () => {
        setLocation(null);
        setLocationStatus('fallback');
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 600000,
      }
    );
  }, [user]);

  const handleLoadRoute = (route) => {
    setLoadRoute(route);
    setActiveTab('planner');
  };

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

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-logo">🏃</div>
          <h1 className="auth-title">RunRoute</h1>
          <p className="auth-copy">Sign in with Google to save and manage your personal running routes.</p>
          <button className="btn btn-primary auth-button" onClick={login}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  const mapCenter = location ? [location.lat, location.lng] : undefined;

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-area">
            <span className="logo-icon">🏃</span>
            <h1 className="app-title">RunRoute</h1>
          </div>
          <p className="app-subtitle">Plan your perfect running route</p>
          <div className="auth-userbar">
            <span className="auth-user">Welcome, {user.name}</span>
            <button className="btn btn-cancel auth-logout" onClick={logout}>
              Sign Out
            </button>
          </div>
        </div>
      </header>

      <nav className="tab-nav">
        <button className={`tab-btn ${activeTab === 'planner' ? 'active' : ''}`} onClick={() => setActiveTab('planner')}>
          <span className="tab-icon">🗺️</span>
          <span className="tab-label">Route Planner</span>
        </button>
        <button className={`tab-btn ${activeTab === 'saved' ? 'active' : ''}`} onClick={() => setActiveTab('saved')}>
          <span className="tab-icon">⭐</span>
          <span className="tab-label">Saved Routes</span>
        </button>
        <button className={`tab-btn ${activeTab === 'analytics' ? 'active' : ''}`} onClick={() => setActiveTab('analytics')}>
          <span className="tab-icon">📈</span>
          <span className="tab-label">Analytics</span>
        </button>
      </nav>

      <main className="main-content">
        {activeTab === 'planner' && (
          <RouteMap
            onSaveRequest={setEditingRoute}
            loadRoute={loadRoute}
            onRouteLoaded={() => setLoadRoute(null)}
            initialCenter={mapCenter}
            userLocation={location}
            locationStatus={locationStatus}
          />
        )}
        {activeTab === 'saved' && <SavedRoutes onLoadRoute={handleLoadRoute} userId={user.id} />}
        {activeTab === 'analytics' && <AnalyticsCharts routes={savedRoutes || []} />}
      </main>
    </div>
  );
}

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