import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
import type { CommentTypesText } from "../constants/comment-types-constants";
import { CommentIcon } from "./comment-types-icons";

type Props = {
    text: CommentTypesText;
    total: number;
    pending: number;
    reviewed: number;
    resolved: number;
    isDark: boolean;
};

export function CommentSummarySection({ text, total, pending, reviewed, resolved, isDark }: Props) {
    return (
        <Box
            sx={{
                display: "grid",
                gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", lg: "repeat(4, 1fr)" },
                gap: 2.5,
                mb: 3,
            }}
        >
            <SummaryCard title={text.totalComments} value={total} subtitle={text.allUserComments} color="#2563EB" bg={isDark ? "rgba(37,99,235,0.18)" : "#EAF2FF"} />
            <SummaryCard title={text.pending} value={pending} subtitle={text.needReview} color="#D97706" bg={isDark ? "rgba(245,158,11,0.18)" : "#FFF7E6"} />
            <SummaryCard title={text.reviewed} value={reviewed} subtitle={text.alreadyReviewed} color="#2563EB" bg={isDark ? "rgba(37,99,235,0.18)" : "#EAF2FF"} />
            <SummaryCard title={text.resolved} value={resolved} subtitle={text.issueResolved} color="#15803D" bg={isDark ? "rgba(34,197,94,0.18)" : "#EAFBF0"} />
        </Box>
    );
}

function SummaryCard({ title, value, subtitle, color, bg }: { title: string; value: number; subtitle: string; color: string; bg: string }) {
    const theme = useTheme();
    const isDark = theme.palette.mode === "dark";

    return (
        <Card elevation={0} sx={{ borderRadius: "18px", border: isDark ? "1px solid rgba(148,163,184,0.18)" : "1px solid #E5EAF2", bgcolor: isDark ? "#111827" : "#FFFFFF" }}>
            <CardContent>
                <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                    <Box sx={{ width: 64, height: 64, borderRadius: "18px", bgcolor: bg, color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                        <CommentIcon />
                    </Box>
                    <Box>
                        <Typography component="p" sx={{ color: "text.secondary", fontWeight: 800 }}>{title}</Typography>
                        <Typography component="p" variant="h4" sx={{ fontWeight: 900, lineHeight: 1.2 }}>{value}</Typography>
                        <Typography component="p" sx={{ color: "text.secondary", fontSize: 13 }}>{subtitle}</Typography>
                    </Box>
                </Box>
            </CardContent>
        </Card>
    );
}