MileVault/frontend/src/pages/ActivityDetailPage.jsx

import { useParams } from 'react-router-dom'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { useState, useMemo } from 'react'
import api from '../utils/api'
import ActivityMap, { SPEED_GRADIENT } from '../components/activity/ActivityMap'
import MetricTimeline from '../components/activity/MetricTimeline'
import HRZoneBar from '../components/activity/HRZoneBar'
import LapTable from '../components/activity/LapTable'
import SegmentsPanel from '../components/activity/SegmentsPanel'
import RouteLeaderboard from '../components/activity/RouteLeaderboard'
import StatCard from '../components/ui/StatCard'
import {
  formatDuration, formatDistance, formatPace, formatElevation,
  formatHeartRate, formatDateTime, formatCadence, sportIcon,
} from '../utils/format'

// Find the cumulative distance along the track nearest a clicked lat/lng.
function nearestDistance(points, lat, lng) {
  let best = null, bestD = Infinity
  for (const p of points) {
    if (p.latitude == null || p.longitude == null || p.distance_m == null) continue
    const d = (p.latitude - lat) ** 2 + (p.longitude - lng) ** 2
    if (d < bestD) { bestD = d; best = p.distance_m }
  }
  return best
}

const METRICS = [
  { key: 'heart_rate', label: 'Heart Rate', unit: 'bpm', color: '#f43f5e' },
  { key: 'speed_ms', label: 'Pace / Speed', unit: '', color: '#3b82f6' },
  { key: 'altitude_m', label: 'Elevation', unit: 'm', color: '#84cc16' },
  { key: 'cadence', label: 'Cadence', unit: '', color: '#f97316' },
  { key: 'power', label: 'Power', unit: 'W', color: '#a855f7' },
  { key: 'temperature_c', label: 'Temperature', unit: '°C', color: '#06b6d4' },
]

