import { apiClient } from '@/lib/api-client';
import { useQuery } from '@tanstack/react-query';
import { Link, useLocation } from '@tanstack/react-router';
import { Building2, CalendarDays, Crosshair, Users } from 'lucide-react';
import { AdminLayout } from './admin-layout';

export function AdminPage() {
  const location = useLocation();

  const complexesQuery = useQuery({
    queryKey: ['admin-complexes'],
    queryFn: () => apiClient.admin.listComplexes(),
  });

  const usersQuery = useQuery({
    queryKey: ['admin-users'],
    queryFn: () => apiClient.admin.listUsers(),
  });

  const stats = {
    totalComplexes: complexesQuery.data?.length ?? 0,
    totalUsers: usersQuery.data?.length ?? 0,
    totalCourts: complexesQuery.data?.reduce((sum, c) => sum + c.courtCount, 0) ?? 0,
    totalBookings:
      complexesQuery.data?.reduce((sum, c) => sum + Math.round(c.avgBookingsPerDay * 30), 0) ?? 0,
  };

  const cards = [
    {
      label: 'Complejos',
      value: stats.totalComplexes,
      icon: Building2,
      color: 'text-blue-600',
      bg: 'bg-blue-100 dark:bg-blue-900/30',
    },
    {
      label: 'Usuarios',
      value: stats.totalUsers,
      icon: Users,
      color: 'text-emerald-600',
      bg: 'bg-emerald-100 dark:bg-emerald-900/30',
    },
    {
      label: 'Canchas',
      value: stats.totalCourts,
      icon: Crosshair,
      color: 'text-purple-600',
      bg: 'bg-purple-100 dark:bg-purple-900/30',
    },
    {
      label: 'Reservas (30d)',
      value: stats.totalBookings.toLocaleString(),
      icon: CalendarDays,
      color: 'text-amber-600',
      bg: 'bg-amber-100 dark:bg-amber-900/30',
    },
  ];

  return (
    <AdminLayout currentPath={location.pathname}>
      <div className="mb-8">
        <h1 className="text-2xl font-bold tracking-tight">Panel de Administración</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Gestioná complejos, planes y usuarios de Playzer.
        </p>
      </div>

      <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {cards.map((card) => {
          const Icon = card.icon;

          return (
            <div
              key={card.label}
              className="rounded-2xl border border-border/60 bg-card p-5 shadow-sm"
            >
              <div className="flex items-center gap-3">
                <div className={`rounded-xl p-2.5 ${card.bg}`}>
                  <Icon className={`size-5 ${card.color}`} />
                </div>

                <div>
                  <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                    {card.label}
                  </p>
                  <p className="text-2xl font-bold">{card.value}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="mb-6">
        <h2 className="mb-3 text-lg font-semibold">Acceso rápido</h2>

        <div className="grid gap-3 sm:grid-cols-3">
          <Link
            to="/admin/complexes"
            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
          >
            <Building2 className="mb-2 size-5 text-blue-600" />
            <p className="font-medium">Complejos</p>
            <p className="text-xs text-muted-foreground">
              {stats.totalComplexes} complejos registrados
            </p>
          </Link>

          <Link
            to="/admin/plans"
            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
          >
            <CalendarDays className="mb-2 size-5 text-emerald-600" />
            <p className="font-medium">Planes</p>
            <p className="text-xs text-muted-foreground">Administrar suscripciones</p>
          </Link>

          <Link
            to="/admin/users"
            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
          >
            <Users className="mb-2 size-5 text-purple-600" />
            <p className="font-medium">Usuarios</p>
            <p className="text-xs text-muted-foreground">{stats.totalUsers} usuarios registrados</p>
          </Link>
        </div>
      </div>
    </AdminLayout>
  );
}
