'use client';

import React, { useState, useEffect } from 'react';
import { 
  Save, 
  Eye, 
  Upload, 
  X, 
  Plus, 
  Edit, 
  Trash2, 
  Play,
  BookOpen,
  Download,
  Package,
  Calendar,
  Tag,
  DollarSign,
  Clock,
  FileText,
  Image as ImageIcon,
  Link,
  Settings
} from 'lucide-react';
import { 
  EpisodeData, 
  ArticleData, 
  DownloadData, 
  ProductData 
} from '../../types/admin';

interface ContentEditorProps {
  contentType: 'episode' | 'article' | 'download' | 'product';
  contentId?: string;
  onSave?: (content: any) => void;
  onCancel?: () => void;
}

export const ContentEditor: React.FC<ContentEditorProps> = ({
  contentType,
  contentId,
  onSave,
  onCancel
}) => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [previewMode, setPreviewMode] = useState(false);
  const [content, setContent] = useState<any>({});
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Form fields based on content type
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    content: '',
    category: '',
    tags: [] as string[],
    isPremium: false,
    requiredTier: 'ODDECH',
    isPublished: false,
    // Episode specific
    audioUrl: '',
    duration: 0,
    // Article specific
    excerpt: '',
    slug: '',
    seoTitle: '',
    seoDescription: '',
    featuredImage: '',
    readingTime: 0,
    // Download specific
    fileUrl: '',
    fileSize: 0,
    fileType: '',
    downloadCount: 0,
    isActive: true,
    // Product specific
    price: 0,
    currency: 'PLN',
    type: 'digital' as 'digital' | 'consultation' | 'course' | 'subscription',
    inventory: undefined as number | undefined,
    images: [] as string[]
  });

  const [newTag, setNewTag] = useState('');

  useEffect(() => {
    if (contentId) {
      loadContent();
    }
  }, [contentId, contentType]);

  const loadContent = async () => {
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      // Mock content data
      const mockContent = {
        title: 'Przykładowa treść',
        description: 'Opis przykładowej treści',
        content: 'Treść artykułu...',
        category: 'Rozwój osobisty',
        tags: ['wrażliwość', 'rozwój'],
        isPremium: true,
        requiredTier: 'CZUŁOŚĆ',
        isPublished: false,
        audioUrl: '/audio/episode.mp3',
        duration: 2700,
        excerpt: 'Krótki opis artykułu...',
        slug: 'przykladowa-tresc',
        seoTitle: 'SEO Title',
        seoDescription: 'SEO Description',
        featuredImage: '/images/featured.jpg',
        readingTime: 8,
        fileUrl: '/downloads/file.pdf',
        fileSize: 2048576,
        fileType: 'application/pdf',
        downloadCount: 0,
        isActive: true,
        price: 99,
        currency: 'PLN',
        type: 'digital' as const,
        inventory: undefined,
        images: ['/images/product1.jpg']
      };

      setFormData(mockContent);
      setContent(mockContent);
      setLoading(false);
    }, 1000);
  };

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.title.trim()) {
      newErrors.title = 'Tytuł jest wymagany';
    }

    if (!formData.description.trim()) {
      newErrors.description = 'Opis jest wymagany';
    }

    if (contentType === 'episode' && !formData.audioUrl) {
      newErrors.audioUrl = 'Plik audio jest wymagany';
    }

    if (contentType === 'article' && !formData.content.trim()) {
      newErrors.content = 'Treść artykułu jest wymagana';
    }

    if (contentType === 'download' && !formData.fileUrl) {
      newErrors.fileUrl = 'Plik do pobrania jest wymagany';
    }

    if (contentType === 'product' && formData.price <= 0) {
      newErrors.price = 'Cena musi być większa od 0';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSave = async () => {
    if (!validateForm()) return;

    setSaving(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      const savedContent = {
        id: contentId || `new-${Date.now()}`,
        ...formData,
        createdAt: contentId ? content.createdAt : new Date(),
        updatedAt: new Date()
      };

      onSave?.(savedContent);
    } catch (error) {
      console.error('Error saving content:', error);
    } finally {
      setSaving(false);
    }
  };

  const handleAddTag = () => {
    if (newTag.trim() && !formData.tags.includes(newTag.trim())) {
      setFormData(prev => ({
        ...prev,
        tags: [...prev.tags, newTag.trim()]
      }));
      setNewTag('');
    }
  };

  const handleRemoveTag = (tagToRemove: string) => {
    setFormData(prev => ({
      ...prev,
      tags: prev.tags.filter(tag => tag !== tagToRemove)
    }));
  };

  const getContentTypeIcon = () => {
    switch (contentType) {
      case 'episode': return <Play className="w-5 h-5" />;
      case 'article': return <BookOpen className="w-5 h-5" />;
      case 'download': return <Download className="w-5 h-5" />;
      case 'product': return <Package className="w-5 h-5" />;
      default: return <FileText className="w-5 h-5" />;
    }
  };

  const getContentTypeLabel = () => {
    switch (contentType) {
      case 'episode': return 'Odcinek';
      case 'article': return 'Artykuł';
      case 'download': return 'Pobieranie';
      case 'product': return 'Produkt';
      default: return 'Treść';
    }
  };

  const categories = [
    'Rozwój osobisty',
    'Medytacja',
    'Emocje',
    'Zdrowie',
    'Relacje',
    'Kariera',
    'Kursy',
    'Konsultacje'
  ];

  if (loading) {
    return (
      <div className="animate-pulse space-y-6">
        <div className="h-8 bg-gray-200 rounded w-1/3"></div>
        <div className="space-y-4">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="h-12 bg-gray-200 rounded"></div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-orange-100 rounded-lg">
            {getContentTypeIcon()}
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              {contentId ? 'Edytuj' : 'Nowy'} {getContentTypeLabel().toLowerCase()}
            </h1>
            <p className="text-gray-600">
              {contentId ? 'Edytuj istniejącą treść' : 'Utwórz nową treść'}
            </p>
          </div>
        </div>
        
        <div className="flex items-center gap-3">
          <button
            onClick={() => setPreviewMode(!previewMode)}
            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            <Eye className="w-4 h-4 mr-2" />
            Podgląd
          </button>
          <button
            onClick={onCancel}
            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            Anuluj
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 disabled:opacity-50 transition-colors flex items-center gap-2"
          >
            <Save className="w-4 h-4" />
            {saving ? 'Zapisywanie...' : 'Zapisz'}
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Basic Information */}
          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Podstawowe informacje</h2>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Tytuł *
                </label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                    errors.title ? 'border-red-500' : 'border-gray-300'
                  }`}
                  placeholder="Wprowadź tytuł..."
                />
                {errors.title && (
                  <p className="mt-1 text-sm text-red-600">{errors.title}</p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Opis *
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                  rows={3}
                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                    errors.description ? 'border-red-500' : 'border-gray-300'
                  }`}
                  placeholder="Wprowadź opis..."
                />
                {errors.description && (
                  <p className="mt-1 text-sm text-red-600">{errors.description}</p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Kategoria
                </label>
                <select
                  value={formData.category}
                  onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                >
                  <option value="">Wybierz kategorię</option>
                  {categories.map(category => (
                    <option key={category} value={category}>{category}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Tagi
                </label>
                <div className="flex flex-wrap gap-2 mb-2">
                  {formData.tags.map(tag => (
                    <span
                      key={tag}
                      className="inline-flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 text-sm rounded-full"
                    >
                      {tag}
                      <button
                        onClick={() => handleRemoveTag(tag)}
                        className="text-orange-600 hover:text-orange-800 transition-colors cursor-pointer"
                        type="button"
                        aria-label="Usuń tag"
                      >
                        <X className="w-3 h-3 pointer-events-none" />
                      </button>
                    </span>
                  ))}
                </div>
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="Dodaj tag..."
                  />
                  <button
                    onClick={handleAddTag}
                    className="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Content Specific Fields */}
          {contentType === 'episode' && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Szczegóły odcinka</h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Plik audio *
                  </label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={formData.audioUrl}
                      onChange={(e) => setFormData(prev => ({ ...prev, audioUrl: e.target.value }))}
                      className={`flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                        errors.audioUrl ? 'border-red-500' : 'border-gray-300'
                      }`}
                      placeholder="/audio/episode.mp3"
                    />
                    <button className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                      <Upload className="w-4 h-4" />
                    </button>
                  </div>
                  {errors.audioUrl && (
                    <p className="mt-1 text-sm text-red-600">{errors.audioUrl}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Czas trwania (sekundy)
                  </label>
                  <input
                    type="number"
                    value={formData.duration}
                    onChange={(e) => setFormData(prev => ({ ...prev, duration: parseInt(e.target.value) || 0 }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="2700"
                  />
                </div>
              </div>
            </div>
          )}

          {contentType === 'article' && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Treść artykułu</h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Treść artykułu *
                  </label>
                  <textarea
                    value={formData.content}
                    onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
                    rows={12}
                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                      errors.content ? 'border-red-500' : 'border-gray-300'
                    }`}
                    placeholder="Wprowadź treść artykułu..."
                  />
                  {errors.content && (
                    <p className="mt-1 text-sm text-red-600">{errors.content}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Krótki opis
                  </label>
                  <textarea
                    value={formData.excerpt}
                    onChange={(e) => setFormData(prev => ({ ...prev, excerpt: e.target.value }))}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="Krótki opis artykułu..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Slug URL
                  </label>
                  <input
                    type="text"
                    value={formData.slug}
                    onChange={(e) => setFormData(prev => ({ ...prev, slug: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="tytul-artykulu"
                  />
                </div>
              </div>
            </div>
          )}

          {contentType === 'download' && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Szczegóły pliku</h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Plik do pobrania *
                  </label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={formData.fileUrl}
                      onChange={(e) => setFormData(prev => ({ ...prev, fileUrl: e.target.value }))}
                      className={`flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                        errors.fileUrl ? 'border-red-500' : 'border-gray-300'
                      }`}
                      placeholder="/downloads/file.pdf"
                    />
                    <button className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                      <Upload className="w-4 h-4" />
                    </button>
                  </div>
                  {errors.fileUrl && (
                    <p className="mt-1 text-sm text-red-600">{errors.fileUrl}</p>
                  )}
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Rozmiar pliku (bajty)
                    </label>
                    <input
                      type="number"
                      value={formData.fileSize}
                      onChange={(e) => setFormData(prev => ({ ...prev, fileSize: parseInt(e.target.value) || 0 }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="2048576"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Typ pliku
                    </label>
                    <input
                      type="text"
                      value={formData.fileType}
                      onChange={(e) => setFormData(prev => ({ ...prev, fileType: e.target.value }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="application/pdf"
                    />
                  </div>
                </div>
              </div>
            </div>
          )}

          {contentType === 'product' && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Szczegóły produktu</h2>
              
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Cena *
                    </label>
                    <input
                      type="number"
                      value={formData.price}
                      onChange={(e) => setFormData(prev => ({ ...prev, price: parseFloat(e.target.value) || 0 }))}
                      className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent ${
                        errors.price ? 'border-red-500' : 'border-gray-300'
                      }`}
                      placeholder="99.99"
                      step="0.01"
                    />
                    {errors.price && (
                      <p className="mt-1 text-sm text-red-600">{errors.price}</p>
                    )}
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Waluta
                    </label>
                    <select
                      value={formData.currency}
                      onChange={(e) => setFormData(prev => ({ ...prev, currency: e.target.value }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    >
                      <option value="PLN">PLN</option>
                      <option value="EUR">EUR</option>
                      <option value="USD">USD</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Typ produktu
                  </label>
                  <select
                    value={formData.type}
                    onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value as any }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                  >
                    <option value="digital">Produkt cyfrowy</option>
                    <option value="consultation">Konsultacja</option>
                    <option value="course">Kurs</option>
                    <option value="subscription">Subskrypcja</option>
                  </select>
                </div>

                {formData.type === 'digital' && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Stan magazynowy
                    </label>
                    <input
                      type="number"
                      value={formData.inventory || ''}
                      onChange={(e) => setFormData(prev => ({ ...prev, inventory: e.target.value ? parseInt(e.target.value) : undefined }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="Nieograniczony"
                    />
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Publishing Settings */}
          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Ustawienia publikacji</h2>
            
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">Opublikowany</label>
                <button
                  onClick={() => setFormData(prev => ({ ...prev, isPublished: !prev.isPublished }))}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    formData.isPublished ? 'bg-orange-500' : 'bg-gray-200'
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      formData.isPublished ? 'translate-x-6' : 'translate-x-1'
                    }`}
                  />
                </button>
              </div>

              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">Treść premium</label>
                <button
                  onClick={() => setFormData(prev => ({ ...prev, isPremium: !prev.isPremium }))}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    formData.isPremium ? 'bg-orange-500' : 'bg-gray-200'
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      formData.isPremium ? 'translate-x-6' : 'translate-x-1'
                    }`}
                  />
                </button>
              </div>

              {formData.isPremium && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Wymagany tier
                  </label>
                  <select
                    value={formData.requiredTier}
                    onChange={(e) => setFormData(prev => ({ ...prev, requiredTier: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                  >
                    <option value="ODDECH">ODDECH</option>
                    <option value="CZUŁOŚĆ">CZUŁOŚĆ</option>
                    <option value="WOLNOŚĆ">WOLNOŚĆ</option>
                  </select>
                </div>
              )}
            </div>
          </div>

          {/* SEO Settings (for articles) */}
          {contentType === 'article' && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Ustawienia SEO</h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Tytuł SEO
                  </label>
                  <input
                    type="text"
                    value={formData.seoTitle}
                    onChange={(e) => setFormData(prev => ({ ...prev, seoTitle: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="Tytuł dla wyszukiwarek..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Opis SEO
                  </label>
                  <textarea
                    value={formData.seoDescription}
                    onChange={(e) => setFormData(prev => ({ ...prev, seoDescription: e.target.value }))}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="Opis dla wyszukiwarek..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Obraz wyróżniający
                  </label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={formData.featuredImage}
                      onChange={(e) => setFormData(prev => ({ ...prev, featuredImage: e.target.value }))}
                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="/images/featured.jpg"
                    />
                    <button className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                      <ImageIcon className="w-4 h-4" />
                    </button>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Czas czytania (minuty)
                  </label>
                  <input
                    type="number"
                    value={formData.readingTime}
                    onChange={(e) => setFormData(prev => ({ ...prev, readingTime: parseInt(e.target.value) || 0 }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    placeholder="8"
                  />
                </div>
              </div>
            </div>
          )}

          {/* Statistics */}
          {contentId && (
            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Statystyki</h2>
              
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Wyświetlenia</span>
                  <span className="text-sm font-medium text-gray-900">
                    {content.views || 0}
                  </span>
                </div>
                
                {contentType === 'download' && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Pobrania</span>
                    <span className="text-sm font-medium text-gray-900">
                      {content.downloadCount || 0}
                    </span>
                  </div>
                )}
                
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Utworzono</span>
                  <span className="text-sm font-medium text-gray-900">
                    {content.createdAt?.toLocaleDateString('pl-PL')}
                  </span>
                </div>
                
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Ostatnia edycja</span>
                  <span className="text-sm font-medium text-gray-900">
                    {content.updatedAt?.toLocaleDateString('pl-PL')}
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};