import React from 'react';
import { Button, Tooltip } from 'antd';
import { ShareAltOutlined, ReloadOutlined } from '@ant-design/icons';
import FilePreview from '../components/FilePreview';
import { generateAdId } from './adUtils';

// Tabs aus Kategorien-Daten erstellen
export const buildTabsFromCategories = (data, zoom, darkMode, handleCopyLink, handleRefreshAd) => {
  let categories = [];
  if (Array.isArray(data)) {
    categories = data.filter(child => child.type === 'category');
  } else if (data && Array.isArray(data.children)) {
    categories = data.children.filter(child => child.type === 'category');
  }
  
  return categories.map(cat => ({
    key: cat.title,
    label: cat.title,
    children: (
      <div>
        {Array.isArray(cat.children) && cat.children.filter(sub => sub.type === 'subcategory').length > 0 ? (
          cat.children.filter(sub => sub.type === 'subcategory').map(sub => (
            <div key={sub.name} style={{ marginTop: 24 }}>
              <h2 style={{ marginBottom: 4 }}>{sub.name}</h2>
              {/* Ads unterhalb der Subcategory anzeigen */}
              {Array.isArray(sub.children) && sub.children.filter(ad => ad.type === 'ad').length > 0 ? (
                sub.children.filter(ad => ad.type === 'ad').map(ad => {
                  const adId = generateAdId(ad.name, sub.name, cat.title);
                  return (
                    <div key={ad.name} id={adId} style={{ marginLeft: 0, marginBottom: 16 }}>
                      <div style={{ color: '#555', fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
                        {ad.name}
                        <Tooltip title="Link kopieren">
                          <Button 
                            type="text" 
                            shape="circle" 
                            icon={<ShareAltOutlined />} 
                            onClick={() => handleCopyLink(adId, ad.name)}
                          />
                        </Tooltip>
                        {/* Refresh-Button nur bei HTML-Dateien (iFrames) anzeigen */}
                        {Array.isArray(ad.files) && ad.files.some(file => file.type === 'html') && (
                          <Tooltip title="Animationen neu laden">
                            <Button 
                              type="text" 
                              shape="circle" 
                              icon={<ReloadOutlined />} 
                              onClick={() => handleRefreshAd(adId, ad.name)}
                            />
                          </Tooltip>
                        )}
                      </div>
                      {/* Dateien unterhalb des Ads anzeigen */}
                      {Array.isArray(ad.files) && ad.files.length > 0 ? (
                        <div style={{ marginLeft: 0, display: 'flex', flexWrap: 'wrap', gap: 32 }}>
                          {ad.files.map(file => (
                            <FilePreview key={file.name + '__' + zoom} file={file} zoom={zoom} darkMode={darkMode} />
                          ))}
                        </div>
                      ) : (
                        <div style={{ color: '#bbb', marginLeft: 16, fontSize: 13 }}>Keine Dateien vorhanden.</div>
                      )}
                    </div>
                  );
                })
              ) : (
                <div style={{ color: '#aaa', marginLeft: 16, fontSize: 14 }}>Keine Ads vorhanden.</div>
              )}
            </div>
          ))
        ) : (
          <div style={{ color: '#888', marginTop: 16 }}>Keine Subkategorien vorhanden.</div>
        )}
      </div>
    )
  }));
};
