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'
import { useUnit } from '../hooks/useUnits'

import { projectToTrack } from '../utils/track'

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 unit = useUnit()
  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 [editingName, setEditingName] = useState(false)
  const [nameInput, setNameInput] = useState('')
  const [nameError, setNameError] = 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: activityRecords } = useQuery({
    queryKey: ['activity-records', id],
    queryFn: () => api.get(`/activities/${id}/records`).then(r => r.data),
    enabled: !!activity,
  })

  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 proj = projectToTrack(dataPoints, lat, lng)
    if (proj?.distance_m == null) return
    const dist = proj.distance_m
    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 startRename = () => {
    setNameInput(activity.name)
    setNameError('')
    setEditingName(true)
  }
  const saveName = async () => {
    const next = nameInput.trim()
    if (!next) { setNameError('Name cannot be empty'); return }
    if (next === activity.name) { setEditingName(false); return }
    setNameError('')
    try {
      await api.patch(`/activities/${id}/name`, { name: next })
      setEditingName(false)
      qc.invalidateQueries({ queryKey: ['activity', id] })
      qc.invalidateQueries({ queryKey: ['activities'] })
    } catch (e) {
      setNameError(e.response?.data?.detail || 'Failed to rename')
    }
  }

  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-4 md:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-2xl">{sportIcon(activity.sport_type)}</span>
            {editingName ? (
              <input
                autoFocus
                value={nameInput}
                onChange={e => setNameInput(e.target.value)}
                onKeyDown={e => {
                  if (e.key === 'Enter') saveName()
                  // Reset to current name so the onBlur save becomes a no-op.
                  if (e.key === 'Escape') { setNameInput(activity.name); setEditingName(false) }
                }}
                onBlur={saveName}
                className="text-2xl font-bold bg-gray-800 text-white rounded px-2 py-0.5 border border-gray-600 focus:border-blue-500 focus:outline-none min-w-0 flex-1"
              />
            ) : (
              <>
                <h1 className="text-2xl font-bold text-white break-words min-w-0">{activity.name}</h1>
                <button
                  onClick={startRename}
                  title="Rename activity"
                  className="text-gray-500 hover:text-white transition-colors shrink-0"
                >
                  ✏️
                </button>
              </>
            )}
          </div>
          {nameError && <p className="text-xs text-red-400 mb-1">{nameError}</p>}
          {activity.original_name && (
            <p className="text-xs text-gray-500 mb-1">
              Originally <span className="text-gray-400">{activity.original_name}</span>
            </p>
          )}
          <p className="text-sm text-gray-500">{formatDateTime(activity.start_time)}</p>
        </div>
      </div>

      {/* Personal records set in this activity */}
      {activityRecords && activityRecords.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-xs text-gray-500 mr-1">🏆 Personal best{activityRecords.length > 1 ? 's' : ''} set here:</span>
          {activityRecords.map(pr => (
            <span
              key={pr.distance_label}
              className="text-xs px-2.5 py-1 rounded-full bg-yellow-500/10 text-yellow-400 border border-yellow-500/30 font-medium"
            >
              {pr.distance_label} · {formatDuration(pr.duration_s)}
            </span>
          ))}
        </div>
      )}

      {/* Stats — all on one row */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-3">
        <StatCard label="Distance" value={formatDistance(activity.distance_m, unit)} />
        <StatCard label="Time" value={formatDuration(activity.moving_time_s ?? activity.duration_s)}
          sub={activity.moving_time_s ? 'moving' : undefined} />
        {activity.moving_time_s != null && Math.abs(activity.moving_time_s - (activity.duration_s ?? 0)) >= 1 && (
          <StatCard label="Elapsed" value={formatDuration(activity.duration_s)} />
        )}
        <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type, unit)} />
        <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m, unit)} />
        <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, unit)} />
        <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} totalSeconds={activity.moving_time_s ?? activity.duration_s} />
        </div>
      )}

      {/* Map and activity timeline side by side, each ~half width on large screens */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
      {/* Map with controls — only when the activity has a GPS track */}
      {activity.polyline && activity.distance_m > 0 ? (
      <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
        {/* Map toolbar */}
        <div className="flex flex-wrap items-center justify-between gap-y-2 px-4 py-2 border-b border-gray-800">
          <div className="flex flex-wrap 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>
            ))}
            <div className="hidden sm:flex items-center gap-2 ml-2">
              <span className="text-xs text-gray-500">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>
        </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] ? formatDistance(segPoints[0].distance_m, unit) : '—'}
              {' · '}End: {segPoints[1] ? formatDistance(segPoints[1].distance_m, unit) : '—'}
            </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>
      ) : (
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-8 flex items-center justify-center text-gray-600 text-sm">
          No GPS track for this activity
        </div>
      )}

      {/* Metric timeline */}
      <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 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.map(m => m.key === 'altitude_m' ? { ...m, unit: unit === 'mi' ? 'ft' : 'm' } : m)}
            onHoverDistance={setHoveredDistance}
            sportType={activity.sport_type}
            unit={unit}
          />
        ) : (
          <p className="text-gray-600 text-sm text-center py-8">No timeline data available for this activity</p>
        )}
      </div>
      </div>

      {/* Laps · Routes · Segments — on one row, each shrinking to fit and
          expanding to fill the width when fewer are present. */}
      {((laps && laps.length > 0) || (actSegments && actSegments.length > 0) || (routeBoard && routeBoard.top?.length > 0)) && (
        <div className="flex flex-wrap gap-4 items-start">
          {laps && laps.length > 0 && (
            <div className="flex-1 min-w-[300px] 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} records={activityRecords} unit={unit} />
            </div>
          )}
          {routeBoard && routeBoard.top?.length > 0 && (
            <div className="flex-1 min-w-[300px] 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="flex-1 min-w-[300px] 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} activityId={Number(id)} />
            </div>
          )}
        </div>
      )}
    </div>
  )
}