<script setup lang="ts">
import { onMounted, ref, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useActivitiesStore } from '../stores/activities'
import { useCoachingStore } from '../stores/coaching'
import type { Activity, DataPoint, ZonesResponse, PowerCurveResponse, DiaryEntry, TrainingPlan } from '../types/models'
import Card from 'primevue/card'
import Tag from 'primevue/tag'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Button from 'primevue/button'
import Textarea from 'primevue/textarea'
import Select from 'primevue/select'
import InputNumber from 'primevue/inputnumber'
import ProgressSpinner from 'primevue/progressspinner'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, MarkLineComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, MarkLineComponent])

const route = useRoute()
const router = useRouter()
const store = useActivitiesStore()
const coaching = useCoachingStore()

const activity = ref<Activity | null>(null)
const stream = ref<DataPoint[]>([])
const zones = ref<ZonesResponse | null>(null)
const powerCurve = ref<PowerCurveResponse | null>(null)
const loading = ref(true)
const aiSummary = ref('')
const aiLoading = ref(false)

// Diary
const diary = ref<DiaryEntry>({ rider_notes: null, mood: null, rpe: null, sleep_hours: null })
const diarySaving = ref(false)
const diarySaved = ref(false)

// Plan linking
const activePlan = ref<TrainingPlan | null>(null)
const linkMenuOpen = ref(false)
const linking = ref(false)

const planDayOptions = computed(() => {
  if (!activePlan.value?.weeks) return []
  const options: { label: string; week: number; day: string }[] = []
  for (const week of activePlan.value.weeks) {
    for (const d of week.days) {
      if (d.workout_type === 'rest') continue
      options.push({
        label: `Нед. ${week.week_number}, ${dayLabelMap[d.day] || d.day} — ${d.title || d.workout_type}`,
        week: week.week_number,
        day: d.day,
      })
    }
  }
  return options
})

const dayLabelMap: Record<string, string> = {
  monday: 'Пн', tuesday: 'Вт', wednesday: 'Ср', thursday: 'Чт',
  friday: 'Пт', saturday: 'Сб', sunday: 'Вс',
}

async function linkToPlan(option: { week: number; day: string }) {
  if (!activity.value || !activePlan.value) return
  linking.value = true
  try {
    await coaching.linkActivity(activity.value.id, activePlan.value.id, option.week, option.day)
    activity.value.training_plan_id = activePlan.value.id
    activity.value.plan_week = option.week
    activity.value.plan_day = option.day
    linkMenuOpen.value = false
    // Clear cached summary so re-generation picks up plan context
    aiSummary.value = ''
  } finally {
    linking.value = false
  }
}

async function unlinkFromPlan() {
  if (!activity.value) return
  linking.value = true
  try {
    await coaching.unlinkActivity(activity.value.id)
    activity.value.training_plan_id = null
    activity.value.plan_week = null
    activity.value.plan_day = null
    aiSummary.value = ''
  } finally {
    linking.value = false
  }
}

const moods = [
  { label: 'Great', value: 'great' },
  { label: 'Good', value: 'good' },
  { label: 'OK', value: 'ok' },
  { label: 'Tired', value: 'tired' },
  { label: 'Bad', value: 'bad' },
]

const hasGps = computed(() => stream.value.some(dp => dp.latitude && dp.longitude))
const hasAltitude = computed(() => stream.value.some(dp => dp.altitude != null))
const hasSpeed = computed(() => stream.value.some(dp => dp.speed != null && dp.speed > 0))
const hasPower = computed(() => stream.value.some(dp => dp.power != null))
const hasStream = computed(() => stream.value.length > 0)
const isStrength = computed(() => {
  const t = activity.value?.activity_type?.toLowerCase() || ''
  return t.includes('strength') || t.includes('training') || (activity.value?.exercise_sets?.length ?? 0) > 0
})
const groupedExercises = computed(() => {
  const sets = activity.value?.exercise_sets
  if (!sets?.length) return []
  const groups: Record<string, typeof sets> = {}
  for (const s of sets) {
    const name = s.exercise_name || 'Unknown'
    ;(groups[name] ??= []).push(s)
  }
  return Object.entries(groups).map(([name, sets]) => ({ name, sets }))
})

