<script setup lang="ts">
import { computed } from 'vue'
import { useProjectsStore } from '@/stores/projects'
import { Activity, AlertTriangle, ClipboardList, FileText } from 'lucide-vue-next'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

const projects = useProjectsStore()
const project = computed(() => projects.selected)
</script>

<template>
  <div v-if="project" class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
      <div class="flex items-center gap-2 mt-1">
        <span v-if="project.key" class="text-sm text-muted-foreground">Clave: {{ project.key }}</span>
        <Badge v-if="project.status" variant="outline" class="text-xs">
          {{ project.status }}
        </Badge>
      </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-sm font-medium">Historias de Usuario</CardTitle>
          <ClipboardList class="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-2xl font-bold">—</div>
          <p class="text-xs text-muted-foreground">HUs en el proyecto</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-sm font-medium">Síntomas activos</CardTitle>
          <Activity class="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-2xl font-bold">—</div>
          <p class="text-xs text-muted-foreground">HUs en progreso</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-sm font-medium">Riesgos</CardTitle>
          <AlertTriangle class="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-2xl font-bold">—</div>
          <p class="text-xs text-muted-foreground">Riesgos detectados</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-sm font-medium">Transcripciones</CardTitle>
          <FileText class="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-2xl font-bold">—</div>
          <p class="text-xs text-muted-foreground">Sesiones procesadas</p>
        </CardContent>
      </Card>
    </div>

    <Card>
      <CardHeader>
        <CardTitle>Historia clínica</CardTitle>
      </CardHeader>
      <CardContent>
        <p v-if="project.description" class="text-sm text-muted-foreground leading-relaxed">
          {{ project.description }}
        </p>
        <p v-else class="text-sm text-muted-foreground italic">Sin descripción del paciente</p>

        <div v-if="project.start_date" class="grid grid-cols-2 gap-4 mt-4">
          <div>
            <span class="text-xs text-muted-foreground">Ingreso</span>
            <p class="text-sm font-medium">{{ project.start_date }}</p>
          </div>
          <div v-if="project.end_date">
            <span class="text-xs text-muted-foreground">Alta prevista</span>
            <p class="text-sm font-medium">{{ project.end_date }}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  </div>
  <div v-else class="flex items-center justify-center h-full text-muted-foreground text-sm">
    <p v-if="projects.loading">Cargando pacientes...</p>
    <p v-else>Seleccioná un paciente del panel lateral</p>
  </div>
</template>
