"use client";

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

export function BalanceCard({
  balances,
  pin,
}: {
  balances: { currency: string; amount: number }[];
  pin?:     string;
}) {
  const [selectedCurrency, setSelectedCurrency] = React.useState<string | undefined>(balances[0]?.currency);
  const [isVisible, setIsVisible] = React.useState(true);

  const currentBalance = selectedCurrency
    ? (balances.find((b) => b.currency === selectedCurrency)?.amount || 0)
    : 0;

  const displayBalance = selectedCurrency
    ? new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: selectedCurrency,
      }).format(currentBalance)
    : new Intl.NumberFormat("en-US", { style: "decimal", minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(currentBalance);

  return (
    <div className="grid gap-2 bg-primary text-white rounded-xl px-5 pl-6 py-4 border border-border">
      <div className="flex items-center space-x-3">
        <h3 className="font-medium text-sm opacity-90">Balance</h3>
        <button
          className="p-0 outline-none bg-transparent opacity-90 hover:opacity-none transition-opacity duration-300 cursor-pointer"
          onClick={() => setIsVisible(!isVisible)}
        >
          {isVisible ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
        </button>

        {/* TODO: view transactions */}
      </div>

      <div className="flex items-center content-center font-bold text-2xl min-h-8">
        <span className="inline-block">{isVisible ? displayBalance : "******" }</span>
      </div>
      {/* TODO: Add button */}

      <div className="">
        {balances.length === 0 ? (
          <div className="mt-2 h-6.25"></div>
        ) : ( balances.length < 6 ? (
          <div className="flex gap-1 mt-2 user-select-none">
            {balances.map((b) => (
              <button
                key={b.currency}
                onClick={() => setSelectedCurrency(b.currency)}
                className={cn(
                  "px-3 py-1 rounded-full text-xs font-medium transition-colors duration-300 cursor-pointer bg-transparent ",
                  selectedCurrency === b.currency
                    ? "bg-background text-primary opacity-none"
                    : "opacity-95 hover:opacity-none"
                )}
              >
                {b.currency}
              </button>
            ))}
          </div>
        ) : (
          <Carousel
            opts={{
              align: "start",
              dragFree: true,
              loop: false,
              slidesToScroll: 5,
            }}
            className="w-auto max-w-78 mt-2 user-select-none"
          >
            <CarouselContent className="-ml-1">
              {balances.map((b) => (
                <CarouselItem key={'bal_' + b.currency} className="basis-1/5 pl-1">
                  <button
                    onClick={() => setSelectedCurrency(b.currency)}
                    className={cn(
                      "px-3 py-1 rounded-full text-xs font-medium",
                      "transition-colors duration-300 cursor-pointer",
                      "user-select-none bg-transparent",
                      selectedCurrency === b.currency
                        ? "bg-background text-primary opacity-none"
                        : "opacity-95 hover:opacity-none"
                    )}
                  >
                    {b.currency}
                  </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>

      {/* TODO: Pin */}
    </div>
  );
}