import React, { useEffect, useState, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import { Container, Typography, Box, CircularProgress, Alert, TextField, Button } from '@mui/material';
import { useSession, Session, Participant, DesireSet, Decision, SessionState } from '../hooks/useSession';
import { webSocketService } from '../services/websocket';
import DesireForm from '../components/DesireForm';
import ResultsDisplay from '../components/ResultsDisplay';

const SessionPage = () => {
    const { sessionId } = useParams<{ sessionId: string }>();
    const [session, setSession, sendMessage, clientId] = useSession(sessionId || '');
    const [error, setError] = useState<string | null>(null);
    const [expectedResponses, setExpectedResponses] = useState(2);
    const [topic, setTopic] = useState('');

    const handleSetupSession = () => {
        sendMessage({ type: 'SETUP_SESSION', payload: { expectedResponses, topic } });
    };

    const handleSubmitDesires = (desires: { wants: string[], accepts: string[], noGoes: string[] }) => {
        if (!session || !clientId) return;

        const desireSet: DesireSet = {
            participantId: clientId, // Use the clientId from the hook
            wants: desires.wants,
            accepts: desires.accepts,
            noGoes: desires.noGoes,
        };

        sendMessage({
            type: 'SUBMIT_RESPONSE',
            payload: { response: desireSet },
        });
    };

    if (!session) {
        return <Typography>Loading session...</Typography>;
    }

    const remainingResponses = session.expectedResponses - session.submittedCount;
    const hasSubmittedCurrentParticipant = session.responses && session.responses[clientId];

    return (
        <Container maxWidth="md">
            <Box sx={{ mt: 4 }}>
                {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}

                <Typography variant="h4" component="h1" gutterBottom>
                    Session: {session.topic || session.sessionId}
                </Typography>

                {session.state === SessionState.SETUP && (
                    <Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
                        <Typography variant="h6" component="p" gutterBottom>
                            Set Up the Session
                        </Typography>
                        <TextField
                            margin="normal"
                            fullWidth
                            id="topic"
                            label="Session Topic"
                            name="topic"
                            autoFocus
                            value={topic}
                            onChange={(e) => setTopic(e.target.value)}
                        />
                        <TextField
                            margin="normal"
                            required
                            fullWidth
                            name="expectedResponses"
                            label="Number of Expected Responses"
                            type="number"
                            id="expectedResponses"
                            value={expectedResponses}
                            onChange={(e) => setExpectedResponses(parseInt(e.target.value, 10))}
                            InputProps={{
                                inputProps: { min: 1 }
                            }}
                        />
                        <Button
                            type="button"
                            variant="contained"
                            sx={{ mt: 2 }}
                            onClick={handleSetupSession}
                        >
                            Start Session
                        </Button>
                    </Box>
                )}

                {session.state !== SessionState.SETUP && (
                    <>
                        <Typography variant="h6" gutterBottom>
                            Expected Responses: {session.expectedResponses}
                        </Typography>
                        <Typography variant="body1" gutterBottom>
                            Status: {session.state}
                        </Typography>
                    </>
                )}

                {session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (
                    <DesireForm onSubmit={handleSubmitDesires} />
                )}

                {session.state === SessionState.GATHERING && hasSubmittedCurrentParticipant && (
                    <Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
                        <Typography variant="h6" component="p">
                            Waiting for {remainingResponses} more responses...
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                            Your desires have been submitted. The results will be calculated once all participants have responded.
                        </Typography>
                    </Box>
                )}

                {session.state === SessionState.HARMONIZING && (
                    <Box sx={{ mt: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <CircularProgress />
                        <Typography variant="h6" sx={{ mt: 2 }}>Harmonizing Desires...</Typography>
                    </Box>
                )}
                {session.state === SessionState.FINAL && session.finalResult && (
                    <ResultsDisplay decision={session.finalResult} />
                )}
            </Box>
        </Container>
    );
};

export default SessionPage;