// DEPLOY_CONFIG: {"triggers": [{"name": "critical-alert-area-notify", "on": "collection.add", "collection": "critical_alerts", "actions": [{"type": "email", "to": "{{user.email}}", "subject": "Critical alert in your area", "body": "A new critical alert has affected your area. Please check the app for details."}, {"type": "in_app_notification", "to": "{{user.id}}", "title": "Critical alert in your area", "body": "A new critical alert has affected your area."}]}], "collections": [{"name": "alert_history", "permissions": {"read": "authenticated", "write": "server"}}]}
import { useEffect, useMemo, useState } from 'react';
import { useCollection, renderChart } from '@deplixo/sdk';
import { WeatherMap } from './components/WeatherMap.jsx';
import { AlertTimeline } from './components/AlertTimeline.jsx';
import { AlertDetail } from './components/AlertDetail.jsx';

function getShareParamsFromLocation() {
  if (typeof window === 'undefined') return {};

  const params = new URLSearchParams(window.location.search);
  const lat = params.get('lat');
  const lng = params.get('lng');
  const zoom = params.get('zoom');
  const severity = params.get('severity');
  const alertId = params.get('alertId');
  const tab = params.get('tab');

  return {
    lat: lat !== null ? Number(lat) : null,
    lng: lng !== null ? Number(lng) : null,
    zoom: zoom !== null ? Number(zoom) : null,
    severity: severity || '',
    alertId: alertId || '',
    tab: tab === 'timeline' ? 'timeline' : 'map',
  };
}

function buildShareUrl(viewState) {
  if (typeof window === 'undefined') return '';

  const url = new URL(window.location.href);
  const params = url.searchParams;

  params.set('tab', viewState.activeTab || 'map');

  if (typeof viewState.mapCenter?.lat === 'number' && Number.isFinite(viewState.mapCenter.lat)) {
    params.set('lat', String(viewState.mapCenter.lat));
  } else {
    params.delete('lat');
  }

  if (typeof viewState.mapCenter?.lng === 'number' && Number.isFinite(viewState.mapCenter.lng)) {
    params.set('lng', String(viewState.mapCenter.lng));
  } else {
    params.delete('lng');
  }

  if (typeof viewState.mapZoom === 'number' && Number.isFinite(viewState.mapZoom)) {
    params.set('zoom', String(viewState.mapZoom));
  } else {
    params.delete('zoom');
  }

  if (viewState.alertFilterSeverity) {
    params.set('severity', viewState.alertFilterSeverity);
  } else {
    params.delete('severity');
  }

  if (viewState.selectedAlert?.id) {
    params.set('alertId', viewState.selectedAlert.id);
  } else {
    params.delete('alertId');
  }

  return url.toString();
}

function normalizeAlertHistoryEvent(alert) {
  const issuedAt = alert?.sent || alert?.onset || new Date().toISOString();
  const effectiveAt = alert?.onset || alert?.sent || issuedAt;
  const expiresAt = alert?.ends || alert?.expires || null;
  const severity = (alert?.severity || alert?.properties?.severity || 'Unknown').toString();
  const type = (alert?.event || alert?.properties?.event || 'Alert').toString();
  const area = (alert?.areaDesc || alert?.properties?.areaDesc || alert?.area || 'Unknown area').toString();

  return {
    alertId: alert?.id || alert?.properties?.id || `${type}-${issuedAt}-${area}`,
    type,
    severity,
    affectedArea: area,
    issuedAt,
    effectiveAt,
    expiresAt,
    updatedAt: alert?.updated || alert?.properties?.updated || issuedAt,
    source: 'weather.gov',
  };
}

function getHistoryTimestamp(item) {
  const raw = item?.issuedAt || item?.effectiveAt || item?.updatedAt || item?.sent || item?.createdAt || item?.timestamp;
  const time = raw ? new Date(raw).getTime() : NaN;
  return Number.isFinite(time) ? time : 0;
}

function getPastMonthChartData(historyItems) {
  const now = Date.now();
  const monthAgo = now - 31 * 24 * 60 * 60 * 1000;
  const recentItems = (Array.isArray(historyItems) ? historyItems : []).filter(item => getHistoryTimestamp(item) >= monthAgo);

  const typeCounts = recentItems.reduce((acc, item) => {
    const label = (item?.type || item?.event || 'Alert').toString();
    acc[label] = (acc[label] || 0) + 1;
    return acc;
  }, {});

  const labels = Object.keys(typeCounts)
    .sort((a, b) => typeCounts[b] - typeCounts[a])
    .slice(0, 8);

  return {
    labels,
    values: labels.map(label => typeCounts[label] || 0),
    total: recentItems.length,
  };
}

