Explore.jsx

// src/pages/public/Shop.jsx
import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import { artists as artistsAPI } from "../../api";
import "../../styles/Explore.css";

const Explore = () => {
  const [artists, setArtists] = useState([]);
  const [filteredArtists, setFilteredArtists] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [filterSpecialization, setFilterSpecialization] = useState("all");

  const filterArtists = useCallback(() => {
    let filtered = [...artists];

    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(artist => {
        const name = artist.userId?.name?.toLowerCase() || "";
        const specialization = artist.specialization?.toLowerCase() || "";
        const bio = artist.bio?.toLowerCase() || "";
        
        return name.includes(query) || 
               specialization.includes(query) || 
               bio.includes(query);
      });
    }

    if (filterSpecialization !== "all") {
      const specQuery = filterSpecialization.toLowerCase();
      filtered = filtered.filter(artist => 
        artist.specialization?.toLowerCase().includes(specQuery)
      );
    }

    setFilteredArtists(filtered);
  }, [artists, searchQuery, filterSpecialization]);

  const fetchArtists = async () => {
    try {
      setLoading(true);
      setError("");
      const data = await artistsAPI.getAll();
      setArtists(data);
      setFilteredArtists(data);
    } catch (err) {
      console.error("Failed to fetch artists:", err);
      setError("Failed to load artists. Please try again later.");
    } finally {
      setLoading(false);
    }
  };

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

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

  const getSpecializations = () => {
    const specs = new Set();
    artists.forEach(artist => {
      if (artist.specialization) {
        specs.add(artist.specialization);
      }
    });
    return Array.from(specs).sort();
  };

  if (loading) {
    return (
      <div className="explore-container">
        <div className="loading-spinner">
          <div className="spinner"></div>
          <p>Loading artists...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="explore-container">
        <div className="error-container">
          <p style={{ color: "red" }}>{error}</p>
          <button onClick={fetchArtists} className="retry-btn">
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="explore-container">
      <div className="explore-header">
        <h1>Explore Artists</h1>
        <p className="explore-subtitle">Discover talented artists and their unique creations</p>
      </div>

      <div className="search-filter-section">
        <div className="search-bar">
          <svg 
            className="search-icon" 
            width="20" 
            height="20" 
            viewBox="0 0 24 24" 
            fill="none" 
            stroke="currentColor" 
            strokeWidth="2"
            aria-hidden="true"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input
            type="search"
            placeholder="Search artists by name, specialization, or style..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="search-input"
            aria-label="Search artists"
          />
          {searchQuery && (
            <button 
              className="clear-search" 
              onClick={() => setSearchQuery("")}
              aria-label="Clear search"
            >
              ✕
            </button>
          )}
        </div>

        <div className="filter-dropdown">
          <label htmlFor="spec-filter">Filter by Specialization:</label>
          <select 
            id="spec-filter"
            value={filterSpecialization}
            onChange={(e) => setFilterSpecialization(e.target.value)}
          >
            <option value="all">All Specializations</option>
            {getSpecializations().map((spec, idx) => (
              <option key={idx} value={spec}>{spec}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="results-info">
        <p aria-live="polite">
          {filteredArtists.length === 0 
            ? "No artists found matching your criteria." 
            : `Showing ${filteredArtists.length} ${filteredArtists.length === 1 ? 'artist' : 'artists'}`
          }
        </p>
      </div>

      <div className="explore-grid">
        {filteredArtists.length === 0 ? (
          <div className="no-results">
            <div className="no-results-icon" aria-hidden="true">🔍</div>
            <h3>No artists found</h3>
            <p>Try adjusting your search or filters.</p>
            <button 
              onClick={() => {
                setSearchQuery("");
                setFilterSpecialization("all");
              }}
              className="reset-btn"
            >
              Reset Filters
            </button>
          </div>
        ) : (
          filteredArtists.map((artist) => {
            const artistName = artist.userId?.name || "Artist";
            const profileImage = artist.portfolioImages?.[0] || "https://cdn-icons-png.flaticon.com/512/149/149071.png";

            return (
              <Link
                key={artist._id}
                to={`/artist/${artist._id}`}
                state={{ artist }}
                className="explore-card"
                aria-label={`View profile of ${artistName}`}
              >
                <div className="card-image-container">
                  <img
                    src={profileImage}
                    alt={`${artistName} portfolio preview`}
                    className="explore-avatar"
                    loading="lazy"
                  />
                  <div className="card-overlay">
                    <span className="view-profile-text">View Profile →</span>
                  </div>
                </div>
                
                <div className="card-content">
                  <h3>{artistName}</h3>
                  <p className="specialization-badge">{artist.specialization || "Creative Artist"}</p>
                  {artist.bio && (
                    <p className="artist-bio">
                      {artist.bio.length > 80 ? `${artist.bio.substring(0, 80)}...` : artist.bio}
                    </p>
                  )}
                  
                  {artist.portfolioImages?.length > 0 && (
                    <div className="portfolio-count">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                        <polyline points="21 15 16 10 5 21"></polyline>
                      </svg>
                      {artist.portfolioImages.length} {artist.portfolioImages.length === 1 ? 'work' : 'works'}
                    </div>
                  )}
                </div>
              </Link>
            );
          })
        )}
      </div>
    </div>
  );
};

export default Explore;