import { useState, useEffect } from 'react';
import PostList from './components/PostList';
import PostDetailsPage from './components/PostDetailsPage';
import ApiStatusIndicator from './components/ApiStatusIndicator';
import { apiService } from './services/api';
import './App.css';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [filteredPosts, setFilteredPosts] = useState([]);
  const [isApiAvailable, setIsApiAvailable] = useState(true);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedPostId, setSelectedPostId] = useState(null);

  const fetchPosts = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await apiService.getPosts();
      setPosts(data);
      setFilteredPosts(data);
      setIsApiAvailable(true);
    } catch (err) {
      setError(err.message);
      setIsApiAvailable(apiService.getAvailability());
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchPosts();
    
    const interval = setInterval(() => {
      fetchPosts();
    }, 30000);

    return () => clearInterval(interval);
  }, []);

  const handleLike = async (postId) => {
    try {
      const username = prompt('Enter your username to like this post:');
      if (!username) return;

      await apiService.likePost(postId, { username });
      await fetchPosts();
    } catch (err) {
      setError(err.message);
      setIsApiAvailable(apiService.getAvailability());
    }
  };

  const handleComment = async (postId) => {
    setSelectedPostId(postId);
  };

  const handleSearch = (searchTerm) => {
    if (!searchTerm.trim()) {
      setFilteredPosts(posts);
      return;
    }

    const lowercaseSearch = searchTerm.toLowerCase();
    const filtered = posts.filter(post => 
      post.username.toLowerCase().includes(lowercaseSearch) ||
      post.content.toLowerCase().includes(lowercaseSearch)
    );
    setFilteredPosts(filtered);
  };

  const handleBackToList = () => {
    setSelectedPostId(null);
    fetchPosts();
  };

  return (
    <div className="app-container">
      <ApiStatusIndicator isAvailable={isApiAvailable} />
      
      <div className="home-frame">
        <div className="sidebar-left"></div>
        
        <div className="main-content">
          {selectedPostId ? (
            <PostDetailsPage postId={selectedPostId} onBack={handleBackToList} />
          ) : (
            <>
              {loading && <div className="loading">Loading posts...</div>}
              {error && !loading && (
                <div className="error-message">
                  {isApiAvailable ? `Error: ${error}` : 'Unable to load posts. Backend is unavailable.'}
                </div>
              )}
              {!loading && !error && posts.length === 0 && (
                <div className="empty-message">No posts available</div>
              )}
              {!loading && posts.length > 0 && (
                <PostList 
                  posts={filteredPosts}
                  onLike={handleLike}
                  onComment={handleComment}
                  onSearch={handleSearch}
                />
              )}
            </>
          )}
        </div>
        
        <div className="sidebar-right"></div>
      </div>
    </div>
  );
};

export default App;