Alpha/src/views/SchedulerView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSchedulerStore } from '@/stores/scheduler'
import { DAY_LABELS, computeNextRun, type ScheduleAction } from '@/services/scheduler'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { Plus, XCircle, CheckCircle2, Clock } from 'lucide-vue-next'

const store = useSchedulerStore()
const showForm = ref(false)

const form = ref({
  name: '', description: '',
  daysOfWeek: [] as number[],
  hour: 9, minute: 0,
  actionType: 'reminder' as ScheduleAction['type'],
  message: '',
})

function toggleDay(d: number) {
  const idx = form.value.daysOfWeek.indexOf(d)
  if (idx >= 0) form.value.daysOfWeek.splice(idx, 1)
  else form.value.daysOfWeek.push(d)
}

async function handleSubmit() {
  if (!form.value.name || form.value.daysOfWeek.length === 0) return
  const action: ScheduleAction = form.value.actionType === 'reminder'
    ? { type: 'reminder', message: form.value.message || form.value.name }
    : { type: form.value.actionType as Exclude<ScheduleAction['type'], 'reminder'> }

  await store.addRule({
    name: form.value.name, description: form.value.description,
    daysOfWeek: form.value.daysOfWeek, hour: form.value.hour,
    minute: form.value.minute, action, enabled: true,
  })
  showForm.value = false
  form.value = { name: '', description: '', daysOfWeek: [], hour: 9, minute: 0, actionType: 'reminder', message: '' }
}

function fmtNextRun(date: Date | null | undefined): string {
  if (!date) return '—'
  return date.toLocaleDateString('es-CO', { weekday: 'short', month: 'short', day: 'numeric' })
    + ` ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`
}

function fmtLastRun(iso: string | null): string {
  if (!iso) return 'Nunca'
  const d = new Date(iso)
  return d.toLocaleDateString('es-CO', { month: 'short', day: 'numeric' })
    + ` ${d.toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit' })}`
}

const actionLabels: Record<ScheduleAction['type'], string> = {
  generate_progress_report: 'Informe semanal',
  check_hus: 'Revisión HUs',
  daily_prep: 'Daily prep',
  reminder: 'Recordatorio',
}

onMounted(async () => {
  await store.seedDefaults()
  await store.loadRules()
  await store.loadLogs()
  if (!store.running) store.start()
})
</script>

