import { useEffect, useRef, useState } from 'react';
import { Share2, Copy, Users, X, Loader2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { startBroadcast, type BroadcasterHandle } from '@/lib/webrtc/broadcaster';
import { getBroadcastSource } from '@/lib/webrtc/broadcastSource';
import { toast } from 'sonner';

interface ShareButtonProps {
  variant?: 'default' | 'compact';
  /** Opens the dialog automatically when toggled. Used by the in-XR HUD. */
  autoOpen?: boolean;
  onHandleChange?: (h: BroadcasterHandle | null) => void;
  onViewerCountChange?: (n: number) => void;
}

export function ShareButton({ variant = 'default', autoOpen, onHandleChange, onViewerCountChange }: ShareButtonProps) {
  const [open, setOpen] = useState(false);
  const [starting, setStarting] = useState(false);
  const [handle, setHandle] = useState<BroadcasterHandle | null>(null);
  const [viewerCount, setViewerCount] = useState(0);
  const streamRef = useRef<MediaStream | null>(null);

  const link = handle ? `${window.location.origin}/watch/${handle.code}` : '';

  const start = async () => {
    setStarting(true);
    try {
      // Prefer the XR broadcast mirror (opaque) if active — required during AR passthrough.
      let stream: MediaStream | null = null;
      const mirror = getBroadcastSource();
      if (mirror && typeof mirror.captureStream === 'function') {
        stream = mirror.captureStream(24);
      }

      // Fallback: main page canvas
      if (!stream || stream.getVideoTracks().length === 0) {
        const canvas = document.querySelector('canvas') as HTMLCanvasElement | null;
        if (canvas && typeof canvas.captureStream === 'function') {
          stream = canvas.captureStream(30);
        }
      }

      // Last resort: getDisplayMedia (asks user permission)
      if (!stream || stream.getVideoTracks().length === 0) {
        stream = await navigator.mediaDevices.getDisplayMedia({
          video: { frameRate: 30 },
          audio: false,
        });
      }

      streamRef.current = stream;
      const h = await startBroadcast(stream);
      setHandle(h);
      onHandleChange?.(h);
      h.onViewerCountChange((n) => { setViewerCount(n); onViewerCountChange?.(n); });
      toast.success(`Sala criada: ${h.code}`);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      toast.error(`Falha ao iniciar transmissão: ${msg}`);
    } finally {
      setStarting(false);
    }
  };

  const stop = async () => {
    if (handle) await handle.stop();
    if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop());
    streamRef.current = null;
    setHandle(null);
    setViewerCount(0);
    onHandleChange?.(null);
    onViewerCountChange?.(0);
    toast.info('Transmissão encerrada');
  };

  // Auto-open dialog when requested by parent (in-XR HUD)
  useEffect(() => {
    if (autoOpen) setOpen(true);
  }, [autoOpen]);

  // Expose start/stop via window so XR HUD can trigger from inside the scene
  useEffect(() => {
    (window as unknown as { __trackSteelStartLive?: () => void; __trackSteelStopLive?: () => void }).__trackSteelStartLive = () => { if (!handle) start(); };
    (window as unknown as { __trackSteelStopLive?: () => void }).__trackSteelStopLive = () => { if (handle) stop(); };
    return () => {
      delete (window as unknown as { __trackSteelStartLive?: () => void }).__trackSteelStartLive;
      delete (window as unknown as { __trackSteelStopLive?: () => void }).__trackSteelStopLive;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [handle]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (handle) handle.stop();
      if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop());
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const copyLink = async () => {
    await navigator.clipboard.writeText(link);
    toast.success('Link copiado');
  };

  const shareLink = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'TrackSteelXR — Sessão ao vivo',
          text: 'Acompanhe a inspeção ao vivo:',
          url: link,
        });
      } catch {/* user cancelled */}
    } else {
      copyLink();
    }
  };

  const isCompact = variant === 'compact';

  return (
    <>
      <Button
        variant={handle ? 'default' : 'outline'}
        size={isCompact ? 'sm' : 'sm'}
        className={isCompact ? 'h-8 gap-1.5 text-[10px] font-mono' : 'gap-2'}
        onClick={() => setOpen(true)}
        title="Compartilhar tela ao vivo"
      >
        <Share2 className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
        {handle ? (
          <>
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
              <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
            </span>
            LIVE {viewerCount > 0 && `· ${viewerCount}`}
          </>
        ) : (
          'Compartilhar'
        )}
      </Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 font-mono text-sm">
              <Share2 className="h-4 w-4 text-primary" />
              Compartilhar tela ao vivo
            </DialogTitle>
          </DialogHeader>

          {!handle ? (
            <div className="space-y-4">
              <p className="text-xs text-muted-foreground leading-relaxed">
                Gere um link público para que até 5 pessoas acompanhem sua sessão ao vivo
                pelo celular ou PC. Não precisa de login. A sala expira em 4h.
              </p>
              <Button onClick={start} disabled={starting} className="w-full gap-2">
                {starting ? (
                  <><Loader2 className="h-4 w-4 animate-spin" /> Iniciando…</>
                ) : (
                  <><Share2 className="h-4 w-4" /> Gerar link de acesso</>
                )}
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="flex justify-center">
                <div className="rounded-lg bg-white p-3">
                  <QRCodeSVG value={link} size={160} level="M" />
                </div>
              </div>

              <div className="rounded-lg border bg-muted/30 p-3 space-y-2">
                <div className="flex items-center justify-between">
                  <span className="font-mono text-[10px] text-muted-foreground">CÓDIGO</span>
                  <span className="font-mono text-lg font-bold tracking-widest text-primary">
                    {handle.code}
                  </span>
                </div>
                <div className="flex items-center gap-2 rounded bg-background px-2 py-1.5 border">
                  <input
                    readOnly
                    value={link}
                    className="flex-1 bg-transparent text-[10px] font-mono outline-none"
                  />
                  <Button size="icon" variant="ghost" className="h-6 w-6" onClick={copyLink}>
                    <Copy className="h-3 w-3" />
                  </Button>
                </div>
              </div>

              <div className="flex items-center justify-between rounded-lg border bg-muted/30 px-3 py-2">
                <div className="flex items-center gap-2 text-xs">
                  <Users className="h-3.5 w-3.5 text-primary" />
                  <span className="font-mono text-[11px]">
                    {viewerCount} {viewerCount === 1 ? 'espectador' : 'espectadores'}
                  </span>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
                  </span>
                  <span className="font-mono text-[10px] text-red-500">LIVE</span>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-2">
                <Button onClick={shareLink} className="gap-2">
                  <Share2 className="h-4 w-4" /> Enviar
                </Button>
                <Button onClick={stop} variant="destructive" className="gap-2">
                  <X className="h-4 w-4" /> Encerrar
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}
