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

class CongratulationsWizard extends Component {
    state = { showCopied: false };

    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();
            }
            this.setState({ showCopied: true });
        } catch (err) {
            console.error("Failed to copy text: ", err);
        }
    };

    render() {
        const { createdPages } = this.props;
        const { showCopied } = this.state;
        return (
            <>
                <Box
                    sx={{
                        textAlign: "center",
                        py: 6,
                        borderRadius: "4px",
                        color: "white",
                        position: "relative",
                        overflow: "hidden",
                        background: "linear-gradient(180deg, #57b0ee 0%, #d2f1ff 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", 
                            color: "#093a55", 
                            fontFamily: 'Poppins-Medium, Poppins, sans-serif', 
                        }}
                    >
                        {__("Congratulations!", "apbgf")}
                    </Typography>

                    <Typography
                        sx={{
                            fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                            fontSize: "1.125rem",
                            mb: 4,
                            opacity: 0.9,
                            maxWidth: 500,
                            mx: "auto",
                            color: "#093a55"
                        }}
                    >
                        {__(
                            "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!",
                            "apbgf"
                        )}
                    </Typography>

                    {createdPages && (
                        <Box sx={{ mb: 4 }}>
                            <Box sx={{ maxWidth: 600, mx: "auto" }}>
                                <Box
                                    sx={{
                                        fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                        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={{
                                            fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                            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,
                                        }}
                                    >
                                        {__("Page Link", "apbgf")}
                                    </Typography>

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

                                    <Typography
                                        sx={{
                                            fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                            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
                                        }}
                                    >
                                        {__("Shortcode", "apbgf")}
                                    </Typography>

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

                                {createdPages.appointments && (
                                    <Box
                                        sx={{
                                            fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                            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={{
                                                fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                                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
                                            }}
                                        >
                                            {__("Page Link", "apbgf")}
                                        </Typography>

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

                                        <Typography
                                            sx={{
                                                fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                                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
                                            }}
                                        >
                                            {__("Shortcode", "apbgf")}
                                        </Typography>

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

                    <Box
                        component="fieldset"
                        sx={{
                            fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                            mt: 6,
                            width: "600px",
                            margin: "60px auto 0",
                            border: "1px solid #57b0ee",
                            borderRadius: "10px",
                            paddingBottom: "32px",
                            position: "relative",
                            backdropFilter: "blur(10px)",
                        }}
                    >
                        <Box
                            component="legend"
                            sx={{
                                fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                color: "#247dd5",
                                fontSize: "16px",
                                fontWeight: 400,
                                lineHeight: "21px",
                                px: 3,
                                py: 1,
                                borderRadius: "20px",
                                whiteSpace: "nowrap",
                                display: "table",
                                margin: "0 auto",
                            }}
                        >
                            {__("Useful Links", "apbgf")}
                        </Box>

                        <Box sx={{ 
                                display: "flex", 
                                justifyContent: "center", 
                                gap: 2, 
                                mt: 4, 
                                mb: 3, 
                                px: 3 
                            }}
                        >
                            <Button
                                component="a"
                                href="https://gravitybooking.com/docs/gravity-forms-booking/"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    "&:hover": {
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": {
                                        color: "#247dd5"
                                    }
                                }}
                            >
                                {__("Documentation", "apbgf")}
                            </Button>

                            <Button
                                component="a"
                                href="https://objectsws.atlassian.net/servicedesk/customer/portal/20/group/37/create/173"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    "&:hover": {
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": {
                                        color: "#247dd5"
                                    }
                                }}
                            >
                                {__("Get 24x7 Support", "apbgf")}
                            </Button>

                            <Button
                                component="a"
                                href="https://gravitybooking.com/features/"
                                target="_blank"
                                rel="noopener noreferrer"
                                variant="outlined"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    fontSize: "14px",
                                    fontWeight: 400,
                                    textTransform: "none",
                                    borderRadius: "5px",
                                    padding: "8px 16px",
                                    "&:hover": {
                                        backgroundColor: "rgba(255, 255, 255, 0.1)"
                                    },
                                    "&:focus": {
                                        color: "#247dd5"
                                    }
                                }}
                            >
                                {__("Explore Features", "apbgf")}
                            </Button>
                        </Box>
                        <Box sx={{ display: "flex", justifyContent: "center", gap: 2 }}>
                            <IconButton
                                component="a"
                                href="https://www.facebook.com/GravityBooking"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    color: "#247dd5",
                                    borderRadius: "5px",
                                    padding: "12px",
                                }}
                            >
                                <FacebookIcon fontSize="large" />
                            </IconButton>
                            <IconButton
                                component="a"
                                href="https://www.linkedin.com/company/gravitybooking"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    color: "#247dd5",
                                    borderRadius: "5px",
                                    padding: "12px",
                                }}
                            >
                                <LinkedInIcon fontSize="large" />
                            </IconButton>
                            <IconButton
                                component="a"
                                href="https://www.youtube.com/@gravitybooking"
                                target="_blank"
                                rel="noopener noreferrer"
                                sx={{
                                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                                    color: "#247dd5",
                                    borderRadius: "5px",
                                    padding: "12px",
                                }}
                            >
                                <YouTubeIcon fontSize="large" />
                            </IconButton>
                        </Box>
                    </Box>
                </Box>
                <Snackbar
                    open={showCopied}
                    autoHideDuration={2000}
                    onClose={() => this.setState({ showCopied: false })}
                    anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
                >
                    <Alert
                        onClose={() => this.setState({ showCopied: false })}
                        severity="success"
                        variant="filled"
                        sx={{ width: "100%" }}
                    >
                        {__("Copied to clipboard", "apbgf")}
                    </Alert>
                </Snackbar>
            </>
        );
    }
}

export default CongratulationsWizard;