import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import api from '../utils/api'
import {
  formatDuration, formatDistance, formatPace, formatHeartRate,
  formatDate, sportIcon, sportColor,
} from '../utils/format'

const SPORTS = ['all', 'running', 'cycling', 'hiking', 'walking']

export default function ActivitiesPage() {
  const [sport, setSport] = useState('all')
  const [page, setPage] = useState(1)

  const { data: activities, isLoading } = useQuery({
    queryKey: ['activities', sport, page],
    queryFn: () =>
      api.get('/activities/', {
        params: {
          sport_type: sport === 'all' ? undefined : sport,
          page,
          per_page: 20,
        },
      }).then(r => r.data),
  })

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-white">Activities</h1>
        <Link
          to="/upload"
          className="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-lg transition-colors"
        >
          + Import
        </Link>
      </div>

      {/* Sport filter */}
      <div className="flex gap-2 mb-6 flex-wrap">
        {SPORTS.map(s => (
          <button
            key={s}
            onClick={() => { setSport(s); setPage(1) }}
            className={`capitalize text-sm px-3 py-1.5 rounded-full border transition-colors ${
              sport === s
                ? 'bg-blue-600 border-blue-600 text-white'
                : 'border-gray-700 text-gray-400 hover:text-white hover:border-gray-500'
            }`}
          >
            {s === 'all' ? 'All' : `${sportIcon(s)} ${s}`}
          </button>
        ))}
      </div>

      {/* Activity list */}
      {isLoading ? (
        <div className="text-gray-500 text-sm">Loading…</div>
      ) : (
        <div className="space-y-2">
          {activities?.map(activity => (
            <Link
              key={activity.id}
              to={`/activities/${activity.id}`}
              className="flex items-center gap-4 bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-gray-700 rounded-xl p-4 transition-all group"
            >
              {/* Sport indicator */}
              <div
                className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 text-lg"
                style={{ backgroundColor: sportColor(activity.sport_type) + '22' }}
              >
                {sportIcon(activity.sport_type)}
              </div>

              {/* Name + date */}
              <div className="flex-1 min-w-0">
                <p className="font-medium text-white group-hover:text-blue-400 transition-colors truncate">
                  {activity.name}
                </p>
                <p className="text-xs text-gray-500 mt-0.5">{formatDate(activity.start_time)}</p>
              </div>

              {/* Metrics */}
              <div className="hidden sm:flex items-center gap-6 text-sm">
                <div className="text-right">
                  <p className="text-gray-200 font-medium">{formatDistance(activity.distance_m)}</p>
                  <p className="text-xs text-gray-600">distance</p>
                </div>
                <div className="text-right">
                  <p className="text-gray-200 font-medium">{formatDuration(activity.duration_s)}</p>
                  <p className="text-xs text-gray-600">time</p>
                </div>
                <div className="text-right">
                  <p className="text-gray-200 font-medium">{formatPace(activity.avg_speed_ms, activity.sport_type)}</p>
                  <p className="text-xs text-gray-600">pace</p>
                </div>
                <div className="text-right">
                  <p className="text-red-400 font-medium">{formatHeartRate(activity.avg_heart_rate)}</p>
                  <p className="text-xs text-gray-600">avg HR</p>
                </div>
                <div className="text-right">
                  <p className="text-gray-200 font-medium">
                    {activity.elevation_gain_m ? `↑ ${Math.round(activity.elevation_gain_m)}m` : '--'}
                  </p>
                  <p className="text-xs text-gray-600">elev</p>
                </div>
              </div>

              <span className="text-gray-700 group-hover:text-gray-400 transition-colors ml-2">›</span>
            </Link>
          ))}

          {activities?.length === 0 && (
            <div className="text-center py-16 text-gray-600">
              <p className="text-4xl mb-3">🏃</p>
              <p className="text-lg">No activities yet</p>
              <p className="text-sm mt-1">
                <Link to="/upload" className="text-blue-400 hover:underline">Import your Garmin or Strava data</Link> to get started
              </p>
            </div>
          )}
        </div>
      )}

      {/* Pagination */}
      {activities?.length === 20 && (
        <div className="flex justify-center gap-3 mt-6">
          <button
            onClick={() => setPage(p => Math.max(1, p - 1))}
            disabled={page === 1}
            className="px-4 py-2 text-sm bg-gray-800 text-gray-300 rounded-lg disabled:opacity-30 hover:bg-gray-700 transition-colors"
          >
            ← Previous
          </button>
          <span className="px-4 py-2 text-sm text-gray-500">Page {page}</span>
          <button
            onClick={() => setPage(p => p + 1)}
            className="px-4 py-2 text-sm bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
          >
            Next →
          </button>
        </div>
      )}
    </div>
  )
}