'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 contohGejala = [
  'Sakit Kepala',
  'Demam',
  'Batuk',
  'Kelelahan',
  'Mual',
  'Pilek',
  'Nyeri Otot'
]

const contohRiwayat = [
  'Hipertensi',
  'Diabetes',
  'Asma',
  'Alergi',
  'Jantung',
  'Maag'
]

export default function Home() {
  const [gejala, setGejala] = useState('')
  const [riwayatMedis, setRiwayatMedis] = useState('')
  const [rekomendasi, setRekomendasi] = 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: gejala, 
          medicalHistory: riwayatMedis 
        }),
      })

      const data = await response.json()
      setRekomendasi(data.recommendation)
    } catch (error) {
      console.error('Gagal mendapatkan rekomendasi:', error)
    } finally {
      setLoading(false)
    }
  }

  const tambahGejala = (gejala: string) => {
    setGejala(prev => prev ? `${prev}, ${gejala}` : gejala)
  }

  const tambahRiwayat = (riwayat: string) => {
    setRiwayatMedis(prev => prev ? `${prev}, ${riwayat}` : riwayat)
  }

  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">
            Sistem Rekomendasi Obat
          </Typography>
        </Box>

        <Alert severity="info" sx={{ mb: 4 }}>
          Ini adalah alat berbasis AI untuk membantu tenaga kesehatan. Semua rekomendasi harus ditinjau oleh praktisi medis yang berkualifikasi.
        </Alert>

        <form onSubmit={handleSubmit}>
          <Stack spacing={4}>
            <Box>
              <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                <MedicalInformationIcon />
                Gejala Pasien
              </Typography>
              <TextField
                fullWidth
                multiline
                rows={4}
                value={gejala}
                onChange={(e) => setGejala(e.target.value)}
                placeholder="Masukkan gejala pasien..."
                required
              />
              <Box mt={2}>
                <Typography variant="subtitle2" mb={1}>Contoh gejala:</Typography>
                <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                  {contohGejala.map((gejala) => (
                    <Chip
                      key={gejala}
                      label={gejala}
                      onClick={() => tambahGejala(gejala)}
                      clickable
                    />
                  ))}
                </Stack>
              </Box>
            </Box>

            <Box>
              <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                <HealthAndSafetyIcon />
                Riwayat Medis
              </Typography>
              <TextField
                fullWidth
                multiline
                rows={4}
                value={riwayatMedis}
                onChange={(e) => setRiwayatMedis(e.target.value)}
                placeholder="Masukkan riwayat medis pasien..."
                required
              />
              <Box mt={2}>
                <Typography variant="subtitle2" mb={1}>Contoh kondisi:</Typography>
                <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                  {contohRiwayat.map((riwayat) => (
                    <Chip
                      key={riwayat}
                      label={riwayat}
                      onClick={() => tambahRiwayat(riwayat)}
                      clickable
                    />
                  ))}
                </Stack>
              </Box>
            </Box>

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

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