"use client";

import { Link } from "@/i18n/routing";
import {
  Activity,
  ArrowRight,
  ArrowUpDown,
  Banknote,
  ChevronRight,
  Clock,
  CreditCard,
  DollarSign,
  PlusCircle,
  Repeat,
} from "lucide-react";
import { motion } from "framer-motion";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";

// Constants for status types
const STATUS = {
  COMPLETED: "COMPLETED",
  IN_PROGRESS: "IN_PROGRESS",
  PENDING: "PENDING",
  CANCELLED: "CANCELLED",
  DISPUTED: "DISPUTED",
  // Additional statuses from trade flow
  PAYMENT_SENT: "PAYMENT_SENT",
  ESCROW_REVIEW: "ESCROW_REVIEW",
  SELLER_CONFIRMED: "SELLER_CONFIRMED",
  BUYER_CONFIRMED: "BUYER_CONFIRMED",
};

// Helper to categorize status for display
const getStatusCategory = (status: string) => {
  const completedStatuses = ["COMPLETED", "RELEASED"];
  const inProgressStatuses = ["PAYMENT_SENT", "ESCROW_REVIEW", "SELLER_CONFIRMED", "BUYER_CONFIRMED", "IN_PROGRESS"];
  const pendingStatuses = ["PENDING", "OPEN"];
  const disputedStatuses = ["DISPUTED", "CANCELLED", "REFUNDED"];

  if (completedStatuses.includes(status)) return "completed";
  if (inProgressStatuses.includes(status)) return "in_progress";
  if (pendingStatuses.includes(status)) return "pending";
  if (disputedStatuses.includes(status)) return "disputed";
  return "pending";
};

const getStatusLabel = (status: string) => {
  const labels: Record<string, string> = {
    COMPLETED: "Completed",
    IN_PROGRESS: "In Progress",
    PENDING: "Pending",
    CANCELLED: "Cancelled",
    DISPUTED: "Disputed",
    PAYMENT_SENT: "Payment Sent",
    ESCROW_REVIEW: "In Escrow",
    SELLER_CONFIRMED: "Seller Confirmed",
    BUYER_CONFIRMED: "Buyer Confirmed",
    RELEASED: "Released",
    REFUNDED: "Refunded",
    OPEN: "Open",
  };
  return labels[status] || status;
};

