src/app/page.tsx

'use client'

import { useState } from 'react'
import {
  Container,
  Paper,
  Typography,
  TextField,
  Button,
  Box,
  Alert,
  CircularProgress,
  Chip,
  Divider,
  Stack
} from '@mui/material'
import MedicalInformationIcon from '@mui/icons-material/MedicalInformation'
import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety'
import LocalHospitalIcon from '@mui/icons-material/LocalHospital'

const exampleSymptoms = [
  'Headache',
  'Fever',
  'Cough',
  'Fatigue',
  'Nausea'
]

const exampleHistory = [
  'Hypertension',
  'Diabetes',
  'Asthma',
  'Allergies'
]

export default function Home() {
  const [symptoms, setSymptoms] = useState('')
  const [medicalHistory, setMedicalHistory] = useState('')
  const [recommendation, setRecommendation] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

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

      const data = await response.json()
      setRecommendation(data.recommendation)
    } catch (error) {
      console.error('Failed to get recommendation:', error)
    } finally {
      setLoading(false)
    }
  }

  const addExampleSymptom = (symptom: string) => {
    setSymptoms(prev => prev ? `${prev}, ${symptom}` : symptom)
  }

  const addExampleHistory = (history: string) => {
    setMedicalHistory(prev => prev ? `${prev}, ${history}` : history)
  }

  return (
    <Container maxWidth="md" sx={{ py: 4 }}>
      <Paper elevation={3} sx={{ p: 4, borderRadius: 2 }}>
        <Box display="flex" alignItems="center" gap={2} mb={4}>
          <LocalHospitalIcon color="primary" sx={{ fontSize: 40 }} />
          <Typography variant="h4" component="h1" fontWeight="bold">
            AI Drug Recommendation System
          </Typography>
        </Box>

        <Alert severity="info" sx={{ mb: 4 }}>
          This is an AI-powered tool to assist healthcare professionals. All recommendations should be reviewed by a qualified medical practitioner.
        </Alert>

        <form onSubmit={handleSubmit}>
          <Stack spacing={4}>
            <Box>
              <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                <MedicalInformationIcon />
                Symptoms
              </Typography>
              <TextField
                fullWidth
                multiline
                rows={4}
                value={symptoms}
                onChange={(e) => setSymptoms(e.target.value)}
                placeholder="Enter patient symptoms..."
                required
              />
              <Box mt={2}>
                <Typography variant="subtitle2" mb={1}>Example symptoms:</Typography>
                <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                  {exampleSymptoms.map((symptom) => (
                    <Chip
                      key={symptom}
                      label={symptom}
                      onClick={() => addExampleSymptom(symptom)}
                      clickable
                    />
                  ))}
                </Stack>
              </Box>
            </Box>

            <Box>
              <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                <HealthAndSafetyIcon />
                Medical History
              </Typography>
              <TextField
                fullWidth
                multiline
                rows={4}
                value={medicalHistory}
                onChange={(e) => setMedicalHistory(e.target.value)}
                placeholder="Enter patient medical history..."
                required
              />
              <Box mt={2}>
                <Typography variant="subtitle2" mb={1}>Example conditions:</Typography>
                <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                  {exampleHistory.map((history) => (
                    <Chip
                      key={history}
                      label={history}
                      onClick={() => addExampleHistory(history)}
                      clickable
                    />
                  ))}
                </Stack>
              </Box>
            </Box>

            <Button
              type="submit"
              variant="contained"
              size="large"
              disabled={loading}
              startIcon={loading ? <CircularProgress size={20} /> : null}
            >
              {loading ? 'Generating Recommendation...' : 'Get Recommendation'}
            </Button>
          </Stack>
        </form>

        {recommendation && (
          <Box mt={4}>
            <Divider sx={{ my: 4 }} />
            <Typography variant="h6" gutterBottom>
              Recommendation
            </Typography>
            <Paper variant="outlined" sx={{ p: 3, bgcolor: 'background.default' }}>
              <Typography whiteSpace="pre-wrap">
                {recommendation}
              </Typography>
            </Paper>
          </Box>
        )}
      </Paper>
    </Container>
  )
}