Câmera Nativa com Capacitor & React

import React, { useState } from 'react';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

/**
 * Componente Demonstrativo de Aula - Integração Câmera Nativa
 * Disciplina: Programação para Dispositivos Móveis II
 */
export default function NativeCameraModule() {
  const [fotoUri, setFotoUri] = useState(null);
  const [carregando, setCarregando] = useState(false);
  const [mensagemStatus, setMensagemStatus] = useState('');

  // Função principal para invocar a câmera física ou galeria
  const capturarFotoOuGaleria = async () => {
    setCarregando(true);
    setMensagemStatus('');

    try {
      // 1. Invocação da API Nativa do Capacitor
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true, // Permite recortar foto nativamente
        resultType: CameraResultType.Uri, // Retorna caminho de arquivo seguro
        source: CameraSource.Prompt, // Prompt: Pergunta se quer Câmera ou Fotos
        promptLabelHeader: 'Selecione a Origem',
        promptLabelPhoto: 'Escolher da Galeria',
        promptLabelPicture: 'Tirar Foto com Câmera'
      });

      // 2. image.webPath é a URI pronta para ser exibida no atributo src do React
      if (image && image.webPath) {
        setFotoUri(image.webPath);
        setMensagemStatus('Foto capturada com sucesso!');
      }
    } catch (error) {
      console.warn('Operação cancelada ou indisponível no navegador:', error);
      setMensagemStatus('Captura cancelada ou não suportada neste ambiente.');
    } finally {
      setCarregando(false);
    }
  };

  // Limpar a foto capturada
  const descartarFoto = () => {
    setFotoUri(null);
    setMensagemStatus('Foto descartada.');
  };

  return (
    <div className="max-w-md mx-auto my-8 p-6 bg-slate-50 border border-slate-200 rounded-2xl shadow-lg font-sans">
      <div className="text-center mb-6">
        <span className="text-xs font-bold uppercase tracking-wider text-red-600 bg-red-100 px-3 py-1 rounded-full">
          Capacitor Hardware API
        </span>
        <h2 className="text-2xl font-black text-slate-900 mt-2">Captura Nativa</h2>
        <p className="text-xs text-slate-500 mt-1">Integração de Câmera e Galeria com React</p>
      </div>

      {/* Área de Exibição da Imagem (Preview) */}
      <div className="relative aspect-square w-full bg-slate-200 border-2 border-dashed border-slate-300 rounded-xl overflow-hidden flex items-center justify-center mb-6">
        {fotoUri ? (
          <img 
            src={fotoUri} 
            alt="Captura do Usuário" 
            className="w-full h-full object-cover rounded-xl transition duration-300"
          />
        ) : (
          <div className="text-center p-6 text-slate-400">
            <svg className="w-16 h-16 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <p className="text-xs font-semibold">Nenhuma imagem capturada ainda</p>
          </div>
        )}
      </div>

      {/* Status feedback */}
      {mensagemStatus && (
        <p className="text-xs text-center font-medium text-slate-600 mb-4 bg-white p-2 rounded-lg border border-slate-200">
          {mensagemStatus}
        </p>
      )}

      {/* Botões de Ação */}
      <div className="space-y-3">
        <button
          onClick={capturarFotoOuGaleria}
          disabled={carregando}
          className="w-full py-3.5 px-4 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-bold text-sm rounded-xl shadow-md transition flex items-center justify-center space-x-2 disabled:opacity-50"
        >
          <span>{carregando ? 'Abrindo Câmera...' : '📷 Abrir Câmera / Galeria'}</span>
        </button>

        {fotoUri && (
          <button
            onClick={descartarFoto}
            className="w-full py-2.5 px-4 bg-slate-200 hover:bg-slate-300 text-slate-800 font-semibold text-xs rounded-xl transition"
          >
            Descartar Foto
          </button>
        )}
      </div>
    </div>
  );
}