MileVault/frontend/src/pages/ActivityDetailPage.jsx

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

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: 'rpm', 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 { 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 toggleMetric = (key) => {
    setActiveMetrics(prev =>
      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
    )
  }

  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

  const speed = activity.avg_speed_ms
  const pace = formatPace(speed, activity.sport_type)

  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>

      {/* Summary stats */}
      <div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
        <StatCard label="Distance" value={formatDistance(activity.distance_m)} />
        <StatCard label="Time" value={formatDuration(activity.duration_s)} />
        <StatCard label="Pace" value={pace} />
        <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` : '--'} />
      </div>

      {/* Secondary stats */}
      <div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
        <StatCard label="Max HR" value={formatHeartRate(activity.max_heart_rate)} />
        <StatCard label="Avg Cadence" value={activity.avg_cadence ? `${Math.round(activity.avg_cadence)} rpm` : '--'} />
        <StatCard label="Avg Power" value={activity.avg_power ? `${Math.round(activity.avg_power)} W` : '--'} />
        <StatCard label="NP" value={activity.normalized_power ? `${Math.round(activity.normalized_power)} W` : '--'} />
        <StatCard label="TSS" value={activity.training_stress_score ? Math.round(activity.training_stress_score) : '--'} />
        <StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
      </div>

      {/* Map */}
      <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800" style={{ height: 420 }}>
        <ActivityMap
          polyline={activity.polyline}
          dataPoints={dataPoints}
          hoveredDistance={hoveredDistance}
          sportType={activity.sport_type}
        />
      </div>

      {/* HR Zones */}
      {activity.hr_zones && Object.keys(activity.hr_zones).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">Heart Rate Zones</h3>
          <HRZoneBar zones={activity.hr_zones} />
        </div>
      )}

      {/* Metric selector */}
      <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.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 && (
          <MetricTimeline
            dataPoints={dataPoints}
            activeMetrics={activeMetrics}
            metrics={METRICS}
            onHoverDistance={setHoveredDistance}
            sportType={activity.sport_type}
          />
        )}
      </div>

      {/* Laps */}
      {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} />
        </div>
      )}
    </div>
  )
}