# 🎨 مودال ویترین خودکار

## Modal ساخت ویترین خودکار

```jsx
// AutoShowcaseModal Component
const AutoShowcaseModal = ({ onClose, onSave }) => {
  const [step, setStep] = useState(1); // 1: انتخاب نوع، 2: تنظیمات
  const [showcaseTypes, setShowcaseTypes] = useState([]);
  const [selectedType, setSelectedType] = useState(null);
  const [preview, setPreview] = useState([]);
  const [formData, setFormData] = useState({
    title: '',
    subtitle: '',
    display_type: 'grid',
    products_limit: 10,
    bg_color: '#ffffff',
    title_color: '#1976D2',
    is_active: true
  });

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

  const loadShowcaseTypes = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/admin/auto-showcases/types`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setShowcaseTypes(data.data);
    } catch (error) {
      toast.error('خطا در بارگذاری انواع ویترین');
    }
  };

  const handleTypeSelect = async (type) => {
    setSelectedType(type);
    setFormData({ ...formData, title: type.title });
    
    // Load preview
    try {
      const { data } = await axios.post(
        `${API_URL}/admin/auto-showcases/preview`,
        { type: type.type, limit: 8 },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      setPreview(data.data);
      setStep(2);
    } catch (error) {
      toast.error('خطا در بارگذاری پیش‌نمایش');
    }
  };

  const handleCreate = async () => {
    try {
      await axios.post(
        `${API_URL}/admin/auto-showcases/create`,
        { type: selectedType.type, ...formData },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      toast.success('ویترین با موفقیت ایجاد شد');
      onSave();
    } catch (error) {
      toast.error('خطا در ایجاد ویترین');
    }
  };

  const getTypeIcon = (type) => {
    const icons = {
      best_sellers: TrendingUp,
      discounted: Percent,
      newest: Clock,
      featured: Star,
      high_rated: Eye
    };
    return icons[type] || Sparkles;
  };

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="bg-gradient-to-r from-purple-600 to-purple-700 text-white p-6">
          <h2 className="text-2xl font-bold flex items-center gap-2">
            <Sparkles size={28} />
            ساخت ویترین خودکار
          </h2>
          <p className="text-purple-100 mt-2">
            {step === 1 ? 'نوع ویترین را انتخاب کنید' : 'تنظیمات ویترین را مشخص کنید'}
          </p>
        </div>

        <div className="flex-1 overflow-y-auto p-6">
          {step === 1 ? (
            /* Step 1: Type Selection */
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {showcaseTypes.map((type) => {
                const Icon = getTypeIcon(type.type);
                
                return (
                  <button
                    key={type.type}
                    onClick={() => handleTypeSelect(type)}
                    className="group relative bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 text-center hover:border-purple-500 hover:shadow-2xl transition-all duration-300 hover:scale-105"
                  >
                    <div className="absolute top-4 right-4 w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center group-hover:bg-purple-500 transition-colors">
                      <Icon size={24} className="text-purple-600 group-hover:text-white transition-colors" />
                    </div>
                    
                    <div className="mt-8">
                      <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-purple-600 transition-colors">
                        {type.title}
                      </h3>
                      <p className="text-sm text-gray-600 leading-relaxed">
                        {type.description}
                      </p>
                    </div>

                    <div className="mt-6 pt-4 border-t border-gray-200">
                      <span className="text-sm text-purple-600 font-medium group-hover:text-purple-700">
                        انتخاب و ادامه ←
                      </span>
                    </div>
                  </button>
                );
              })}
            </div>
          ) : (
            /* Step 2: Settings & Preview */
            <div className="space-y-6">
              {/* Settings */}
              <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-6 border-2 border-purple-200">
                <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                  <span className="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center text-sm">
                    ⚙️
                  </span>
                  تنظیمات ویترین
                </h3>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      عنوان ویترین
                    </label>
                    <input
                      type="text"
                      value={formData.title}
                      onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
                      placeholder={selectedType?.title}
                    />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      زیرعنوان (اختیاری)
                    </label>
                    <input
                      type="text"
                      value={formData.subtitle}
                      onChange={(e) => setFormData({ ...formData, subtitle: e.target.value })}
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
                      placeholder="توضیح کوتاهی درباره این ویترین"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      نوع نمایش
                    </label>
                    <select
                      value={formData.display_type}
                      onChange={(e) => setFormData({ ...formData, display_type: e.target.value })}
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 bg-white"
                    >
                      <option value="grid">شبکه‌ای (Grid)</option>
                      <option value="carousel">اسلایدر (Carousel)</option>
                      <option value="list">لیستی (List)</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      تعداد محصول
                    </label>
                    <input
                      type="number"
                      min="1"
                      max="50"
                      value={formData.products_limit}
                      onChange={(e) => setFormData({ ...formData, products_limit: parseInt(e.target.value) })}
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 bg-white"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      رنگ پس‌زمینه
                    </label>
                    <div className="flex gap-2">
                      <input
                        type="color"
                        value={formData.bg_color}
                        onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                        className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                      />
                      <input
                        type="text"
                        value={formData.bg_color}
                        onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                        className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      رنگ عنوان
                    </label>
                    <div className="flex gap-2">
                      <input
                        type="color"
                        value={formData.title_color}
                        onChange={(e) => setFormData({ ...formData, title_color: e.target.value })}
                        className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                      />
                      <input
                        type="text"
                        value={formData.title_color}
                        onChange={(e) => setFormData({ ...formData, title_color: e.target.value })}
                        className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Preview */}
              <div className="bg-white rounded-2xl border-2 border-gray-200 p-6">
                <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                  <span className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm">
                    👁️
                  </span>
                  پیش‌نمایش محصولات ({preview.length})
                </h3>
                
                {preview.length > 0 ? (
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    {preview.slice(0, 8).map((product) => (
                      <div key={product.id} className="bg-gray-50 rounded-xl p-3 border border-gray-200">
                        <div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
                        <p className="text-sm font-medium text-gray-800 truncate">
                          {product.name}
                        </p>
                        <p className="text-xs text-gray-600">
                          {Number(product.discount_price || product.price).toLocaleString()} تومان
                        </p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8 text-gray-500">
                    محصولی برای این نوع ویترین یافت نشد
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="border-t bg-gray-50 p-6 flex gap-3">
          {step === 2 && (
            <button
              type="button"
              onClick={() => setStep(1)}
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors font-medium"
            >
              ← بازگشت
            </button>
          )}
          <button
            type="button"
            onClick={onClose}
            className="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors font-medium"
          >
            انصراف
          </button>
          {step === 2 && (
            <button
              onClick={handleCreate}
              disabled={preview.length === 0}
              className="flex-1 bg-gradient-to-r from-purple-600 to-purple-700 text-white py-3 rounded-xl hover:from-purple-700 hover:to-purple-800 transition-all font-medium shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
            >
              ✨ ایجاد ویترین خودکار
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export { ProductShowcases as default, ShowcaseModal, AutoShowcaseModal };
```

## 📦 نصب و استفاده

### 1. نصب پکیج‌ها

```bash
npm install lucide-react react-hot-toast axios
npm install -D tailwindcss postcss autoprefixer
```

### 2. تنظیم Tailwind CSS

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### 3. استفاده در App

```jsx
// src/App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomeFeatures from './pages/admin/HomeFeatures';
import ProductShowcases from './pages/admin/ProductShowcases';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/admin/home-features" element={<HomeFeatures />} />
        <Route path="/admin/showcases" element={<ProductShowcases />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
```

---

## ✨ ویژگی‌های UI

✅ طراحی مدرن و زیبا با Tailwind CSS  
✅ انیمیشن‌های نرم و حرفه‌ای  
✅ Responsive برای موبایل و دسکتاپ  
✅ پیش‌نمایش زنده تغییرات  
✅ انتخاب رنگ با Color Picker  
✅ انتخاب آیکون به صورت بصری  
✅ پالت‌های رنگی آماده  
✅ Toast notifications برای فیدبک  
✅ Loading states  
✅ Empty states زیبا  

**همه چیز آماده برای استفاده! 🚀**
