import { VideoroomLayoutDto } from '@/proxy/videoroom/models'
import React from 'react'
import { FaTimes, FaTh, FaExpand, FaDesktop, FaUsers } from 'react-icons/fa'

interface LayoutPanelProps {
  layouts: VideoroomLayoutDto[]
  currentLayout: VideoroomLayoutDto
  onChangeLayout: (layout: VideoroomLayoutDto) => void
  onClose: () => void
}

const getLayoutIcon = (type: string) => {
  switch (type) {
    case 'grid':
      return <FaTh size={24} />
    case 'speaker':
      return <FaExpand size={24} />
    case 'presentation':
      return <FaDesktop size={24} />
    case 'sidebar':
      return <FaUsers size={24} />
    case 'teacher-focus':
      return <FaDesktop size={24} />
    default:
      return <FaTh size={24} />
  }
}

const LayoutPanel: React.FC<LayoutPanelProps> = ({
  layouts,
  currentLayout,
  onChangeLayout,
  onClose,
}) => {
  return (
    <div className="h-full bg-white flex flex-col text-gray-900">
      <div className="p-4 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold text-gray-900">Video Layout Seçin</h3>
          <button onClick={onClose}>
            <FaTimes className="text-gray-500" />
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-2">
        <div className="space-y-3">
          {layouts.map((layout) => (
            <button
              key={layout.id}
              onClick={() => onChangeLayout(layout)}
              className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
                currentLayout.id === layout.id
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
              }`}
            >
              <div className="flex items-center space-x-3 mb-2">
                <div
                  className={`p-2 rounded-full ${
                    currentLayout.id === layout.id
                      ? 'bg-blue-100 text-blue-600'
                      : 'bg-gray-100 text-gray-600'
                  }`}
                >
                  {getLayoutIcon(layout.type)}
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 text-sm">{layout.name}</h4>
                  <p className="text-xs text-gray-600">{layout.description}</p>
                </div>
              </div>

              {/* Layout Preview */}
              <div className="bg-gray-100 rounded p-3 h-16 flex items-center justify-center">
                {layout.type === 'grid' && (
                  <div className="grid grid-cols-2 gap-1">
                    {[1, 2, 3, 4].map((i) => (
                      <div key={i} className="w-4 h-3 bg-blue-300 rounded"></div>
                    ))}
                  </div>
                )}
                {layout.type === 'sidebar' && (
                  <div className="flex items-center space-x-2">
                    <div className="w-8 h-6 bg-blue-500 rounded"></div>
                    <div className="grid grid-cols-3 gap-1">
                      {Array.from({ length: 6 }).map((_, i) => (
                        <div key={i} className="w-1 h-1 bg-blue-300 rounded"></div>
                      ))}
                    </div>
                  </div>
                )}
                {layout.type === 'teacher-focus' && (
                  <div className="space-y-1">
                    <div className="w-12 h-4 bg-green-500 rounded"></div>
                    <div className="flex space-x-1">
                      {Array.from({ length: 4 }).map((_, i) => (
                        <div key={i} className="w-1 h-1 bg-blue-300 rounded"></div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

export default LayoutPanel