import React, { useState, useEffect } from 'react';
import ModelThumbnail from '../components/ModelThumbnail';
import ModelPreview from '../components/ModelPreview';

const ModelGallery = () => {
  const [models, setModels] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedModel, setSelectedModel] = useState(null);
  const [filteredModels, setFilteredModels] = useState([]);

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

  useEffect(() => {
    const filtered = models.filter(model =>
      model.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredModels(filtered);
  }, [models, searchTerm]);

  const loadModels = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch('/api/models', {
        headers: { Authorization: `Bearer ${token}` }
      });
      
      if (response.ok) {
        const modelList = await response.json();
        setModels(modelList);
        setLoading(false);
      } else {
        console.error('Ошибка загрузки моделей');
        setLoading(false);
      }
    } catch (error) {
      console.error('Ошибка загрузки моделей:', error);
      setLoading(false);
    }
  };

  const handleModelClick = (modelName) => {
    setSelectedModel(selectedModel === modelName ? null : modelName);
  };

  const getModelDisplayName = (modelName) => {
    return modelName
      .replace(/\.glb$/, '')
      .replace(/[-_]/g, ' ')
      .replace(/\b\w/g, l => l.toUpperCase());
  };

  const getModelUrl = (modelName) => {
    return `/models/copied/${modelName}`;
  };

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh',
        fontSize: '18px'
      }}>
        Загрузка моделей...
      </div>
    );
  }

  return (
    <>
      <style>
        {`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}
      </style>
      <div style={{ 
        padding: '20px', 
        maxWidth: '1200px', 
        margin: '0 auto',
        fontFamily: 'Arial, sans-serif',
        minHeight: '100vh',
        overflowY: 'auto'
      }}>
      <h1 style={{ 
        textAlign: 'center', 
        marginBottom: '30px',
        color: '#333'
      }}>
        Галерея моделей
      </h1>

      {/* Поиск */}
      <div style={{ 
        marginBottom: '30px',
        display: 'flex',
        justifyContent: 'center'
      }}>
        <input
          type="text"
          placeholder="Поиск моделей..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{
            padding: '10px 15px',
            fontSize: '16px',
            border: '2px solid #ddd',
            borderRadius: '25px',
            width: '300px',
            outline: 'none'
          }}
        />
      </div>

      {/* Статистика */}
      <div style={{ 
        marginBottom: '20px',
        textAlign: 'center',
        color: '#666'
      }}>
        Показано {filteredModels.length} из {models.length} моделей
      </div>

      {/* Сетка моделей */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
        gap: '20px',
        marginBottom: '40px'
      }}>
        {filteredModels.map((modelName, index) => (
          <div
            key={modelName}
            style={{
              background: 'white',
              borderRadius: '12px',
              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
              overflow: 'hidden',
              transition: 'transform 0.2s, box-shadow 0.2s',
              cursor: 'pointer',
              border: selectedModel === modelName ? '3px solid #007bff' : '1px solid #ddd'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-5px)';
              e.currentTarget.style.boxShadow = '0 8px 15px rgba(0, 0, 0, 0.2)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
            }}
            onClick={() => handleModelClick(modelName)}
          >
            {/* PNG превью */}
            <ModelThumbnail
              modelUrl={getModelUrl(modelName)}
              modelName={modelName}
            />
            
            {/* Информация о модели */}
            <div style={{ padding: '15px' }}>
              <h3 style={{ 
                margin: '0 0 10px 0',
                fontSize: '16px',
                color: '#333',
                fontWeight: '600'
              }}>
                {getModelDisplayName(modelName)}
              </h3>
              
              <div style={{ 
                fontSize: '12px',
                color: '#666',
                marginBottom: '10px'
              }}>
                Файл: {modelName}
              </div>

              {/* Кнопки действий */}
              <div style={{ 
                display: 'flex',
                gap: '10px',
                marginTop: '15px'
              }}>
                <button
                  style={{
                    flex: 1,
                    padding: '8px 12px',
                    background: '#007bff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '12px'
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                    // Здесь можно добавить логику для использования модели в редакторе
                    alert(`Модель "${getModelDisplayName(modelName)}" выбрана для редактора`);
                  }}
                >
                  Использовать
                </button>
                
                <button
                  style={{
                    flex: 1,
                    padding: '8px 12px',
                    background: '#6c757d',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '12px'
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                    // Скачать модель
                    const link = document.createElement('a');
                    link.href = getModelUrl(modelName);
                    link.download = modelName;
                    link.click();
                  }}
                >
                  Скачать
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Модальное окно для детального просмотра */}
      {selectedModel && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0, 0, 0, 0.8)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}
        onClick={() => setSelectedModel(null)}
        >
          <div style={{
            background: 'white',
            borderRadius: '12px',
            padding: '20px',
            maxWidth: '80vw',
            maxHeight: '80vh',
            position: 'relative'
          }}
          onClick={(e) => e.stopPropagation()}
          >
            <button
              style={{
                position: 'absolute',
                top: '10px',
                right: '10px',
                background: '#dc3545',
                color: 'white',
                border: 'none',
                borderRadius: '50%',
                width: '30px',
                height: '30px',
                cursor: 'pointer',
                fontSize: '16px'
              }}
              onClick={() => setSelectedModel(null)}
            >
              ×
            </button>
            
            <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
              {getModelDisplayName(selectedModel)}
            </h2>
            
            <div style={{ height: '400px', width: '600px' }}>
              <ModelPreview
                modelUrl={getModelUrl(selectedModel)}
                modelName={selectedModel}
              />
            </div>
            
            <div style={{ marginTop: '20px' }}>
              <button
                style={{
                  padding: '10px 20px',
                  background: '#28a745',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  marginRight: '10px'
                }}
                onClick={() => {
                  alert(`Модель "${getModelDisplayName(selectedModel)}" выбрана для редактора`);
                  setSelectedModel(null);
                }}
              >
                Использовать в редакторе
              </button>
              
              <button
                style={{
                  padding: '10px 20px',
                  background: '#6c757d',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
                onClick={() => {
                  const link = document.createElement('a');
                  link.href = getModelUrl(selectedModel);
                  link.download = selectedModel;
                  link.click();
                }}
              >
                Скачать модель
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Подвал */}
      <div style={{
        textAlign: 'center',
        marginTop: '40px',
        padding: '20px',
        background: '#f8f9fa',
        borderRadius: '8px',
        color: '#666'
      }}>
        <p>Всего моделей: {models.length}</p>
        <p>Используйте колесо мыши для масштабирования, зажмите и тяните для поворота</p>
      </div>
      </div>
    </>
  );
};

export default ModelGallery;
