import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import LaunchIcon from "@mui/icons-material/Launch";
import { ReactComponent as PartyPopperIcon } from "../../assets/party-popper-svgrepo-com.svg";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import FacebookIcon from "@mui/icons-material/Facebook";
import YouTubeIcon from "@mui/icons-material/YouTube"; 

class CongratulationsWizard extends Component {
    copyToClipboard = async (text) => {
        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
            } else {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                document.execCommand("copy");
                textArea.remove();
            }
        } catch (err) {
            console.error("Failed to copy text: ", err);
        }
    };

    render() {
        const { createdPages } = this.props;

        return (
            <>
                <Box
                    sx={{
                        textAlign: "center",
                        py: 6,
                        borderRadius: "4px",
                        color: "white",
                        position: "relative",
                        overflow: "hidden",
                        background: "linear-gradient(180deg, #036666 0%, #042626 100%)"
                    }}
                >
                    <Box sx={{ width: 60, height: 60, mb: 3 }}>
                        <PartyPopperIcon style={{ height: "100%" }} />
                    </Box>

                    <Typography
                        variant="h4"
                        sx={{ fontWeight: 700, mb: 2, fontSize: "2.25rem", fontFamily:"Figtree, sans-serif" }}
                    >
                        {__("Congratulations!", "bookify")}
                    </Typography>

                    <Typography
                        sx={{
                            fontSize: "1.125rem",
                            mb: 4,
                            opacity: 0.9,
                            maxWidth: 500,
                            mx: "auto",
                            fontFamily:"Figtree, sans-serif"
                        }}
                    >
                        {__(
                            "Your appointment form has been successfully created. You can now easily manage your appointments with just a few clicks. If you need any help, feel free to reach out!",
                            "bookify"
                        )}
                    </Typography>

                    {createdPages && (
                        <Box sx={{ mb: 4 }}>
                            <Box sx={{ maxWidth: 500, mx: "auto" }}>
                                <Box
                                    sx={{
                                        backgroundColor: "rgba(255,255,255,0.05)",
                                        borderRadius: 2,
                                        overflow: "hidden",
                                        border: "1px solid rgba(255,255,255,0.15)",
                                        backdropFilter: "blur(10px)",
                                        mb: 3
                                    }}
                                >
                                    <Typography
                                        sx={{
                                            color: "#042626",
                                            fontSize: "16px",
                                            textAlign: "left",
                                            borderRadius: "4px 4px 0 0",
                                            borderBottom: "1px solid #BFD4D4",
                                            background: "#F8FCFC",
                                            display: "flex",
                                            height: "40px",
                                            padding: "9px 14px",
                                            alignItems: "center",
                                            fontWeight: "500",
                                            lineHeight: "21px",
                                            mb: 0,
                                            fontFamily:"Figtree, sans-serif"
                                        }}
                                    >
                                        {__("Page Link", "bookify")}
                                    </Typography>

                                    <Box
                                        sx={{
                                            background: "#EBF8F8",
                                            padding: "21px 20px",
                                            display: "flex",
                                            alignItems: "center",
                                            borderBottom: "1px solid #BFD4D4"
                                        }}
                                    >
                                        <TextField
                                            fullWidth
                                            size="small"
                                            value={createdPages.form.url}
                                            InputProps={{
                                                readOnly: true,
                                                sx: {
                                                    color: "#036666",
                                                    fontSize: "16px",
                                                    fontWeight: "500",
                                                    lineHeight: "21px",
                                                    backgroundColor: "transparent",
                                                    "& .MuiOutlinedInput-root": {
                                                        borderRadius: "4px",
                                                        backgroundColor: "transparent"
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        backgroundColor: "transparent !important"
                                                    },
                                                    "& .MuiOutlinedInput-notchedOutline": {
                                                        borderColor: "transparent"
                                                    }
                                                }
                                            }}
                                        />
                                        <IconButton
                                            href={createdPages.form.url}
                                            target="_blank"
                                            sx={{ color: "#036666", ml: 1 }}
                                        >
                                            <LaunchIcon fontSize="small" />
                                        </IconButton>
                                    </Box>

                                    <Typography
                                        sx={{
                                            color: "#042626",
                                            fontSize: "16px",
                                            textAlign: "left",
                                            fontWeight: "500",
                                            lineHeight: "21px",
                                            borderBottom: "1px solid #BFD4D4",
                                            background: "#F8FCFC",
                                            display: "flex",
                                            height: "40px",
                                            padding: "9px 14px",
                                            alignItems: "center",
                                            mb: 0,
                                            fontFamily:"Figtree, sans-serif"
                                        }}
                                    >
                                        {__("Shortcode", "bookify")}
                                    </Typography>

                                    <Box
                                        sx={{
                                            background: "#EBF8F8",
                                            padding: "21px 20px",
                                            display: "flex",
                                            alignItems: "center"
                                        }}
                                    >
                                        <TextField
                                            fullWidth
                                            size="small"
                                            value={createdPages.form.shortcode}
                                            InputProps={{
                                                readOnly: true,
                                                sx: {
                                                    color: "#036666",
                                                    fontFamily: "monospace",
                                                    fontSize: "16px",
                                                    fontWeight: "500",
                                                    lineHeight: "21px",
                                                    backgroundColor: "transparent",
                                                    "& .MuiOutlinedInput-notchedOutline": {
                                                        borderColor: "transparent"
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        backgroundColor: "transparent !important"
                                                    },
                                                    "& .MuiOutlinedInput-root": {
                                                        borderRadius: "4px",
                                                        backgroundColor: "transparent"
                                                    }
                                                }
                                            }}
                                        />
                                        <IconButton
                                            onClick={() =>
                                                this.copyToClipboard(createdPages.form.shortcode)
                                            }
                                            sx={{ color: "#036666", ml: 1 }}
                                        >
                                            <ContentCopyIcon fontSize="small" />
                                        </IconButton>
                                    </Box>
                                </Box>

                                <Box
                                    sx={{
                                        backgroundColor: "rgba(255,255,255,0.05)",
                                        borderRadius: 2,
                                        overflow: "hidden",
                                        border: "1px solid rgba(255,255,255,0.15)",
                                        backdropFilter: "blur(10px)"
                                    }}
                                >
                                    <Typography
                                        sx={{
                                            color: "#042626",
                                            fontSize: "16px",
                                            textAlign: "left",
                                            borderRadius: "4px 4px 0 0",
                                            borderBottom: "1px solid #BFD4D4",
                                            background: "#F8FCFC",
                                            display: "flex",
                                            height: "40px",
                                            padding: "9px 14px",
                                            alignItems: "center",
                                            fontWeight: "500",
                                            lineHeight: "21px",
                                            mb: 0,
                                            fontFamily:"Figtree, sans-serif"
                                        }}
                                    >
                                        {__("Page Link", "bookify")}
                                    </Typography>

                                    <Box
                                        sx={{
                                            background: "#EBF8F8",
                                            padding: "21px 20px",
                                            display: "flex",
                                            alignItems: "center",
                                            borderBottom: "1px solid #BFD4D4"
                                        }}
                                    >
                                        <TextField
                                            fullWidth
                                            size="small"
                                            value={createdPages.appointments.url}
                                            InputProps={{
                                                readOnly: true,
                                                sx: {
                                                    color: "#036666",
                                                    fontSize: "16px",
                                                    fontWeight: "500",
                                                    lineHeight: "21px",
                                                    backgroundColor: "transparent",
                                                    "& .MuiOutlinedInput-notchedOutline": {
                                                        borderColor: "transparent"
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        backgroundColor: "transparent !important"
                                                    },
                                                    "& .MuiOutlinedInput-root": {
                                                        borderRadius: "4px",
                                                        backgroundColor: "transparent"
                                                    }
                                                }
                                            }}
                                        />
                                        <IconButton
                                            href={createdPages.appointments.url}
                                            target="_blank"
                                            sx={{ color: "#036666", ml: 1 }}
                                        >
                                            <LaunchIcon fontSize="small" />
                                        </IconButton>
                                    </Box>

                                    <Typography
                                        sx={{
                                            color: "#042626",
                                            fontSize: "16px",
                                            textAlign: "left",
                                            fontWeight: "500",
                                            lineHeight: "21px",
                                            borderBottom: "1px solid #BFD4D4",
                                            background: "#F8FCFC",
                                            display: "flex",
                                            height: "40px",
                                            padding: "9px 14px",
                                            alignItems: "center",
                                            mb: 0,
                                            fontFamily:"Figtree, sans-serif"
                                        }}
                                    >
                                        {__("Shortcode", "bookify")}
                                    </Typography>

                                    <Box
                                        sx={{
                                            background: "#EBF8F8",
                                            padding: "21px 20px",
                                            display: "flex",
                                            alignItems: "center"
                                        }}
                                    >
                                        <TextField
                                            fullWidth
                                            size="small"
                                            value="[bookify_appointments]"
                                            InputProps={{
                                                readOnly: true,
                                                sx: {
                                                    color: "#036666",
                                                    fontFamily: "monospace",
                                                    fontSize: "16px",
                                                    fontWeight: "500",
                                                    lineHeight: "21px",
                                                    backgroundColor: "transparent",
                                                    "& .MuiOutlinedInput-notchedOutline": {
                                                        borderColor: "transparent",
                                                        backgroundColor: "transparent"
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        backgroundColor: "transparent !important"
                                                    },
                                                    "& .MuiOutlinedInput-root": {
                                                        borderRadius: "4px",
                                                        backgroundColor: "transparent"
                                                    }
                                                }
                                            }}
                                        />
                                        <IconButton
                                            onClick={() =>
                                                this.copyToClipboard("[bookify_appointments]")
                                            }
                                            sx={{ color: "#036666", ml: 1 }}
                                        >
                                            <ContentCopyIcon fontSize="small" />
                                        </IconButton>
                                    </Box>
                                </Box>
                            </Box>
                        </Box>
                    )}

                    <Box
                        sx={{
                            mt: 6,
                            width: "600px",
                            margin: "60px auto 0",
                            border: "1px solid #2B6060",
                            borderRadius: "10px",
                            paddingBottom: "32px",
                            position: "relative",
                            backgroundColor: "rgba(7, 51, 51, 0.3)",
                            backdropFilter: "blur(10px)"
                        }}
                    >
                        <Typography
                            sx={{
                                backgroundColor: "#073333",
                                color: "#93AEAE",
                                fontSize: "16px",
                                fontWeight: 400,
                                lineHeight: "21px",
                                padding: "10px 24px",
                                position: "absolute",
                                top: "-19px",
                                left: "50%",
                                transform: "translateX(-50%)",
                                borderRadius: "20px",
                                whiteSpace: "nowrap",
                                fontFamily:"Figtree, sans-serif"
                            }}
                        >
                            {__("Useful Links", "bookify")}
                        </Typography>

                        <Box sx={{display: "flex", justifyContent: "center", gap: 2, mt: 4, mb: 3, px: 3}} >
                            <Button
                                component="a"
                                href="https://wpbookify.com/documentation"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    color: "#93AEAE",
                                    borderColor: "rgba(147, 174, 174, 0.3)",
                                    backgroundColor: "rgba(147, 174, 174, 0.05)",
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    fontFamily:"Figtree, sans-serif",
                                    "&:hover": {
                                        color: "white",
                                        borderColor: "rgba(255, 255, 255, 0.5)",
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": { color: "white" }
                                }}
                            >
                                {__("Documentation", "bookify")}
                            </Button>

                            <Button
                                component="a"
                                href="https://objectsws.atlassian.net/servicedesk/customer/portal/38"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    color: "#93AEAE",
                                    borderColor: "rgba(147, 174, 174, 0.3)",
                                    backgroundColor: "rgba(147, 174, 174, 0.05)",
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    fontFamily:"Figtree, sans-serif",
                                    "&:hover": {
                                        color: "white",
                                        borderColor: "rgba(255, 255, 255, 0.5)",
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": { color: "white" }
                                }}
                            >
                                {__("Get 24x7 Support", "bookify")}
                            </Button>

                            <Button
                                component="a"
                                href="https://wpbookify.com/feature/"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    color: "#93AEAE",
                                    borderColor: "rgba(147, 174, 174, 0.3)",
                                    backgroundColor: "rgba(147, 174, 174, 0.05)",
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    fontFamily:"Figtree, sans-serif",
                                    "&:hover": {
                                        color: "white",
                                        borderColor: "rgba(255, 255, 255, 0.5)",
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": { color: "white" }
                                }}
                            >
                                {__("Explore Features", "bookify")}
                            </Button>
                        </Box>
                        <Box sx={{display: "flex", justifyContent: "center", gap: 2}}>
                            <IconButton 
                                component="a"
                                href="https://www.facebook.com/WPBookify/"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    color: "rgba(255,255,255,0.8)",
                                    borderRadius: "5px",
                                    background: "rgba(147, 174, 174, 0.10)",
                                    padding: "12px",
                                    "&:hover": {
                                        color: "white",
                                        backgroundColor: "rgba(147, 174, 174, 0.2)",
                                    },
                                    "&:focus": {
                                        color: "rgb(209 216 216)",
                                    }
                                }}
                            >
                                <FacebookIcon fontSize="small" />
                            </IconButton>
                            <IconButton
                                component="a"
                                href="https://www.linkedin.com/company/wpbookify/"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    color: "rgba(255,255,255,0.8)",
                                    borderRadius: "5px",
                                    background: "rgba(147, 174, 174, 0.10)",
                                    padding: "12px",
                                    "&:hover": {
                                        color: "white",
                                        backgroundColor: "rgba(147, 174, 174, 0.2)",
                                    },
                                    "&:focus": {
                                        color: "rgb(209 216 216)",
                                    }
                                }}
                            >
                                <LinkedInIcon fontSize="small" />
                            </IconButton>
                            <IconButton
                                component="a"
                                href="https://www.youtube.com/@WPBookify"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    color: "rgba(255,255,255,0.8)",
                                    borderRadius: "5px",
                                    background: "rgba(147, 174, 174, 0.10)",
                                    padding: "12px",
                                    "&:hover": {
                                        color: "white",
                                        backgroundColor: "rgba(147, 174, 174, 0.2)",
                                    },
                                    "&:focus": {
                                        color: "rgb(209 216 216)",
                                    }
                                }}
                            >
                                <YouTubeIcon fontSize="small" />
                            </IconButton>
                        </Box>
                    </Box>
                </Box>
            </>
        );
    }
}

export default CongratulationsWizard;