import { Box, Flex, Image, Text } from "@mantine/core";
import { IconChevronUp } from "@tabler/icons-react";
import React from "react";

interface NotificationCardProps {
    title?: string;
    body?: string;
    image?: string | null;
    device?: "ios" | "android";
}

const APP_ICON = "/KG%20-%20GOLD%20LOGO.png";

// Each platform's own system font, so the preview doesn't pick up the console's.
const IOS_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif';
const ANDROID_FONT = '"Samsung One", "SamsungOne", Roboto, "Google Sans", system-ui, Arial, sans-serif';

const nowLabel = () =>
    new Date().toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });

/**
 * The expanded push notification as it lands on the phone. iOS is the dark
 * lock-screen card with the image full-bleed underneath; Android follows the
 * Samsung One UI shade — light card, time above the title, and the image
 * inset under the text. Shared by the side panel and the preview modal.
 */
const NotificationCard: React.FC<NotificationCardProps> = ({ title, body, image, device = "ios" }) => {
    const titleText = title || "Notification Title";
    const bodyText = body || "Notification body text goes here...";

    if (device === "android") {
        return (
            <Box
                style={{
                    backgroundColor: "#f1f1f1",
                    borderRadius: 26,
                    padding: "14px 14px 14px 12px",
                    fontFamily: ANDROID_FONT,
                    boxShadow: "0 2px 10px rgba(0,0,0,0.08)",
                }}
            >
                <Flex gap={12} align="flex-start">
                    <img
                        src={APP_ICON}
                        alt=""
                        width={40}
                        height={40}
                        style={{ flexShrink: 0, borderRadius: 12 }}
                    />

                    <Box style={{ flex: 1, minWidth: 0 }}>
                        <Flex justify="space-between" align="center">
                            <Text fz={11} lh={1.4} c="#6f6f6f" ff={ANDROID_FONT}>
                                {nowLabel()}
                            </Text>
                            <IconChevronUp size={16} color="#6f6f6f" />
                        </Flex>
                        <Text fz={14} fw={600} lh={1.3} c="#1b1b1b" ff={ANDROID_FONT} style={{ wordBreak: "break-word" }}>
                            {titleText}
                        </Text>
                        <Text fz={12.5} lh={1.35} c="#3d3d3d" mt={2} ff={ANDROID_FONT} lineClamp={2} style={{ wordBreak: "break-word" }}>
                            {bodyText}
                        </Text>

                        {image && (
                            <Image
                                src={image}
                                alt="Notification"
                                w="100%"
                                h={130}
                                mt={10}
                                radius={14}
                                fit="cover"
                                fallbackSrc="https://placehold.co/600x400?text=Image"
                            />
                        )}
                    </Box>
                </Flex>
            </Box>
        );
    }

    return (
        <Box
            style={{
                backgroundColor: "#1c1c1e",
                borderRadius: 22,
                overflow: "hidden",
                fontFamily: IOS_FONT,
                boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
            }}
        >
            {/* Icon sits centred against the title/body block, as iOS draws it. */}
            <Flex gap={10} align="center" p={12}>
                <img
                    src={APP_ICON}
                    alt=""
                    width={38}
                    height={38}
                    style={{ flexShrink: 0, borderRadius: 9 }}
                />

                <Box style={{ flex: 1, minWidth: 0 }}>
                    <Flex justify="space-between" align="baseline" gap={8}>
                        <Text fz={14} fw={600} lh={1.25} c="#fff" ff={IOS_FONT} style={{ wordBreak: "break-word", letterSpacing: -0.2 }}>
                            {titleText}
                        </Text>
                        <Text fz={12} lh={1.25} c="#8e8e93" ff={IOS_FONT} style={{ flexShrink: 0 }}>
                            now
                        </Text>
                    </Flex>
                    <Text fz={13} lh={1.3} c="#fff" mt={2} ff={IOS_FONT} style={{ wordBreak: "break-word", whiteSpace: "pre-line", letterSpacing: -0.1 }}>
                        {bodyText}
                    </Text>
                </Box>
            </Flex>

            {image && (
                <Image
                    src={image}
                    alt="Notification"
                    w="100%"
                    h={180}
                    fit="cover"
                    fallbackSrc="https://placehold.co/600x400?text=Image"
                />
            )}
        </Box>
    );
};

export default NotificationCard;