// Constants for trade types
const TRADE_TYPE = {
  BUY: "BUY",
  SELL: "SELL",
};
interface TradeItem {
  id: string;
  type: string;
  status: string;
  amount: string;
  value: string;
  user: string;
  userRating: number;
  avatar?: string;
  paymentMethod: string;
  time?: string; // Make time optional
  timestamp?: string; // Add timestamp from P2PTradeActivity
}
interface TradingActivityProps {
  trades: TradeItem[];
  isLoading: boolean;
}
export function TradingActivity({ trades, isLoading }: TradingActivityProps) {
  const tExt = useTranslations("ext");
  if (isLoading) {
    return <TradingActivitySkeleton />;
  }
  if (!trades || trades.length === 0) {
    return <EmptyTradingActivity />;
  }
  return (
    <div className="space-y-6">
      {trades.map((trade, index) => {
        return (
          <Link key={trade.id} href={`/p2p/trade/${trade.id}`} className="block">
            <motion.div
              initial={{
                y: 20,
                opacity: 0,
              }}
              animate={{
                y: 0,
                opacity: 1,
              }}
              transition={{
                duration: 0.3,
                delay: index * 0.1,
              }}
              className="group cursor-pointer"
            >
              <div className="p-6 bg-background rounded-2xl border border-border/40 shadow-sm hover:shadow-md hover:border-border transition-all duration-300 relative overflow-hidden">
                <div
                  className={cn(
                    "absolute top-0 left-0 w-1.5 h-full",
                    trade.type === TRADE_TYPE.BUY ? "bg-green-500" : "bg-blue-500"
                  )}
                />

                <div className="flex items-center gap-5">
                  <div
                    className={cn(
                      "flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center",
                      trade.type === TRADE_TYPE.BUY
                        ? "bg-gradient-to-br from-green-400 to-emerald-600 text-white"
                        : "bg-gradient-to-br from-blue-400 to-indigo-600 text-white"
                    )}
                  >
                    {trade.type === TRADE_TYPE.BUY ? (
                      <ArrowUpDown className="h-7 w-7" />
                    ) : (
                      <Repeat className="h-7 w-7" />
                    )}
                  </div>

                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div className="font-semibold text-xl">
                        {trade.type === TRADE_TYPE.BUY ? "Bought" : "Sold"}{" "}
                        {trade.amount}
                      </div>
                      <Badge
                        variant={
                          getStatusCategory(trade.status) === "completed"
                            ? "default"
                            : getStatusCategory(trade.status) === "in_progress"
                              ? "secondary"
                              : "outline"
                        }
                        className={cn(
                          "px-3 py-1 rounded-full text-sm",
                          getStatusCategory(trade.status) === "completed"
                            ? "bg-green-500/10 text-green-500 border-green-200 dark:border-green-900"
                            : getStatusCategory(trade.status) === "in_progress"
                              ? "bg-blue-500/10 text-blue-500 border-blue-200 dark:border-blue-900"
                              : getStatusCategory(trade.status) === "disputed"
                                ? "bg-red-500/10 text-red-500 border-red-200 dark:border-red-900"
                                : "bg-amber-500/10 text-amber-500 border-amber-200 dark:border-amber-900"
                        )}
                      >
                        <div className="flex items-center gap-1">
                          {getStatusCategory(trade.status) === "completed" ? (
                            <CheckCircle2 className="h-3.5 w-3.5" />
                          ) : getStatusCategory(trade.status) === "in_progress" ? (
                            <Clock className="h-3.5 w-3.5" />
                          ) : (
                            <AlertCircle className="h-3.5 w-3.5" />
                          )}
                          {getStatusLabel(trade.status)}
                        </div>
                      </Badge>
                    </div>

                    <div className="mt-2 flex items-center text-sm text-muted-foreground">
                      <div className="flex items-center mr-4">
                        <Avatar className="h-6 w-6 mr-2">
                          <AvatarImage
                            src={trade.avatar || "/placeholder.svg"}
                            alt={trade.user || "User"}
                          />
                          <AvatarFallback>
                            {trade.user ? trade.user.substring(0, 2).toUpperCase() : "U"}
                          </AvatarFallback>
                        </Avatar>
                        {trade.user || "Unknown User"}
                      </div>
                      <div className="flex items-center">
                        <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 mr-1" />
                        {trade.userRating}
                      </div>
                    </div>

                    <div className="mt-3 flex items-center justify-between">
                      <div className="flex items-center text-sm">
                        <div className="flex items-center mr-4">
                          {trade.paymentMethod === "Bank Transfer" ? (
                            <CreditCard className="h-4 w-4 mr-1.5 text-blue-500" />
                          ) : trade.paymentMethod === "PayPal" ? (
                            <DollarSign className="h-4 w-4 mr-1.5 text-indigo-500" />
                          ) : (
                            <Banknote className="h-4 w-4 mr-1.5 text-green-500" />
                          )}
                          {trade.paymentMethod}
                        </div>
                        <div className="text-sm text-muted-foreground">
                          {trade.time || trade.timestamp}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="font-medium text-lg">{trade.value}</div>
                        <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:translate-x-1 transition-transform" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          </Link>
        );
      })}

      <Link href="/p2p/trade">
        <Button variant="outline" className="w-full justify-between group relative overflow-hidden">
          <div className={`absolute inset-0 bg-gradient-to-r from-blue-600 via-violet-500 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity`} />
          <span className="relative z-10">{tExt("view_all_activity")}</span>
          <ChevronRight className="h-4 w-4 relative z-10" />
        </Button>
      </Link>
    </div>
  );
}
export function EmptyTradingActivity() {
  const t = useTranslations("ext");
  const tCommon = useTranslations("common");
  return (
    <div className="border border-dashed rounded-xl p-8 text-center">
      <div className="flex flex-col items-center">
        <Activity className="h-12 w-12 text-muted-foreground/40 mb-4" />
        <h3 className="text-lg font-medium mb-2">{tCommon("no_trading_activity_yet")}</h3>
        <p className="text-muted-foreground max-w-md mb-6">
          {t("start_trading_with_other_users_to")}
        </p>
        <Link href="/p2p/offer">
          <Button>
            <PlusCircle className="mr-2 h-4 w-4" /> {tCommon("find_trading_partners")}
          </Button>
        </Link>
      </div>
    </div>
  );
}
export function TradingActivitySkeleton() {
  return (
    <div className="space-y-6">
      {[1, 2, 3].map((i) => (
        <div key={i} className="border rounded-xl p-6">
          <div className="flex gap-4">
            <Skeleton className="h-14 w-14 rounded-full" />
            <div className="flex-1 space-y-4">
              <div className="flex justify-between">
                <Skeleton className="h-6 w-32" />
                <Skeleton className="h-6 w-24 rounded-full" />
              </div>
              <div className="flex items-center">
                <Skeleton className="h-6 w-6 rounded-full mr-2" />
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-4 w-16 ml-4" />
              </div>
              <div className="flex justify-between pt-2">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-6 w-24" />
              </div>
            </div>
          </div>
          <div className="mt-4 pt-4 border-t flex justify-end">
            <Skeleton className="h-9 w-28" />
          </div>
        </div>
      ))}
      <Skeleton className="h-10 w-full" />
    </div>
  );
}
import { AlertCircle, CheckCircle2, Star } from "lucide-react";