function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  return h > 0 ? `${h}h ${m}m` : `${m}m ${s}s`
}

function formatDistance(meters: number | null): string {
  if (!meters) return '—'
  return `${(meters / 1000).toFixed(1)} km`
}

function buildStreamChart() {
  const times = stream.value.map(dp => new Date(dp.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }))
  const powers = stream.value.map(dp => dp.power)
  const hrs = stream.value.map(dp => dp.heart_rate)
  const cadences = stream.value.map(dp => dp.cadence)

  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    legend: { data: ['Power', 'HR', 'Cadence'], top: 0, textStyle: { color: '#6b7280' } },
    grid: { left: 50, right: 30, top: 45, bottom: 60 },
    dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 10 }],
    xAxis: { type: 'category', data: times, axisLabel: { color: '#666', fontSize: 10 }, show: false },
    yAxis: [
      { type: 'value', name: 'Watts', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
      { type: 'value', name: 'bpm', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { show: false } },
    ],
    series: [
      { name: 'Power', type: 'line', data: powers, showSymbol: false, lineStyle: { width: 1 }, itemStyle: { color: '#3b82f6' }, areaStyle: { color: 'rgba(59,130,246,0.08)' } },
      { name: 'HR', type: 'line', yAxisIndex: 1, data: hrs, showSymbol: false, lineStyle: { width: 1 }, itemStyle: { color: '#ef4444' } },
      { name: 'Cadence', type: 'line', yAxisIndex: 1, data: cadences, showSymbol: false, lineStyle: { width: 1, type: 'dashed' }, itemStyle: { color: '#10b981' } },
    ],
  }
}

function buildElevationChart() {
  const distances: number[] = []
  let totalDist = 0
  for (let i = 0; i < stream.value.length; i++) {
    if (i > 0 && stream.value[i].speed != null) {
      totalDist += (stream.value[i].speed || 0)
    }
    distances.push(totalDist / 1000)
  }

  const altitudes = stream.value.map(dp => dp.altitude)

  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].name} km: ${p[0].value?.toFixed(0) ?? '—'}m` },
    grid: { left: 50, right: 20, top: 10, bottom: 25 },
    xAxis: {
      type: 'category',
      data: distances.map(d => d.toFixed(1)),
      axisLabel: { color: '#6b7280', fontSize: 10, formatter: (v: string) => `${v}` },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value', name: 'm',
      nameTextStyle: { color: '#6b7280' },
      axisLabel: { color: '#6b7280' },
      splitLine: { lineStyle: { color: '#e5e7eb' } },
    },
    series: [{
      type: 'line',
      data: altitudes,
      showSymbol: false,
      lineStyle: { width: 1.5, color: '#8b5cf6' },
      areaStyle: {
        color: {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(139,92,246,0.25)' },
            { offset: 1, color: 'rgba(139,92,246,0.02)' },
          ],
        },
      },
    }],
  }
}

function buildSpeedChart() {
  const times = stream.value.map(dp => new Date(dp.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }))
  const speeds = stream.value.map(dp => dp.speed != null ? +(dp.speed * 3.6).toFixed(1) : null)

  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].value?.toFixed(1) ?? '—'} km/h` },
    grid: { left: 50, right: 20, top: 10, bottom: 50 },
    dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 10 }],
    xAxis: { type: 'category', data: times, show: false },
    yAxis: {
      type: 'value', name: 'km/h',
      nameTextStyle: { color: '#6b7280' },
      axisLabel: { color: '#6b7280' },
      splitLine: { lineStyle: { color: '#e5e7eb' } },
    },
    series: [{
      type: 'line',
      data: speeds,
      showSymbol: false,
      lineStyle: { width: 1, color: '#f59e0b' },
      areaStyle: { color: 'rgba(245,158,11,0.08)' },
    }],
  }
}

