<script setup lang="tsx">
/** @jsxImportSource vue */
import {
    Calendar,
    Camera,
    CheckSquare,
    Clock,
    Cloud,
    Compass,
    FileText,
    Heart,
    Image,
    Map,
    MessageSquare,
    Newspaper,
    Settings,
    ShoppingBag,
    Wallet,
} from "lucide-vue-next"
import { motion, animate } from "motion-v"
import { ref, onMounted } from "vue"

const appContent = ref<HTMLDivElement>()
const screen = ref<HTMLDivElement>()

onMounted(() => {
    if (!appContent.value || !screen.value) return

    const clonedAppContent = appContent.value.cloneNode(true) as HTMLDivElement
    screen.value.appendChild(clonedAppContent)

    clonedAppContent.style.transformOrigin = "100% 0%"
    clonedAppContent.style.filter = "contrast(110%) brightness(120%) hue-rotate(10deg)"
    clonedAppContent.style.mixBlendMode = "color-dodge"

    const duration = 1.2
    animate(
        clonedAppContent,
        {
            scaleX: [1.7, 1],
            maskImage: [
                "radial-gradient(ellipse 0% 100px at 120% 40%, transparent 0%, #000f 0%, transparent 60%)",
                "radial-gradient(ellipse 300% 400px at 100% 40%, transparent 0%, #000f 300%, transparent 300% )",
            ],
            opacity: [1, 1, 0],
        },
        {
            ease: "linear",
            duration,
            scaleX: {
                duration: duration * 0.52,
                ease: [0.7, -0.03, 0.17, 1],
            },
        }
    )
})

const appIcons = [
    { label: "Messages", color: "#34C759", icon: MessageSquare },
    { label: "Calendar", color: "#FF9500", icon: Calendar },
    { label: "Photos", color: "#AF52DE", icon: Image },
    { label: "Camera", color: "#5AC8FA", icon: Camera },
    { label: "Maps", color: "#FF2D55", icon: Map },
    { label: "Weather", color: "#FF9500", icon: Cloud },
    { label: "Wallet", color: "#000000", icon: Wallet },
    { label: "Notes", color: "#FFCC00", icon: FileText },
    { label: "Reminders", color: "#FF3B30", icon: CheckSquare },
    { label: "Clock", color: "#5856D6", icon: Clock },
    { label: "News", color: "#FF2D55", icon: Newspaper },
    { label: "App Store", color: "#007AFF", icon: ShoppingBag },
    { label: "Health", color: "#FF2D55", icon: Heart },
    { label: "Settings", color: "#8E8E93", icon: Settings },
    { label: "Safari", color: "#007AFF", icon: Compass },
]

function AppGrid() {
    return (
        <div class="app-grid">
            {appIcons.map((app, index) => (
                <motion.div
                    class="app-icon"
                    key={index}
                    whileHover={{ scale: 1.1 }}
                    whilePress={{ scale: 0.95 }}
                >
                    <div
                        class="app-icon-inner"
                        style={{ backgroundColor: app.color }}
                    >
                        <app.icon width={32} height={32} />
                    </div>
                    <p class="app-label">{app.label}</p>
                </motion.div>
            ))}
        </div>
    )
}
</script>

<template>
    <div class="iphone-wrapper">
        <div class="iphone-mock">
            <div class="iphone-screen" ref="screen">
                <div class="dynamic-island"></div>

                <div class="app-content" ref="appContent">
                    <div class="app-grid-container">
                        <AppGrid />
                    </div>
                </div>

                <div class="iphone-home-indicator"></div>
            </div>
        </div>
    </div>
</template>

<style>
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.iphone-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.iphone-mock {
    position: relative;
    width: 375px;
    height: 812px;
    background-color: #1a1a1a;
    border-radius: 50px;
    box-shadow: 0 0 0 14px #121212, 0 0 0 17px #232323, 0 20px 40px rgba(0, 0, 0, 0.8);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-height: 900px) {
    .iphone-mock {
        scale: 0.7;
    }
}

@media (max-height: 600px) {
    .iphone-mock {
        scale: 0.4;
    }
}

.iphone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 38px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 34px;
    background-color: #000;
    border-radius: 20px;
    z-index: 2000;
}

.iphone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    background-color: white;
    opacity: 0.2;
    border-radius: 3px;
    z-index: 2000;
}

.app-content {
    flex: 1;
    padding: 20px;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: url(/photos/wallpapers/kirby.jpg);
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.app-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #f5f5f5;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 25px 15px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.app-icon-inner {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.app-label {
    font-size: 12px;
    margin: 0;
    text-align: center;
    color: #f5f5f5;
}
</style>