import React, { useState, useEffect, useRef } from 'react';
import toast from 'react-hot-toast';
import api from '../api';
import { useClickOutside } from '../hooks/useClickOutside';
import { useSocket } from '../SocketContext';

export default function Friends() {
  const [friends, setFriends] = useState([]);
  const [challengeFriends, setChallengeFriends] = useState([]);
  const [requests, setRequests] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTimeout, setSearchTimeout] = useState(null);
  const [responding, setResponding] = useState(null);
  const [sending, setSending] = useState(null);
  const { socket } = useSocket();
  const searchRef = useRef(null);

  useClickOutside(searchRef, () => setSearchResults([]));

  useEffect(() => {
    loadData();
  }, []);

  // Listen for real-time friend request events
  useEffect(() => {
    if (!socket) return;

    const handleFriendRequest = (request) => {
      toast.success(`👋 ${request.from_username} sent you a friend request`);
      loadData(); // Refresh to show new request
    };

    const handleFriendResponse = (response) => {
      if (response.status === 'accepted') {
        toast.success(`🎉 ${response.friend_username} accepted your friend request!`);
        loadData(); // Refresh friends list
      } else {
        toast(`${response.friend_username} declined your friend request`);
      }
    };

    socket.on('friend:request', handleFriendRequest);
    socket.on('friend:response', handleFriendResponse);

    return () => {
      socket.off('friend:request', handleFriendRequest);
      socket.off('friend:response', handleFriendResponse);
    };
  }, [socket]);

  const loadData = async () => {
    try {
      const [friendsData, requestsData] = await Promise.all([
        api.getFriends(),
        api.getFriendRequests()
      ]);
      setFriends(friendsData.friends);
      setChallengeFriends(friendsData.challenge_friends || []);
      setRequests(requestsData.requests);
    } catch (err) {
      console.error('Failed to load data:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (query) => {
    setSearchQuery(query);
    
    // Clear previous timeout
    if (searchTimeout) {
      clearTimeout(searchTimeout);
    }
    
    if (query.trim().length < 2) {
      setSearchResults([]);
      return;
    }

    // Debounce search by 1 second
    const timeout = setTimeout(async () => {
      try {
        const data = await api.searchUsers(query);
        setSearchResults(data.users);
      } catch (err) {
        console.error('Search failed:', err);
      }
    }, 1000);
    
    setSearchTimeout(timeout);
  };

  const handleSendRequest = async (userId) => {
    setSending(userId);
    try {
      await api.sendFriendRequest(userId);
      setSearchQuery('');
      setSearchResults([]);
      toast.success('Friend request sent!');
    } catch (err) {
      toast.error('Failed to send request: ' + err.message);
    } finally {
      setSending(null);
    }
  };

  const handleRespond = async (requestId, status) => {
    setResponding(requestId);
    try {
      await api.respondToFriendRequest(requestId, status);
      toast.success(status === 'accepted' ? 'Friend request accepted!' : 'Friend request declined');
      await loadData();
    } catch (err) {
      toast.error('Failed to respond: ' + err.message);
    } finally {
      setResponding(null);
    }
  };

  if (loading) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div style={{ padding: '2rem 0' }}>
      <div className="container">
        <h1 style={{ marginBottom: '2rem' }}>Friends</h1>

        {/* Search */}
        <div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
          <h3 style={{ marginBottom: '1rem' }}>Add Friends</h3>
          <input
            type="text"
            className="input"
            placeholder="Search by username or email..."
            value={searchQuery}
            onChange={(e) => handleSearch(e.target.value)}
          />
          {searchResults.length > 0 && (
            <div style={{
              position: 'absolute',
              top: '100%',
              left: 0,
              right: 0,
              background: 'var(--bg)',
              border: '1px solid var(--border)',
              borderRadius: '0.5rem',
              marginTop: '0.5rem',
              maxHeight: '300px',
              overflowY: 'auto',
              zIndex: 10
            }}>
              {searchResults.map(user => (
                <div
                  key={user.id}
                  style={{
                    padding: '1rem',
                    borderBottom: '1px solid var(--border)',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 500 }}>{user.username}</div>
                    <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{user.email}</div>
                  </div>
                  <button
                    className="btn btn-primary btn-sm"
                    onClick={() => handleSendRequest(user.id)}
                    disabled={sending === user.id}
                  >
                    {sending === user.id ? 'Sending...' : 'Add Friend'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Pending Requests */}
        {requests.length > 0 && (
          <div className="card" style={{ marginBottom: '2rem' }}>
            <h3 style={{ marginBottom: '1rem' }}>Friend Requests</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              {requests.map(req => (
                <div key={req.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontWeight: 500 }}>{req.username}</div>
                    <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{req.email}</div>
                  </div>
                  <div style={{ display: 'flex', gap: '0.5rem' }}>
                    <button
                      className="btn btn-success btn-sm"
                      onClick={() => handleRespond(req.id, 'accepted')}
                      disabled={responding === req.id}
                    >
                      {responding === req.id ? '...' : 'Accept'}
                    </button>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => handleRespond(req.id, 'rejected')}
                      disabled={responding === req.id}
                    >
                      {responding === req.id ? '...' : 'Reject'}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Friends List */}
        <div className="card">
          <h3 style={{ marginBottom: '1rem' }}>Your Friends</h3>
          {friends.length === 0 && challengeFriends.length === 0 ? (
            <p style={{ color: 'var(--text-muted)' }}>No friends yet. Search above to add some!</p>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              {friends.map(friend => (
                <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontWeight: 500 }}>{friend.username}</div>
                    <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
                  </div>
                  <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
                </div>
              ))}
              {challengeFriends.length > 0 && (
                <>
                  <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem', marginTop: '0.5rem' }}>
                    <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
                      From Challenges
                    </div>
                  </div>
                  {challengeFriends.map(friend => (
                    <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <div>
                        <div style={{ fontWeight: 500 }}>{friend.username}</div>
                        <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
                      </div>
                      <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
                    </div>
                  ))}
                </>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}