fractafrag/services/frontend/src/pages/Explore.tsx

/**
 * Explore page — browse shaders by tag, trending, new, top.
 */

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Link, useSearchParams } from 'react-router-dom';
import api from '@/lib/api';
import ShaderCanvas from '@/components/ShaderCanvas';

type SortOption = 'trending' | 'new' | 'top';

export default function Explore() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [sort, setSort] = useState<SortOption>((searchParams.get('sort') as SortOption) || 'trending');
  const [query, setQuery] = useState(searchParams.get('q') || '');
  const tagFilter = searchParams.get('tags')?.split(',').filter(Boolean) || [];

  const { data: shaders = [], isLoading } = useQuery({
    queryKey: ['explore', sort, query, tagFilter.join(',')],
    queryFn: async () => {
      const params: any = { sort, limit: 30 };
      if (query) params.q = query;
      if (tagFilter.length) params.tags = tagFilter;
      const { data } = await api.get('/shaders', { params });
      return data;
    },
  });

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchParams({ sort, q: query });
  };

  return (
    <div className="max-w-7xl mx-auto px-4 py-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-semibold">Explore</h1>

        {/* Sort tabs */}
        <div className="flex gap-1 bg-surface-2 rounded-lg p-1">
          {(['trending', 'new', 'top'] as SortOption[]).map((s) => (
            <button
              key={s}
              onClick={() => setSort(s)}
              className={`px-3 py-1 text-sm rounded-md transition-colors ${
                sort === s ? 'bg-fracta-600 text-white' : 'text-gray-400 hover:text-gray-200'
              }`}
            >
              {s.charAt(0).toUpperCase() + s.slice(1)}
            </button>
          ))}
        </div>
      </div>

      {/* Search */}
      <form onSubmit={handleSearch} className="mb-6">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="input max-w-md"
          placeholder="Search shaders..."
        />
      </form>

      {/* Tag filter pills */}
      {tagFilter.length > 0 && (
        <div className="flex gap-2 mb-4">
          {tagFilter.map((tag) => (
            <span key={tag} className="text-xs px-2 py-1 bg-fracta-600/20 text-fracta-400 rounded-full flex items-center gap-1">
              #{tag}
              <button
                onClick={() => {
                  const newTags = tagFilter.filter(t => t !== tag);
                  setSearchParams(newTags.length ? { tags: newTags.join(',') } : {});
                }}
                className="hover:text-white"
              >
                ×
              </button>
            </span>
          ))}
        </div>
      )}

      {/* Grid */}
      {isLoading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="card animate-pulse">
              <div className="aspect-video bg-surface-3" />
              <div className="p-3 space-y-2">
                <div className="h-4 bg-surface-3 rounded w-3/4" />
                <div className="h-3 bg-surface-3 rounded w-1/2" />
              </div>
            </div>
          ))}
        </div>
      ) : shaders.length > 0 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {shaders.map((shader: any) => (
            <Link key={shader.id} to={`/shader/${shader.id}`} className="card group">
              <div className="aspect-video bg-surface-2 overflow-hidden">
                <ShaderCanvas code={shader.glsl_code} className="w-full h-full" animate={true} />
              </div>
              <div className="p-3">
                <h3 className="font-medium text-gray-100 group-hover:text-fracta-400 transition-colors truncate">
                  {shader.title}
                </h3>
                <div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
                  <span>{shader.shader_type}</span>
                  <span>·</span>
                  <span>{shader.view_count} views</span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      ) : (
        <div className="text-center py-20 text-gray-500">
          No shaders found. Try a different search or sort.
        </div>
      )}
    </div>
  );
}