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, formatCadence, 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: '', 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('dark')

  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]
    )
  }

  // 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>

      {/* Primary 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={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` : '--'} />
      </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="Elevation ↓" value={formatElevation(activity.elevation_loss_m)} />
        <StatCard label="Cadence" value={formatCadence(activity.avg_cadence, activity.sport_type)} />
        <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="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
      </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>
            ))}
          </div>
          <div className="flex items-center gap-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 style={{ height: mapHeight }}>
          <ActivityMap
            polyline={activity.polyline}
            dataPoints={dataPoints}
            hoveredDistance={hoveredDistance}
            sportType={activity.sport_type}
            mapType={mapType}
          />
        </div>
      </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>
      )}

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