import CardBgSvg from '@/assets/icons/svg/cardBg.svg';
import ProSecondTextSvg from '@/assets/icons/svg/proSecondText.svg';
import ProTextSvg from '@/assets/icons/svg/proText.svg';

import { ThemedText } from '@/components/ThemedText';
import { useRouter } from 'expo-router';
import { useTranslation } from "react-i18next";
import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
import Svg, { Circle, Defs, Ellipse, FeBlend, FeColorMatrix, FeComposite, FeFlood, FeGaussianBlur, FeOffset, Filter, G, Path, Rect } from 'react-native-svg';

const MemberCard = ({ pro }: { pro: string }) => {
    const { t } = useTranslation();
    const proPng = require("@/assets/images/png/owner/pro.png");
    const width = Dimensions.get("window").width;
    const router = useRouter();

    return (
        <TouchableOpacity style={[styles.container]} onPress={() => router.push("/rights")}>
            <View style={styles.cardBg}>
                <CardBgSvg />
                <View style={[styles.dateContainer, { top: width * 0.09, right: -width * 0.09 }]}>
                    <ThemedText style={{ fontSize: 11, color: "#4C320C" }}>{"2025-09-05截止"}</ThemedText>
                </View>
            </View>
            <View style={[styles.proTextContainer, { opacity: pro === "pro" ? 1 : 0 }]}>
                <ProTextSvg />
            </View>
            <View style={[styles.ipContainer]}>
                <Svg width="180" height="110" viewBox="0 0 200 140" fill="none">
                    <G mask="url(#mask0_3223_1170)">
                        {pro === "pro" && <G filter="url(#filter0_i_3223_1170)">
                            <Path d="M61.4295 56.6599C60.8472 52.3476 66.5965 50.3378 68.8277 54.0737L71.3125 58.2342C73.0132 61.082 77.2417 60.7415 78.4648 57.6582L88.4108 32.5851C89.7463 29.2183 94.5115 29.2183 95.8471 32.5851L105.793 57.6582C107.016 60.7415 111.245 61.082 112.945 58.2342L115.43 54.0737C117.661 50.3378 123.411 52.3476 122.828 56.6599L120.386 74.7507C120.118 76.735 118.424 78.2155 116.422 78.2155H67.8363C65.8341 78.2155 64.1402 76.735 63.8723 74.7507L61.4295 56.6599Z" fill="#FFE88A" />
                        </G>}
                        {pro === "pro" && <Circle cx="59.1272" cy="39.4803" r="9.12722" fill="#FFB645" stroke="#4C320C" stroke-width="4" />}
                        {pro === "pro" && <Circle cx="92.2844" cy="22.1272" r="9.12722" fill="#E2793F" stroke="#4C320C" stroke-width="4" />}
                        {pro === "pro" && <Circle cx="125.441" cy="39.4803" r="9.12722" fill="#FFB645" stroke="#4C320C" stroke-width="4" />}
                        <Path d="M49.5755 72.4144C50.4475 69.5036 57.1744 72.1692 60.4288 73.8658L52.5625 77.8182C50.6468 77.7604 48.7034 75.3251 49.5755 72.4144Z" fill="#FFDBA3" />
                        <Path d="M51.0981 72.8437C51.5796 70.3845 56.005 72.8494 58.1575 74.3893L54.2174 76.2282C52.977 76.1247 50.6165 75.3029 51.0981 72.8437Z" fill="#AC7E35" />
                        <Path d="M133.568 71.0186C132.303 68.2559 126.008 71.8237 123.019 73.9529L131.355 76.7827C133.244 76.4612 134.833 73.7813 133.568 71.0186Z" fill="#FFDBA3" />
                        <Path d="M132.118 71.6536C131.302 69.2843 127.259 72.3359 125.339 74.1579L129.495 75.436C130.709 75.1624 132.934 74.0229 132.118 71.6536Z" fill="#AC7E35" />
                        <Path d="M27.1969 103.974C56.4427 53.319 129.557 53.3191 158.803 103.974L178.751 138.526C207.997 189.181 171.44 252.5 112.948 252.5H73.0518C14.5601 252.5 -21.9971 189.181 7.24869 138.526L27.1969 103.974Z" fill="#FFD18A" />
                        <Rect x="88.5132" y="100.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 88.5132 100.684)" fill="#4C320C" />
                        <Rect x="99.2822" y="100.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 99.2822 100.684)" fill="#4C320C" />
                        <Path d="M50.1157 131.318C70.7994 101.249 115.202 101.249 135.886 131.318L159.443 165.565C183.198 200.1 158.474 247.115 116.558 247.115H69.4435C27.5268 247.115 2.8027 200.1 26.5585 165.565L50.1157 131.318Z" fill="#FFF8DE" />
                        <G filter="url(#filter1_i_3223_1170)">
                            <Ellipse cx="134.581" cy="126.111" rx="49.0598" ry="35" fill="#FFF8DE" />
                        </G>
                        <G filter="url(#filter2_i_3223_1170)">
                            <Ellipse cx="51.1196" cy="126.111" rx="48.7607" ry="35" fill="#FFF8DE" />
                        </G>
                        <Ellipse cx="92.7008" cy="108.761" rx="3.58974" ry="2.69231" transform="rotate(180 92.7008 108.761)" fill="#FFB8B9" />
                        <Ellipse cx="8.5474" cy="3.40976" rx="8.5474" ry="3.40976" transform="matrix(1 0 0 -1 108.647 143)" fill="#FFD38D" />
                        <Ellipse cx="65.5473" cy="139.59" rx="8.5474" ry="3.40976" transform="rotate(-180 65.5473 139.59)" fill="#FFD38D" />
                        <Path d="M91.9591 112.026C92.2223 111.57 92.8803 111.57 93.1434 112.026L93.7356 113.051C93.9988 113.507 93.6698 114.077 93.1434 114.077H91.9591C91.4328 114.077 91.1038 113.507 91.367 113.051L91.9591 112.026Z" fill="#4C320C" />
                    </G>
                    <Defs>
                        <Filter id="filter0_i_3223_1170" x="61.3882" y="30.0601" width="61.4814" height="48.1555" filterUnits="userSpaceOnUse">
                            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
                            <FeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                            <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <FeOffset dy="21" />
                            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                            <FeColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0" />
                            <FeBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170" />
                        </Filter>
                        <Filter id="filter1_i_3223_1170" x="80.1369" y="91.1111" width="103.504" height="71.7949" filterUnits="userSpaceOnUse">
                            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
                            <FeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                            <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <FeOffset dx="-5.38462" dy="1.79487" />
                            <FeGaussianBlur stdDeviation="4.9359" />
                            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                            <FeColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0" />
                            <FeBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170" />
                        </Filter>
                        <Filter id="filter2_i_3223_1170" x="2.35889" y="91.1111" width="103.504" height="70" filterUnits="userSpaceOnUse">
                            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
                            <FeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                            <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <FeOffset dx="5.98291" />
                            <FeGaussianBlur stdDeviation="3.2906" />
                            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                            <FeColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0" />
                            <FeBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170" />
                        </Filter>
                    </Defs>
                </Svg>
            </View>
            <View style={{ position: "absolute", bottom: width * 0.07, left: width * 0.1 }}>
                {/* <ThemedText style={{ fontSize: 11, color: "red" }}>{"解锁更多魔法"}</ThemedText> */}
                <ProSecondTextSvg />
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    container: {
        position: "relative"
    },
    proTextContainer: {
        position: "absolute",
        top: 30,
        left: 30,
        zIndex: 9,
    },
    ipContainer: {
        position: "absolute",
        bottom: 0,
        right: 0,
        zIndex: 9
    },
    cardBg: {
        marginTop: -50,
        width: "100%",
        alignSelf: "center",
        position: "relative",
        marginRight: 10,
        zIndex: -1,
    },
    dateContainer: {
        position: 'absolute',
        zIndex: 10,
        alignItems: 'flex-end',
        transform: [
            { translateX: -45 },
            { rotate: '400deg' },
            { translateX: 45 }
        ],
    },
});

export default MemberCard;