"use client";

import {
  CheckCircle2,
  Clock,
  MessageSquare,
  ShoppingCart,
  XCircle,
} from "lucide-react";
import { useEffect, useState } from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { IntentionDetailModal } from "./IntentionDetailModal";

interface PurchaseIntention {
  intention_id: number;
  buyer_id: number;
  payment_method: string;
  status: "pending" | "accepted" | "rejected" | "expired" | "completed";
  buyer_message: string | null;
  seller_response: string | null;
  created_at: string;
  custom_offer_amount: number | null;
  custom_offer_currency: string | null;
  custom_offer_created_at: string | null;
  buyer?: {
    user_id: number;
    username: string;
    email: string;
  };
}

interface MyAdsIntentionListProps {
  listingId: number;
  sellerId: number;
}

function formatTimeAgo(date: Date): string {
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
  if (seconds < 60) return "há alguns segundos";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60)
    return `há ${minutes} ${minutes === 1 ? "minuto" : "minutos"}`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `há ${hours} ${hours === 1 ? "hora" : "horas"}`;
  const days = Math.floor(hours / 24);
  return `há ${days} ${days === 1 ? "dia" : "dias"}`;
}

function getStatusBadge(status: string) {
  switch (status) {
    case "pending":
      return (
        <Badge
          variant="secondary"
          className="bg-yellow-500/20 text-yellow-700 dark:text-yellow-400"
        >
          <Clock className="h-3 w-3 mr-1" />
          Pendente
        </Badge>
      );
    case "accepted":
      return (
        <Badge
          variant="secondary"
          className="bg-green-500/20 text-green-700 dark:text-green-400"
        >
          <CheckCircle2 className="h-3 w-3 mr-1" />
          Aceita
        </Badge>
      );
    case "rejected":
      return (
        <Badge
          variant="secondary"
          className="bg-red-500/20 text-red-700 dark:text-red-400"
        >
          <XCircle className="h-3 w-3 mr-1" />
          Rejeitada
        </Badge>
      );
    default:
      return <Badge variant="secondary">{status}</Badge>;
  }
}

function getPaymentMethodLabel(method: string): string {
  switch (method) {
    case "pix":
      return "PIX";
    case "tibia_coins":
      return "Tibia Coins";
    case "gold_coins":
      return "Gold Coins";
    case "trade":
      return "Troca";
    default:
      return method.toUpperCase();
  }
}

function formatCustomOffer(intention: PurchaseIntention): string | null {
  if (
    intention.custom_offer_amount === null ||
    intention.custom_offer_amount === undefined ||
    !intention.custom_offer_currency
  ) {
    return null;
  }

  const amount = intention.custom_offer_amount;
  switch (intention.custom_offer_currency) {
    case "pix":
      return `R$ ${amount.toFixed(2)}`;
    case "tibia_coins":
      return `${Math.round(amount).toLocaleString("pt-BR")} TC`;
    case "gold_coins":
      return `${Math.round(amount).toLocaleString("pt-BR")} GP`;
    default:
      return amount.toLocaleString("pt-BR");
  }
}

export function MyAdsIntentionList({
  listingId,
  sellerId,
}: MyAdsIntentionListProps) {
  const [intentions, setIntentions] = useState<PurchaseIntention[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedIntention, setSelectedIntention] =
    useState<PurchaseIntention | null>(null);
  const [filter, setFilter] = useState<
    "all" | "pending" | "accepted" | "rejected"
  >("all");

  const loadIntentions = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (filter !== "all") {
        params.set("status", filter);
      }
      const res = await fetch(
        `/api/listings/${listingId}/intentions?${params.toString()}`,
      );
      if (res.ok) {
        const data = await res.json();
        if (data.success) {
          setIntentions(data.intentions || []);
        }
      }
    } catch (error) {
      console.error("Erro ao carregar intenções:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadIntentions();
  }, [loadIntentions]);

  const pendingCount = intentions.filter((i) => i.status === "pending").length;

  if (loading) {
    return (
      <div className="space-y-2">
        {Array.from({ length: 3 }).map((_, i) => (
          <Skeleton key={i} className="h-20 w-full" />
        ))}
      </div>
    );
  }

  if (intentions.length === 0) {
    return (
      <div className="text-center py-8 text-sm text-muted-foreground">
        Nenhuma intenção de compra encontrada
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Filtros */}
      <div className="flex items-center gap-2 flex-wrap">
        <Button
          variant={filter === "all" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("all")}
        >
          Todas ({intentions.length})
        </Button>
        <Button
          variant={filter === "pending" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("pending")}
        >
          Pendentes ({pendingCount})
        </Button>
        <Button
          variant={filter === "accepted" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("accepted")}
        >
          Aceitas
        </Button>
        <Button
          variant={filter === "rejected" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("rejected")}
        >
          Rejeitadas
        </Button>
      </div>

      {/* Lista de intenções */}
      <div className="space-y-2">
        {intentions.map((intention) => (
          <div
            key={intention.intention_id}
            className="border rounded-lg p-4 hover:bg-muted/50 transition-colors cursor-pointer"
            onClick={() => setSelectedIntention(intention)}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <Avatar className="h-10 w-10">
                  <AvatarFallback>
                    {intention.buyer?.username.charAt(0).toUpperCase() || "?"}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-medium text-sm">
                      {intention.buyer?.username || "Usuário"}
                    </span>
                    {getStatusBadge(intention.status)}
                  </div>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
                    <ShoppingCart className="h-3 w-3" />
                    <span>
                      {getPaymentMethodLabel(intention.payment_method)}
                    </span>
                    <span>•</span>
                    <Clock className="h-3 w-3" />
                    <span>{formatTimeAgo(new Date(intention.created_at))}</span>
                  </div>
                  {formatCustomOffer(intention) && (
                    <div className="flex items-center gap-2 mb-1">
                      <Badge
                        variant="outline"
                        className="border-primary text-primary"
                      >
                        Oferta: {formatCustomOffer(intention)}
                      </Badge>
                      {intention.custom_offer_created_at && (
                        <span className="text-[10px] text-muted-foreground">
                          {new Date(
                            intention.custom_offer_created_at,
                          ).toLocaleString("pt-BR")}
                        </span>
                      )}
                    </div>
                  )}
                  {intention.buyer_message && (
                    <p className="text-xs text-muted-foreground line-clamp-1">
                      <MessageSquare className="h-3 w-3 inline mr-1" />
                      {intention.buyer_message}
                    </p>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Modal de detalhes */}
      {selectedIntention && (
        <IntentionDetailModal
          open={!!selectedIntention}
          onOpenChange={(open) => {
            if (!open) setSelectedIntention(null);
          }}
          intention={selectedIntention}
          listingId={listingId}
          onUpdate={loadIntentions}
        />
      )}
    </div>
  );
}