'use client';

import { useState, useEffect } from 'react';
import { Pencil, Trash2, Globe, User, ExternalLink, Edit2, Plus } from 'lucide-react';
import { useRouter } from 'next/navigation';
import Pagination from '../../components/Pagination';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || '';

export default function ArticleList() {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedArticleId, setSelectedArticleId] = useState(null);
  const [comments, setComments] = useState([]);
  const [commentLoading, setCommentLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalItems, setTotalItems] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const itemsPerPage = 15;
  
  // Filter states
  const [searchTerm, setSearchTerm] = useState("");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [popularFilter, setPopularFilter] = useState("");
  const [activeFilter, setActiveFilter] = useState("");
  const [countryFilter, setCountryFilter] = useState("");
  const [authorFilter, setAuthorFilter] = useState(""); // New author filter
  const [countries, setCountries] = useState([]);
  const [authors, setAuthors] = useState([]); // For author dropdown
  
  // Applied filters state
  const [appliedSearchTerm, setAppliedSearchTerm] = useState("");
  const [appliedStartDate, setAppliedStartDate] = useState("");
  const [appliedEndDate, setAppliedEndDate] = useState("");
  const [appliedPopularFilter, setAppliedPopularFilter] = useState("");
  const [appliedActiveFilter, setAppliedActiveFilter] = useState("");
  const [appliedCountryFilter, setAppliedCountryFilter] = useState("");
  const [appliedAuthorFilter, setAppliedAuthorFilter] = useState("");
  
  const [isFilterOpen, setIsFilterOpen] = useState(false);

  const router = useRouter();

  // Load countries for filter dropdown
  const loadCountries = async () => {
    try {
      const res = await fetch('/api/internal/blogs/countries');
      const data = await res.json();
      
      if (data.success) {
        setCountries(data.data);
      }
    } catch (error) {
      console.error('Error loading countries:', error);
    }
  };

  // Load authors for filter dropdown
  const loadAuthors = async () => {
    try {
      const res = await fetch('/api/internal/authors?status=active');
      const data = await res.json();
      
      if (data.success) {
        setAuthors(data.data);
      }
    } catch (error) {
      console.error('Error loading authors:', error);
    }
  };

  const fetchArticles = async (page = 1) => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: page.toString(),
        limit: itemsPerPage.toString()
      });
      
      if (appliedSearchTerm) {
        params.append('search', appliedSearchTerm);
      }
      if (appliedStartDate) {
        params.append('start_date', appliedStartDate);
      }
      if (appliedEndDate) {
        params.append('end_date', appliedEndDate);
      }
      if (appliedPopularFilter !== '') {
        params.append('popular', appliedPopularFilter);
      }
      if (appliedActiveFilter !== '') {
        params.append('active', appliedActiveFilter);
      }
      if (appliedCountryFilter) {
        params.append('country', appliedCountryFilter);
      }
      if (appliedAuthorFilter) {
        params.append('author', appliedAuthorFilter);
      }

      const apiUrl = `/api/internal/blogs?${params.toString()}`;
      console.log('🔍 Fetching articles with params:', params.toString());

      const res = await fetch(apiUrl);
      
      if (!res.ok) {
        const errorText = await res.text();
        throw new Error(`API Error: ${res.status} - ${errorText}`);
      }
      
      const data = await res.json();
      
      if (data.success) {
        const articlesWithMeta = data.data?.map(article => ({
          ...article,
          enable_meta_tags: article.enable_meta_tags || false
        })) || [];
        
        setArticles(articlesWithMeta);
        
        if (data.pagination) {
          setTotalItems(data.pagination.totalItems || articlesWithMeta.length);
          setTotalPages(data.pagination.totalPages || Math.ceil(articlesWithMeta.length / itemsPerPage));
        } else {
          setTotalItems(articlesWithMeta.length);
          setTotalPages(Math.ceil(articlesWithMeta.length / itemsPerPage));
        }
      } else {
        console.warn('API returned success: false:', data);
        const items = Array.isArray(data) ? data : data.data;
        if (items) {
          const articlesWithMeta = items.map(article => ({
            ...article,
            enable_meta_tags: article.enable_meta_tags || false
          }));
          setArticles(articlesWithMeta);
          setTotalItems(articlesWithMeta.length);
          setTotalPages(Math.ceil(articlesWithMeta.length / itemsPerPage));
        } else {
          setArticles([]);
          setTotalItems(0);
          setTotalPages(1);
        }
      }
    } catch (error) {
      console.error('Error fetching articles:', error);
      setArticles([]);
      setTotalItems(0);
      setTotalPages(1);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadCountries();
    loadAuthors();
    fetchArticles(currentPage);
  }, [currentPage, appliedSearchTerm, appliedStartDate, appliedEndDate, appliedPopularFilter, appliedActiveFilter, appliedCountryFilter, appliedAuthorFilter]);

  const handleSearch = () => {
    setAppliedSearchTerm(searchTerm);
    setAppliedStartDate(startDate);
    setAppliedEndDate(endDate);
    setAppliedPopularFilter(popularFilter);
    setAppliedActiveFilter(activeFilter);
    setAppliedCountryFilter(countryFilter);
    setAppliedAuthorFilter(authorFilter);
    setCurrentPage(1);
  };

  const clearFilters = () => {
    setSearchTerm('');
    setStartDate('');
    setEndDate('');
    setPopularFilter('');
    setActiveFilter('');
    setCountryFilter('');
    setAuthorFilter('');
    setAppliedSearchTerm('');
    setAppliedStartDate('');
    setAppliedEndDate('');
    setAppliedPopularFilter('');
    setAppliedActiveFilter('');
    setAppliedCountryFilter('');
    setAppliedAuthorFilter('');
    setCurrentPage(1);
  };

  const hasActiveFilters = appliedSearchTerm || appliedStartDate || appliedEndDate || appliedPopularFilter !== '' || appliedActiveFilter !== '' || appliedCountryFilter !== '' || appliedAuthorFilter !== '';

  // Format date for display
  const formatDate = (dateString) => {
    if (!dateString) return 'N/A';
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      });
    } catch (e) {
      return 'N/A';
    }
  };

  // Get country name by ID
  const getCountryName = (countryId) => {
    if (!countryId) return 'No Country';
    const country = countries.find(c => c.id == countryId);
    return country ? `${country.country} (${country.code})` : `Country ID: ${countryId}`;
  };

  // Get author name by ID
  const getAuthorName = (authorId) => {
    if (!authorId) return 'No Author';
    const author = authors.find(a => a.id == authorId);
    return author ? author.full_name : `Author ID: ${authorId}`;
  };

  const handleDelete = async (id) => {
    if (!confirm('Are you sure you want to delete this article?')) return;
    try {
      const res = await fetch(`/api/internal/blogs/${id}`, { method: 'DELETE' });
      if (!res.ok) throw new Error('Failed to delete');
      
      setArticles(prev => prev.filter(article => article.id !== id));
      alert('Article deleted successfully');
    } catch (err) {
      console.error('Delete error:', err);
      alert('Failed to delete article');
    }
  };

  const togglePopularStatus = async (id, currentStatus) => {
    try {
      const res = await fetch(`/api/internal/blogs/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ enable_meta_tags: !currentStatus })
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || 'Update failed');
      }

      setArticles(prev => prev.map(article => 
        article.id === id 
          ? { ...article, is_featured: !currentStatus } 
          : article
      ));
    } catch (err) {
      console.error('Toggle error:', err);
      alert(err.message || 'Error updating status');
    }
  };

  const handleEdit = (id) => {
    router.push(`/admin/articles/edit/${id}`);
  };

  // Function to assign/change author
  const handleAssignAuthor = async (articleId, currentAuthorId) => {
    try {
      // Create a modal or dropdown for author selection
      const selectedAuthorId = prompt(
        'Enter Author ID to assign (or leave empty to remove author):\n' +
        'Available Authors:\n' +
        authors.map(a => `${a.id}: ${a.full_name}`).join('\n'),
        currentAuthorId || ''
      );

      if (selectedAuthorId === null) return; // User cancelled

      const authorId = selectedAuthorId.trim() || null;

      // Validate author ID if provided
      if (authorId && !authors.find(a => a.id == authorId)) {
        alert('Invalid Author ID');
        return;
      }

      // Update the article with new author
      const res = await fetch(`/api/internal/blogs/${articleId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ author_id: authorId })
      });

      if (!res.ok) {
        throw new Error('Failed to update author');
      }

      // Update local state
      setArticles(prev => prev.map(article => 
        article.id === articleId 
          ? { 
              ...article, 
              author_id: authorId,
              author_name: authorId ? authors.find(a => a.id == authorId)?.full_name : null,
              author_image: authorId ? authors.find(a => a.id == authorId)?.profile_image : null
            } 
          : article
      ));

      alert('Author updated successfully');
    } catch (err) {
      console.error('Assign author error:', err);
      alert('Failed to update author');
    }
  };

  const fetchComments = async (articleId) => {
    setCommentLoading(true);
    setSelectedArticleId(articleId);
    try {
      const res = await fetch(`/api/internal/comments?article_id=${articleId}`);
      const data = await res.json();
      if (data.success) {
        setComments(data.data);
      }
    } catch (err) {
      console.error('Error loading comments:', err);
    } finally {
      setCommentLoading(false);
    }
  };

  const closeModal = () => {
    setSelectedArticleId(null);
    setComments([]);
  };

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + articles.length;

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <div className="bg-white rounded-2xl shadow-lg p-6">
        {/* Header */}
        <div className="flex flex-col md:flex-row justify-between md:items-center gap-4 mb-6 sm:mb-8">
          <div>
            <h1 className="text-3xl font-bold text-gray-800 mb-1">Article List</h1>
            <p className="text-gray-600 text-sm sm:text-base">Manage and organize your articles</p>
          </div>
          <div className="flex gap-3">
            <button
              onClick={() => setIsFilterOpen(!isFilterOpen)}
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"
            >
              🔍 Filters {hasActiveFilters && `(${hasActiveFilters})`}
            </button>
            <button
              onClick={() => router.push('/admin/authors')}
              className="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center gap-2"
            >
              <User size={16} />
              Manage Authors
            </button>
            <button
              onClick={() => router.push('/admin/articles/add')}
              className="px-4 py-2 bg-gradient-to-b from-[#0B6D76] to-[#094F56] text-white rounded-md flex items-center gap-2"
            >
              <Plus size={16} />
              Create Article
            </button>
          </div>
        </div>

        {/* Filter Section */}
        {isFilterOpen && (
          <div className="bg-gray-50 rounded-lg p-4 mb-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Search Articles</label>
                <input
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                  placeholder="Search by title, content, author..."
                  className="w-full p-2 border rounded"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
                <input
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                  className="w-full p-2 border rounded"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                <input
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                  className="w-full p-2 border rounded"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Country</label>
                <select
                  value={countryFilter}
                  onChange={(e) => setCountryFilter(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">All Countries</option>
                  {countries.map((country) => (
                    <option key={country.id} value={country.id}>
                      {country.country} ({country.code})
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Written By (Author)</label>
                <select
                  value={authorFilter}
                  onChange={(e) => setAuthorFilter(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">All Authors</option>
                  {authors.map((author) => (
                    <option key={author.id} value={author.id}>
                      {author.full_name}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Is_Featured</label>
                <select
                  value={popularFilter}
                  onChange={(e) => setPopularFilter(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">All</option>
                  <option value="true">Featured</option>
                  <option value="false">Not Featured</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Active</label>
                <select
                  value={activeFilter}
                  onChange={(e) => setActiveFilter(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">All</option>
                  <option value="true">Active</option>
                  <option value="false">Inactive</option>
                </select>
              </div>
              <div className="flex items-end gap-2 sm:col-span-2 lg:col-span-6">
                <button 
                  onClick={handleSearch} 
                  className="px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700 flex items-center gap-2"
                >
                  🔍 Search
                </button>
                <button 
                  onClick={clearFilters} 
                  className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
                >
                  Clear Filters
                </button>
              </div>
            </div>

            {/* Active Filters Display */}
            {(appliedSearchTerm || appliedStartDate || appliedEndDate || appliedPopularFilter !== '' || appliedActiveFilter !== '' || appliedCountryFilter !== '' || appliedAuthorFilter !== '') && (
              <div className="mt-4 pt-4 border-t border-gray-200">
                <div className="text-sm text-gray-600 flex flex-wrap gap-2">
                  Active filters: 
                  {appliedSearchTerm && <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded">Search: "{appliedSearchTerm}"</span>}
                  {appliedStartDate && <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded">From: {formatDate(appliedStartDate)}</span>}
                  {appliedEndDate && <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded">To: {formatDate(appliedEndDate)}</span>}
                  {appliedCountryFilter && (
                    <span className="px-2 py-1 bg-indigo-100 text-indigo-800 rounded">
                      Country: {getCountryName(appliedCountryFilter)}
                    </span>
                  )}
                  {appliedAuthorFilter && (
                    <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded">
                      Author: {getAuthorName(appliedAuthorFilter)}
                    </span>
                  )}
                  {appliedPopularFilter !== '' && <span className="px-2 py-1 bg-pink-100 text-pink-800 rounded">Featured: {appliedPopularFilter === 'true' ? 'Yes' : 'No'}</span>}
                  {appliedActiveFilter !== '' && <span className="px-2 py-1 bg-green-100 text-green-800 rounded">Active: {appliedActiveFilter === 'true' ? 'Yes' : 'No'}</span>}
                </div>
              </div>
            )}
          </div>
        )}

        <div className="overflow-x-auto">
          <table className="min-w-full">
            <thead className="bg-gray-100">
              <tr>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Image</th>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Title</th>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Created By</th>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Written By</th>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Country</th>
                <th className="py-3 px-4 text-center text-sm font-semibold text-gray-600">Is_Featured</th>
                <th className="py-3 px-4 text-center text-sm font-semibold text-gray-600">Active</th>
                <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Created At</th>
                <th className="py-3 px-4 text-center text-sm font-semibold text-gray-600">Comments</th>
                <th className="py-3 px-4 text-center text-sm font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={10} className="text-center py-12 text-gray-500 text-lg">
                    <div className="flex justify-center">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    </div>
                  </td>
                </tr>
              ) : articles.length === 0 ? (
                <tr>
                  <td colSpan={10} className="text-center py-12 text-gray-500 text-lg">
                    {hasActiveFilters ? 'No articles found matching your filters.' : 'No articles found'}
                  </td>
                </tr>
              ) : (
                articles.map((article) => {
                  const imageUrl = article.image?.startsWith('http') 
                    ? article.image 
                    : article.image?.startsWith('/') 
                      ? `${API_BASE_URL}${article.image}` 
                      : null;

                  return (
                    <tr key={article.id} className="hover:bg-gray-50">
                      <td className="py-3 px-4">
                        {imageUrl ? (
                          <img
                            src={imageUrl}
                            alt={article.title}
                            className="w-16 h-16 object-cover rounded"
                          />
                        ) : (
                          <div className="w-16 h-16 bg-gray-200 rounded flex items-center justify-center text-gray-400 text-sm">
                            No Image
                          </div>
                        )}
                      </td>
                      <td className="py-3 px-4 font-medium text-gray-800">
                        <a 
                          href={`${API_BASE_URL}/${article.slug}`} 
                          target='_blank' 
                          rel="noopener noreferrer" 
                          className="hover:text-teal-600 transition-colors flex items-center gap-1"
                        >
                          {article.title}
                          <ExternalLink size={14} className="opacity-70" />
                        </a>
                      </td>
                      
                      {/* Created By Column - Who added the content */}
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                            <User size={16} className="text-gray-500" />
                          </div>
                          <div>
                            <div className="font-medium text-gray-800">
                              {article.user_name || `User ${article.user_id}`}
                            </div>
                            <div className="text-xs text-gray-500">
                              User ID: {article.user_id}
                            </div>
                            {article.user_email && (
                              <div className="text-xs text-gray-500 truncate max-w-[150px]">
                                {article.user_email}
                              </div>
                            )}
                          </div>
                        </div>
                      </td>
                      
                      {/* Written By Column - Author who wrote the content */}
                      <td className="py-3 px-4">
                        {article.author_id ? (
                          <div className="flex items-center gap-3">
                            {article.author_image ? (
                              <img 
                                src={article.author_image} 
                                alt={article.author_name}
                                className="w-10 h-10 rounded-full object-cover border border-gray-300"
                              />
                            ) : (
                              <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                                <User size={16} className="text-gray-500" />
                              </div>
                            )}
                            <div>
                              <div className="font-medium text-gray-800 flex items-center gap-2">
                                {article.author_name}
                              </div>
                              {article.author_slug && (
                                <div className="text-xs text-gray-500 font-mono">@{article.author_slug}</div>
                              )}
                            </div>
                          </div>
                        ) : (
                          <div className="flex flex-col gap-2">
                            <div className="text-gray-500 italic">No Author Assigned</div>
                          </div>
                        )}
                      </td>
                      
                      <td className="py-3 px-4">
                        {article.country_id ? (
                          <div className="flex items-center gap-2">
                            <Globe size={16} className="text-gray-500" />
                            <span className="text-gray-700">
                              {article.country_name ? 
                                `${article.country_name} (${article.country_code || article.country_id})` : 
                                getCountryName(article.country_id)}
                            </span>
                          </div>
                        ) : (
                          <span className="text-gray-400 italic">No Country</span>
                        )}
                      </td>
                      <td className="py-3 px-4 text-center">
                        <label className="relative inline-flex items-center cursor-pointer">
                          <input
                            type="checkbox"
                            checked={!!article.is_featured}
                            onChange={() => togglePopularStatus(article.id, article.is_featured)}
                            className="sr-only peer"
                          />
                          <div className="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                          <span className="ml-2 text-sm font-medium text-gray-900">
                            {article.is_featured ? 'Yes' : 'No'}
                          </span>
                        </label>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <span className={`font-semibold ${article.is_active ? 'text-green-600' : 'text-red-600'}`}>
                          {article.is_active ? 'Yes' : 'No'}
                        </span>
                      </td>
                      <td className="py-3 px-4 text-gray-600">
                        {article.created_at ? formatDate(article.created_at) : '-'}
                      </td>
                      <td className="py-3 px-4 text-center">
                        <button
                          onClick={() => fetchComments(article.id)}
                          className="px-3 py-1 bg-gradient-to-b from-[#0B6D76] to-[#094F56] text-white text-sm rounded hover:opacity-90 transition-opacity"
                        >
                          View Comments
                        </button>
                      </td>
                      <td className="py-3 px-4 flex gap-2 justify-center">
                        <button
                          onClick={() => handleEdit(article.id)}
                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-full transition-colors"
                          title="Edit Article"
                        >
                          <Pencil className="w-5 h-5" />
                        </button>
                        <button
                          onClick={() => handleDelete(article.id)}
                          className="p-2 text-red-600 hover:bg-red-50 rounded-full transition-colors"
                          title="Delete Article"
                        >
                          <Trash2 className="w-5 h-5" />
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination Component */}
        {totalPages > 1 && (
          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={setCurrentPage}
            totalItems={totalItems}
            startIndex={startIndex}
            endIndex={endIndex}
          />
        )}
        
        {/* Results Summary */}
        <div className="mt-4 text-sm text-gray-600 text-center">
          Showing {startIndex + 1} to {Math.min(endIndex, totalItems)} of {totalItems} articles
          {hasActiveFilters && ' (filtered results)'}
        </div>
      </div>

      {selectedArticleId && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-lg shadow-lg max-h-[80vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-semibold">Comments for Article #{selectedArticleId}</h2>
              <button onClick={closeModal} className="text-gray-500 hover:text-black text-2xl">&times;</button>
            </div>
            {commentLoading ? (
              <div className="flex justify-center">
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
              </div>
            ) : comments.length === 0 ? (
              <p className="text-gray-500 text-center py-4">No comments found.</p>
            ) : (
              <ul className="space-y-4">
                {comments.map((comment) => (
                  <li key={comment.id} className="border-b pb-2">
                    <p className="text-sm text-gray-700">
                      <strong>{comment.first_name} {comment.last_name}</strong> ({comment.email})
                    </p>
                    <p className="text-gray-600 text-sm mt-1">{comment.comment}</p>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      )}
    </div>
  );
}