import { useEffect, useState } from 'react'
import QRCode from 'qrcode'
import { Badge } from '../ui/badge'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Dialog } from '../ui/dialog'
import { useToast } from '../ui/toast'

interface ShareSessionPanelProps {
  sessionCode: string
  isActive: boolean
}

export function ShareSessionPanel({ sessionCode, isActive }: ShareSessionPanelProps) {
  const { success, error: showError } = useToast()
  const [shareOpen, setShareOpen] = useState(false)
  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null)
  const origin = typeof window === 'undefined' ? 'https://signal-learn.web.id' : window.location.origin
  const shareUrl = `${origin}/session/${encodeURIComponent(sessionCode)}`

  useEffect(() => {
    if (!shareOpen) return
    QRCode.toDataURL(shareUrl, {
      width: 280,
      margin: 2,
      color: { dark: '#17243a', light: '#ffffff' },
    }).then(setQrDataUrl).catch(() => setQrDataUrl(null))
  }, [shareOpen, shareUrl])

  const copy = async (value: string, label: string) => {
    try {
      await navigator.clipboard.writeText(value)
      success(`${label} disalin`, 'Siap dibagikan ke peserta.')
    } catch {
      showError('Tidak dapat menyalin', 'Silakan salin teks secara manual.')
    }
  }

  return (
    <>
      <Card className="border-sage-soft bg-gradient-to-br from-sage-soft to-paper">
        <CardHeader className="flex-row items-start justify-between space-y-0 pb-4">
          <div>
            <CardTitle>Bagikan ke peserta</CardTitle>
            <p className="mt-1 text-sm text-body">Peserta bergabung melalui link atau kode di bawah.</p>
          </div>
          <Badge variant={isActive ? 'success' : 'neutral'}>{isActive ? 'Siap dibagikan' : 'Session belum live'}</Badge>
        </CardHeader>
        <CardContent>
          <div className="rounded-xl border border-sage-soft bg-paper p-3">
            <p className="text-xs font-semibold uppercase tracking-wide text-muted">Link peserta</p>
            <p className="mt-2 break-all font-mono text-sm text-clay-deep">{shareUrl}</p>
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            <Button size="sm" onClick={() => copy(shareUrl, 'Link')} disabled={!isActive}>Salin link</Button>
            <Button size="sm" variant="outline" onClick={() => setShareOpen(true)} disabled={!isActive}>Tampilkan QR</Button>
          </div>
          <div className="mt-4 flex items-center justify-between border-t border-sage-soft pt-4">
            <div><p className="text-xs text-body">Atau gunakan kode</p><p className="mt-1 font-mono text-xl font-bold tracking-wider text-ink">{sessionCode}</p></div>
            <Button size="sm" variant="ghost" onClick={() => copy(sessionCode, 'Kode')} disabled={!isActive}>Salin kode</Button>
          </div>
        </CardContent>
      </Card>

      <Dialog open={shareOpen} onOpenChange={setShareOpen} title="QR code session" description="Peserta dapat memindai QR code ini dengan kamera ponsel mereka.">
        <div className="flex justify-center rounded-xl bg-paper p-4">
          {qrDataUrl ? <img src={qrDataUrl} alt={`QR code untuk session ${sessionCode}`} className="h-64 w-64" /> : <p className="p-12 text-sm text-body">Membuat QR code…</p>}
        </div>
        <p className="mt-3 text-center font-mono text-sm font-semibold text-body">{sessionCode}</p>
      </Dialog>
    </>
  )
}