"use client";

import * as React                             from "react";
import { Empty, EmptyHeader, EmptyTitle }     from "@/components/ui/empty";
import { EmptyDescription, EmptyMedia }       from "@/components/ui/empty";
import { Filter }                             from "lucide-react";
import { cn }     from "@/lib/utils";
import { Eye, EyeOff } from "lucide-react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

export function MostActiveAccount({
  account,
  stats,
  year,
}: {
  year: number;
  account?: {
    id: string;
    name: string;
    lastTradeAt?: Date;
    tradeCount: number;
  };
  stats: Record<string, {
    totalProfit: number;
    averageWin: number;
    averageLoss: number;
    winStreak: number;
    roi: number;
    winRate: number;
  }>;
}) {
  const [
    selectedCurrency,
    setSelectedCurrency
  ] = React.useState(
    Object.keys(stats ?? {})[0] ?? undefined
  );

  const displayStats: { name: string; value?: string | number }[] = [
    { name: 'Total P&L', value: (stats[selectedCurrency]?.totalProfit ?? 0).toFixed(2) },
    { name: 'Win Rate', value: `${((stats[selectedCurrency]?.winRate ?? 0) * 100).toFixed(1)}%` },
    { name: 'Avg Win', value: (stats[selectedCurrency]?.averageWin ?? 0).toFixed(2) },
    { name: 'Avg Loss', value: (stats[selectedCurrency]?.averageLoss ?? 0).toFixed(2) },
    { name: 'Win Streak', value: stats[selectedCurrency]?.winStreak ?? 0 },
    { name: 'ROI', value: (stats[selectedCurrency]?.roi ?? 0).toFixed(2) },
  ];

  return (
    <div>
      <div className="leading-none font-semibold">Most Active Account</div>
      <div className="p-4 border border-border rounded-xl mt-3">
        {account ? (
          <>
            <div className="font-semibold">{account.name}</div>
            <div className="text-sm text-gray-500 mt-1">{account.tradeCount} trades in {year}</div>
            {account?.lastTradeAt && (
              <div className="text-sm text-gray-500 mt-2">Last trade in {account?.lastTradeAt.toString()}</div>
            )}
            <Carousel
              opts={{
                align: "start",
                dragFree: true,
                loop: false,
              }}
              className="w-auto max-w-78 mt-4 user-select-none"
            >
              <CarouselContent className="-ml-1">
                {Object.keys(stats).map((c, i) => (
                  <CarouselItem key={'account_stats_' + c} className="basis-1/5 pl-1">
                    <button
                      onClick={() => setSelectedCurrency(c)}
                      className={cn(
                        "px-3 py-1 rounded-full text-xs font-medium",
                        "transition-colors duration-300 cursor-pointer",
                        "user-select-none bg-transparent",
                        selectedCurrency === c
                          ? "bg-background text-primary opacity-none"
                          : "opacity-95 hover:opacity-none"
                      )}
                    >{c}</button>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious className={cn(
                "border-none bg-transparent hover:bg-transparent text-white",
                "hover:text-white transition-[color, opacity] duration-300 cursor-pointer",
                "opacity-80 hover:opacity-100 user-select-none",
                "p-0 py-2 w-auto h-auto -left-5"
              )} />
              <CarouselNext className={cn(
                "border-none bg-transparent hover:bg-transparent text-white",
                "hover:text-white transition-[color, opacity] duration-300 cursor-pointer",
                "opacity-80 hover:opacity-100 user-select-none",
                "p-0 py-2 w-auto h-auto -right-5"
              )} />
            </Carousel>

            <div className="grid grid-cols-4 gap-4 space-y-4 text-center mt-4">
              {displayStats.map((stat, i) => (
                <div key={'ma_stat_' + i}
                  className="inline-flex flex-col items-center w-auto">
                  <div className={cn(
                    'text-primary text-2xl font-bold text-center flex',
                    'items-center justify-center content-center'
                  )}>{stat.value}</div>
                  <div className="text-xs font-medium text-gray-800 mt-2">
                    {stat.name}
                  </div>
                </div>
              ))}
            </div>
          </>
        ) : 
          <Empty>
            <EmptyMedia variant="icon"><Filter /></EmptyMedia>
            <EmptyHeader>
              <EmptyTitle>No activity</EmptyTitle>
              <EmptyDescription>You do not have any trading activity.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        }
      </div>
    </div>
  );
}