<template>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold tracking-tight">Recetas automáticas</h1>
        <p class="text-sm text-muted-foreground mt-1">Tareas programadas que se ejecutan al abrir la app</p>
      </div>
      <div class="flex items-center gap-3">
        <Badge :variant="store.running ? 'default' : 'secondary'" class="text-[11px]">
          {{ store.running ? 'Activo' : 'Pausado' }}
        </Badge>
        <Button size="sm" @click="showForm = !showForm">
          <Plus class="size-4 mr-1" />
          {{ showForm ? 'Cancelar' : 'Nueva receta' }}
        </Button>
      </div>
    </div>

    <Card v-if="showForm">
      <CardContent class="p-4 space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-1.5 col-span-2">
            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Nombre</label>
            <Input v-model="form.name" placeholder="Ej: Informe semanal de avance" />
          </div>
          <div class="space-y-1.5 col-span-2">
            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Descripción</label>
            <Input v-model="form.description" placeholder="Opcional" />
          </div>
          <div class="space-y-1.5 col-span-2">
            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Días</label>
            <div class="flex gap-1.5 flex-wrap">
              <button v-for="(l, i) in DAY_LABELS" :key="i" type="button"
                :class="['px-3 py-1 text-xs rounded-full border transition-colors',
                  form.daysOfWeek.includes(i)
                    ? 'bg-primary text-primary-foreground border-primary'
                    : 'bg-background text-muted-foreground border-border hover:border-primary']"
                @click="toggleDay(i)">{{ l }}</button>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-4">
          <div class="space-y-1.5">
            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Hora</label>
            <div class="flex items-center gap-1">
              <Input type="number" v-model.number="form.hour" min="0" max="23" class="w-16 text-center" />
              <span class="text-muted-foreground">:</span>
              <Input type="number" v-model.number="form.minute" min="0" max="59" class="w-16 text-center" />
            </div>
          </div>
          <div class="space-y-1.5 col-span-2">
            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Acción</label>
            <Select v-model="form.actionType">
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="generate_progress_report">Generar informe de avance</SelectItem>
                <SelectItem value="check_hus">Revisar estado de HUs</SelectItem>
                <SelectItem value="daily_prep">Daily prep</SelectItem>
                <SelectItem value="reminder">Recordatorio personalizado</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <div v-if="form.actionType === 'reminder'" class="space-y-1.5">
          <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Mensaje</label>
          <Input v-model="form.message" placeholder="Ej: Preparar informe para gerencia" />
        </div>
        <Button class="w-full" @click="handleSubmit">Guardar receta</Button>
      </CardContent>
    </Card>

    <div class="space-y-2">
      <div v-for="rule in store.rules" :key="rule.id"
        :class="['flex items-center gap-4 p-4 rounded-lg border bg-card transition-opacity', !rule.enabled && 'opacity-40']">
        <div class="flex-1 min-w-0">
          <div class="font-medium text-sm">{{ rule.name }}</div>
          <div v-if="rule.description" class="text-xs text-muted-foreground mt-0.5">{{ rule.description }}</div>
          <div class="flex gap-1.5 mt-1.5 flex-wrap">
            <Badge variant="outline" class="text-[10px]">{{ rule.daysOfWeek.map(d => DAY_LABELS[d]).join(', ') }}</Badge>
            <Badge variant="outline" class="text-[10px]">{{ String(rule.hour).padStart(2,'0') }}:{{ String(rule.minute).padStart(2,'0') }}</Badge>
            <Badge variant="secondary" class="text-[10px]">{{ actionLabels[rule.action.type] }}</Badge>
          </div>
        </div>
        <div class="text-right flex-shrink-0">
          <div class="text-xs text-emerald-400">Próx: {{ fmtNextRun(computeNextRun(rule)) }}</div>
          <div class="text-[11px] text-muted-foreground">Últ: {{ fmtLastRun(rule.lastRun) }}</div>
        </div>
        <div class="flex items-center gap-2 flex-shrink-0">
          <Switch :checked="rule.enabled" @update:checked="store.toggleRule(rule.id!)" />
          <Button variant="ghost" size="icon" class="size-7 text-muted-foreground hover:text-destructive" @click="store.deleteRule(rule.id!)">
            <XCircle class="size-4" />
          </Button>
        </div>
      </div>
      <p v-if="store.rules.length === 0" class="text-center text-sm text-muted-foreground py-8">No hay recetas configuradas</p>
    </div>

    <Card v-if="store.logs.length > 0">
      <CardHeader class="pb-2">
        <CardTitle class="text-sm font-medium">Historial de ejecuciones</CardTitle>
      </CardHeader>
      <CardContent class="space-y-1">
        <div v-for="log in store.logs.slice(0, 10)" :key="log.id" class="flex items-center gap-2 text-xs py-0.5">
          <CheckCircle2 v-if="log.success" class="size-3 text-emerald-400 flex-shrink-0" />
          <XCircle v-else class="size-3 text-destructive flex-shrink-0" />
          <span class="text-muted-foreground w-[100px] flex-shrink-0">{{ fmtLastRun(log.executedAt) }}</span>
          <span class="font-medium">{{ log.ruleName }}</span>
          <span class="text-muted-foreground truncate">{{ log.message }}</span>
        </div>
      </CardContent>
    </Card>

    <div v-if="store.notifications.length > 0" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
      <div v-for="n in store.notifications.slice(0, 5)" :key="n.id"
        class="flex items-center gap-3 p-3 rounded-lg border bg-card border-l-[3px] border-l-primary text-xs shadow-lg animate-[slideIn_0.3s_ease]">
        <Clock class="size-3 text-muted-foreground flex-shrink-0" />
        <span class="text-muted-foreground flex-shrink-0">{{ n.time }}</span>
        <span class="flex-1">{{ n.message }}</span>
        <button class="text-muted-foreground hover:text-destructive" @click="store.dismissNotification(n.id)">&times;</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>