MileVault/frontend/src/pages/RecordsPage.jsx

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import { format } from 'date-fns'
import api from '../utils/api'
import { formatDuration, formatDate } from '../utils/format'

const SPORTS = ['running', 'cycling', 'swimming']

const DISTANCE_ORDER = [
  '400m', '800m', '1k', '1 mile', '3k', '5k', '10k',
  'Half marathon', 'Marathon', '50k', '100k',
]

export default function RecordsPage() {
  const [sport, setSport] = useState('running')
  const [selectedDistance, setSelectedDistance] = useState(null)

  const { data: records } = useQuery({
    queryKey: ['records', sport],
    queryFn: () => api.get('/records/', { params: { sport_type: sport } }).then(r => r.data),
  })

  const { data: history } = useQuery({
    queryKey: ['record-history', selectedDistance, sport],
    queryFn: () =>
      api.get(`/records/history/${encodeURIComponent(selectedDistance)}`, {
        params: { sport_type: sport },
      }).then(r => r.data),
    enabled: !!selectedDistance,
  })

  // Sort by standard distance order
  const sortedRecords = records?.slice().sort((a, b) => {
    const ai = DISTANCE_ORDER.indexOf(a.distance_label)
    const bi = DISTANCE_ORDER.indexOf(b.distance_label)
    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)
  })

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold text-white">Personal Records</h1>

      {/* Sport selector */}
      <div className="flex gap-2">
        {SPORTS.map(s => (
          <button
            key={s}
            onClick={() => { setSport(s); setSelectedDistance(null) }}
            className={`capitalize text-sm px-4 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'
            }`}
          >
            {s}
          </button>
        ))}
      </div>

      {sortedRecords?.length === 0 && (
        <div className="text-center py-16 text-gray-600">
          <p className="text-4xl mb-3">🏆</p>
          <p>No records yet — import activities to track your best times</p>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Records table */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
                <th className="text-left px-4 py-3 font-medium">Distance</th>
                <th className="text-right px-4 py-3 font-medium">Best time</th>
                <th className="text-right px-4 py-3 font-medium">Date</th>
                <th className="px-4 py-3" />
              </tr>
            </thead>
            <tbody>
              {sortedRecords?.map(rec => (
                <tr
                  key={rec.id}
                  onClick={() => setSelectedDistance(rec.distance_label)}
                  className={`border-b border-gray-800/50 cursor-pointer transition-colors ${
                    selectedDistance === rec.distance_label
                      ? 'bg-blue-900/20'
                      : 'hover:bg-gray-800/40'
                  }`}
                >
                  <td className="px-4 py-3 font-medium text-white">{rec.distance_label}</td>
                  <td className="px-4 py-3 text-right font-mono text-yellow-400 font-semibold">
                    {formatDuration(rec.duration_s)}
                  </td>
                  <td className="px-4 py-3 text-right text-gray-400 text-xs">
                    {formatDate(rec.achieved_at)}
                  </td>
                  <td className="px-4 py-3 text-right">
                    <Link
                      to={`/activities/${rec.activity_id}`}
                      onClick={e => e.stopPropagation()}
                      className="text-xs text-blue-400 hover:underline"
                    >
                      View →
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Progress chart */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          {selectedDistance && history ? (
            <>
              <h3 className="text-sm font-medium text-gray-300 mb-1">
                {selectedDistance} progression
              </h3>
              <p className="text-xs text-gray-600 mb-4">Lower is faster</p>
              {history.length > 1 ? (
                <ResponsiveContainer width="100%" height={220}>
                  <LineChart
                    data={history.map(h => ({
                      date: h.achieved_at,
                      time: h.duration_s,
                    }))}
                    margin={{ top: 4, right: 4, bottom: 4, left: 8 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
                    <XAxis
                      dataKey="date"
                      tick={{ fontSize: 10, fill: '#6b7280' }}
                      axisLine={false}
                      tickLine={false}
                      tickFormatter={d => format(new Date(d), 'MMM yy')}
                    />
                    <YAxis
                      tick={{ fontSize: 10, fill: '#6b7280' }}
                      axisLine={false}
                      tickLine={false}
                      width={40}
                      tickFormatter={formatDuration}
                      reversed
                    />
                    <Tooltip
                      contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
                      labelFormatter={d => format(new Date(d), 'MMM d, yyyy')}
                      formatter={v => [formatDuration(v), 'Time']}
                    />
                    <Line
                      type="monotone"
                      dataKey="time"
                      stroke="#fbbf24"
                      strokeWidth={2}
                      dot={{ fill: '#fbbf24', r: 4 }}
                      isAnimationActive={false}
                    />
                  </LineChart>
                </ResponsiveContainer>
              ) : (
                <div className="flex items-center justify-center h-48 text-gray-600 text-sm">
                  Only one record — complete more activities to see progression
                </div>
              )}
            </>
          ) : (
            <div className="flex items-center justify-center h-full text-gray-600 text-sm">
              Select a distance to see your progression
            </div>
          )}
        </div>
      </div>
    </div>
  )
}