source: components/BuildDetailsDialog.tsx@ 5750945

import React, { useEffect, useState } from 'react';
import {
    Dialog, DialogTitle, DialogContent, Button, Grid, Box, Typography,
    IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Divider, Chip, CardMedia
} 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 { onGetBuildDetails, onSetReview, onToggleFavorite } from '../pages/+Layout.telefunc';
import PersonIcon from "@mui/icons-material/Person";

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

export default function BuildDetailsDialog({ open, buildId, onClose, onClone, currentUser }: any) {
    const [details, setDetails] = useState<any>(null);
    const [loading, setLoading] = useState(false);
    const [tabIndex, setTabIndex] = useState(0);

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

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

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

    const handleSubmitReview = async () => {
        if (!currentUser) return alert("Please login to review.");
        await onSetReview({ buildId, content: reviewText });

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

    if (!open) return null;

    // @ts-ignore
    return (
        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="paper">
            {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 && (
                                <Grid container spacing={4}>
                                    <Grid item xs={12} md={8}>
                                        <Table size="small">
                                            <TableBody>
                                                {details.components.map((comp: any) => (
                                                    <TableRow key={comp.id}>
                                                        <TableCell sx={{ width: 50 }}>
                                                            {/*<Avatar*/}
                                                            {/*    src={comp.img_url || undefined}*/}
                                                            {/*    variant="rounded"*/}
                                                            {/*    sx={{ width: 40, height: 40, bgcolor: '#ff8201' }}*/}
                                                            {/*>*/}
                                                            {/*    {comp.type?.[0]?.toUpperCase()}*/}
                                                            {/*</Avatar>*/}
                                                            {/*<PersonIcon sx={{ fontSize: 16 }} />*/}
                                                            <CardMedia
                                                                component="img"
                                                                height="50"
                                                                width="50"
                                                                image={"https://placehold.co/400x400?text=CPU"}

                                                            />
                                                        </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>
                                    </Grid>

                                    <Grid item xs={12} md={4}>
                                        <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 }}>
                                            <Button
                                                variant="contained"
                                                color="primary"
                                                size="large"
                                                startIcon={<AutoFixHighIcon />}
                                                onClick={() => onClone({ buildId: details.id })}
                                            >
                                                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>
                                    </Grid>
                                </Grid>
                            )}

                            {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 && (
                                        <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>
                                    )}

                                    <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>
    );
}