import { useState } from 'react'
import {
  ExternalLink,
  Monitor,
  Smartphone,
  Tablet,
  X,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type Viewport = 'desktop' | 'tablet' | 'mobile'

const viewports: { value: Viewport; label: string; icon: React.ElementType; width: string }[] = [
  { value: 'mobile', label: 'Mobil', icon: Smartphone, width: '390px' },
  { value: 'tablet', label: 'Tablet', icon: Tablet, width: '768px' },
  { value: 'desktop', label: 'Masaüstü', icon: Monitor, width: '100%' },
]

export function PreviewModal({
  url,
  title,
  onClose,
}: {
  url: string
  title: string
  onClose: () => void
}) {
  const [viewport, setViewport] = useState<Viewport>('desktop')
  const activeVp = viewports.find((v) => v.value === viewport)!

  return (
    <div className='fixed inset-0 z-50 flex flex-col bg-black/90'>
      {/* Toolbar */}
      <div className='flex items-center justify-between border-b border-white/10 bg-gray-950 px-4 py-2'>
        <div className='flex items-center gap-3'>
          <div className='flex h-6 items-center gap-1.5'>
            <span className='size-2 rounded-full bg-yellow-400 animate-pulse' />
            <span className='text-xs font-medium text-yellow-400'>
              Önizleme
            </span>
          </div>
          <span className='text-sm text-white/70'>{title}</span>
        </div>

        <div className='flex items-center gap-2'>
          {/* Viewport toggle */}
          <div className='flex items-center gap-0.5 rounded-lg bg-white/5 p-0.5'>
            {viewports.map((vp) => {
              const Icon = vp.icon
              return (
                <button
                  key={vp.value}
                  type='button'
                  onClick={() => setViewport(vp.value)}
                  className={cn(
                    'flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition',
                    viewport === vp.value
                      ? 'bg-white/15 text-white'
                      : 'text-white/50 hover:text-white/80'
                  )}
                >
                  <Icon className='size-3.5' />
                  {vp.label}
                </button>
              )
            })}
          </div>

          {/* New tab */}
          <Button
            type='button'
            variant='ghost'
            size='sm'
            className='h-8 gap-1.5 text-xs text-white/70 hover:bg-white/10 hover:text-white'
            onClick={() => window.open(url, '_blank')}
          >
            <ExternalLink className='size-3.5' />
            Yeni sekmede aç
          </Button>

          {/* Close */}
          <Button
            type='button'
            variant='ghost'
            size='icon'
            className='size-8 text-white/70 hover:bg-white/10 hover:text-white'
            onClick={onClose}
          >
            <X className='size-4' />
          </Button>
        </div>
      </div>

      {/* iframe */}
      <div className='flex flex-1 items-start justify-center overflow-auto bg-gray-900 p-4'>
        <iframe
          src={url}
          title={`Önizleme: ${title}`}
          className='rounded-lg bg-white shadow-2xl transition-all duration-300'
          style={{
            width: activeVp.width,
            maxWidth: '100%',
            height: 'calc(100vh - 64px)',
          }}
        />
      </div>
    </div>
  )
}
