import React, { useState } from 'react';
import { Container, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import FileUpload from './components/FileUpload';
import ChatInterface from './components/ChatInterface';
import Header from './components/Header';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
    background: {
      default: '#f5f5f5',
    },
  },
});

function App() {
  const [fileUploaded, setFileUploaded] = useState(false);
  const [fileName, setFileName] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);

  const handleFileUploadSuccess = (name) => {
    setFileUploaded(true);
    setFileName(name);
  };

  const handleProcessingStart = () => {
    setIsProcessing(true);
  };

  const handleProcessingEnd = () => {
    setIsProcessing(false);
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="md" sx={{ py: 4 }}>
        <Header />
        <FileUpload 
          onUploadSuccess={handleFileUploadSuccess} 
          onProcessingStart={handleProcessingStart}
          onProcessingEnd={handleProcessingEnd}
        />
        {fileUploaded && (
          <ChatInterface 
            fileName={fileName} 
            isProcessing={isProcessing} 
          />
        )}
      </Container>
    </ThemeProvider>
  );
}

export default App;