import { VideoroomLayoutDto } from '@/proxy/videoroom/models'
import { FaTimes, FaTh, FaExpand, FaDesktop, FaUsers } from 'react-icons/fa'
import { Button } from '@/components/ui'
import { useLocalization } from '@/utils/hooks/useLocalization'

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 = ({ layouts, currentLayout, onChangeLayout, onClose }: LayoutPanelProps) => {
  const { translate } = useLocalization()

  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">
            {translate('::App.VideoRoom.SelectVideoLayout')}
          </h3>
          <Button
            type="button"
            variant="plain"
            shape="none"
            className="!inline-flex !h-auto items-center justify-center !bg-transparent !p-1 hover:!bg-gray-100 active:!bg-gray-100"
            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}
              type="button"
              variant="plain"
              shape="none"
              onClick={() => onChangeLayout(layout)}
              className={`!block !h-auto !w-full rounded-lg border-2 !p-4 text-left transition-all ${
                currentLayout.id === layout.id
                  ? 'border-blue-500 !bg-blue-50'
                  : 'border-gray-200 !bg-white 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