'use client'

import { useState } from "react";
import { User, CircleFadingPlus, Copy, Check } from "lucide-react";
import { useAuth } from "../../context/AuthContext";
import Image from "next/image";
import Button from "../Button";
import WalletIcon from "../../../public/assets/GameWallet.png";
import { formatAmount } from "../../lib/utils/helpers";
import { useRouter } from 'next/navigation';


interface AccountOverviewProps {
  walletBalance: number;
  accountNumber?: string;
  }
  
export const AccountOverview = ({ walletBalance, accountNumber }: AccountOverviewProps) => {
  const { user } = useAuth();
  const [copied, setCopied] = useState(false);
  const router = useRouter();

  const handleCopyAccountNumber = () => {
    const userAccountNumber =  accountNumber || ""; 
    navigator.clipboard.writeText(userAccountNumber);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleDeposit = () => { 
      router.push('/add-money'); 
  };

   
    return (
      <div className="bg-[#F5F5F599] rounded-xl shadow-sm p-4 sm:p-6 mb-6 sm:mb-8">
        <div className="flex items-center justify-between mb-4 sm:mb-6 border-b-2 py-5">
          <div className="flex items-center space-x-2">
            <div className="border-2 border-gray-300 rounded-lg py-2 px-3">
              <User className="text-black" size={20} strokeWidth={3}/>
            </div>

            <span className="font-medium text-gray-700 text-sm sm:text-base">
              {user?.firstName && user?.lastName
                ? `${user.firstName} ${user.lastName}'s Account`
                : "Guest's Account"}
            </span>
          </div>

          {/* Account Number */}
          <div className="flex items-center space-x-2">
            <span className="text-gray-700 text-sm sm:text-base font-mono select-all">
              { accountNumber || ""}
            </span>
            <button
              onClick={handleCopyAccountNumber}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              title="Copy account number"
            >
              {copied ? (
                <Check size={18} className="text-green-600" />
              ) : (
                <Copy size={18} className="text-gray-600" />
              )}
            </button>
          </div>
        </div>
  
        <div className="mb-2 sm:mb-2">
          <h3 className="text-gray-600 font-normal text-xl">Wallet Balance</h3>
          <div className="flex items-center justify-between">
            <span className="text-xl sm:text-3xl lg:text-4xl font-bold text-gray-900">
              {formatAmount(walletBalance)}
            </span>
            <div className="flex items-center justify-center mr-10">
              <Image
                src={WalletIcon}
                alt="Wallet Icon"
                className="w-20 h-20 sm:w-30 sm:h-30 object-contain"
              />
            </div>
          </div>
        </div>
  
        <Button 
          type="submit"
          width="15%"
          onClick={handleDeposit}
        > 
          <div className="flex items-center justify-center gap-2">
            <CircleFadingPlus size={16} strokeWidth={3} />
            <h4>Deposit</h4>
          </div>
        </Button>
  
      </div>
    );
  };