'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/lib/store/store';
import { getFollowersList } from '@/lib/api/client';
import { Loader2, UserCheck, UserX, ArrowLeft } from 'lucide-react';

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
const SECURITY_KEY = process.env.NEXT_PUBLIC_SECURITY_KEY;

const FollowersSkeleton = () => (
  <div className="space-y-3">
    {[1, 2, 3, 4, 5].map((i) => (
      <div key={i} className="flex items-center gap-3 p-3 rounded-xl bg-card border border-border/50 animate-pulse">
        <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700"></div>
        <div className="flex-1">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
          <div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
        </div>
        <div className="w-20 h-8 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
      </div>
    ))}
  </div>
);

interface FollowersClientProps {
  logoImage: any;
  postsPerPage: number;
}

export default function FollowersClient({ logoImage, postsPerPage }: FollowersClientProps) {
  const router = useRouter();
  const userState = useSelector((state: RootState) => state.user);
  
  // ✅ FIX: Access actual customer data from nested structure
  const accessToken = userState?.accessToken;
  const currentCustomer = userState?.currentCustomer?.customer || userState?.currentCustomer;
  
  console.log("🔍 accessToken:", !!accessToken);
  console.log("🔍 currentCustomer:", currentCustomer);
  console.log("🔍 userId:", currentCustomer?._id);
  console.log("🔍 isBusinessUser:", currentCustomer?.isBusinessUser);
  console.log("🔍 isInvestor:", currentCustomer?.isInvestor);
  
  const [followers, setFollowers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);
  const [total, setTotal] = useState(0);
  const [isFetchingMore, setIsFetchingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const getUserType = () => {
    if (!currentCustomer) return 'customer';
    if (currentCustomer.isBusinessUser) return 'business';
    if (currentCustomer.isInvestor) return 'investor';
    return 'customer';
  };

  const userId = currentCustomer?._id;
  const userType = getUserType();

  const fetchFollowers = useCallback(async (pageNum: number = 1, append: boolean = false) => {
    console.log("📡 fetchFollowers - userId:", userId, "userType:", userType);
    
    if (!accessToken || !userId) {
      console.log("❌ No accessToken or userId");
      setLoading(false);
      return;
    }
    
    if (!append) setLoading(true);
    setError(null);
    
    try {
      const response = await getFollowersList(userId, userType, pageNum, 20, SECURITY_KEY);
      console.log("📡 Response:", response);
      
      if (response.success && response.data) {
        const newFollowers = response.data.followers || [];
        console.log("✅ New followers:", newFollowers.length);
        
        if (append) {
          setFollowers(prev => [...prev, ...newFollowers]);
        } else {
          setFollowers(newFollowers);
        }
        setHasMore(response.data.pagination?.hasNextPage || false);
        setTotal(response.data.pagination?.totalCount || 0);
        setPage(pageNum);
      } else {
        setError(response.message || "Failed to load followers");
      }
    } catch (err: any) {
      console.error("❌ Error:", err);
      setError(err?.message || "Something went wrong");
    } finally {
      setLoading(false);
      setIsFetchingMore(false);
    }
  }, [accessToken, userId, userType]);

  const loadMore = () => {
    if (isFetchingMore || !hasMore) return;
    setIsFetchingMore(true);
    fetchFollowers(page + 1, true);
  };

  useEffect(() => {
    if (accessToken && userId) {
      fetchFollowers(1, false);
    } else {
      setLoading(false);
    }
  }, [accessToken, userId, fetchFollowers]);

  if (!currentCustomer && !accessToken) {
    return null;
  }

  return (
    <div className="w-full max-w-4xl mx-auto">
      <div className="flex items-center gap-4 mb-6">
        {/* <button
          onClick={() => router.back()}
          className="p-2 rounded-lg hover:bg-secondary transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-5 h-5 text-foreground" />
        </button> */}
        <div>
          <h1 className="text-2xl font-bold text-foreground">Followers</h1>
          <p className="text-sm text-muted-foreground">{total} people follow you</p>
        </div>
      </div>

      {loading && followers.length === 0 ? (
        <FollowersSkeleton />
      ) : error ? (
        <div className="text-center py-12">
          <UserX className="w-16 h-16 text-muted-foreground mx-auto mb-3" />
          <p className="text-red-500">{error}</p>
          <button
            onClick={() => fetchFollowers(1, false)}
            className="mt-3 text-primary hover:underline cursor-pointer"
          >
            Try Again
          </button>
        </div>
      ) : followers.length === 0 ? (
        <div className="text-center py-12 bg-card rounded-2xl border border-border/50">
          <UserCheck className="w-16 h-16 text-muted-foreground mx-auto mb-3" />
          <h3 className="text-lg font-semibold text-foreground mb-1">No followers yet</h3>
          <p className="text-sm text-muted-foreground">When people follow you, they'll appear here</p>
        </div>
      ) : (
        <>
          <div className="space-y-3">
            {followers.map((follower, idx) => {
              const userName = follower.userName || follower._id;
              const fullName = follower.fullName || "User";
              
              return (
                <Link
                  key={follower._id || idx}
                  href={`/${userName}`}
                  className="flex items-center gap-3 p-3 rounded-xl bg-card border border-border/50 hover:shadow-md transition-all cursor-pointer"
                >
                  <div className="w-12 h-12 rounded-full overflow-hidden bg-primary/10 flex items-center justify-center">
                    {follower.imageURL ? (
                      <img
                        src={`${BASE_URL}/uploads/${follower.imageURL}`}
                        alt={fullName}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <span className="text-lg font-semibold text-primary">
                        {fullName.charAt(0).toUpperCase()}
                      </span>
                    )}
                  </div>
                  
                  <div className="flex-1">
                    <p className="font-semibold text-foreground">{fullName}</p>
                    <p className="text-xs text-muted-foreground">{userName}</p>
                  </div>
                  
                  {follower.userType && (
                    <span className={`text-xs px-3 py-1 rounded-full ${
                      follower.userType === 'business' ? 'bg-amber-500/10 text-amber-500' :
                      follower.userType === 'investor' ? 'bg-emerald-500/10 text-emerald-500' :
                      'bg-primary/10 text-primary'
                    }`}>
                      {follower.userType === 'business' ? 'Business' : 
                       follower.userType === 'investor' ? 'Investor' : 'Innovator'}
                    </span>
                  )}
                </Link>
              );
            })}
          </div>
          
          {isFetchingMore && (
            <div className="flex justify-center py-4">
              <Loader2 className="w-6 h-6 animate-spin text-primary" />
            </div>
          )}
          
          {hasMore && !isFetchingMore && (
            <div className="flex justify-center pt-4">
              <button
                onClick={loadMore}
                className="px-4 py-2 text-sm text-primary hover:text-primary/80 transition-colors cursor-pointer"
              >
                Load More
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}