import React, { useState, useEffect } from 'react';
import {
    Paper,
    Typography,
    Box,
    CircularProgress,
    Alert,
    Accordion,
    AccordionSummary,
    AccordionDetails,
    Chip,
    Divider,
} from '@mui/material';
import {
    ExpandMore,
    Description,
    CheckCircle,
    Schedule,
} from '@mui/icons-material';
import { focusGroupsService } from "@/api/focusGroups";
import { useTranslation } from "@/hooks/useTranslation";

const FocusGroupSummary = ({ focusGroupId }) => {
    const { t } = useTranslation();
    const [summary, setSummary] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');

    useEffect(() => {
        loadSummary();
    }, [focusGroupId]);

    const loadSummary = async () => {
        try {
            const response = await focusGroupsService.getFocusGroupSummryAI(focusGroupId);
            setSummary(response.data);
        } catch (err) {
            setError(err.response?.data?.message || t("focusGroups.summary.notAvailable"));
        } finally {
            setLoading(false);
        }
    };

    if (loading) {
        return (
            <Paper sx={{ p: 3, textAlign: 'center' }}>
                <CircularProgress />
                <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
                    {t("focusGroups.summary.loading")}
                </Typography>
            </Paper>
        );
    }

    if (error || !summary) {
        return (
            <Paper sx={{ p: 3 }}>
                <Alert severity="info">
                    {error || t("focusGroups.summary.notAvailable")}
                </Alert>
            </Paper>
        );
    }

    return (
        <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom fontWeight="600">
                {t("focusGroups.summary.title")}
            </Typography>
            <Typography variant="caption" color="text.secondary" paragraph>
                {t("focusGroups.summary.generatedOn", { date: new Date(summary.generatedAt).toLocaleString() })}
            </Typography>

            <Divider sx={{ my: 2 }} />

            <Accordion defaultExpanded>
                <AccordionSummary expandIcon={<ExpandMore />}>
                    <Box display="flex" alignItems="center">
                        <Description sx={{ mr: 1, color: 'primary.main' }} />
                        <Typography fontWeight="600">{t("focusGroups.summary.summaryLabel")}</Typography>
                    </Box>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                        {summary.summary || t("focusGroups.summary.noSummary")}
                    </Typography>
                </AccordionDetails>
            </Accordion>

            {summary.actionItems && (
                <Accordion>
                    <AccordionSummary expandIcon={<ExpandMore />}>
                        <Box display="flex" alignItems="center">
                            <CheckCircle sx={{ mr: 1, color: 'success.main' }} />
                            <Typography fontWeight="600">{t("focusGroups.summary.actionItemsLabel")}</Typography>
                        </Box>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                            {summary.actionItems}
                        </Typography>
                    </AccordionDetails>
                </Accordion>
            )}

            {summary.transcription && (
                <Accordion>
                    <AccordionSummary expandIcon={<ExpandMore />}>
                        <Box display="flex" alignItems="center">
                            <Schedule sx={{ mr: 1, color: 'info.main' }} />
                            <Typography fontWeight="600">{t("focusGroups.summary.transcriptionLabel")}</Typography>
                        </Box>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Box
                            sx={{
                                maxHeight: 400,
                                overflow: 'auto',
                                p: 2,
                                bgcolor: 'grey.50',
                                borderRadius: 1,
                            }}
                        >
                            <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                                {summary.transcription}
                            </Typography>
                        </Box>
                    </AccordionDetails>
                </Accordion>
            )}

            {summary.recordingUrl && (
                <Box sx={{ mt: 2 }}>
                    <Chip
                        label={t("focusGroups.summary.recordingAvailable")}
                        color="success"
                        clickable
                        onClick={() => window.open(summary.recordingUrl, '_blank')}
                    />
                </Box>
            )}
        </Paper>
    );
};

export default FocusGroupSummary;