"use client";

import { useEffect, useRef } from 'react';
import { LuX, LuCamera } from 'react-icons/lu';

interface CameraModalProps {
  isOpen: boolean;
  stream: MediaStream | null;
  onClose: () => void;
  onCapture: (blob: Blob) => void;
}

export function CameraModal({ isOpen, stream, onClose, onCapture }: CameraModalProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (isOpen && stream && videoRef.current) {
      videoRef.current.srcObject = stream;
    }
  }, [isOpen, stream]);

  const handleCapture = () => {
    const video = videoRef.current;
    const canvas = canvasRef.current;
    if (!video || !canvas) return;

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');
    if (context) {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(blob => {
        if (blob) {
          onCapture(blob);
        }
      }, 'image/jpeg', 0.95);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90">
      <div className="relative w-full h-full max-w-4xl flex flex-col">
        {/* Header */}
        <div className="absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/50 to-transparent z-10">
          <div className="flex items-center justify-between">
            <h3 className="text-white font-semibold text-lg">Captura tu documento</h3>
            <button
              onClick={onClose}
              className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
              aria-label="Cerrar cámara"
            >
              <LuX className="w-6 h-6 text-white" />
            </button>
          </div>
        </div>

        {/* Video Stream */}
        <div className="flex-1 flex items-center justify-center p-4">
          <video
            ref={videoRef}
            playsInline
            autoPlay
            muted
            className="w-full h-auto max-h-full object-contain rounded-lg"
          />
        </div>

        {/* Canvas oculto */}
        <canvas ref={canvasRef} className="hidden" />

        {/* Controls */}
        <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/50 to-transparent">
          <div className="flex items-center justify-center">
            <button
              onClick={handleCapture}
              className="w-16 h-16 rounded-full bg-background border-4 border-primary hover:bg-primary-faint transition-all shadow-lg flex items-center justify-center focus-ring"
              aria-label="Tomar foto"
            >
              <LuCamera className="w-8 h-8 text-primary" />
            </button>
          </div>
          <p className="text-center text-white text-sm mt-3 drop-shadow-md">
            Posiciona el documento y presiona el botón para capturar
          </p>
        </div>
      </div>
    </div>
  );
}