"use client";

import { useQueryClient } from "@tanstack/react-query";
import {
  ChevronDown,
  Eye,
  Heart,
  Pause,
  Play,
  ShoppingCart,
  Trash2,
  TrendingUp,
} from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useMyListings } from "@/lib/hooks/use-listings";
import { useSession } from "@/lib/hooks/use-session";
import { MyAdsIntentionList } from "./MyAdsIntentionList";

export function MyAdsPanel() {
  const { user } = useSession();
  const queryClient = useQueryClient();
  const [activeTab, setActiveTab] = useState<string>("active");
  const [expandedIntentions, setExpandedIntentions] = useState<Set<number>>(
    new Set(),
  );

  // Determinar status baseado na aba ativa
  const status =
    activeTab === "active"
      ? "active"
      : activeTab === "paused"
        ? "cancelled"
        : // Backend usa 'cancelled' para pausados
          activeTab === "sold"
          ? "sold"
          : undefined; // "all" busca todos

  // Usar React Query para buscar meus anúncios com atualização automática
  // O queryKey muda quando status muda, então recarrega automaticamente
  const { listings, isLoading: loading, refetch } = useMyListings(status);

  const invalidateCache = () => {
    queryClient.invalidateQueries({ queryKey: ["my-listings"] });
    queryClient.invalidateQueries({ queryKey: ["listings"] });
  };

  const handlePause = async (listingId: number) => {
    try {
      const res = await fetch(`/api/listings/${listingId}/pause`, {
        method: "POST",
      });
      if (res.ok) {
        invalidateCache();
      }
    } catch (error) {
      console.error("Erro ao pausar anúncio:", error);
    }
  };

  const handleActivate = async (listingId: number) => {
    try {
      const res = await fetch(`/api/listings/${listingId}/activate`, {
        method: "POST",
      });
      if (res.ok) {
        invalidateCache();
      }
    } catch (error) {
      console.error("Erro ao reativar anúncio:", error);
    }
  };

  const handleDelete = async (listingId: number) => {
    if (!confirm("Tem certeza que deseja excluir este anúncio?")) return;

    try {
      const res = await fetch(`/api/listings/${listingId}`, {
        method: "DELETE",
      });
      if (res.ok) {
        invalidateCache();
      }
    } catch (error) {
      console.error("Erro ao excluir anúncio:", error);
    }
  };

  const getStatusBadge = (status: string) => {
    const variants: Record<string, "default" | "secondary" | "destructive"> = {
      active: "default",
      sold: "secondary",
      cancelled: "destructive",
      expired: "destructive",
      in_escrow: "secondary",
    };

    const labels: Record<string, string> = {
      active: "Ativo",
      sold: "Vendido",
      cancelled: "Cancelado",
      expired: "Expirado",
      in_escrow: "Em Escrow",
    };

    return (
      <Badge variant={variants[status] || "secondary"}>
        {labels[status] || status}
      </Badge>
    );
  };

  if (!user) {
    return (
      <div className="text-center py-12">
        <p className="text-muted-foreground">
          Faça login para ver seus anúncios
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Meus Anúncios</h2>
        <p className="text-muted-foreground mt-1">
          Gerencie seus anúncios e acompanhe o desempenho
        </p>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="active">Ativos</TabsTrigger>
          <TabsTrigger value="paused">Pausados</TabsTrigger>
          <TabsTrigger value="sold">Vendidos</TabsTrigger>
          <TabsTrigger value="all">Todos</TabsTrigger>
        </TabsList>

        <TabsContent value={activeTab} className="mt-6">
          {loading ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {Array.from({ length: 6 }).map((_, i) => (
                <Skeleton key={i} className="h-64 w-full" />
              ))}
            </div>
          ) : listings.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-muted-foreground">Nenhum anúncio encontrado</p>
            </div>
          ) : (
            <div className="space-y-4">
              {listings.map((listing) => {
                const isExpanded = expandedIntentions.has(listing.listing_id);
                return (
                  <div
                    key={listing.listing_id}
                    className="border rounded-lg p-4 space-y-4"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-semibold text-lg">
                            {listing.item_name}
                          </h3>
                          {getStatusBadge(listing.listing_status)}
                        </div>
                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
                          <div className="flex items-center gap-1">
                            <Eye className="h-4 w-4" />
                            <span>{listing.views_count} visualizações</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Heart className="h-4 w-4" />
                            <span>{listing.favorites_count} favoritos</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <TrendingUp className="h-4 w-4" />
                            <span>
                              {(() => {
                                if (listing.price_pix) {
                                  const price =
                                    typeof listing.price_pix === "string"
                                      ? parseFloat(listing.price_pix)
                                      : listing.price_pix;
                                  return `R$ ${price.toFixed(2)}`;
                                }
                                if (listing.price_tibia_coins) {
                                  const price =
                                    typeof listing.price_tibia_coins ===
                                    "string"
                                      ? parseInt(listing.price_tibia_coins, 10)
                                      : listing.price_tibia_coins;
                                  return `${price.toLocaleString()} TC`;
                                }
                                if (listing.price_gold_coins) {
                                  const price =
                                    typeof listing.price_gold_coins === "string"
                                      ? parseInt(listing.price_gold_coins, 10)
                                      : listing.price_gold_coins;
                                  return `${price.toLocaleString()} GP`;
                                }
                                return "Preço não informado";
                              })()}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {listing.listing_status === "active" && (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handlePause(listing.listing_id)}
                          >
                            <Pause className="h-4 w-4 mr-1" />
                            Pausar
                          </Button>
                        )}
                        {listing.listing_status === "cancelled" && (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleActivate(listing.listing_id)}
                          >
                            <Play className="h-4 w-4 mr-1" />
                            Reativar
                          </Button>
                        )}
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleDelete(listing.listing_id)}
                        >
                          <Trash2 className="h-4 w-4 mr-1" />
                          Excluir
                        </Button>
                      </div>
                    </div>

                    {/* Seção de Intenções de Compra */}
                    {listing.listing_status === "active" &&
                      !listing.is_auction && (
                        <div className="border-t pt-4">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              const newExpanded = new Set(expandedIntentions);
                              if (isExpanded) {
                                newExpanded.delete(listing.listing_id);
                              } else {
                                newExpanded.add(listing.listing_id);
                              }
                              setExpandedIntentions(newExpanded);
                            }}
                            className="w-full justify-between"
                          >
                            <div className="flex items-center gap-2">
                              <ShoppingCart className="h-4 w-4" />
                              <span>Intenções de Compra</span>
                            </div>
                            <ChevronDown
                              className={`h-4 w-4 transition-transform ${
                                isExpanded ? "transform rotate-180" : ""
                              }`}
                            />
                          </Button>
                          {isExpanded && (
                            <div className="mt-4">
                              <MyAdsIntentionList
                                listingId={listing.listing_id}
                                sellerId={listing.seller_id}
                              />
                            </div>
                          )}
                        </div>
                      )}
                  </div>
                );
              })}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}