export default function ActivityDetailPage() {
  const { id } = useParams()
  const [activeMetrics, setActiveMetrics] = useState(['heart_rate', 'speed_ms', 'altitude_m'])
  const [hoveredDistance, setHoveredDistance] = useState(null)
  const [mapHeight, setMapHeight] = useState(420)
  const [mapType, setMapType] = useState('street')
  const [colorMode, setColorMode] = useState('speed')
  const [segCreate, setSegCreate] = useState(false)
  const [segPoints, setSegPoints] = useState([])   // [{distance_m}, ...] up to 2
  const [segName, setSegName] = useState('')
  const qc = useQueryClient()

  const { data: activity, isLoading } = useQuery({
    queryKey: ['activity', id],
    queryFn: () => api.get(`/activities/${id}`).then(r => r.data),
  })

  const { data: dataPoints } = useQuery({
    queryKey: ['activity-points', id],
    queryFn: () => api.get(`/activities/${id}/data-points?downsample=3`).then(r => r.data),
    enabled: !!activity,
  })

  const { data: laps } = useQuery({
    queryKey: ['activity-laps', id],
    queryFn: () => api.get(`/activities/${id}/laps`).then(r => r.data),
    enabled: !!activity,
  })

  const { data: actSegments } = useQuery({
    queryKey: ['activity-segments', id],
    queryFn: () => api.get(`/segments/by-activity/${id}`).then(r => r.data),
    enabled: !!activity,
  })

  const { data: lapBests } = useQuery({
    queryKey: ['lap-bests', id],
    queryFn: () => api.get(`/activities/${id}/lap-bests`).then(r => r.data),
    enabled: !!activity?.named_route_id,
  })

  const { data: routeBoard } = useQuery({
    queryKey: ['route-leaderboard', id],
    queryFn: () => api.get(`/activities/${id}/route-leaderboard`).then(r => r.data),
    enabled: !!activity?.named_route_id,
  })

  const handleMapClick = ({ lat, lng }) => {
    if (!segCreate || !dataPoints) return
    const dist = nearestDistance(dataPoints, lat, lng)
    if (dist == null) return
    setSegPoints(prev => (prev.length >= 2 ? [{ distance_m: dist }] : [...prev, { distance_m: dist }]))
  }

  const [segError, setSegError] = useState('')
  const createSegment = async () => {
    const [a, b] = segPoints
    setSegError('')
    try {
      await api.post('/segments/', {
        name: segName.trim() || 'Segment',
        activity_id: Number(id),
        start_distance_m: a.distance_m,
        end_distance_m: b.distance_m,
      })
      setSegCreate(false); setSegPoints([]); setSegName('')
      qc.invalidateQueries({ queryKey: ['activity-segments', id] })
    } catch (e) {
      setSegError(e.response?.data?.detail || 'Failed to create segment')
    }
  }

  const toggleMetric = (key) => {
    setActiveMetrics(prev =>
      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
    )
  }

  // Check which metrics have actual data
  const availableMetrics = useMemo(() => {
    if (!dataPoints?.length) return new Set()
    return new Set(
      METRICS
        .filter(m => dataPoints.some(p => p[m.key] != null && p[m.key] !== 0))
        .map(m => m.key)
    )
  }, [dataPoints])

  if (isLoading) {
    return <div className="flex items-center justify-center h-full"><div className="text-gray-500">Loading activity…</div></div>
  }
  if (!activity) return null

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <span className="text-2xl">{sportIcon(activity.sport_type)}</span>
            <h1 className="text-2xl font-bold text-white">{activity.name}</h1>
          </div>
          <p className="text-sm text-gray-500">{formatDateTime(activity.start_time)}</p>
        </div>
      </div>

      {/* Stats — all on one row */}
      <div className="grid grid-cols-5 lg:grid-cols-10 gap-3">
        <StatCard label="Distance" value={formatDistance(activity.distance_m)} />
        <StatCard label="Time" value={formatDuration(activity.duration_s)} />
        <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type)} />
        <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
        <StatCard label="Avg HR" value={formatHeartRate(activity.avg_heart_rate)} accent="red" />
        <StatCard label="Calories" value={activity.calories ? `${Math.round(activity.calories)} kcal` : '--'} />
        <StatCard label="Max HR" value={formatHeartRate(activity.max_heart_rate)} />
        <StatCard label="Elevation ↓" value={formatElevation(activity.elevation_loss_m)} />
        <StatCard label="Cadence" value={formatCadence(activity.avg_cadence, activity.sport_type)} />
        <StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
      </div>

      {/* HR Zones */}
      {activity.hr_zones && Object.values(activity.hr_zones).some(v => v > 0) && (
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <h3 className="text-sm font-medium text-gray-300 mb-3">Heart Rate Zones</h3>
          <HRZoneBar zones={activity.hr_zones} />
        </div>
      )}

      {/* Map with controls */}
      <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
        {/* Map toolbar */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-800">
          <div className="flex items-center gap-2">
            <span className="text-xs text-gray-500">Map style:</span>
            {['dark', 'street', 'satellite'].map(t => (
              <button
                key={t}
                onClick={() => setMapType(t)}
                className={`text-xs px-2.5 py-1 rounded-full capitalize transition-colors ${
                  mapType === t ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
                }`}
              >
                {t}
              </button>
            ))}
            {dataPoints?.length > 0 && (
              <button
                onClick={() => { setSegCreate(c => !c); setSegPoints([]); setSegName('') }}
                className={`text-xs px-2.5 py-1 rounded-full transition-colors ml-2 ${
                  segCreate ? 'bg-green-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
                }`}
              >
                + Segment
              </button>
            )}
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-gray-500">Route:</span>
            {[['speed', 'Speed'], ['solid', 'Solid']].map(([mode, label]) => (
              <button
                key={mode}
                onClick={() => setColorMode(mode)}
                className={`text-xs px-2.5 py-1 rounded-full transition-colors ${
                  colorMode === mode ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
                }`}
              >
                {label}
              </button>
            ))}
            <span className="text-xs text-gray-500 ml-2">Height:</span>
            {[280, 420, 560].map(h => (
              <button
                key={h}
                onClick={() => setMapHeight(h)}
                className={`text-xs px-2.5 py-1 rounded-full transition-colors ${
                  mapHeight === h ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
                }`}
              >
                {h === 280 ? 'S' : h === 420 ? 'M' : 'L'}
              </button>
            ))}
          </div>
        </div>
        {segCreate && (
          <div className="flex flex-wrap items-center gap-3 px-4 py-2 border-b border-gray-800 bg-green-900/10 text-xs">
            <span className="text-green-400">
              Click two points on the route to mark the segment start and end.
            </span>
            <span className="text-gray-400">
              Start: {segPoints[0] ? `${(segPoints[0].distance_m / 1000).toFixed(2)} km` : '—'}
              {' · '}End: {segPoints[1] ? `${(segPoints[1].distance_m / 1000).toFixed(2)} km` : '—'}
            </span>
            {segPoints.length === 2 && (
              <>
                <input
                  value={segName}
                  onChange={e => setSegName(e.target.value)}
                  placeholder="Segment name"
                  className="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1 text-white focus:outline-none focus:ring-2 focus:ring-green-500"
                />
                <button onClick={createSegment} disabled={!segName.trim()}
                  className="bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white px-3 py-1 rounded-lg">
                  Create
                </button>
              </>
            )}
            {segPoints.length > 0 && (
              <button onClick={() => setSegPoints([])} className="text-gray-400 hover:text-white">Reset</button>
            )}
            {segError && <span className="text-red-400">{segError}</span>}
          </div>
        )}
        <div style={{ height: mapHeight }}>
          <ActivityMap
            polyline={activity.polyline}
            dataPoints={dataPoints}
            hoveredDistance={hoveredDistance}
            sportType={activity.sport_type}
            mapType={mapType}
            colorMode={colorMode}
            onMapClick={segCreate ? handleMapClick : undefined}
          />
        </div>
        {colorMode === 'speed' && (
          <div className="flex items-center gap-2 px-4 py-2 border-t border-gray-800">
            <span className="text-xs text-gray-500">Slow</span>
            <div className="h-2 flex-1 max-w-xs rounded-full" style={{ background: SPEED_GRADIENT }} />
            <span className="text-xs text-gray-500">Fast</span>
          </div>
        )}
      </div>

      {/* Metric timeline */}
      <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-sm font-medium text-gray-300">Activity Timeline</h3>
          <div className="flex flex-wrap gap-2">
            {METRICS.filter(m => availableMetrics.has(m.key)).map(({ key, label, color }) => (
              <button
                key={key}
                onClick={() => toggleMetric(key)}
                className={`text-xs px-3 py-1 rounded-full border transition-colors ${
                  activeMetrics.includes(key)
                    ? 'border-transparent text-white'
                    : 'border-gray-700 text-gray-500 hover:text-gray-300'
                }`}
                style={activeMetrics.includes(key) ? { backgroundColor: color + '33', borderColor: color, color } : {}}
              >
                {label}
              </button>
            ))}
          </div>
        </div>
        {dataPoints && dataPoints.length > 0 ? (
          <MetricTimeline
            dataPoints={dataPoints}
            activeMetrics={activeMetrics.filter(m => availableMetrics.has(m))}
            metrics={METRICS}
            onHoverDistance={setHoveredDistance}
            sportType={activity.sport_type}
          />
        ) : (
          <p className="text-gray-600 text-sm text-center py-8">No timeline data available for this activity</p>
        )}
      </div>

      {/* Laps + Route leaderboard + Segments side by side */}
      {((laps && laps.length > 0) || (actSegments && actSegments.length > 0) || (routeBoard && routeBoard.top?.length > 0)) && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {laps && laps.length > 0 && (
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
              <LapTable laps={laps} sportType={activity.sport_type} lapBests={lapBests} />
            </div>
          )}
          {routeBoard && routeBoard.top?.length > 0 && (
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Route — Top 10 Times</h3>
              <RouteLeaderboard data={routeBoard} />
            </div>
          )}
          {actSegments && actSegments.length > 0 && (
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Segments</h3>
              <SegmentsPanel segments={actSegments} />
            </div>
          )}
        </div>
      )}
    </div>
  )
}