function buildZonesChart() {
  if (!zones.value?.power_zones?.length) return null
  const z = zones.value.power_zones
  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    grid: { left: 110, right: 30, top: 10, bottom: 10 },
    xAxis: { type: 'value', axisLabel: { color: '#6b7280', formatter: (v: number) => `${v}%` }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
    yAxis: { type: 'category', data: z.map(i => `Z${i.zone} ${i.name}`).reverse(), axisLabel: { color: '#6b7280', fontSize: 11 } },
    series: [{
      type: 'bar',
      data: z.map(i => i.percentage).reverse(),
      itemStyle: {
        color: (params: any) => {
          const colors = ['#22c55e', '#3b82f6', '#a855f7', '#f59e0b', '#ef4444', '#dc2626', '#991b1b']
          return colors[z.length - 1 - params.dataIndex] || '#666'
        },
      },
    }],
  }
}

function buildHrZonesChart() {
  if (!zones.value?.hr_zones?.length) return null
  const z = zones.value.hr_zones
  const hrColors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#dc2626']
  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    grid: { left: 110, right: 30, top: 10, bottom: 10 },
    xAxis: { type: 'value', axisLabel: { color: '#6b7280', formatter: (v: number) => `${v}%` }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
    yAxis: { type: 'category', data: z.map(i => `Z${i.zone} ${i.name}`).reverse(), axisLabel: { color: '#6b7280', fontSize: 11 } },
    series: [{
      type: 'bar',
      data: z.map(i => i.percentage).reverse(),
      itemStyle: {
        color: (params: any) => hrColors[z.length - 1 - params.dataIndex] || '#666',
      },
    }],
  }
}

