import React, {useEffect, useState} from 'react';
import {
    Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography,
    IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert, Snackbar
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import PersonIcon from "@mui/icons-material/Person";
import {onGetBuildDetails, onSetReview, onToggleFavorite, onCloneBuild, onSetRating} from '../pages/+Layout.telefunc';
import {onGetBuildState} from '../pages/forge/forge.telefunc';

const formatPrice = (price: any) => new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
}).format(Number(price) || 0);

export default function BuildDetailsDialog({open, buildId, onClose, currentUser, isDashboardView = false}: {
    open: boolean;
    buildId: number | null;
    onClose: () => void;
    currentUser: any;
    isDashboardView?: boolean;
}) {
    const [details, setDetails] = useState<any>(null);
    const [loading, setLoading] = useState(false);
    const [tabIndex, setTabIndex] = useState(0);
    const [cloneDialogOpen, setCloneDialogOpen] = useState(false);
    const [cloningBuildId, setCloningBuildId] = useState<number | null>(null);
    const [isOwner, setIsOwner] = useState(false);

    const [reviewText, setReviewText] = useState("");
    const [ratingVal, setRatingVal] = useState(5);

    const [snackbar, setSnackbar] = useState<{
        open: boolean;
        message: string;
        severity: 'error' | 'warning' | 'info' | 'success';
    }>({
        open: false,
        message: '',
        severity: 'warning'
    });

    useEffect(() => {
        if (open && buildId !== null) {
            setLoading(true);
            setReviewText("");
            setRatingVal(5);

            onGetBuildDetails({buildId})
                .then(data => {
                    setDetails(data);
                    if (data.userRating) setRatingVal(data.userRating);
                    if (data.userReview) setReviewText(data.userReview);
                })
                .finally(() => setLoading(false));
        }
    }, [open, buildId]);

    useEffect(() => {
        if (open && buildId !== null) {
            onGetBuildState({buildId})
                .then(state => {
                    setIsOwner(!!state);
                })
                .catch(() => setIsOwner(false));
        } else {
            setIsOwner(false);
        }
    }, [open, buildId]);

    useEffect(() => {
        if (open) {
            setTabIndex(0);
        }
    }, [open, buildId]);


    const handleFavorite = async () => {
        if (!currentUser || buildId === null) return alert("Please login to favorite builds.");
        const res = await onToggleFavorite({buildId});
        setDetails((prev: any) => ({...prev, isFavorite: res}));
    };

    const handleSubmitReview = async () => {
        if (!currentUser || buildId === null) return alert("Please login to review.");

        await onSetReview({
            buildId,
            content: reviewText,
        });

        await onSetRating({
            buildId,
            value: ratingVal
        });

        const refreshed = await onGetBuildDetails({buildId});
        setDetails(refreshed);
    };

    const handleCloneConfirm = async () => {
        if (!cloningBuildId) return;

        if(!currentUser){
            window.location.href="/auth/login";
            return;
        }

        try {
            const newBuildId = await onCloneBuild({buildId: cloningBuildId});
            window.location.href = `/forge?buildId=${newBuildId}`;
            setCloneDialogOpen(false);
            setCloningBuildId(null);
        } catch (e) {
            // alert("Failed to clone build. Please try again.");
            setCloneDialogOpen(false);
            setSnackbar({
                open: true,
                message: 'Failed to clone build. Please try again!',
                severity: 'error'
            })
        }
    };

    if (!open) return null;

    return (
        <>
            <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="body">
                {loading || !details ? (
                    <Box sx={{p: 5, textAlign: 'center'}}>Loading Forge Schematics...</Box>
                ) : (
                    <>
                        <DialogTitle sx={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            bgcolor: '#ff8201'
                        }}>
                            <Box>
                                <Typography variant="h5" fontWeight="bold">{details.name}</Typography>
                                <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
                                    <PersonIcon sx={{fontSize: 16}}/>
                                    <Typography variant="subtitle2" color="text.secondary" fontWeight="bold">
                                        by {details.creator}
                                    </Typography>
                                    <Chip label={formatPrice(details.totalPrice)} size="small" color="primary"
                                          variant="outlined"/>
                                </Box>
                            </Box>
                            <IconButton onClick={onClose}><CloseIcon/></IconButton>
                        </DialogTitle>

                        <DialogContent sx={{p: 0}}>
                            <Box sx={{
                                borderBottom: 1,
                                borderColor: 'divider',
                                px: 2,
                                bgcolor: 'primary',
                                position: 'sticky',
                                top: 0,
                                zIndex: 1
                            }}>
                                <Tabs value={tabIndex} onChange={(_, v) => setTabIndex(v)}>
                                    <Tab label="Specs"/>
                                    <Tab label={`Reviews (${details.ratingStatistics.ratingCount})`}/>
                                </Tabs>
                            </Box>

                            <Box sx={{p: 3}}>
                                {tabIndex === 0 && (
                                    <Box
                                        sx={{
                                            display: 'grid',
                                            gridTemplateColumns: {
                                                xs: '1fr',
                                                md: '2fr 1fr'
                                            },
                                            gap: 2,
                                            width: '100%'
                                        }}
                                    >
                                        <Box>
                                            <Table size="small">
                                                <TableBody>
                                                    {details.components.map((comp: any) => (
                                                        <TableRow key={comp.id}>
                                                            <TableCell sx={{width: 50}}>
                                                                <Avatar
                                                                    src={comp.imgUrl || undefined}
                                                                    variant="rounded"
                                                                    sx={{width: 50, height: 50, bgcolor: '#ff8201'}}
                                                                >
                                                                    {comp.type?.substring(0, 3)?.toUpperCase()}
                                                                </Avatar>
                                                            </TableCell>
                                                            <TableCell>
                                                                <Typography variant="body2" color="text.secondary" sx={{
                                                                    fontSize: '0.75rem',
                                                                    textTransform: 'uppercase'
                                                                }}>
                                                                    {comp.type}
                                                                </Typography>
                                                                <Typography variant="body1" fontWeight="500">
                                                                    {comp.brand} {comp.name}
                                                                </Typography>
                                                            </TableCell>
                                                            <TableCell align="right"
                                                                       sx={{fontWeight: 'bold', color: '#ff8201'}}>
                                                                {formatPrice(comp.price)}
                                                            </TableCell>
                                                        </TableRow>
                                                    ))}
                                                    <TableRow sx={{bgcolor: '#424343'}}>
                                                        <TableCell colSpan={2} sx={{
                                                            fontWeight: 'bold',
                                                            color: '#ff8201'
                                                        }}>TOTAL</TableCell>
                                                        <TableCell align="right" sx={{
                                                            fontWeight: 'bold',
                                                            fontSize: '1.1rem',
                                                            color: 'primary.main'
                                                        }}>
                                                            {formatPrice(details.totalPrice)}
                                                        </TableCell>
                                                    </TableRow>
                                                </TableBody>
                                            </Table>
                                        </Box>

                                        <Box>
                                            <Box sx={{bgcolor: '#424343', p: 2, borderRadius: 2, mb: 2}}>
                                                <Typography color="primary.main" gutterBottom fontWeight="bold">
                                                    Builder's Notes
                                                </Typography>
                                                <Typography color="primary.main" variant="body2"
                                                            sx={{fontStyle: 'italic'}}>
                                                    "{details.description || "No notes provided."}"
                                                </Typography>
                                            </Box>

                                            <Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
                                                {isDashboardView && isOwner ? (
                                                    <Button
                                                        variant="contained"
                                                        color="primary"
                                                        size="large"
                                                        startIcon={<AutoFixHighIcon/>}
                                                        onClick={() => {
                                                            window.location.href = `/forge?buildId=${details.id}`;
                                                            onClose();
                                                        }}
                                                    >
                                                        Edit Build
                                                    </Button>
                                                ) : (
                                                    <Button
                                                        variant="contained"
                                                        color="primary"
                                                        size="large"
                                                        startIcon={<AutoFixHighIcon/>}
                                                        onClick={() => {
                                                            setCloningBuildId(details.id);
                                                            setCloneDialogOpen(true);
                                                        }}                                                    >
                                                        Clone & Edit
                                                    </Button>
                                                )}
                                                <Button
                                                    variant={details.isFavorite ? "contained" : "outlined"}
                                                    color={details.isFavorite ? "error" : "primary"}
                                                    startIcon={details.isFavorite ? <FavoriteIcon/> :
                                                        <FavoriteBorderIcon/>}
                                                    onClick={handleFavorite}
                                                >
                                                    {details.isFavorite ? "Favorited" : "Add to Favorites"}
                                                </Button>
                                            </Box>
                                        </Box>
                                    </Box>
                                )}

                                {tabIndex === 1 && (
                                    <Box>
                                        <Box sx={{
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: 2,
                                            mb: 4,
                                            p: 2,
                                            bgcolor: '#5e5e5e',
                                            borderRadius: 2
                                        }}>
                                            <Typography variant="h3"
                                                        fontWeight="bold">{details.ratingStatistics.averageRating.toFixed(1)}</Typography>
                                            <Box>
                                                <Rating value={details.ratingStatistics.averageRating} readOnly
                                                        precision={0.5}/>
                                                <Typography variant="body2"
                                                            color="text.secondary">{details.ratingStatistics.ratingCount} ratings</Typography>
                                            </Box>
                                        </Box>

                                        {currentUser && details.userId !== currentUser.id && (
                                            <Box sx={{mb: 4, p: 2, border: '1px solid #ddd', borderRadius: 2}}>
                                                <Typography variant="subtitle2" gutterBottom>Your Review</Typography>
                                                <Box sx={{display: 'flex', alignItems: 'center', mb: 1}}>
                                                    <Rating value={ratingVal}
                                                            onChange={(_, v) => setRatingVal(v || 5)}/>
                                                </Box>
                                                <TextField
                                                    fullWidth
                                                    multiline
                                                    rows={2}
                                                    placeholder="Share your thoughts on this build..."
                                                    value={reviewText}
                                                    onChange={(e) => setReviewText(e.target.value)}
                                                    sx={{mb: 1}}
                                                />
                                                <Button size="small" variant="contained" onClick={handleSubmitReview}>
                                                    Submit Review
                                                </Button>
                                            </Box>
                                        )}

                                        {currentUser && details.userId === currentUser.id && (
                                            <Alert severity="info" sx={{mb: 4}}>
                                                You cannot rate your own builds.
                                            </Alert>
                                        )}

                                        <Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
                                            {details.reviews.map((rev: any, i: number) => (
                                                <Box key={i} sx={{pb: 2, borderBottom: '1px solid #eee'}}>
                                                    <Box sx={{
                                                        display: 'flex',
                                                        justifyContent: 'space-between',
                                                        mb: 0.5
                                                    }}>
                                                        <Typography fontWeight="bold"
                                                                    variant="body2">{rev.username}</Typography>
                                                        <Typography variant="caption"
                                                                    color="text.secondary">{rev.createdAt}</Typography>
                                                    </Box>
                                                    <Typography variant="body2">{rev.content}</Typography>
                                                </Box>
                                            ))}
                                            {details.reviews.length === 0 && (
                                                <Typography color="text.secondary" align="center">
                                                    No reviews yet. Be the first!
                                                </Typography>
                                            )}
                                        </Box>
                                    </Box>
                                )}
                            </Box>
                        </DialogContent>
                    </>
                )}
            </Dialog>

            <Dialog open={cloneDialogOpen} onClose={() => setCloneDialogOpen(false)}>
                <DialogTitle>Clone Build</DialogTitle>
                <DialogContent>
                    <Typography>
                        This will create a copy of "{details?.name}" in your Forge so you can edit it.
                        All components will be copied over.
                    </Typography>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setCloneDialogOpen(false)}>Cancel</Button>
                    <Button
                        variant="contained"
                        onClick={handleCloneConfirm}
                        disabled={!cloningBuildId}
                    >
                        Clone Build
                    </Button>
                </DialogActions>
            </Dialog>
            <Snackbar
                open={snackbar.open}
                autoHideDuration={5000}
                onClose={() => setSnackbar(prev => ({...prev, open: false}))}
                anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
            >
                <Alert
                    onClose={() => setSnackbar(prev => ({...prev, open: false}))}
                    severity={snackbar.severity}
                    variant="filled"
                    sx={{width: '100%'}}
                >
                    {snackbar.message}
                </Alert>
            </Snackbar>
        </>
    );
}