MileVault/frontend/src/pages/HealthPage.jsx

import { useState, useMemo } from 'react'
import { useQuery, keepPreviousData } from '@tanstack/react-query'
import {
  AreaChart, Area, BarChart, Bar, ReferenceLine,
  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from 'recharts'
import { format, subDays } from 'date-fns'
import api from '../utils/api'
import { formatSleep } from '../utils/format'

const RANGES = [
  { label: '1W', days: 7 },
  { label: '2W', days: 14 },
  { label: '1M', days: 30 },
  { label: '3M', days: 90 },
  { label: '6M', days: 180 },
  { label: '1Y', days: 365 },
]

const tooltipStyle = {
  background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12,
}

// Normalise any date string to YYYY-MM-DD so XAxis values and ReferenceLine x match.
const d10 = (s) => (s || '').slice(0, 10)

// ── Daily Snapshot ──────────────────────────────────────────────────────────

function fmtTime(ts) {
  if (!ts) return '--'
  return new Date(ts).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
}

function IntradayHrChart({ values }) {
  if (!values?.length) return null
  const data = values.map(([ts, hr]) => ({ t: ts, hr }))
  return (
    <ResponsiveContainer width="100%" height={100}>
      <AreaChart data={data} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
        <defs>
          <linearGradient id="grad-intraday-hr" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%"  stopColor="#f43f5e" stopOpacity={0.3} />
            <stop offset="95%" stopColor="#f43f5e" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis dataKey="t" tick={{ fontSize: 9, fill: '#6b7280' }} axisLine={false} tickLine={false}
          tickFormatter={ts => format(new Date(ts), 'HH:mm')}
          interval={Math.max(1, Math.floor(data.length / 6))} />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
          tickFormatter={v => Math.round(v)} domain={['auto', 'auto']} />
        <Tooltip contentStyle={tooltipStyle}
          labelFormatter={ts => format(new Date(ts), 'HH:mm')}
          formatter={v => [`${Math.round(v)} bpm`, 'HR']} />
        <Area type="monotone" dataKey="hr" stroke="#f43f5e" strokeWidth={1.5}
          fill="url(#grad-intraday-hr)" dot={false} isAnimationActive={false} connectNulls={false} />
      </AreaChart>
    </ResponsiveContainer>
  )
}

function SleepStagesBar({ deep, light, rem, awake }) {
  const total = (deep || 0) + (light || 0) + (rem || 0) + (awake || 0)
  if (!total) return null
  const pct = s => `${((s || 0) / total * 100).toFixed(1)}%`
  return (
    <div className="flex rounded-full overflow-hidden h-2.5 w-full">
      <div style={{ width: pct(deep), backgroundColor: '#6366f1' }} />
      <div style={{ width: pct(rem), backgroundColor: '#8b5cf6' }} />
      <div style={{ width: pct(light), backgroundColor: '#a78bfa' }} />
      <div style={{ width: pct(awake), backgroundColor: '#374151' }} />
    </div>
  )
}

function HrvBadge({ status }) {
  if (!status) return null
  const palette = {
    balanced:   'text-green-400  bg-green-400/10  border-green-400/30',
    unbalanced: 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30',
    low:        'text-orange-400 bg-orange-400/10 border-orange-400/30',
    poor:       'text-red-400    bg-red-400/10    border-red-400/30',
  }
  const cls = palette[status.toLowerCase()] || 'text-gray-400 bg-gray-400/10 border-gray-400/30'
  return <span className={`text-xs px-2 py-0.5 rounded-full border ${cls}`}>{status}</span>
}

function NavArrow({ onClick, disabled, children }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400
                 hover:text-white hover:bg-gray-800 disabled:opacity-20 disabled:cursor-default
                 transition-colors text-base font-medium"
    >
      {children}
    </button>
  )
}

