import { useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { motion } from "framer-motion";
import { LogOut, Image, MapPin, Handshake, ChevronRight, Home, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useGallery } from "@/contexts/GalleryContext";
import { useRoutes } from "@/contexts/RoutesContext";
import { useSponsors } from "@/contexts/SponsorsContext";
import { useMembers } from "@/contexts/MembersContext";

const AdminPanel = () => {
  const { isAuthenticated, logout } = useAuth();
  const navigate = useNavigate();
  const { items } = useGallery();
  const { routes } = useRoutes();
  const { sponsors } = useSponsors();
  const { members } = useMembers();

  if (!isAuthenticated) {
    navigate("/admin");
    return null;
  }

  const cards = [
    {
      title: "Próximas Rotas",
      description: "Gerencie as rotas e viagens do clube",
      icon: MapPin,
      count: routes.length,
      path: "/admin/rotas",
      gradient: "from-primary to-accent",
    },
    {
      title: "Galeria de Fotos",
      description: "Gerencie as fotos e eventos da galeria",
      icon: Image,
      count: items.length,
      path: "/admin/galeria",
      gradient: "from-accent to-primary",
    },
    {
      title: "Patrocinadores",
      description: "Gerencie os patrocinadores do clube",
      icon: Handshake,
      count: sponsors.length,
      path: "/admin/patrocinadores",
      gradient: "from-primary/80 to-accent/80",
    },
    {
      title: "Membros",
      description: "Gerencie os membros do clube",
      icon: Users,
      count: members.length,
      path: "/admin/membros",
      gradient: "from-accent/80 to-primary/60",
    },
  ];

  return (
    <div className="min-h-screen gradient-dark">
      <header className="border-b border-border/10 px-4 py-4">
        <div className="container mx-auto flex items-center justify-between">
          <div>
            <h1 className="font-display text-2xl font-bold text-primary">ITAROTA79</h1>
            <p className="text-xs text-dark-surface-foreground/40">Painel Administrativo</p>
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => navigate("/")}
              className="gap-2 border-border/20 text-muted-foreground hover:text-primary"
            >
              <Home className="w-4 h-4" />
              Home
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => { logout(); navigate("/admin"); }}
              className="gap-2 border-border/20 text-muted-foreground hover:text-primary"
            >
              <LogOut className="w-4 h-4" />
              Sair
            </Button>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-10"
        >
          <h2 className="font-display text-3xl font-bold text-dark-surface-foreground mb-2">
            Central de <span className="text-primary">Gerenciamento</span>
          </h2>
          <p className="text-dark-surface-foreground/50">Selecione uma área para gerenciar</p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6">
          {cards.map((card, i) => (
            <motion.div
              key={card.title}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              onClick={() => navigate(card.path)}
              className="group cursor-pointer bg-secondary/50 border border-border/10 rounded-2xl overflow-hidden card-hover"
            >
              <div className={`h-2 bg-gradient-to-r ${card.gradient}`} />
              <div className="p-8">
                <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                  <card.icon className="w-8 h-8 text-primary" />
                </div>
                <h3 className="font-display text-2xl font-bold text-dark-surface-foreground mb-2">
                  {card.title}
                </h3>
                <p className="text-dark-surface-foreground/50 text-sm mb-6">{card.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-primary font-display text-lg font-bold">{card.count} itens</span>
                  <div className="flex items-center gap-1 text-primary text-sm font-medium group-hover:gap-2 transition-all">
                    Gerenciar <ChevronRight className="w-4 h-4" />
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default AdminPanel;
