src/components/QASystem.tsx

"use client"

import { useState, ComponentType } from 'react'
import FileUpload from './FileUpload'
import { 
  Box, 
  Container, 
  Typography, 
  TextField, 
  Button, 
  CircularProgress, 
  Paper,
  Fade,
} from '@mui/material'
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer'
import { motion } from 'framer-motion'

interface Document {
  text: string
}

const MotionContainer = motion(Container as any)
const MotionPaper = motion(Paper as any)

export default function QASystem() {
  const [query, setQuery] = useState('')
  const [answer, setAnswer] = useState('')
  const [loading, setLoading] = useState(false)
  const [documents, setDocuments] = useState<Document[]>([])

  const handleDocumentsLoaded = (newDocuments: Document[]) => {
    setDocuments(newDocuments)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (documents.length === 0) {
      alert('Please upload some documents first')
      return
    }
    
    setLoading(true)

    try {
      const response = await fetch('/api/qa', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query, documents }),
      })

      const data = await response.json()
      setAnswer(data.answer)
    } catch (error) {
      console.error('Error:', error)
      setAnswer('Failed to get answer. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Box 
      sx={{ 
        minHeight: '100vh',
        background: 'linear-gradient(135deg, #f6f8fc 0%, #f0f4f8 100%)',
        py: 8
      }}
    >
      <MotionContainer 
        maxWidth="lg"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <Box sx={{ textAlign: 'center', mb: 8 }}>
          <Typography
            variant="h1"
            component="h1"
            sx={{
              mb: 3,
              fontSize: { xs: '2rem', md: '3rem' },
              fontWeight: 800,
              background: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              color: 'transparent',
              textShadow: '0 2px 10px rgba(37, 99, 235, 0.1)',
            }}
          >
            AI Document Assistant
          </Typography>
          <Typography 
            variant="h6" 
            sx={{ 
              color: 'text.secondary',
              maxWidth: '600px',
              mx: 'auto',
              lineHeight: 1.6
            }}
          >
            Upload your documents and get instant, AI-powered answers to your questions
          </Typography>
        </Box>

        <MotionPaper
          elevation={0}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          sx={{
            p: { xs: 3, md: 5 },
            mb: 4,
            border: '1px solid',
            borderColor: 'grey.100',
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            backdropFilter: 'blur(10px)',
            borderRadius: 3,
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
          }}
        >
          <FileUpload onDocumentsLoaded={handleDocumentsLoaded} />

          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 4 }}>
            <TextField
              fullWidth
              multiline
              rows={3}
              label="What would you like to know?"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              sx={{
                mb: 3,
                '& .MuiOutlinedInput-root': {
                  backgroundColor: 'white',
                  borderRadius: 2,
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                }
              }}
              variant="outlined"
            />

            <Button
              fullWidth
              type="submit"
              disabled={loading || documents.length === 0}
              variant="contained"
              size="large"
              sx={{
                py: 2,
                background: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
                borderRadius: 2,
                transition: 'all 0.3s ease',
                '&:hover': {
                  transform: 'translateY(-2px)',
                  boxShadow: '0 6px 20px rgba(37, 99, 235, 0.2)',
                  background: 'linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%)',
                },
                '&:disabled': {
                  background: '#e2e8f0',
                  color: '#94a3b8',
                }
              }}
              startIcon={loading ? <CircularProgress size={20} color="inherit" /> : <QuestionAnswerIcon />}
            >
              {loading ? 'Processing...' : 'Ask Question'}
            </Button>
          </Box>
        </MotionPaper>

        <Fade in={!!answer}>
          <MotionPaper
            elevation={0}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            sx={{
              p: { xs: 3, md: 5 },
              border: '1px solid',
              borderColor: 'grey.100',
              backgroundColor: 'rgba(255, 255, 255, 0.9)',
              backdropFilter: 'blur(10px)',
              borderRadius: 3,
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
            }}
          >
            <Typography
              variant="h6"
              sx={{
                mb: 3,
                fontWeight: 700,
                color: 'text.primary',
                fontSize: '1.25rem',
              }}
            >
              Answer
            </Typography>
            <Box
              sx={{
                p: 4,
                backgroundColor: '#f8fafc',
                borderRadius: 2,
                border: '1px solid',
                borderColor: 'grey.100',
              }}
            >
              <Typography sx={{ 
                color: 'text.secondary', 
                lineHeight: 1.8,
                fontSize: '1.1rem'
              }}>
                {answer}
              </Typography>
            </Box>
          </MotionPaper>
        </Fade>
      </MotionContainer>
    </Box>
  )
}