"use client"

import { motion } from "motion/react"
import { useId, useState } from "react"

const spring = { type: "spring" as const, stiffness: 500, damping: 45, mass: 1 }

const floatingCardVariants = {
    hidden: {
        y: 0,
        x: "-50%",
        rotate: 0,
        opacity: 0,
        pointerEvents: "none" as const,
    },
    left: {
        y: -40,
        x: "-85%",
        rotate: -18,
        opacity: 1,
        pointerEvents: "auto" as const,
    },
    center: {
        y: -48,
        x: "-50%",
        rotate: 5,
        opacity: 1,
        pointerEvents: "auto" as const,
    },
    right: {
        y: -35,
        x: "-15%",
        rotate: 22,
        opacity: 1,
        pointerEvents: "auto" as const,
    },
}

const DEFAULT_SIZE = 80

// ─── Color Themes ────────────────────────────────────────────────────────────

type ColorTheme = {
    front: [string, string, string, string, string]
    back: [string, string, string, string, string]
}

const colorThemes = {
    black: {
        front: ["#4A4A4A", "#2C2C2C", "#1A1A1A", "#0D0D0D", "#1F1F1F"],
        back: ["#525252", "#3D3D3D", "#252525", "#181818", "#0E0E0E"],
    },
    green: {
        front: ["#7A8B6F", "#657A58", "#566B4A", "#465A3C", "#526645"],
        back: ["#5C6B50", "#4F5E44", "#435139", "#38452F", "#2E3926"],
    },
    blue: {
        front: ["#6B8DB5", "#4A7099", "#3A5F85", "#2B4D6E", "#35587A"],
        back: ["#4A6A8A", "#3D5A78", "#314B65", "#263D53", "#1E3244"],
    },
    purple: {
        front: ["#8B7AAF", "#7460A0", "#604D8D", "#4D3B78", "#5A4585"],
        back: ["#6B5A8A", "#5C4D78", "#4D4065", "#3E3353", "#322944"],
    },
} satisfies Record<string, ColorTheme>

export type OpenFolderColor = keyof typeof colorThemes

// ─── SVG Paths ───────────────────────────────────────────────────────────────

const BACK_PATH = "M4.95238 36H39.6834H40.5288C42.7478 36 44.5467 34.2011 44.5467 31.9821V31.8154L44.5714 15.399V10.2488L44.5659 9.09706C44.5553 6.88562 42.7595 5.09852 40.5481 5.09852H39.619H23.2092C21.8597 5.09852 20.6004 4.42108 19.8567 3.29507L18.8714 1.80344C18.1277 0.677438 16.8683 0 15.5189 0H4.01786C1.79886 0 0 1.79886 0 4.01786V30.8498V31.9821C0 34.2011 1.79886 36 4.01786 36H4.95238Z"

const FRONT_PATH = "M4.95238 35.9983H39.6834H40.6003C42.7798 35.9983 44.5467 34.2315 44.5467 32.0519L44.5714 16.5699V11.7128L44.567 10.853C44.5558 8.64207 42.7602 6.85567 40.5492 6.85567H39.619H21.0479L4.0179 6.85551C1.79888 6.85549 0 8.65435 0 10.8734V31.1412V31.9805C0 34.1995 1.79886 35.9983 4.01786 35.9983H4.95238Z"

// ─── Component ───────────────────────────────────────────────────────────────

export const OpenFolder = ({
    size = DEFAULT_SIZE,
    color = "black",
    content = [],
}: {
    size?: number
    color?: OpenFolderColor
    content?: string[]
}) => {
    return (
        <div>
            <FolderPreview size={size} color={color} content={content} />
        </div>
    )
}

const Folder2Back = ({ size, color = "black" }: { size: number; color?: OpenFolderColor }) => {
    const svgWidth = size
    const svgHeight = size * (36 / 45)
    const uid = useId()
    const theme = colorThemes[color] ?? colorThemes.black

    const backId = `f2Back-${uid}`
    const shineId = `f2BackShine-${uid}`
    const edgeId = `f2BackEdge-${uid}`
    const vignetteId = `f2BackVignette-${uid}`

    return (
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={svgWidth}
                height={svgHeight}
                viewBox="0 0 45 36"
                fill="none"
            >
                <defs>
                    <linearGradient id={backId} x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor={theme.back[0]} />
                        <stop offset="15%" stopColor={theme.back[1]} />
                        <stop offset="45%" stopColor={theme.back[2]} />
                        <stop offset="75%" stopColor={theme.back[3]} />
                        <stop offset="100%" stopColor={theme.back[4]} />
                    </linearGradient>
                    <linearGradient id={shineId} x1="0" y1="0" x2="1" y2="0.6">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.14)" />
                        <stop offset="30%" stopColor="rgba(255,255,255,0.04)" />
                        <stop offset="60%" stopColor="rgba(255,255,255,0)" />
                        <stop offset="85%" stopColor="rgba(255,255,255,0.06)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0.2)" />
                    </linearGradient>
                    <linearGradient id={edgeId} x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.22)" />
                        <stop offset="8%" stopColor="rgba(255,255,255,0.05)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0)" />
                    </linearGradient>
                    <radialGradient id={vignetteId} cx="0.5" cy="0.3" r="0.7">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.05)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0.18)" />
                    </radialGradient>
                </defs>
                <path d={BACK_PATH} fill={`url(#${backId})`} />
                <path d={BACK_PATH} fill={`url(#${shineId})`} />
                <path d={BACK_PATH} fill={`url(#${edgeId})`} />
                <path d={BACK_PATH} fill={`url(#${vignetteId})`} />
                <path d={BACK_PATH} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.3" />
            </svg>
        </div>
    )
}

