import { useEffect } from 'react'
import {
  Box,
  Typography,
  Paper,
  Card,
  CardContent,
  Chip,
  Alert,
  Button,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  CircularProgress,
} from '@mui/material'
import {
  ExpandMore,
  LocationOn,
  Warning,
  CheckCircle,
  Error,
  Public,
  Business,
  Home,
} from '@mui/icons-material'
import type { ChipProps } from '@mui/material'
import { useAppDispatch, useAppSelector } from '../store'
import { getContextData } from '../store/documentSlice'
import { Layout } from '../components/Layout'

export default function ContexteView() {
  const dispatch = useAppDispatch()
  const { currentDocument, contextResult, loading } = useAppSelector(
    (state) => state.document
  )

  useEffect(() => {
    if (currentDocument && !contextResult) {
      dispatch(getContextData(currentDocument.id))
    }
  }, [currentDocument, contextResult, dispatch])

  if (!currentDocument) {
    return (
      <Layout>
        <Alert severity="info">
          Veuillez d'abord téléverser et sélectionner un document.
        </Alert>
      </Layout>
    )
  }

  if (loading) {
    return (
      <Layout>
        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
          <CircularProgress />
          <Typography sx={{ ml: 2 }}>Recherche d'informations contextuelles...</Typography>
        </Box>
      </Layout>
    )
  }

  if (!contextResult) {
    return (
      <Layout>
        <Alert severity="warning">
          Aucune donnée contextuelle disponible.
        </Alert>
      </Layout>
    )
  }

  const getStatusIcon = (hasData: boolean) => {
    return hasData ? <CheckCircle color="success" /> : <Error color="error" />
  }

  const getStatusColor = (hasData: boolean): ChipProps['color'] => {
    return hasData ? 'success' : 'error'
  }

  return (
    <Layout>
      <Typography variant="h4" gutterBottom>
        Informations contextuelles
      </Typography>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
        {/* Résumé des sources */}
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" gutterBottom>
            Sources de données consultées
          </Typography>
          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
            <Chip
              icon={getStatusIcon(!!contextResult.cadastreData)}
              label="Cadastre"
              color={getStatusColor(!!contextResult.cadastreData)}
              variant="outlined"
            />
            <Chip
              icon={getStatusIcon(!!contextResult.georisquesData)}
              label="Géorisques"
              color={getStatusColor(!!contextResult.georisquesData)}
              variant="outlined"
            />
            <Chip
              icon={getStatusIcon(!!contextResult.geofoncierData)}
              label="Géofoncier"
              color={getStatusColor(!!contextResult.geofoncierData)}
              variant="outlined"
            />
            <Chip
              icon={getStatusIcon(!!contextResult.bodaccData)}
              label="BODACC"
              color={getStatusColor(!!contextResult.bodaccData)}
              variant="outlined"
            />
            <Chip
              icon={getStatusIcon(!!contextResult.infogreffeData)}
              label="Infogreffe"
              color={getStatusColor(!!contextResult.infogreffeData)}
              variant="outlined"
            />
          </Box>
          <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
            Dernière mise à jour: {new Date(contextResult.lastUpdated).toLocaleString()}
          </Typography>
        </Paper>

        {/* Données cadastrales */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Home sx={{ mr: 1 }} />
              <Typography variant="h6">Données cadastrales</Typography>
              <Chip
                label={contextResult.cadastreData ? 'Disponible' : 'Non disponible'}
                color={getStatusColor(!!contextResult.cadastreData)}
                size="small"
                sx={{ ml: 2 }}
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            {contextResult.cadastreData ? (
              <Box>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                  {JSON.stringify(contextResult.cadastreData, null, 2)}
                </Typography>
              </Box>
            ) : (
              <Alert severity="info">
                Aucune donnée cadastrale trouvée pour ce document.
              </Alert>
            )}
          </AccordionDetails>
        </Accordion>

        {/* Données Géorisques */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Warning sx={{ mr: 1 }} />
              <Typography variant="h6">Données Géorisques</Typography>
              <Chip
                label={contextResult.georisquesData ? 'Disponible' : 'Non disponible'}
                color={getStatusColor(!!contextResult.georisquesData)}
                size="small"
                sx={{ ml: 2 }}
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            {contextResult.georisquesData ? (
              <Box>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                  {JSON.stringify(contextResult.georisquesData, null, 2)}
                </Typography>
              </Box>
            ) : (
              <Alert severity="info">
                Aucune donnée Géorisques trouvée pour ce document.
              </Alert>
            )}
          </AccordionDetails>
        </Accordion>

        {/* Données Géofoncier */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <LocationOn sx={{ mr: 1 }} />
              <Typography variant="h6">Données Géofoncier</Typography>
              <Chip
                label={contextResult.geofoncierData ? 'Disponible' : 'Non disponible'}
                color={getStatusColor(!!contextResult.geofoncierData)}
                size="small"
                sx={{ ml: 2 }}
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            {contextResult.geofoncierData ? (
              <Box>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                  {JSON.stringify(contextResult.geofoncierData, null, 2)}
                </Typography>
              </Box>
            ) : (
              <Alert severity="info">
                Aucune donnée Géofoncier trouvée pour ce document.
              </Alert>
            )}
          </AccordionDetails>
        </Accordion>

        {/* Données BODACC */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Public sx={{ mr: 1 }} />
              <Typography variant="h6">Données BODACC</Typography>
              <Chip
                label={contextResult.bodaccData ? 'Disponible' : 'Non disponible'}
                color={getStatusColor(!!contextResult.bodaccData)}
                size="small"
                sx={{ ml: 2 }}
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            {contextResult.bodaccData ? (
              <Box>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                  {JSON.stringify(contextResult.bodaccData, null, 2)}
                </Typography>
              </Box>
            ) : (
              <Alert severity="info">
                Aucune donnée BODACC trouvée pour ce document.
              </Alert>
            )}
          </AccordionDetails>
        </Accordion>

        {/* Données Infogreffe */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Business sx={{ mr: 1 }} />
              <Typography variant="h6">Données Infogreffe</Typography>
              <Chip
                label={contextResult.infogreffeData ? 'Disponible' : 'Non disponible'}
                color={getStatusColor(!!contextResult.infogreffeData)}
                size="small"
                sx={{ ml: 2 }}
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            {contextResult.infogreffeData ? (
              <Box>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                  {JSON.stringify(contextResult.infogreffeData, null, 2)}
                </Typography>
              </Box>
            ) : (
              <Alert severity="info">
                Aucune donnée Infogreffe trouvée pour ce document.
              </Alert>
            )}
          </AccordionDetails>
        </Accordion>

        {/* Actions */}
        <Card>
          <CardContent>
            <Typography variant="h6" gutterBottom>
              Actions
            </Typography>
            <Box sx={{ display: 'flex', gap: 2 }}>
              <Button
                variant="contained"
                onClick={() => dispatch(getContextData(currentDocument.id))}
                disabled={loading}
              >
                Actualiser les données
              </Button>
              <Button variant="outlined">
                Exporter le rapport
              </Button>
            </Box>
          </CardContent>
        </Card>
      </Box>
    </Layout>
  )
}