<script setup>
import { Link } from "@inertiajs/vue3";
import AppLayout from "@/Layouts/AppLayout.vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { BarChart3, FileText, TrendingUp, Activity } from "lucide-vue-next";

defineProps({
  reports: { type: Array, required: true },
});

// Icon mapping by category
const reportIcons = {
  contracts: FileText,
  field: TrendingUp,
  activities: Activity,
  default: BarChart3,
};

function getReportIcon(category) {
  return reportIcons[category] || reportIcons.default;
}

// Generate report URL with default date filters for reports that need them
function getReportUrl(slug) {
  const now = new Date();
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
  
  // Format dates as YYYY-MM-DD
  const formatDate = (date) => {
    return date.toISOString().split('T')[0];
  };
  
  // Report-specific default parameters
  const reportDefaults = {
    'field-jobs-completed': { 
      from: formatDate(startOfMonth), 
      to: formatDate(now) 
    },
    'decisions-counts': { 
      from: formatDate(startOfMonth), 
      to: formatDate(now) 
    },
    'activities-per-period': { 
      from: formatDate(startOfMonth), 
      to: formatDate(now),
      period: 'day'
    }
  };
  
  const params = reportDefaults[slug];
  
  if (params) {
    return route('reports.show', { slug, ...params });
  }
  
  return route('reports.show', slug);
}
</script>

<template>
  <AppLayout title="Poročila">
    <template #header />
    <div class="pt-12">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-gray-900">Poročila</h1>
          <p class="mt-2 text-sm text-muted-foreground">
            Izberite poročilo za pregled in izvoz podatkov
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card
            v-for="r in reports"
            :key="r.slug"
            class="hover:shadow-lg transition-shadow"
          >
            <CardHeader>
              <div class="flex items-center gap-2">
                <component
                  :is="getReportIcon(r.category)"
                  class="h-5 w-5 text-muted-foreground"
                />
                <CardTitle>{{ r.name }}</CardTitle>
              </div>
              <CardDescription>{{ r.description }}</CardDescription>
            </CardHeader>
            <CardContent>
              <Link :href="getReportUrl(r.slug)">
                <Button variant="ghost" size="sm" class="w-full justify-start">
                  Odpri →
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
