SteelCheck/App.tsx

import React, { useState, useCallback, useEffect } from 'react';
import { analyzeCertificate } from './services/aiService';
import { exportAsPdf } from './services/pdfService';
import type { ReportData } from './types';
import type { AIProvider } from './types/providers';
import { Header } from './components/Header';
import { FileUpload } from './components/FileUpload';
import { Loader } from './components/Loader';
import { ReportDisplay } from './components/ReportDisplay';
import { PrintableReport } from './components/PrintableReport';
import { DownloadIcon, EyeIcon } from './components/Icons';
import { ApiKeySetup } from './components/ApiKeySetup';

const App: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [apiKey, setApiKey] = useState<string>('');
  const [endpoint, setEndpoint] = useState<string>('');
  const [provider, setProvider] = useState<AIProvider>('gemini');
  const [model, setModel] = useState<string>('gemini-2.5-flash');
  const [hasKey, setHasKey] = useState<boolean>(false);
  const [reportData, setReportData] = useState<ReportData | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const savedApiKey = localStorage.getItem('api-key');
    const savedProvider = localStorage.getItem('ai-provider') as AIProvider;
    const savedModel = localStorage.getItem('model-' + savedProvider);
    const savedEndpoint = localStorage.getItem('ollama-endpoint');
    
    if (savedApiKey || savedEndpoint) {
      setApiKey(savedApiKey || '');
      if (savedProvider) setProvider(savedProvider);
      if (savedModel) setModel(savedModel);
      if (savedEndpoint) setEndpoint(savedEndpoint);
      setHasKey(true);
    }
  }, []);

  const handleFileChange = useCallback((selectedFile: File | null) => {
    setFile(selectedFile);
    if (!selectedFile) {
      setReportData(null);
      setError(null);
    }
  }, []);

  const handleKeySave = useCallback((key: string, newProvider: AIProvider, newModel: string, newEndpoint?: string) => {
    setApiKey(key);
    setProvider(newProvider);
    setModel(newModel);
    if (newEndpoint) {
      setEndpoint(newEndpoint);
      localStorage.setItem('ollama-endpoint', newEndpoint);
    }
    if (key) {
      localStorage.setItem('api-key', key);
    }
    localStorage.setItem('ai-provider', newProvider);
    localStorage.setItem('model-' + newProvider, newModel);
    setHasKey(true);
  }, []);

  const handleAnalyzeClick = async () => {
    if (provider !== 'ollama' && !apiKey) {
      setError("A chave de API não foi encontrada. Por favor, configure-a novamente.");
      setHasKey(false);
      return;
    }
    if (provider === 'ollama' && !endpoint) {
      setError("O endereço do Ollama não foi configurado. Por favor, configure-o.");
      setHasKey(false);
      return;
    }
    if (!file) {
      setError("Por favor, selecione um arquivo primeiro.");
      return;
    }
    setIsLoading(true);
    setError(null);
    setReportData(null);
    try {
      const data = await analyzeCertificate({
        provider,
        apiKey,
        model,
        file,
        endpoint: provider === 'ollama' ? endpoint : undefined
      });
      setReportData(data);
    } catch (err) {
      if (err instanceof Error) {
        if (err.message.includes('API key') || err.message.includes('not valid') || err.message.includes('invalid')) {
          setError('Erro: A chave de API fornecida não é válida. Por favor, insira uma nova chave.');
          handleClearKey();
        } else {
          setError(`Erro na análise: ${err.message}`);
        }
      } else {
        setError("Ocorreu um erro desconhecido durante a análise.");
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleReset = useCallback(() => {
    setFile(null);
    setReportData(null);
    setIsLoading(false);
    setError(null);
  }, []);

  const handleClearKey = useCallback(() => {
    setApiKey('');
    localStorage.removeItem('api-key');
    setHasKey(false);
    handleReset();
  }, [handleReset]);

  const handleExport = (action: 'preview' | 'download') => {
    if (reportData) {
      const fileName = `Relatorio_SteelCheck_${reportData.identification.certificateNumber || 'analise'}`;
      exportAsPdf('printable-report-container', fileName, action);
    }
  };

  return (
    <div className="min-h-screen">
      {isLoading && <Loader />}
      <Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />

      <main className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
        {!hasKey ? (
          <ApiKeySetup onKeySave={handleKeySave} />
        ) : !reportData ? (
          <div className="max-w-2xl mx-auto pt-8">
            <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-10 rounded-2xl">
              <div className="text-center mb-10">
                <h2 className="text-3xl font-display font-bold text-slate-900 dark:text-white mb-2">
                  Análise Técnica Inteligente
                </h2>
                <p className="text-slate-500 dark:text-slate-400">
                  Carregue seu certificado de qualidade e deixe nossa IA verificar a conformidade.
                </p>
                <div className="mt-4 inline-flex items-center gap-2 px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-xs text-slate-600 dark:text-slate-300">
                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                  {provider.toUpperCase()} • {model}
                </div>
              </div>

              <FileUpload onFileChange={handleFileChange} />

              {file && (
                <button
                  onClick={handleAnalyzeClick}
                  disabled={isLoading || !file}
                  title={!file ? "Por favor, selecione um arquivo para analisar" : "Analisar Certificado"}
                  className="mt-8 w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-blue-500/20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.99]"
                >
                  Analisar Documento
                </button>
              )}

              {error && (
                <div className="mt-6 text-center text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-4 rounded-xl border border-red-100 dark:border-red-900/30 text-sm">
                  <p>{error}</p>
                </div>
              )}
            </div>
            <p className="text-center text-xs text-slate-400 dark:text-slate-600 mt-6 font-medium">
              IA Assistiva • Verificação profissional recomendada
            </p>
          </div>
        ) : (
          <div>
            <div className="flex flex-col sm:flex-row gap-3 justify-end mb-8">
              <button
                onClick={() => handleExport('preview')}
                className="flex items-center justify-center gap-2 w-full sm:w-auto bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium py-2.5 px-5 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all shadow-sm"
              >
                <EyeIcon className="w-5 h-5 text-slate-500" />
                Visualizar PDF
              </button>
              <button
                onClick={() => handleExport('download')}
                className="flex items-center justify-center gap-2 w-full sm:w-auto bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-semibold py-2.5 px-5 rounded-lg hover:opacity-90 transition-all shadow-lg shadow-slate-900/10"
              >
                <DownloadIcon className="w-5 h-5" />
                Baixar Relatório
              </button>
            </div>
            <ReportDisplay report={reportData} />
          </div>
        )}
      </main>

      {reportData && (
        <div className="absolute -left-[9999px] top-0 opacity-0" aria-hidden="true">
          <PrintableReport report={reportData} />
        </div>
      )}
    </div>
  );
};

export default App;