import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Package, Tag, Eye, Star } from "lucide-react";
import { formatPrice } from "@/lib/format";

export const Route = createFileRoute("/admin/")({
  component: Dashboard,
});

function Dashboard() {
  const { data } = useQuery({
    queryKey: ["admin-stats"],
    queryFn: async () => {
      const [s, c] = await Promise.all([
        supabase.from("services").select("*"),
        supabase.from("service_categories").select("id"),
      ]);
      return { services: s.data ?? [], categories: c.data ?? [] };
    },
  });

  const total = data?.services.length ?? 0;
  const published = data?.services.filter((s) => s.published).length ?? 0;
  const featured = data?.services.filter((s) => s.featured).length ?? 0;
  const avgPrice = total ? Math.round(data!.services.reduce((acc, s) => acc + s.price_cents, 0) / total) : 0;

  return (
    <div className="p-8">
      <h1 className="font-display text-3xl font-bold">Vue d'ensemble</h1>
      <p className="text-sm text-muted-foreground mt-1">Pilotage rapide de votre catalogue.</p>

      <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Stat icon={Package} label="Prestations" value={total} />
        <Stat icon={Tag} label="Catégories" value={data?.categories.length ?? 0} />
        <Stat icon={Eye} label="Publiées" value={published} />
        <Stat icon={Star} label="Mises en avant" value={featured} />
      </div>

      <div className="mt-8 rounded-2xl border border-border bg-card/40 p-6">
        <h2 className="font-display text-lg font-bold">Prix moyen</h2>
        <p className="mt-2 text-3xl font-display font-bold text-primary">{formatPrice(avgPrice)}</p>
      </div>
    </div>
  );
}

function Stat({ icon: Icon, label, value }: { icon: any; label: string; value: number }) {
  return (
    <div className="rounded-2xl border border-border bg-card/40 p-6">
      <div className="flex items-center justify-between">
        <span className="text-xs text-muted-foreground uppercase tracking-wider">{label}</span>
        <Icon className="size-4 text-primary" />
      </div>
      <div className="mt-3 font-display text-3xl font-bold">{value}</div>
    </div>
  );
}