'use client';

import { useEffect, useState } from 'react';
import QRCode from 'qrcode';
import { v4 as uuidv4 } from 'uuid';
import { pusherClient } from '@/lib/pusher';

export default function QRPage() {
  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
  const [sessionId, setSessionId] = useState<string>('');

  useEffect(() => {
    const newSessionId = uuidv4();
    setSessionId(newSessionId);

    const triggerUrl = `${window.location.protocol}//${window.location.host}/trigger?id=${newSessionId}`;
    
    QRCode.toDataURL(triggerUrl, {
      width: 300,
      margin: 2,
    })
      .then((url) => {
        setQrCodeUrl(url);
      })
      .catch((err) => {
        console.error(err);
      });

    const channel = pusherClient.subscribe(`session-${newSessionId}`);
    
    channel.bind('trigger-photo', () => {
      window.location.href = `/live-cam?id=${newSessionId}`;
    });

    return () => {
      pusherClient.unsubscribe(`session-${newSessionId}`);
    };
  }, []);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
      <div className="bg-white rounded-lg shadow-lg p-8 text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-6">
          Scan QR Code untuk Mengambil Foto
        </h1>
        
        {qrCodeUrl ? (
          <div className="mb-6">
            <img 
              src={qrCodeUrl} 
              alt="QR Code" 
              className="mx-auto border-2 border-gray-300 rounded"
            />
          </div>
        ) : (
          <div className="mb-6 w-72 h-72 bg-gray-200 animate-pulse rounded mx-auto flex items-center justify-center">
            <span className="text-gray-500">Generating QR Code...</span>
          </div>
        )}
        
        <p className="text-gray-600 mb-4">
          Scan QR code ini dengan smartphone Anda untuk mengakses kontrol kamera
        </p>
        
        <div className="bg-gray-50 p-4 rounded">
          <p className="text-sm text-gray-500">Session ID:</p>
          <code className="text-xs bg-gray-200 px-2 py-1 rounded">{sessionId}</code>
        </div>
      </div>
    </div>
  );
}