function DailySnapshot({ day, avg30, intradayHr, onOlder, onNewer, hasOlder, hasNewer }) {
  if (!day) return (
    <div className="text-center py-10 text-gray-600">
      <p className="text-3xl mb-2">📊</p>
      <p>No health data yet</p>
      <p className="text-sm mt-1">Import a Garmin export to see your daily snapshot</p>
    </div>
  )

  const dateLabel = day.date ? format(new Date(day.date), 'EEEE, d MMMM yyyy') : 'Latest'
  const hasSleepStages = day.sleep_deep_s || day.sleep_light_s || day.sleep_rem_s
  const stepsGoal = 10000
  const stepsPct = day.steps ? Math.min(100, Math.round(day.steps / stepsGoal * 100)) : 0

  const stressLabel = !day.avg_stress ? null
    : day.avg_stress < 25 ? 'Restful'
    : day.avg_stress < 50 ? 'Low'
    : day.avg_stress < 75 ? 'Medium' : 'High'
  const stressColor = !day.avg_stress ? 'text-white'
    : day.avg_stress < 25 ? 'text-green-400'
    : day.avg_stress < 50 ? 'text-yellow-400'
    : day.avg_stress < 75 ? 'text-orange-400' : 'text-red-400'

  return (
    <div className="space-y-4">

      {/* Header + arrows */}
      <div className="flex items-center gap-3">
        <NavArrow onClick={onOlder} disabled={!hasOlder}>←</NavArrow>
        <div className="min-w-0">
          <p className="text-xs text-gray-500 uppercase tracking-wide">Daily snapshot</p>
          <h2 className="text-xl font-semibold text-white leading-tight">{dateLabel}</h2>
        </div>
        <NavArrow onClick={onNewer} disabled={!hasNewer}>→</NavArrow>
      </div>

      {/* Sleep (wide) + Heart / HRV */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">

        <div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium text-gray-300">Sleep</h3>
            {day.sleep_score != null && (
              <span className="text-xs px-2 py-0.5 rounded-full border border-indigo-400/30 bg-indigo-400/10 text-indigo-300">
                Score {Math.round(day.sleep_score)}
              </span>
            )}
          </div>
          <div className="flex items-end gap-3">
            <span className="text-4xl font-bold text-white tracking-tight">
              {formatSleep(day.sleep_duration_s)}
            </span>
            {day.sleep_start && day.sleep_end && (
              <span className="text-sm text-gray-500 pb-1">
                {fmtTime(day.sleep_start)} → {fmtTime(day.sleep_end)}
              </span>
            )}
          </div>
          {hasSleepStages ? (
            <>
              <SleepStagesBar
                deep={day.sleep_deep_s} light={day.sleep_light_s}
                rem={day.sleep_rem_s} awake={day.sleep_awake_s}
              />
              <div className="flex flex-wrap gap-x-5 gap-y-1.5">
                {[
                  ['Deep',  day.sleep_deep_s,  '#6366f1'],
                  ['REM',   day.sleep_rem_s,   '#8b5cf6'],
                  ['Light', day.sleep_light_s, '#a78bfa'],
                  ['Awake', day.sleep_awake_s, '#4b5563'],
                ].map(([label, secs, color]) => secs ? (
                  <div key={label} className="flex items-center gap-1.5">
                    <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: color }} />
                    <span className="text-xs text-gray-400">
                      {label} <span className="text-white">{formatSleep(secs)}</span>
                    </span>
                  </div>
                ) : null)}
              </div>
            </>
          ) : !day.sleep_duration_s ? (
            <p className="text-sm text-gray-600">No sleep data</p>
          ) : null}
        </div>

        <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-4">
          <h3 className="text-sm font-medium text-gray-300">Heart & HRV</h3>
          <div>
            <p className="text-xs text-gray-500 mb-0.5">Resting HR</p>
            <div className="flex items-baseline gap-1.5">
              <span className="text-3xl font-bold text-rose-400">
                {day.resting_hr ? Math.round(day.resting_hr) : '--'}
              </span>
              <span className="text-sm text-gray-500">bpm</span>
            </div>
            {avg30?.resting_hr && day.resting_hr && (
              <p className="text-xs text-gray-500 mt-0.5">
                30d avg {Math.round(avg30.resting_hr)} bpm
                {day.resting_hr < avg30.resting_hr
                  ? <span className="text-green-400 ml-1">↓</span>
                  : day.resting_hr > avg30.resting_hr
                  ? <span className="text-red-400 ml-1">↑</span>
                  : null}
              </p>
            )}
          </div>
          <div>
            <p className="text-xs text-gray-500 mb-0.5">HRV</p>
            <div className="flex items-baseline gap-1.5 flex-wrap">
              <span className="text-3xl font-bold text-violet-400">
                {day.hrv_nightly_avg ? Math.round(day.hrv_nightly_avg) : '--'}
              </span>
              <span className="text-sm text-gray-500">ms</span>
              <HrvBadge status={day.hrv_status} />
            </div>
          </div>
          {day.avg_hr_day && (
            <div>
              <p className="text-xs text-gray-500 mb-0.5">Avg HR (day)</p>
              <div className="flex items-baseline gap-1.5">
                <span className="text-xl font-semibold text-orange-400">{Math.round(day.avg_hr_day)}</span>
                {day.max_hr_day && <span className="text-xs text-gray-500">/ {Math.round(day.max_hr_day)} max bpm</span>}
              </div>
            </div>
          )}
          {day.weight_kg && (
            <div>
              <p className="text-xs text-gray-500 mb-0.5">Weight</p>
              <div className="flex items-baseline gap-1.5 flex-wrap">
                <span className="text-xl font-semibold text-emerald-400">{day.weight_kg.toFixed(1)}</span>
                <span className="text-xs text-gray-500">kg</span>
                {day.body_fat_pct && <span className="text-xs text-gray-500">{day.body_fat_pct.toFixed(1)}% fat</span>}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 24-hour heart rate chart */}
      {intradayHr?.length > 0 && (
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-medium text-gray-300">24-hour Heart Rate</h3>
            {day.avg_hr_day && (
              <span className="text-xs text-gray-500">avg {Math.round(day.avg_hr_day)} bpm</span>
            )}
          </div>
          <IntradayHrChart values={intradayHr} />
        </div>
      )}

      {/* Activity strip */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">

        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <p className="text-xs text-gray-500 mb-1">Steps</p>
          <div className="flex items-baseline gap-1 mb-2">
            <span className="text-2xl font-bold text-yellow-400">
              {day.steps ? day.steps.toLocaleString() : '--'}
            </span>
          </div>
          {day.steps ? (
            <>
              <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
                <div className="h-full bg-yellow-400 rounded-full transition-all"
                  style={{ width: `${stepsPct}%` }} />
              </div>
              <p className="text-xs text-gray-600 mt-1">{stepsPct}% of {stepsGoal.toLocaleString()}</p>
            </>
          ) : null}
          {day.floors_climbed
            ? <p className="text-xs text-gray-500 mt-1">{day.floors_climbed} floors</p>
            : null}
        </div>

        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <p className="text-xs text-gray-500 mb-1">Calories</p>
          <div className="flex items-baseline gap-1">
            <span className="text-2xl font-bold text-white">
              {day.total_calories
                ? Math.round(day.total_calories)
                : day.active_calories ? Math.round(day.active_calories) : '--'}
            </span>
            <span className="text-xs text-gray-500">kcal</span>
          </div>
          {day.active_calories && day.total_calories && (
            <p className="text-xs text-gray-500 mt-1">Active {Math.round(day.active_calories)} kcal</p>
          )}
        </div>

        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <p className="text-xs text-gray-500 mb-1">Stress</p>
          <div className="flex items-baseline gap-1">
            <span className={`text-2xl font-bold ${stressColor}`}>
              {day.avg_stress ? Math.round(day.avg_stress) : '--'}
            </span>
            {day.avg_stress && <span className="text-xs text-gray-500">/100</span>}
          </div>
          {stressLabel && <p className="text-xs text-gray-500 mt-1">{stressLabel}</p>}
        </div>

        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          {day.spo2_avg ? (
            <>
              <p className="text-xs text-gray-500 mb-1">SpO2</p>
              <div className="flex items-baseline gap-1">
                <span className="text-2xl font-bold text-sky-400">{day.spo2_avg.toFixed(1)}</span>
                <span className="text-xs text-gray-500">%</span>
              </div>
            </>
          ) : day.vo2max ? (
            <>
              <p className="text-xs text-gray-500 mb-1">VO2 Max</p>
              <div className="flex items-baseline gap-1">
                <span className="text-2xl font-bold text-blue-400">{day.vo2max.toFixed(1)}</span>
              </div>
              {day.fitness_age && <p className="text-xs text-gray-500 mt-1">Fitness age {day.fitness_age}</p>}
            </>
          ) : (
            <>
              <p className="text-xs text-gray-500 mb-1">SpO2</p>
              <span className="text-2xl font-bold text-white">--</span>
            </>
          )}
        </div>
      </div>
    </div>
  )
}

// ── Trend Charts ────────────────────────────────────────────────────────────

function MetricChart({ data, dataKey, color, formatter, height = 140, selectedDate, onDayClick }) {
  const vals = data.filter(d => d[dataKey] != null)
  if (!vals.length) return (
    <div className="flex items-center justify-center text-gray-600 text-xs" style={{ height }}>No data</div>
  )
  return (
    <ResponsiveContainer width="100%" height={height}>
      <AreaChart
        data={data}
        margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
        style={{ cursor: onDayClick ? 'pointer' : 'default' }}
        onClick={evt => {
          const p = evt?.activePayload?.[0]?.payload
          if (p?.date && onDayClick) onDayClick(p.date)
        }}
      >
        <defs>
          <linearGradient id={`grad-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor={color} stopOpacity={0.3} />
            <stop offset="95%" stopColor={color} stopOpacity={0} />
          </linearGradient>
        </defs>
        <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 d')} interval="preserveStartEnd" />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
          tickFormatter={formatter} />
        <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')}
          formatter={v => [formatter ? formatter(v) : v?.toFixed(1)]} />
        {selectedDate && (
          <ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
        )}
        <Area type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2}
          fill={`url(#grad-${dataKey})`} dot={false} connectNulls={false} isAnimationActive={false} />
      </AreaChart>
    </ResponsiveContainer>
  )
}

function SleepChart({ data, selectedDate, onDayClick }) {
  const chartData = data.map(d => ({
    date: d.date,   // already normalised to YYYY-MM-DD
    deep:  d.sleep_deep_s  ? +(d.sleep_deep_s  / 3600).toFixed(2) : null,
    rem:   d.sleep_rem_s   ? +(d.sleep_rem_s   / 3600).toFixed(2) : null,
    light: d.sleep_light_s ? +(d.sleep_light_s / 3600).toFixed(2) : null,
    awake: d.sleep_awake_s ? +(d.sleep_awake_s / 3600).toFixed(2) : null,
  }))
  const hasData = chartData.some(d => d.deep || d.rem || d.light)
  if (!hasData) return (
    <div className="flex items-center justify-center h-36 text-gray-600 text-xs">No sleep data</div>
  )
  return (
    <ResponsiveContainer width="100%" height={140}>
      <BarChart
        data={chartData}
        margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
        barSize={6}
        style={{ cursor: onDayClick ? 'pointer' : 'default' }}
        onClick={evt => {
          const p = evt?.activePayload?.[0]?.payload
          if (p?.date && onDayClick) onDayClick(p.date)
        }}
      >
        <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 d')} interval="preserveStartEnd" />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={24}
          tickFormatter={v => `${v}h`} />
        <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
        {selectedDate && (
          <ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
        )}
        <Bar dataKey="deep"  name="Deep"  stackId="a" fill="#6366f1" />
        <Bar dataKey="rem"   name="REM"   stackId="a" fill="#8b5cf6" />
        <Bar dataKey="light" name="Light" stackId="a" fill="#a78bfa" />
        <Bar dataKey="awake" name="Awake" stackId="a" fill="#374151" radius={[2, 2, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  )
}

// ── Page ─────────────────────────────────────────────────────────────────────

export default function HealthPage() {
  const [rangeDays, setRangeDays] = useState(7)
  const [selectedDateStr, setSelectedDateStr] = useState(null)   // YYYY-MM-DD or null = latest

  const fromDate = useMemo(
    () => format(subDays(new Date(), rangeDays), 'yyyy-MM-dd'),
    [rangeDays],
  )

  const { data: summary } = useQuery({
    queryKey: ['health-summary'],
    queryFn: () => api.get('/health-metrics/summary').then(r => r.data),
  })

  // Full history for snapshot navigation.
  // Key starts with ['health-metrics'] so UploadPage invalidation hits it automatically.
  const { data: allDays } = useQuery({
    queryKey: ['health-metrics', 'all'],
    queryFn: () =>
      api.get('/health-metrics/', { params: { limit: 365 } })
        .then(r => r.data.map(d => ({ ...d, date: d10(d.date) }))),
  })

  // Trend window (changes with range selector).
  // Dates normalised to YYYY-MM-DD so XAxis values match ReferenceLine x.
  const { data: rawMetrics, isLoading } = useQuery({
    queryKey: ['health-metrics', rangeDays],
    queryFn: () =>
      api.get('/health-metrics/', { params: { from_date: fromDate, limit: rangeDays + 1 } })
        .then(r => r.data.slice().reverse().map(d => ({ ...d, date: d10(d.date) }))),
    placeholderData: keepPreviousData,
  })
  const metrics = rawMetrics || []

  // Snapshot navigation: newest-first sorted list of all available days
  const allDaysSorted = useMemo(
    () => (allDays || []).slice().sort((a, b) => b.date.localeCompare(a.date)),
    [allDays],
  )

  const selectedDay = useMemo(() => {
    if (!selectedDateStr) return allDaysSorted[0] || null
    return allDaysSorted.find(d => d.date === selectedDateStr) || null
  }, [selectedDateStr, allDaysSorted])

  const selectedIdx = useMemo(() => {
    if (!selectedDay) return -1
    return allDaysSorted.findIndex(d => d.date === selectedDay.date)
  }, [selectedDay, allDaysSorted])

  const { data: intradayData } = useQuery({
    queryKey: ['health-intraday', selectedDay?.date],
    queryFn: () => api.get('/health-metrics/intraday', { params: { date: selectedDay.date } }).then(r => r.data),
    enabled: !!selectedDay?.date,
  })

  const handleDayClick = (dateStr) => setSelectedDateStr(d10(dateStr))
  const goOlder = () => {
    if (selectedIdx < allDaysSorted.length - 1)
      setSelectedDateStr(allDaysSorted[selectedIdx + 1].date)
  }
  const goNewer = () => {
    if (selectedIdx > 0)
      setSelectedDateStr(allDaysSorted[selectedIdx - 1].date)
  }

  // The date string to highlight in charts (only shown if it falls within the current trend window)
  const selDateForCharts = selectedDay?.date

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

      <DailySnapshot
        day={selectedDay}
        avg30={summary?.avg_30d}
        intradayHr={intradayData?.hr_values}
        onOlder={goOlder}
        onNewer={goNewer}
        hasOlder={selectedIdx >= 0 && selectedIdx < allDaysSorted.length - 1}
        hasNewer={selectedIdx > 0}
      />

      <div className="border-t border-gray-800" />

      <div className="space-y-4">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div>
            <h2 className="text-base font-semibold text-gray-300">Trends</h2>
            <p className="text-xs text-gray-600">Click any point to load that day above</p>
          </div>
          <div className="flex gap-1.5">
            {RANGES.map(({ label, days }) => (
              <button key={label} onClick={() => setRangeDays(days)}
                className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
                  rangeDays === days
                    ? 'bg-blue-600 border-blue-600 text-white'
                    : 'border-gray-700 text-gray-400 hover:text-white'
                }`}>
                {label}
              </button>
            ))}
          </div>
        </div>

        {isLoading ? (
          <div className="text-gray-500 text-sm">Loading…</div>
        ) : metrics.length > 0 ? (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Resting Heart Rate</h3>
              <MetricChart data={metrics} dataKey="resting_hr" color="#f43f5e"
                formatter={v => `${Math.round(v)} bpm`}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">HRV (nightly avg)</h3>
              <MetricChart data={metrics} dataKey="hrv_nightly_avg" color="#8b5cf6"
                formatter={v => `${Math.round(v)} ms`}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Sleep</h3>
              <SleepChart data={metrics}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
              <div className="flex gap-4 mt-2">
                {[['Deep','#6366f1'],['REM','#8b5cf6'],['Light','#a78bfa'],['Awake','#374151']].map(([l,c]) => (
                  <div key={l} className="flex items-center gap-1.5">
                    <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: c }} />
                    <span className="text-xs text-gray-400">{l}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Weight</h3>
              <MetricChart data={metrics} dataKey="weight_kg" color="#34d399"
                formatter={v => `${v.toFixed(1)} kg`}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Daily Steps</h3>
              <ResponsiveContainer width="100%" height={140}>
                <BarChart
                  data={metrics}
                  margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
                  barSize={6}
                  style={{ cursor: 'pointer' }}
                  onClick={evt => {
                    const p = evt?.activePayload?.[0]?.payload
                    if (p?.date) handleDayClick(p.date)
                  }}
                >
                  <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 d')} interval="preserveStartEnd" />
                  <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
                    tickFormatter={v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : v} />
                  <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
                  {selDateForCharts && (
                    <ReferenceLine x={selDateForCharts} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
                  )}
                  <Bar dataKey="steps" name="Steps" fill="#fbbf24" radius={[2, 2, 0, 0]} isAnimationActive={false} />
                </BarChart>
              </ResponsiveContainer>
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Stress Level</h3>
              <MetricChart data={metrics} dataKey="avg_stress" color="#a78bfa"
                formatter={v => Math.round(v)}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>

            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
              <h3 className="text-sm font-medium text-gray-300 mb-3">Avg Heart Rate (day)</h3>
              <MetricChart data={metrics} dataKey="avg_hr_day" color="#f97316"
                formatter={v => `${Math.round(v)} bpm`}
                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>

            {metrics.some(d => d.vo2max) && (
              <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
                <h3 className="text-sm font-medium text-gray-300 mb-3">VO2 Max</h3>
                <MetricChart data={metrics} dataKey="vo2max" color="#3b82f6"
                  formatter={v => v.toFixed(1)}
                  selectedDate={selDateForCharts} onDayClick={handleDayClick} />
              </div>
            )}

          </div>
        ) : (
          <div className="text-center py-12 text-gray-600">
            <p className="text-lg">No trend data for this period</p>
            <p className="text-sm mt-1">Try a longer date range</p>
          </div>
        )}
      </div>
    </div>
  )
}