# 🎨 کامپوننت مدیریت ویترین محصولات

## 2. Product Showcases Management - مدیریت ویترین‌های محصولات

```jsx
// src/pages/admin/ProductShowcases.jsx
import React, { useState, useEffect } from 'react';
import { Plus, Edit2, Trash2, Eye, Grid3x3, List, Sparkles, TrendingUp, Percent, Clock, Star } from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import axios from 'axios';

const API_URL = 'http://localhost:8000/api';
const token = localStorage.getItem('token');

const ProductShowcases = () => {
  const [showcases, setShowcases] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [showAutoModal, setShowAutoModal] = useState(false);
  const [editingShowcase, setEditingShowcase] = useState(null);

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

  const loadShowcases = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/admin/product-showcases`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setShowcases(data.data);
    } catch (error) {
      toast.error('خطا در بارگذاری ویترین‌ها');
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('آیا مطمئن هستید؟')) return;
    
    try {
      await axios.delete(`${API_URL}/admin/product-showcases/${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      toast.success('ویترین با موفقیت حذف شد');
      loadShowcases();
    } catch (error) {
      toast.error('خطا در حذف ویترین');
    }
  };

  const getDisplayIcon = (type) => {
    const icons = {
      grid: Grid3x3,
      carousel: List,
      list: List
    };
    return icons[type] || Grid3x3;
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
      <Toaster position="top-left" />
      
      {/* Header */}
      <div className="max-w-7xl mx-auto mb-8">
        <div className="bg-white rounded-2xl shadow-lg p-6">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-800 mb-2">
                مدیریت ویترین محصولات
              </h1>
              <p className="text-gray-600">
                ویترین‌های نمایش محصولات در صفحه اصلی
              </p>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => setShowAutoModal(true)}
                className="bg-gradient-to-r from-purple-600 to-purple-700 text-white px-6 py-3 rounded-xl hover:from-purple-700 hover:to-purple-800 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
              >
                <Sparkles size={20} />
                <span>ویترین خودکار</span>
              </button>
              <button
                onClick={() => {
                  setEditingShowcase(null);
                  setShowModal(true);
                }}
                className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
              >
                <Plus size={20} />
                <span>ویترین دستی</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Showcases List */}
      <div className="max-w-7xl mx-auto">
        {showcases.length === 0 ? (
          <div className="bg-white rounded-2xl shadow-lg p-12 text-center">
            <div className="text-gray-400 text-6xl mb-4">🎨</div>
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              هنوز ویترینی اضافه نشده
            </h3>
            <p className="text-gray-500 mb-6">
              اولین ویترین محصولات خود را بسازید
            </p>
            <div className="flex gap-3 justify-center">
              <button
                onClick={() => setShowAutoModal(true)}
                className="bg-purple-600 text-white px-6 py-3 rounded-xl hover:bg-purple-700"
              >
                ویترین خودکار
              </button>
              <button
                onClick={() => setShowModal(true)}
                className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700"
              >
                ویترین دستی
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            {showcases.map((showcase) => {
              const DisplayIcon = getDisplayIcon(showcase.display_type);
              
              return (
                <div
                  key={showcase.id}
                  className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden"
                >
                  <div
                    className="p-6 border-b-4"
                    style={{ borderColor: showcase.title_color || '#1976D2' }}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <h3
                            className="text-2xl font-bold"
                            style={{ color: showcase.title_color }}
                          >
                            {showcase.title}
                          </h3>
                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                            showcase.is_active 
                              ? 'bg-green-100 text-green-700' 
                              : 'bg-red-100 text-red-700'
                          }`}>
                            {showcase.is_active ? 'فعال' : 'غیرفعال'}
                          </span>
                        </div>
                        {showcase.subtitle && (
                          <p className="text-gray-600 mb-4">{showcase.subtitle}</p>
                        )}
                        <div className="flex flex-wrap gap-4 text-sm text-gray-500">
                          <div className="flex items-center gap-2">
                            <DisplayIcon size={16} />
                            <span>نمایش: {
                              showcase.display_type === 'grid' ? 'شبکه‌ای' :
                              showcase.display_type === 'carousel' ? 'اسلایدر' : 'لیستی'
                            }</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Eye size={16} />
                            <span>{showcase.items_count || 0} محصول</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span>حداکثر: {showcase.products_limit}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => {
                            setEditingShowcase(showcase);
                            setShowModal(true);
                          }}
                          className="p-3 bg-blue-100 text-blue-600 rounded-xl hover:bg-blue-200 transition-colors"
                          title="ویرایش"
                        >
                          <Edit2 size={20} />
                        </button>
                        <button
                          onClick={() => handleDelete(showcase.id)}
                          className="p-3 bg-red-100 text-red-600 rounded-xl hover:bg-red-200 transition-colors"
                          title="حذف"
                        >
                          <Trash2 size={20} />
                        </button>
                      </div>
                    </div>
                  </div>
                  {showcase.bg_color && (
                    <div
                      className="h-2"
                      style={{ backgroundColor: showcase.bg_color }}
                    />
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Modals */}
      {showModal && (
        <ShowcaseModal
          showcase={editingShowcase}
          onClose={() => {
            setShowModal(false);
            setEditingShowcase(null);
          }}
          onSave={() => {
            setShowModal(false);
            setEditingShowcase(null);
            loadShowcases();
          }}
        />
      )}

      {showAutoModal && (
        <AutoShowcaseModal
          onClose={() => setShowAutoModal(false)}
          onSave={() => {
            setShowAutoModal(false);
            loadShowcases();
          }}
        />
      )}
    </div>
  );
};

export default ProductShowcases;
```

ادامه در فایل بعدی...
