App.tsx

import React, { useState, useCallback } from 'react';
import { reviewDjangoCode } from './services/geminiService';
import CodeInput from './components/CodeInput';
import ReviewOutput from './components/ReviewOutput';
import DjangoIcon from './components/icons/DjangoIcon';

const App: React.FC = () => {
  const [filesContent, setFilesContent] = useState<{ [key: string]: string }>({});
  const [review, setReview] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const handleFilesSelected = async (fileList: FileList | null) => {
    if (!fileList) return;

    // Set a temporary loading state for file reading
    setIsLoading(true);
    setError(null);
    setReview(null);
    setFilesContent({});

    const pythonFiles = Array.from(fileList).filter(file => file.name.endsWith('.py'));

    if (pythonFiles.length === 0) {
        setError("No Python (.py) files found in the selected directory.");
        setIsLoading(false);
        return;
    }

    const fileContents: { [key: string]: string } = {};
    
    try {
        await Promise.all(
            pythonFiles.map(file => {
                return new Promise<void>((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const filePath = (file as any).webkitRelativePath || file.name;
                        fileContents[filePath] = e.target?.result as string;
                        resolve();
                    };
                    reader.onerror = () => {
                        reject(new Error(`Failed to read file: ${file.name}`));
                    };
                    reader.readAsText(file);
                });
            })
        );
        setFilesContent(fileContents);
    } catch (err) {
        setError(err instanceof Error ? err.message : 'An unknown error occurred while reading files.');
    } finally {
        // End the file-reading loading state
        setIsLoading(false);
    }
  };

  const handleReviewCode = useCallback(async () => {
    if (Object.keys(filesContent).length === 0) {
      setError('Please upload a project folder to review.');
      return;
    }
    setIsLoading(true);
    setError(null);
    setReview(null);
    try {
      const result = await reviewDjangoCode(filesContent);
      setReview(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An unknown error occurred.');
    } finally {
      setIsLoading(false);
    }
  }, [filesContent]);

  const handleClear = useCallback(() => {
    setFilesContent({});
    setReview(null);
    setError(null);
    setIsLoading(false);
  }, []);

  return (
    <div className="min-h-screen bg-slate-900 text-slate-200 font-sans">
      <header className="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700 p-4 sticky top-0 z-10">
        <div className="container mx-auto flex items-center gap-4">
          <DjangoIcon className="h-10 w-10 text-green-400" />
          <div>
            <h1 className="text-2xl font-bold text-white">Django Code Reviewer AI</h1>
            <p className="text-sm text-slate-400">Powered by Google Gemini</p>
          </div>
        </div>
      </header>
      <main className="container mx-auto p-4 md:p-6 lg:p-8">
        <div className="flex flex-col lg:flex-row gap-6 h-full">
          <div className="lg:w-1/2 flex flex-col">
            <CodeInput 
              onFilesSelected={handleFilesSelected}
              fileCount={Object.keys(filesContent).length}
              onReview={handleReviewCode} 
              onClear={handleClear}
              isLoading={isLoading} 
            />
          </div>
          <div className="lg:w-1/2 flex flex-col">
            <ReviewOutput 
              review={review} 
              isLoading={isLoading} 
              error={error} 
            />
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;