<script lang="ts">
  import type { TherapySession } from '$lib/types';
  import { ShieldCheck, Play, Pause, AlertTriangle } from 'lucide-svelte';

  // Svelte 5 Runes
  let { session }: { session: TherapySession } = $props();
  let isPlaying = $state(false);
  let currentTime = $state(0);

  let adherenceColor = $derived(
    session.dbtAdherenceScore >= 80 ? 'text-emerald-600 bg-emerald-50 border-emerald-200' :
    session.dbtAdherenceScore >= 65 ? 'text-amber-600 bg-amber-50 border-amber-200' :
    'text-rose-600 bg-rose-50 border-rose-200'
  );

  function togglePlay() {
    isPlaying = !isPlaying;
  }
</script>

<div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 shadow-sm">
  <div class="flex items-center justify-between gap-2 mb-3">
    <div>
      <span class="text-xs font-bold uppercase tracking-wider text-slate-400">
        {session.modality} Session • {session.patientToken}
      </span>
      <h4 class="text-sm font-bold text-slate-900 dark:text-white">
        {session.clinicianName} ({session.date})
      </h4>
    </div>
    
    <div class="flex items-center gap-1.5">
      <span class="text-xs font-mono font-bold px-2.5 py-1 rounded-full border {adherenceColor}">
        {session.dbtAdherenceScore}% Adherence
      </span>
    </div>
  </div>

  <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700">
    <button 
      onclick={togglePlay}
      class="h-8 w-8 rounded-full bg-teal-600 text-white flex items-center justify-center hover:bg-teal-700 transition"
      aria-label="Toggle Play"
    >
      {#if isPlaying}
        <Pause class="h-4 w-4" />
      {:else}
        <Play class="h-4 w-4 ml-0.5" />
      {/if}
    </button>
    <div class="flex-1">
      <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
        <div class="h-full bg-teal-600 transition-all duration-300" style="width: 42%;"></div>
      </div>
    </div>
    <span class="text-xs font-mono text-slate-500">14:22 / 52:00</span>
  </div>
</div>