import React, { use, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import { FaCog } from 'react-icons/fa';
import { IoIosNotifications } from 'react-icons/io';
import { RootState } from '../../store/store';
import { UserState } from '../../store/slices/userSlice';
import api from '../../config/api';

// const fetchAccountData = async (accountId: string) => {
//   try {
//     if(!accountId) return null;
//     const response = await api.get(`/api/accounts/${accountId}`);
//     return response.data;
//   } catch (error) {
//     console.error("Error fetching account data:", error);
//     throw error;
//   }
// }

// const fetchTransactionData = async (accountId: string, transactionId: string) => {
//   try {
//     if(!accountId || !transactionId) return null;
//     const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
//     return response.data;
//   } catch (error) {
//     console.error("Error fetching account data:", error);
//     throw error;
//   }
// }


interface AccountNavProps {
  accountName: string | null;
  transactionName: string | null;
}

const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
  const user: UserState = useSelector((state: RootState) => state.user);

  const initials = user.username
    ? user.username
      .split(' ')
      .map((n) => n[0])
      .join('')
      .slice(0, 2)
      .toUpperCase()
    : 'U';

  // useEffect(() => {
  //   if (accountId) {
  //     api.get(`/api/accounts/${accountId}`)
  //       .then(response => {
  //         // Handle the account data if needed
  //         console.log(response.data, "Line 29");
  //       })
  //       .catch(error => {
  //         console.error("Error fetching account data:", error);
  //       });
  //   }
  // }, [accountId, transactionId]);

  return (
    <header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">

      <h1 className="text-md font-medium text-gray-800 capitalize">
        Account
        {accountName ? ` > ${accountName}` : ''}
        {transactionName ? ` > ${transactionName}` : ''}
      </h1>

      {/* <h1 className="text-md font-medium text-gray-800 capitalize">Account</h1> */}

      <div className="flex items-center">
        {/* Notification + Settings with smaller gap */}
        <div className="flex items-center">
          <button
            aria-label="Notifications"
            className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
          >
            <IoIosNotifications className="text-xl" />
          </button>

          <Link
            to="/settings"
            aria-label="Settings"
            className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
          >
            <FaCog className="text-sm" />
          </Link>
        </div>

        {/* Avatar with separate spacing */}
        <div className="w-9 h-9 ms-3 rounded-full overflow-hidden bg-[var(--primary)] flex items-center justify-center text-white font-semibold text-sm">
          {user.picture ? (
            <img
              src={user.picture}
              alt="User avatar"
              className="w-full h-full object-cover"
            />
          ) : (
            initials
          )}
        </div>
      </div>
    </header>
  );
};

export default AccountNav;