function buildPowerCurveChart() {
  if (!powerCurve.value?.curve) return null
  const entries = Object.entries(powerCurve.value.curve)
    .map(([dur, pow]) => [Number(dur), pow] as [number, number])
    .sort((a, b) => a[0] - b[0])

  const labels = entries.map(([d]) => {
    if (d < 60) return `${d}s`
    if (d < 3600) return `${d / 60}m`
    return `${d / 3600}h`
  })

  return {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].name}: ${p[0].value}W` },
    grid: { left: 50, right: 30, top: 10, bottom: 30 },
    xAxis: { type: 'category', data: labels, axisLabel: { color: '#6b7280' } },
    yAxis: { type: 'value', name: 'W', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
    series: [{
      type: 'line',
      data: entries.map(([, p]) => p),
      showSymbol: true,
      symbolSize: 6,
      areaStyle: { color: 'rgba(168,85,247,0.12)' },
      itemStyle: { color: '#a855f7' },
      lineStyle: { width: 2 },
    }],
  }
}

function initMap() {
  const gpsPoints = stream.value.filter(dp => dp.latitude && dp.longitude)
  if (gpsPoints.length < 2) return

  const map = L.map('route-map')
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap',
    maxZoom: 18,
  }).addTo(map)

  const coords: L.LatLngExpression[] = gpsPoints.map(dp => [dp.latitude!, dp.longitude!])
  const polyline = L.polyline(coords, { color: '#3b82f6', weight: 3, opacity: 0.8 }).addTo(map)

  L.circleMarker(coords[0] as L.LatLngExpression, { radius: 6, color: '#22c55e', fillColor: '#22c55e', fillOpacity: 1 }).addTo(map)
  L.circleMarker(coords[coords.length - 1] as L.LatLngExpression, { radius: 6, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 1 }).addTo(map)

  map.fitBounds(polyline.getBounds(), { padding: [20, 20] })
}

async function loadAiSummary() {
  if (!activity.value || aiSummary.value) return
  aiLoading.value = true
  try {
    aiSummary.value = await store.fetchAiSummary(activity.value.id)
  } catch {
    aiSummary.value = 'Failed to generate summary. Check your Gemini API key.'
  } finally {
    aiLoading.value = false
  }
}

async function regenerateSummary() {
  if (!activity.value) return
  aiLoading.value = true
  aiSummary.value = ''
  try {
    aiSummary.value = await store.fetchAiSummary(activity.value.id, true)
  } catch {
    aiSummary.value = 'Failed to generate summary. Check your Gemini API key.'
  } finally {
    aiLoading.value = false
  }
}

async function saveDiary() {
  if (!activity.value) return
  diarySaving.value = true
  diarySaved.value = false
  try {
    diary.value = await store.updateDiary(activity.value.id, diary.value)
    diarySaved.value = true
    setTimeout(() => { diarySaved.value = false }, 2000)
  } finally {
    diarySaving.value = false
  }
}

async function handleDelete() {
  if (!activity.value) return
  if (!confirm('Delete this activity? This cannot be undone.')) return
  await store.deleteActivity(activity.value.id)
  router.push({ name: 'activities' })
}

async function shareActivity() {
  if (!activity.value) return
  const a = activity.value
  const m = a.metrics

  const canvas = document.createElement('canvas')
  const W = 800, H = 420
  canvas.width = W
  canvas.height = H
  const ctx = canvas.getContext('2d')!

  // Background gradient
  const grad = ctx.createLinearGradient(0, 0, W, H)
  grad.addColorStop(0, '#0f172a')
  grad.addColorStop(1, '#1e3a5f')
  ctx.fillStyle = grad
  ctx.fillRect(0, 0, W, H)

  // Accent line
  ctx.fillStyle = '#3b82f6'
  ctx.fillRect(0, 0, W, 4)

  // Title
  ctx.fillStyle = '#ffffff'
  ctx.font = 'bold 28px system-ui, -apple-system, sans-serif'
  ctx.fillText(a.name || 'Ride', 40, 60)

  // Date & type
  ctx.fillStyle = '#94a3b8'
  ctx.font = '16px system-ui, -apple-system, sans-serif'
  const dateStr = new Date(a.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })
  ctx.fillText(`${dateStr}  •  ${a.activity_type}`, 40, 90)

  // Metrics grid
  const metrics: { label: string; value: string; unit: string }[] = []
  metrics.push({ label: 'Duration', value: formatDuration(a.duration), unit: '' })
  if (a.distance) metrics.push({ label: 'Distance', value: (a.distance / 1000).toFixed(1), unit: 'km' })
  if (a.elevation_gain) metrics.push({ label: 'Elevation', value: `${a.elevation_gain.toFixed(0)}`, unit: 'm' })
  if (m?.avg_power) metrics.push({ label: 'Avg Power', value: `${m.avg_power}`, unit: 'W' })
  if (m?.normalized_power) metrics.push({ label: 'NP', value: `${m.normalized_power}`, unit: 'W' })
  if (m?.tss) metrics.push({ label: 'TSS', value: `${m.tss}`, unit: '' })
  if (m?.intensity_factor) metrics.push({ label: 'IF', value: `${m.intensity_factor}`, unit: '' })
  if (m?.avg_hr) metrics.push({ label: 'Avg HR', value: `${m.avg_hr}`, unit: 'bpm' })

  const cols = Math.min(metrics.length, 4)
  const boxW = (W - 80) / cols
  const startY = 130

  metrics.forEach((item, i) => {
    const row = Math.floor(i / cols)
    const col = i % cols
    const x = 40 + col * boxW
    const y = startY + row * 110

    // Box background
    ctx.fillStyle = 'rgba(255,255,255,0.06)'
    ctx.beginPath()
    ctx.roundRect(x, y, boxW - 12, 90, 10)
    ctx.fill()

    // Label
    ctx.fillStyle = '#94a3b8'
    ctx.font = '12px system-ui, -apple-system, sans-serif'
    ctx.fillText(item.label.toUpperCase(), x + 14, y + 28)

    // Value
    ctx.fillStyle = '#ffffff'
    ctx.font = 'bold 28px system-ui, -apple-system, sans-serif'
    ctx.fillText(item.value, x + 14, y + 62)

    // Unit
    if (item.unit) {
      const valWidth = ctx.measureText(item.value).width
      ctx.fillStyle = '#64748b'
      ctx.font = '14px system-ui, -apple-system, sans-serif'
      ctx.fillText(item.unit, x + 14 + valWidth + 4, y + 62)
    }
  })

  // Branding
  ctx.fillStyle = '#475569'
  ctx.font = '14px system-ui, -apple-system, sans-serif'
  ctx.fillText('VeloBrain', 40, H - 30)
  ctx.fillStyle = '#334155'
  ctx.fillText('velobrain.app', W - 140, H - 30)

  // Export
  canvas.toBlob(async (blob) => {
    if (!blob) return
    if (navigator.share && navigator.canShare?.({ files: [new File([blob], 'activity.png', { type: 'image/png' })] })) {
      try {
        await navigator.share({
          title: a.name || 'My Ride',
          files: [new File([blob], 'activity.png', { type: 'image/png' })],
        })
        return
      } catch { /* fallback to download */ }
    }
    // Fallback: download
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${(a.name || 'activity').replace(/\s+/g, '_')}.png`
    link.click()
    URL.revokeObjectURL(url)
  }, 'image/png')
}