const Folder2Front = ({ hovered, size, color = "black" }: { hovered: boolean; size: number; color?: OpenFolderColor }) => {
    const svgWidth = size
    const svgHeight = size * (36 / 45)
    const uid = useId()
    const theme = colorThemes[color] ?? colorThemes.black

    const frontId = `f2Front-${uid}`
    const frontShineId = `f2FrontShine-${uid}`
    const frontEdgeId = `f2FrontEdge-${uid}`
    const frontVignetteId = `f2FrontVignette-${uid}`

    return (
        <motion.div
            className="absolute z-20 top-1/2 left-1/2"
            style={{
                transformOrigin: "50% 100%",
                x: "-50%",
                y: "-50%",
            }}
            animate={{
                rotateX: hovered ? -35 : 0,
            }}
            transition={spring}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={svgWidth}
                height={svgHeight}
                viewBox="0 0 45 36"
                fill="none"
            >
                <defs>
                    <linearGradient id={frontId} x1="0" y1="0" x2="0.3" y2="1">
                        <stop offset="0%" stopColor={theme.front[0]} />
                        <stop offset="20%" stopColor={theme.front[1]} />
                        <stop offset="50%" stopColor={theme.front[2]} />
                        <stop offset="80%" stopColor={theme.front[3]} />
                        <stop offset="100%" stopColor={theme.front[4]} />
                    </linearGradient>
                    <linearGradient id={frontShineId} x1="0" y1="0" x2="1" y2="0.5">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.18)" />
                        <stop offset="25%" stopColor="rgba(255,255,255,0.06)" />
                        <stop offset="55%" stopColor="rgba(255,255,255,0)" />
                        <stop offset="80%" stopColor="rgba(255,255,255,0.04)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0.15)" />
                    </linearGradient>
                    <linearGradient id={frontEdgeId} x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.25)" />
                        <stop offset="6%" stopColor="rgba(255,255,255,0.08)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0)" />
                    </linearGradient>
                    <radialGradient id={frontVignetteId} cx="0.4" cy="0.35" r="0.65">
                        <stop offset="0%" stopColor="rgba(255,255,255,0.06)" />
                        <stop offset="100%" stopColor="rgba(0,0,0,0.14)" />
                    </radialGradient>
                </defs>
                <path d={FRONT_PATH} fill={`url(#${frontId})`} />
                <path d={FRONT_PATH} fill={`url(#${frontShineId})`} />
                <path d={FRONT_PATH} fill={`url(#${frontEdgeId})`} />
                <path d={FRONT_PATH} fill={`url(#${frontVignetteId})`} />
                <path d={FRONT_PATH} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="0.3" />
            </svg>
        </motion.div>
    )
}

const Folder2Floating = ({ hovered, variant, delay = 0, size, content = "" }: { hovered: boolean; variant: "left" | "center" | "right"; delay?: number; size: number; content?: string }) => {
    const scale = size / DEFAULT_SIZE
    const cardWidth = 40 * scale
    const cardHeight = 50 * scale

    return (
        <motion.div
            className="absolute overflow-hidden rounded-lg bg-white z-10 origin-bottom shadow-[0_2px_10px_rgba(0,0,0,0.15)]"
            style={{
                width: cardWidth,
                height: cardHeight,
                left: "50%",
                bottom: "15%",
            }}
            initial="hidden"
            animate={hovered ? variant : "hidden"}
            variants={floatingCardVariants}
            transition={{ ...spring, delay: hovered ? delay : 0 }}
        >
            <div
                className="relative h-full w-full overflow-hidden whitespace-pre-wrap
                    [-webkit-mask-image:linear-gradient(to_bottom,black_60%,transparent_100%)]"
                style={{
                    fontSize: 7 * scale,
                    fontWeight: 400,
                    lineHeight: 1.4,
                }}
            >
                <p className="text-black p-1.5 leading-tight">{content}</p>
            </div>
        </motion.div>
    )
}

const FolderPreview = ({ size = DEFAULT_SIZE, color = "black", content = [] }: { size?: number; color?: OpenFolderColor; content?: string[] }) => {
    const [hovered, setHovered] = useState(false)

    return (
        <motion.div
            className="relative cursor-pointer"
            style={{
                width: size,
                height: size,
                perspective: size * 3,
            }}
            onHoverStart={() => setHovered(true)}
            onHoverEnd={() => setHovered(false)}
        >
            {/* Back Folder */}
            <Folder2Back size={size} color={color} />

            {/* Floating Cards - fan out on hover */}
            <Folder2Floating hovered={hovered} variant="left" delay={0} size={size} content={content[0]} />
            <Folder2Floating hovered={hovered} variant="right" delay={0.1} size={size} content={content[2]} />
            <Folder2Floating hovered={hovered} variant="center" delay={0.05} size={size} content={content[1]} />

            {/* Front Folder - opens on hover */}
            <Folder2Front hovered={hovered} size={size} color={color} />
        </motion.div>
    )
}
Prop	Type	Default	Description
size	number	80	Size of the folder in pixels
color	"black" \| "green" \| "blue" \| "purple"	"black"	Color theme of the folder
content	string[]	[]	Up to 3 text labels shown on the floating cards
Open Folder

Installation

Props
