import React from 'react'
import DynamicRenderer from './DynamicRenderer'
import { useComponents } from '@/contexts/ComponentContext'
import { Loading } from '../shared'

export interface ComponentPreviewProps {
  componentName?: string
  className?: string
}

const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, className = '' }) => {
  const { components, loading } = useComponents()

  if (!componentName) {
    return <div className="text-sm text-gray-500 dark:text-gray-400">Bileşen ismi yok.</div>
  }

  // components dizisinin varlığını kontrol et
  if (loading || !components || !Array.isArray(components)) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <Loading loading={true} />
        </div>
      </div>
    )
  }

  // Belirtilen bileşeni bul
  const component = components.find((c) => c.name === componentName && c.isActive)

  let dependencies: string[] = []

  if (component?.dependencies) {
    try {
      // JSON string mi?
      if (component.dependencies.startsWith('[')) {
        dependencies = JSON.parse(component.dependencies)
      } else {
        // Virgülle ayrılmış düz metin
        dependencies = component.dependencies.split(',').map((d) => d.trim())
      }
    } catch (err) {
      console.error('Dependency parse hatası:', err)
      dependencies = []
    }
  }

  return (
    <div className={`bg-white dark:bg-gray-900 ${className}`}>
      <DynamicRenderer componentName={componentName} dependencies={dependencies} />
    </div>
  )
}

export default ComponentPreview