onMounted(async () => {
  const id = route.params.id as string
  try {
    const [act, str, zn, pc, di] = await Promise.all([
      store.fetchActivity(id),
      store.fetchStream(id),
      store.fetchZones(id),
      store.fetchPowerCurve(id),
      store.fetchDiary(id),
    ])
    activity.value = act
    stream.value = str
    zones.value = zn
    powerCurve.value = pc
    diary.value = di
  } finally {
    loading.value = false
  }

  // Load active plan for linking
  try {
    activePlan.value = await coaching.fetchActivePlan()
  } catch { /* no plan */ }

  // Init map after loading=false triggers DOM render of #route-map
  if (stream.value.some(dp => dp.latitude && dp.longitude)) {
    await nextTick()
    initMap()
  }
})
</script>

<template>
  <div>
    <div v-if="loading" class="flex justify-center py-20">
      <ProgressSpinner style="width: 50px; height: 50px" />
    </div>

    <div v-else-if="activity">
      <!-- Header -->
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-4">
          <h1 class="text-2xl font-semibold">{{ activity.name || 'Ride' }}</h1>
          <Tag :value="activity.activity_type" severity="info" />
        </div>
        <div class="flex items-center gap-2">
          <Button icon="pi pi-share-alt" severity="secondary" text rounded size="small" title="Share activity card" @click="shareActivity" />
          <Button icon="pi pi-trash" severity="danger" text rounded size="small" @click="handleDelete" />
        </div>
      </div>

      <!-- Key metrics -->
      <div class="grid grid-cols-3 md:grid-cols-6 gap-2 md:gap-3 mb-6">
        <Card>
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Duration</p>
            <p class="text-lg font-bold">{{ formatDuration(activity.duration) }}</p>
          </template>
        </Card>
        <Card v-if="activity.distance">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Distance</p>
            <p class="text-lg font-bold">{{ formatDistance(activity.distance) }}</p>
          </template>
        </Card>
        <Card v-if="activity.metrics?.avg_power">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Avg / NP</p>
            <p class="text-lg font-bold">{{ activity.metrics.avg_power }} / {{ activity.metrics.normalized_power }}W</p>
          </template>
        </Card>
        <Card v-if="activity.metrics?.tss">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">TSS / IF</p>
            <p class="text-lg font-bold">{{ activity.metrics.tss }} / {{ activity.metrics.intensity_factor }}</p>
          </template>
        </Card>
        <Card v-if="activity.metrics?.avg_hr">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Avg / Max HR</p>
            <p class="text-lg font-bold">{{ activity.metrics.avg_hr }} / {{ activity.metrics.max_hr }}</p>
          </template>
        </Card>
        <Card v-if="activity.elevation_gain">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Elevation</p>
            <p class="text-lg font-bold">{{ activity.elevation_gain }}m</p>
          </template>
        </Card>
        <Card v-if="activity.metrics?.calories">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Calories</p>
            <p class="text-lg font-bold">{{ activity.metrics.calories }} kcal</p>
          </template>
        </Card>
        <Card v-if="isStrength && groupedExercises.length">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Exercises</p>
            <p class="text-lg font-bold">{{ groupedExercises.length }}</p>
          </template>
        </Card>
        <Card v-if="isStrength && activity.exercise_sets?.length">
          <template #content>
            <p class="text-surface-500 text-xs uppercase">Sets</p>
            <p class="text-lg font-bold">{{ activity.exercise_sets.length }}</p>
          </template>
        </Card>
      </div>

      <!-- Exercise Sets (Strength) -->
      <Card v-if="groupedExercises.length > 0" class="mb-6">
        <template #title>
          <div class="flex items-center gap-2">
            <i class="pi pi-list text-primary"></i>
            Exercises
          </div>
        </template>
        <template #content>
          <div class="space-y-4">
            <div v-for="group in groupedExercises" :key="group.name">
              <h4 class="font-semibold text-surface-800 mb-2">{{ group.name }}</h4>
              <div class="flex flex-wrap gap-2">
                <div
                  v-for="(set, i) in group.sets"
                  :key="i"
                  class="bg-surface-50 border border-surface-200 rounded-lg px-3 py-2 text-sm"
                >
                  <span class="text-surface-400 text-xs mr-1">Set {{ i + 1 }}</span>
                  <span v-if="set.repetitions" class="font-semibold">{{ set.repetitions }} reps</span>
                  <span v-if="set.weight" class="text-surface-500"> x {{ set.weight }} kg</span>
                  <span v-if="set.duration && !set.repetitions" class="font-semibold">{{ Math.round(set.duration) }}s</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Card>

      <!-- Plan link -->
      <Card v-if="activity.training_plan_id" class="mb-4 bg-blue-50 border-blue-200">
        <template #content>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <i class="pi pi-calendar-check text-blue-500 text-lg"></i>
              <div>
                <p class="font-semibold text-blue-800 text-sm">Тренировка по плану</p>
                <p class="text-blue-600 text-xs">Неделя {{ activity.plan_week }}, {{ dayLabelMap[activity.plan_day || ''] || activity.plan_day }}</p>
              </div>
            </div>
            <Button icon="pi pi-times" text rounded severity="secondary" size="small" :loading="linking" @click="unlinkFromPlan" title="Отвязать от плана" />
          </div>
        </template>
      </Card>

      <Card v-else-if="activePlan" class="mb-4">
        <template #content>
          <div v-if="!linkMenuOpen" class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <i class="pi pi-link text-surface-400 text-lg"></i>
              <p class="text-surface-500 text-sm">Активность не привязана к тренировочному плану</p>
            </div>
            <Button label="Привязать к плану" icon="pi pi-calendar-plus" size="small" severity="secondary" outlined @click="linkMenuOpen = true" />
          </div>
          <div v-else>
            <div class="flex items-center justify-between mb-3">
              <p class="font-semibold text-sm">Выберите тренировку из плана</p>
              <Button icon="pi pi-times" text rounded severity="secondary" size="small" @click="linkMenuOpen = false" />
            </div>
            <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
              <button
                v-for="opt in planDayOptions"
                :key="`${opt.week}-${opt.day}`"
                class="text-left px-3 py-2 rounded-lg hover:bg-primary/10 text-sm transition-colors border border-transparent hover:border-primary/20"
                :disabled="linking"
                @click="linkToPlan(opt)"
              >
                {{ opt.label }}
              </button>
              <p v-if="planDayOptions.length === 0" class="text-surface-400 text-sm px-3 py-2">Нет доступных тренировок в плане</p>
            </div>
          </div>
        </template>
      </Card>

      <!-- AI Summary -->
      <Card class="mb-6">
        <template #title>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <i class="pi pi-sparkles text-primary"></i>
              {{ activity.training_plan_id ? 'AI Анализ и соответствие плану' : 'AI Coach Summary' }}
            </div>
            <Button v-if="aiSummary" icon="pi pi-refresh" text rounded severity="secondary" size="small" @click="regenerateSummary" :loading="aiLoading" />
          </div>
        </template>
        <template #content>
          <div v-if="aiSummary" v-html="aiSummary" class="text-surface-700 leading-relaxed whitespace-pre-line"></div>
          <div v-else-if="aiLoading" class="flex items-center gap-3">
            <ProgressSpinner style="width: 20px; height: 20px" />
            <span class="text-surface-500 text-sm">{{ activity.training_plan_id ? 'Анализирую соответствие плану...' : 'Analyzing your ride...' }}</span>
          </div>
          <div v-else>
            <Button
              :label="activity.training_plan_id ? 'Анализировать выполнение плана' : 'Generate AI Analysis'"
              icon="pi pi-sparkles"
              severity="secondary"
              outlined
              size="small"
              @click="loadAiSummary"
            />
          </div>
        </template>
      </Card>

      <!-- Route Map -->
      <Card v-if="hasGps" class="mb-6">
        <template #title>Route</template>
        <template #content>
          <div id="route-map" style="height: 350px; border-radius: 8px;"></div>
        </template>
      </Card>

      <!-- Elevation Profile -->
      <Card v-if="hasAltitude" class="mb-6">
        <template #title>Elevation Profile</template>
        <template #content>
          <VChart :option="buildElevationChart()" style="height: 200px" autoresize />
        </template>
      </Card>

      <!-- Speed Profile -->
      <Card v-if="hasSpeed" class="mb-6">
        <template #title>Speed</template>
        <template #content>
          <VChart :option="buildSpeedChart()" style="height: 200px" autoresize />
        </template>
      </Card>

      <!-- Power/HR/Cadence chart -->
      <Card v-if="hasStream && (hasPower || stream.some(dp => dp.heart_rate != null))" class="mb-6">
        <template #title>{{ hasPower ? 'Power / HR / Cadence' : 'Heart Rate' }}</template>
        <template #content>
          <VChart :option="buildStreamChart()" style="height: 300px" autoresize />
        </template>
      </Card>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Power zones -->
        <Card v-if="zones?.power_zones?.length">
          <template #title>Power Zones</template>
          <template #content>
            <VChart :option="buildZonesChart() ?? undefined" style="height: 250px" autoresize />
          </template>
        </Card>

        <!-- HR zones -->
        <Card v-if="zones?.hr_zones?.length">
          <template #title>Heart Rate Zones</template>
          <template #content>
            <VChart :option="buildHrZonesChart() ?? undefined" style="height: 200px" autoresize />
          </template>
        </Card>

        <!-- Power curve -->
        <Card v-if="powerCurve?.curve && Object.keys(powerCurve.curve).length > 0">
          <template #title>Power Curve</template>
          <template #content>
            <VChart :option="buildPowerCurveChart() ?? undefined" style="height: 250px" autoresize />
          </template>
        </Card>
      </div>

      <!-- Intervals table -->
      <Card v-if="activity.intervals?.length" class="mb-6">
        <template #title>Intervals</template>
        <template #content>
          <DataTable :value="activity.intervals" size="small" stripedRows>
            <Column field="interval_type" header="Type">
              <template #body="{ data }">
                <Tag :value="data.interval_type" :severity="data.interval_type === 'work' ? 'danger' : 'success'" />
              </template>
            </Column>
            <Column header="Duration">
              <template #body="{ data }">{{ formatDuration(data.duration || 0) }}</template>
            </Column>
            <Column field="avg_power" header="Avg Power">
              <template #body="{ data }">{{ data.avg_power ? `${data.avg_power}W` : '—' }}</template>
            </Column>
            <Column field="avg_hr" header="Avg HR">
              <template #body="{ data }">{{ data.avg_hr ? `${data.avg_hr}bpm` : '—' }}</template>
            </Column>
          </DataTable>
        </template>
      </Card>

      <!-- Training Diary -->
      <Card class="mb-6">
        <template #title>
          <div class="flex items-center gap-2">
            <i class="pi pi-book text-primary"></i>
            Training Diary
          </div>
        </template>
        <template #content>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Mood</label>
              <Select
                v-model="diary.mood"
                :options="moods"
                option-label="label"
                option-value="value"
                placeholder="How did you feel?"
                class="w-full"
              />
            </div>
            <div>
              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">RPE (1-10)</label>
              <InputNumber v-model="diary.rpe" :min="1" :max="10" class="w-full" placeholder="Rate of Perceived Exertion" />
            </div>
            <div>
              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Sleep (hours)</label>
              <InputNumber v-model="diary.sleep_hours" :min="0" :max="24" :max-fraction-digits="1" class="w-full" placeholder="Hours slept" />
            </div>
          </div>
          <div class="mb-4">
            <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Notes</label>
            <Textarea v-model="diary.rider_notes" rows="3" class="w-full" placeholder="How was the ride? Any observations..." />
          </div>
          <div class="flex items-center gap-3">
            <Button label="Save" icon="pi pi-check" size="small" :loading="diarySaving" @click="saveDiary" />
            <span v-if="diarySaved" class="text-green-600 text-sm">Saved!</span>
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>
