import { Modal, Text, Box, Image, Flex, Button, TextInput } from "@mantine/core";
import { type NotificationFormType } from "./types";

interface DevicePreviewModalProps {
    opened: boolean;
    onClose: () => void;
    data: NotificationFormType;
}

const DevicePreviewModal: React.FC<DevicePreviewModalProps> = ({
    opened,
    onClose,
    data,
}) => {
    return (
        <Modal
            opened={opened}
            onClose={onClose}
            title="Device Preview"
            centered
            size="sm"
        >
            <Flex justify="center" align="center" direction="column" gap="md">
                <Text size="sm" c="dimmed" ta="center" style={{ maxWidth: 300 }}>
                    This preview provides a general idea of how your message will appear on a mobile device.
                </Text>

                {/* Phone Frame */}
                <Box
                    style={{
                        width: "300px",
                        height: "600px",
                        border: "12px solid #1c1c1e",
                        borderRadius: "36px",
                        backgroundColor: "#f2f2f7",
                        position: "relative",
                        overflow: "hidden",
                        boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
                    }}
                >
                    {/* Notch/Top Bar */}
                    <Box
                        style={{
                            height: "24px",
                            backgroundColor: "rgba(255,255,255,0.8)",
                            backdropFilter: "blur(10px)",
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            padding: "0 16px",
                        }}
                    >
                        <Text size="xs" fw={700}>9:41</Text>
                        <Flex gap={4}>
                            <Box w={12} h={12} bg="black" style={{ borderRadius: '50%' }} opacity={0.3} />
                        </Flex>
                    </Box>

                    {/* Notification List Area */}
                    <Box p="sm" mt="md">
                        {/* The Notification Card */}
                        <Box
                            style={{
                                backgroundColor: "rgba(255, 255, 255, 0.85)",
                                backdropFilter: "blur(20px)",
                                borderRadius: "16px",
                                padding: "10px",
                                boxShadow: "0 2px 10px rgba(0,0,0,0.05)",
                            }}
                        >
                            <Flex gap="xs" align="flex-start">
                                {/* App Icon Mockup */}
                                <Box
                                    w={36}
                                    h={36}
                                    bg="blue"
                                    style={{ borderRadius: "8px", flexShrink: 0 }}
                                />
                                <Box style={{ flex: 1 }}>
                                    <Flex justify="space-between" align="baseline">
                                        <Text size="sm" fw={600} style={{ color: "#000" }}>Karma Group</Text>
                                        <Text size="xs" c="dimmed">Now</Text>
                                    </Flex>
                                    <Text size="sm" fw={600} mt={2} style={{ color: "#000" }}>{data.title || "Notification Title"}</Text>
                                    <Text size="xs" mt={2} style={{ color: "#333", lineHeight: 1.3 }}>
                                        {data.text || "Notification body text will appear here..."}
                                    </Text>
                                </Box>
                                {/* Optional Image Preview thumbnail if space allows, or large image below */}
                            </Flex>
                            {/* Large Image Preview if provided */}
                            {data.image && (
                                <Box mt="xs" style={{ borderRadius: "12px", overflow: "hidden" }}>
                                    <Image src={data.image} alt="Notification" h={140} fit="cover" />
                                </Box>
                            )}
                        </Box>
                    </Box>
                </Box>

                <Box w="100%" style={{ maxWidth: 300 }}>
                    <Text size="sm" fw={500} mb={5}>Send Test Email</Text>
                    <Flex gap="xs">
                        <TextInput
                            placeholder="Enter email address"
                            style={{ flex: 1 }}
                            size="sm"
                        />
                        <Button size="sm" variant="filled" color="blue">Send</Button>
                    </Flex>
                </Box>
            </Flex>
        </Modal>
    );
};

export default DevicePreviewModal;