function AlertFrequencyChart({ historyItems, loading }) {
  const canvasRef = useMemo(() => ({ current: null }), []);
  const chartData = useMemo(() => getPastMonthChartData(historyItems), [historyItems]);

  useEffect(() => {
    if (!canvasRef.current || loading || chartData.labels.length === 0) return;

    renderChart(canvasRef.current, {
      type: 'bar',
      data: {
        labels: chartData.labels,
        datasets: [
          {
            label: 'Alerts in past 31 days',
            data: chartData.values,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });
  }, [canvasRef, loading, chartData]);

  return (
    <div className="history-chart-panel">
      <div className="history-chart-header">
        <div>
          <h3 className="history-chart-title">Alert frequency by type</h3>
          <p className="history-chart-subtitle">Stored alert history from the past month</p>
        </div>
        <span className="history-chart-count">{chartData.total} recent record{chartData.total !== 1 ? 's' : ''}</span>
      </div>
      <div className="history-chart-body">
        {loading ? (
          <div className="history-chart-empty">Loading history chart…</div>
        ) : chartData.labels.length > 0 ? (
          <canvas ref={node => { canvasRef.current = node; }} className="history-chart-canvas" />
        ) : (
          <div className="history-chart-empty">No stored history in the past month yet.</div>
        )}
      </div>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState('map');
  const [selectedAlert, setSelectedAlert] = useState(null);
  const [alerts, setAlerts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [mapCenter, setMapCenter] = useState(null);
  const [mapZoom, setMapZoom] = useState(null);
  const [alertFilterSeverity, setAlertFilterSeverity] = useState('');
  const [shareStatus, setShareStatus] = useState('');

  const { items: alertHistoryItems, add: addAlertHistoryItem, loading: alertHistoryLoading } = useCollection('alert_history', { personal: true });

  const tabs = [
    { id: 'map', label: '🗺️ Alert Map', icon: '🗺️' },
    { id: 'timeline', label: '⏱️ Timeline', icon: '⏱️' },
  ];

  const shareUrl = useMemo(() => {
    return buildShareUrl({ activeTab, mapCenter, mapZoom, alertFilterSeverity, selectedAlert });
  }, [activeTab, mapCenter, mapZoom, alertFilterSeverity, selectedAlert]);

  useEffect(() => {
    const shared = getShareParamsFromLocation();
    if (shared.tab) setActiveTab(shared.tab);
    if (typeof shared.lat === 'number' && typeof shared.lng === 'number' && Number.isFinite(shared.lat) && Number.isFinite(shared.lng)) {
      setMapCenter({ lat: shared.lat, lng: shared.lng });
    }
    if (typeof shared.zoom === 'number' && Number.isFinite(shared.zoom)) {
      setMapZoom(shared.zoom);
    }
    if (shared.severity) setAlertFilterSeverity(shared.severity);
  }, []);

  useEffect(() => {
    if (!selectedAlert?.id || typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    params.set('alertId', selectedAlert.id);
    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
  }, [selectedAlert]);

  useEffect(() => {
    if (!Array.isArray(alerts) || alerts.length === 0 || typeof addAlertHistoryItem !== 'function') return;

    const persistHistory = async () => {
      for (const alert of alerts) {
        const normalized = normalizeAlertHistoryEvent(alert);
        const existing = alertHistoryItems?.some?.(item => item.alertId === normalized.alertId || item.id === normalized.alertId);
        if (!existing) {
          try {
            await addAlertHistoryItem(normalized);
          } catch (error) {
            // collection persistence is best-effort; keep UI functional
          }
        }
      }
    };

    persistHistory();
  }, [alerts, addAlertHistoryItem, alertHistoryItems]);

  const historyCount = Array.isArray(alertHistoryItems) ? alertHistoryItems.length : 0;

  const handleCopyShareLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setShareStatus('Link copied');
      window.setTimeout(() => setShareStatus(''), 1800);
    } catch (error) {
      setShareStatus('Copy failed');
      window.setTimeout(() => setShareStatus(''), 1800);
    }
  };

  const handleNativeShare = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: 'StormWatch alert map',
          text: 'Check out this weather alert map view',
          url: shareUrl,
        });
        return;
      }
      await handleCopyShareLink();
    } catch (error) {
      await handleCopyShareLink();
    }
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <h1 className="app-title">⚡ StormWatch</h1>
          <span className="app-subtitle">Severe Weather Alert Map</span>
        </div>
        <div className="header-right">
          <span className="alert-count-badge">
            {alerts.length} Active Alert{alerts.length !== 1 ? 's' : ''}
          </span>
          <span className="alert-history-badge" title="Persisted alert history records">
            {alertHistoryLoading ? 'Syncing history…' : `${historyCount} History Record${historyCount !== 1 ? 's' : ''}`}
          </span>
        </div>
      </header>

      <nav className="tab-nav">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => { setActiveTab(tab.id); setSelectedAlert(null); }}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      <main className="app-main">
        {activeTab === 'map' && (
          <WeatherMap
            alerts={alerts}
            setAlerts={setAlerts}
            loading={loading}
            setLoading={setLoading}
            onSelectAlert={setSelectedAlert}
            mapCenter={mapCenter}
            setMapCenter={setMapCenter}
            mapZoom={mapZoom}
            setMapZoom={setMapZoom}
            alertFilterSeverity={alertFilterSeverity}
            setAlertFilterSeverity={setAlertFilterSeverity}
          />
        )}
        {activeTab === 'timeline' && (
          <div className="timeline-area">
            <AlertFrequencyChart historyItems={alertHistoryItems} loading={alertHistoryLoading} />
            <AlertTimeline alerts={alerts} onSelectAlert={setSelectedAlert} />
          </div>
        )}
      </main>

      <div className="share-link-bar" aria-label="Share current map view">
        <div className="share-link-copy">
          <span className="share-link-label">Share this view</span>
          <input className="share-link-input" value={shareUrl} readOnly />
        </div>
        <div className="share-link-actions">
          <button className="action-btn share-btn share-link-btn" onClick={handleCopyShareLink}>
            Copy link
          </button>
          <button className="action-btn close-action-btn share-link-btn" onClick={handleNativeShare}>
            Share
          </button>
        </div>
        {shareStatus && <span className="share-link-status">{shareStatus}</span>}
      </div>

      {selectedAlert && (
        <AlertDetail alert={selectedAlert} onClose={() => setSelectedAlert(null)} />
      )}
    </div>
  );
}


export async function fetchWeatherAlerts() {
  const res = await fetch('/api/weather-alerts', {
    method: 'GET',
    headers: {
      'Accept': 'application/json'
    }
  });

  if (!res.ok) {
    throw new Error(`Failed to load weather alerts: ${res.status}`);
  }

  return res.json();
}

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