callfi/app/users/[id]/page.tsx

"use client";

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import UserDetailModal from '@/components/UserDetailsModal';
import { motion } from 'framer-motion';
import CustomHeader from '@/components/CustomHeader';
import { FaArrowDown, FaArrowUp, FaShare } from 'react-icons/fa';
import { FaArrowLeft } from 'react-icons/fa6';
import { NextSeo } from 'next-seo';
import CalloutCard from '@/components/CalloutCard';
import { PrivyProvider, usePrivy } from '@privy-io/react-auth';
import ShareModal from '@/components/ShareModal';
import Link from 'next/link';

function UserPage({ params }: { params: { id: string } }) {
  const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();

  const [activeSelected, setActiveSelected] = useState(true);
  const [expandedInfo, setExpandedInfo] = useState(false);
  const [selectedPeriod, setSelectedPeriod] = useState("all time");
  const [userData, setUserData] = useState<any>(null);
  const [callouts, setCallouts] = useState<any[]>([]);
  const [history, setHistory] = useState<any[]>([]);
  const [loginAlert, setLoginAlert] = useState<string | null>(null);
  const [dexUrls, setDexUrls] = useState<{ [key: string]: string }>({});
  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
  const [isFollowing, setIsFollowing] = useState(false);
  const [isFetchingFollowStatus, setIsFetchingFollowStatus] = useState(true);
  
  const id = params.id;
  const currentUser = "%40"+user?.twitter?.username  ?? "null"; // Change this to the current user dynamically

  useEffect(() => {
    Refresh();
  }, [id]);

  useEffect(() => {
    const fetchCallouts = async () => {
      let apiUrl = `https://api.callfi.io/get_user_callouts.php?tag=${id}`;
      if (selectedPeriod === "month") {
        apiUrl = `https://api.callfi.io/get_user_callouts_monthly.php?tag=${id}`;
      } else if (selectedPeriod === "week") {
        apiUrl = `https://api.callfi.io/get_user_callouts_weekly.php?tag=${id}`;
      }

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        setCallouts(data);

        // Fetch Dexscreener URLs for each callout
        const urls: { [key: string]: string } = {};
        await Promise.all(data.map(async (detail: any) => {
          try {
            const response = await axios.get(`https://api.dexscreener.com/latest/dex/tokens/${detail.ca}`);
            if (response.data && response.data.pairs && response.data.pairs.length > 0) {
              urls[detail.ca] = response.data.pairs[0].url;
            }
          } catch (error) {
            console.error(`Error fetching Dexscreener URL for ${detail.ca}:`, error);
          }
        }));
        setDexUrls(urls);
      } catch (error) {
        console.error('Error fetching callouts:', error);
      }
    };

    fetchCallouts();
  }, [id, selectedPeriod]);

  useEffect(() => {
    const fetchHistory = async () => {
      let apiUrl = `https://api.callfi.io/get_callouts_history.php?username=${id}&period=all time`;
      if (selectedPeriod === "month") {
        apiUrl = `https://api.callfi.io/get_callouts_history.php?username=${id}&period=month`;
      } else if (selectedPeriod === "week") {
        apiUrl = `https://api.callfi.io/get_callouts_history.php?username=${id}&period=week`;
      }

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        setHistory(data);
      } catch (error) {
        console.error('Error fetching history:', error);
      }
    };

    fetchHistory();
  }, [id, selectedPeriod]);

  useEffect(() => {
    Refresh();
  }, [currentUser, id]);

  function Refresh(){
    const fetchFollowStatus = async () => {
      try {
        const response = await fetch(`https://api.callfi.io/get_is_following.php?username=${currentUser}&target=${id}`);
        const data = await response.json();
        setIsFollowing(data == "1");
      } catch (error) {
        console.error('Error fetching follow status:', error);
      } finally {
        setIsFetchingFollowStatus(false);
      }
    };

    fetchFollowStatus();
    const fetchUserData = async () => {
      try {
        const response = await fetch(`https://api.callfi.io/get_user_data.php?username=${id}`);
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    };

    fetchUserData();
  }

  const handleFollowClick = async () => {
    if (!ready || !user) {
      setLoginAlert("You need to be logged in to follow.");
      setTimeout(() => setLoginAlert(null), 3000);
    } else {
      try {
        const response = await fetch(`https://api.callfi.io/${isFollowing ? "unfollow" : "follow"}_user.php?username=${currentUser}&target=${id}`);
        const data = await response.json();
        Refresh();
      } catch (error) {
        console.error('Error following user:', error);
      }
    }
  };

  if (!userData) {
    return <div>Loading...</div>;
  }

  const truncateAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-5)}`;
  };

  const handleShareClick = () => {
    setIsShareModalOpen(true);
  };

  return (
    <>
      <NextSeo title={`CallFi - ${userData.tag}'s profile`} />
      <main className='flex flex-col min-h-screen text-white'>
        <section className='glassmorphism'>
          <div className='grid grid-cols-3 gap-4 flex w-full flex-row p-3'>
            <Link href="/">
            <button className='mr-3'>
              <FaArrowLeft />
            </button>
            </Link>
            <h1 className='text-center'>CallFi Profile</h1>
          </div>

          <div className='rounded-3xl'>
            <div className='grid grid-cols-3 flex-row p-2'>
              <img
                src={userData.img_url}
                className="rounded-full w-full w-36 p-5"
              />
              <div className='flex flex-col p-6 px-2'>
                <div>
                  <p className='font-bold mb-2'>{userData.tag}</p>
                  <p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
                  <p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p> 
                  <p className='text-sm'>{userData.followerCount} Followers</p>
                </div>
                <div className={expandedInfo ? "" : "hidden"}>
                  <p className='text-sm'>{userData.calloutCount} Callouts</p>
                  <p className='text-sm'>{parseFloat(userData.accuracy).toFixed(1)}% Accuracy</p>
                  <p className='text-sm'>{userData.daysSinceJoined} Days</p>
                </div>
              </div>
              <div className='flex col-span-1 justify-end m-3 mb-6 items-end'>
                {expandedInfo ? (
                  <button onClick={() => { setExpandedInfo(false) }}><FaArrowUp /></button>
                ) : (
                  <button onClick={() => { setExpandedInfo(true) }}><FaArrowDown /></button>
                )}
              </div>
            </div>
            <div className='m-2 grid grid-cols-5 gap-2 px-2'>
              <button 
                onClick={currentUser == id ? ()=>{} : handleFollowClick} 
                className={`glassmorphism p-1 col-span-4 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
                disabled={currentUser === id}
              >
                {currentUser == id ? 'My Account' : (isFollowing ? 'Unfollow' : 'Follow')}
              </button>
              <button onClick={handleShareClick} className='glassmorphism p-1 flex items-center justify-center rounded-xl hover:bg-blue-900'><FaShare /></button>
            </div>
            {loginAlert && <p className="text-red-500 text-center">{loginAlert}</p>}
            <div className='grid grid-cols-2 mt-4'>
              <button className={`justify-center text-center ${activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(true) }}>
                <p>Active</p>
              </button>
              <button className={`justify-center text-center ${!activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(false) }}>
                <p>History</p>
              </button>
            </div>
          </div>
        </section>

        <section className={`flex w-full ${activeSelected ? "" : "hidden"}`}>
          <section className="flex flex-col w-full m-2">
            <div className='flex justify-center p-4'>
              <div className='glassmorphism rounded-full flex p-1 text-sm'>
                <button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "all time" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("all time") }}>
                  All Time
                </button>
                <button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "week" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
                  Weekly
                </button>
                <button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
                  Monthly
                </button>
              </div>
            </div>
          </section>
        </section>

        <div className={`${activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
          {callouts.map((callout) => (
            <CalloutCard
              key={callout.ca}
              iconUrl={callout.icon_url}
              token={callout.token}
              ca={callout.ca}
              priceAtCreation={callout.price_at_creation}
              priceNow={callout.price_now}
              gains={parseFloat(callout.gains)}
              dexUrl={dexUrls[callout.ca]} // Pass the Dexscreener URL to the CalloutCard
            />
          ))}
        </div>

        <section className={`flex w-full ${!activeSelected ? "" : "hidden"}`}>
          <section className="flex flex-col w-full m-2">
            <div className='flex justify-center p-4'>
              <div className='glassmorphism rounded-full w-min flex p-1 text-sm'>
                <button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod !== "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
                  Weekly
                </button>
                <button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
                  Monthly
                </button>
              </div>
            </div>
          </section>
        </section>

        <div className={`${!activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
          {history.map((entry) => (
            <CalloutCard
              key={entry.ca}
              iconUrl={entry.icon_url}
              token={entry.id}
              ca={entry.ca}
              priceAtCreation={entry.price_at_creation}
              priceNow={entry.froze_price}
              gains={parseFloat(entry.gains)}
              dexUrl={dexUrls[entry.ca]} // Pass the Dexscreener URL to the CalloutCard
            />
          ))}
        </div>

        <div className='flex-1'></div>
        <Footer />
      </main>
      <ShareModal
        isOpen={isShareModalOpen}
        onClose={() => setIsShareModalOpen(false)}
        shareLink={window.location.href} // Pass the current URL to the ShareModal
      />
    </>
  );
}

export default function WrappedUserPage(props) {
  return (
    <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || 'clxc7nmy906ifhis11rkovoto'}>
      <UserPage {...props} />
    </PrivyProvider>
  );
}