// DashboardGrid.tsx

import React, { useState } from "react";
import MultiRingCircularProgress from "./MultiRingCircularProgress";
import CampaignTracker from "./CampaignTracker";
import {
    ArrowLeft,
    Sparkles
} from "lucide-react";
import HeaderPage from "./shared/HeaderPage";
import Google from "../assets/icons/google-original-logo.svg";
import Gemini2 from "../assets/icons/gemini2.svg";
import Perplexity from "../assets/icons/perplexity-dark-logo.svg";
import GPT from "../assets/icons/gpt.svg";
import Map from "../assets/icons/maps.svg";

import TotalBacklinks from "../assets/icons/iconheader/total.svg";
import ActiveKeywords from "../assets/icons/iconheader/active.svg";
import PortfolioPerformance from "../assets/icons/iconheader/portfolio.svg";
import InfoBadge from "../assets/icons/iconheader/info.svg";
import Amazon from "../assets/icons/amazon.svg";

interface TagContent {
    icon: string;
    text?: string;
    value?: string;
    extra?: string;
}

interface Tag {
    content: TagContent[];
    color?: string;
}

interface HoverState {
    cardId: string | null;
    ringIndex: number | null;
}

const CARDS = [
    {
        title: "CPA Hollywood",
        percent: 99,
        rings: [
            { color: "#4c60e5", value: 99 }, // blue
            { color: "#4285f4", value: 50 }, // blue
            { color: "#34a853", value: 80 }, // green
            { color: "#fbbc05", value: 90 }, // yellow
            { color: "#ea4335", value: 40 }  // red
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "+1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "7", extra: "+2" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ]
    },
    {
        title: "CPA Los Angeles",
        percent: 24,
        rings: [
            { color: "#4c60e5", value: 25 }, // blue
            { color: "#4285f4", value: 21 }, // blue
            { color: "#34a853", value: 40 }, // green
            { color: "#fbbc05", value: 30 }, // yellow
            { color: "#ea4335", value: 20 }  // red
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "-2" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "GPT" }
                ]
            }
        ]
    },
    {
        title: "CPA Los Angeles4",
        percent: 45,
        rings: [
            { color: "#4c60e5", value: 45 }, // blue
            { color: "#4285f4", value: 42 }, // blue
            { color: "#34a853", value: 32 }, // green
            { color: "#fbbc05", value: 28 }, // yellow
            { color: "#ea4335", value: 24 }  // red
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "-2" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "5", extra: "+1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" }
                ]
            }
        ]
    },
    {
        title: "Best CPA Los Angeles5",
        percent: 89,
        rings: [
            { color: "#4c60e5", value: 89 }, // blue
            { color: "#4285f4", value: 80 }, // blue
            { color: "#34a853", value: 72 }, // green
            { color: "#fbbc05", value: 65 }, // yellow
            { color: "#ea4335", value: 57 }  // red
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "+1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "9", extra: "+3" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "GPT" },
                    { icon: "Perplexity" }
                ]
            }
        ]
    },
    {
        title: "CPA Hollywood 2",
        percent: 98,
        rings: [
            { color: "#4c60e5", value: 98 }, // blue
            { color: "#4285f4", value: 98 }, // blue
            { color: "#34a853", value: 98 }, // green
            { color: "#fbbc05", value: 98 }, // yellow
            { color: "#ea4335", value: 100 }  // red
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "+1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "7", extra: "+2" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ],
        badge: "Content Unlocked",
        actionLink: "View Published Content "
    },
    {
        title: "Best CPA Los Angeles21",
        percent: 89,
        rings: [
            { color: "#cccccc", value: 89 }, // gray
            { color: "#cccccc", value: 80 }, // gray
            { color: "#cccccc", value: 72 }, // gray
            { color: "#cccccc", value: 65 }, // gray
            { color: "#cccccc", value: 57 }  // gray
        ],
        tags: [
            {
                content: [
                    { icon: "Google", value: "14", extra: "+1" }
                ],
                color: "#cccccc"
            },
            {
                content: [
                    { icon: "Map", value: "7", extra: "+2" }
                ],
                color: "#cccccc"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ],
        faded: true,
        paused: true
    }
];

const competitors = [
    {
        domain: "Cherrybekaertla.com",
        googleRank: 1,
        mapPins: 7,
        hasAi: true,
        hasCircle: true,
        hasDiamond: true,
        hasTree: true,
        hasLLM: true,
        tags: [
            {
                content: [
                    { icon: "Google", value: "1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "7", }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ]
    },
    {
        domain: "Gerbercompany.com",
        googleRank: 1,
        mapPins: 7,
        hasAi: true,
        hasCircle: true,
        hasDiamond: true,
        hasTree: true,
        hasLLM: true,
        tags: [
            {
                content: [
                    { icon: "Google", value: "1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "7", }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ]
    },
    {
        domain: "Mysite.com",
        googleRank: 1,
        mapPins: 7,
        hasAi: true,
        hasCircle: true,
        hasDiamond: true,
        hasTree: true,
        hasLLM: true,
        tags: [
            {
                content: [
                    { icon: "Google", value: "1" }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Map", value: "7", }
                ],
                color: "#4285F4"
            },
            {
                content: [
                    { icon: "Ai" },
                    { icon: "Perplexity" },
                    { icon: "GPT" }
                ]
            }
        ]
    },
]



export default function DashboardGrid() {
    const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([]);
    const [tableView, setTableView] = useState<string | null>(null);
    const [activeCard, setActiveCard] = useState<string | null>(null);
    const [hoverState, setHoverState] = useState<HoverState>({ cardId: null, ringIndex: null });
    const [isHovered, setIsHovered] = useState(false);
    const [showKeywordAnalysis, setShowKeywordAnalysis] = useState<string | null>(null);

    const handleCardClick = (campaignName: string, paused: boolean) => {
        if (paused) return;
        setSelectedCampaigns([campaignName]);
        setActiveCard(campaignName);
        if (activeCard) {

        }
    };

    const handleBackClick = (e: React.MouseEvent) => {
        e.stopPropagation(); // Prevent event bubbling to card click
        if (tableView) {
            setTableView(null);
        } else if (activeCard) {
            setSelectedCampaigns(prev => prev.filter(card => card !== activeCard));
            setActiveCard(null);
        }
    };

    const handleMenuClick = (campaignName: string) => {
        setTableView(campaignName);
    };

    const handleRingHover = (cardId: string, ringIndex: number | null) => {
        setHoverState({ cardId, ringIndex });
    };

    const handleResumeClick = (campaignName: string) => {
        setShowKeywordAnalysis(campaignName);
    };


    const TagComponent = ({ content, color = "#4285F4", faded = false }: Tag & { faded?: boolean }) => {
        const getIconContent = (item: TagContent) => {
            switch (item.icon) {
                case "Google":
                    return (
                        <>
                            <img src={Google} alt="Google" className="w-5 h-5" />
                            {item.value && <span className="text-[#17171B] font-semibold text-md">{item.value}</span>}
                            {item.extra && (
                                <span className={`ml-1 text-md ${item.extra.startsWith('+') ? 'text-green-600' : 'text-red-600'} font-bold`}>
                                    {item.extra}
                                </span>
                            )}
                        </>
                    );
                case "Map":
                    return (
                        <>
                            <img src={Map} alt="Map" className="w-5 h-6" />
                            {item.value && <span className="text-black font-bold text-md">{item.value}</span>}
                            {item.extra && (
                                <span className={`ml-1 text-md ${item.extra.startsWith('+') ? 'text-green-600' : 'text-red-600'} font-bold`}>
                                    {item.extra}
                                </span>
                            )}
                        </>
                    );
                case "Ai":
                    return (
                        <>
                            <img src={Gemini2} alt="AI" className="w-5 h-5" />
                            {item.value && <span className="text-black font-bold text-md">{item.value}</span>}
                            {item.extra && (
                                <span className={`ml-1 text-md ${item.extra.startsWith('+') ? 'text-green-600' : 'text-red-600'} font-bold`}>
                                    {item.extra}
                                </span>
                            )}
                        </>
                    )
                case "GPT":
                    return (
                        <>
                            <img src={GPT} alt="GPT" className="w-5 h-5" />
                            {item.value && <span className="text-black font-bold text-md">{item.value}</span>}
                            {item.extra && (
                                <span className={`ml-1 text-md ${item.extra.startsWith('+') ? 'text-green-600' : 'text-red-600'} font-bold`}>
                                    {item.extra}
                                </span>
                            )}
                        </>
                    )
                case "Perplexity":
                    return (
                        <>
                            <img src={Perplexity} alt="Perplexity" className="w-5 h-5" />
                            {item.value && <span className="text-black font-bold text-md">{item.value}</span>}
                            {item.extra && (
                                <span className={`ml-1 text-md ${item.extra.startsWith('+') ? 'text-green-600' : 'text-red-600'} font-bold`}>
                                    {item.extra}
                                </span>
                            )}
                        </>
                    )
                default:
                    return item.text || null;
            }
        };

        return (
            <span
                className={`rounded-full border-2 border-gray-200 bg-white px-3 py-1 flex items-center gap-2 text-sm font-medium transition-all duration-300 hover:scale-105 
                    ${faded ? "text-gray-200 border-gray-100" : "text-gray-400 border-gray-100 hover:border-blue-100"
                    }`}
                style={color ? { color } : {}} // borderColor: color
            >
                {content.map((item, index) => (
                    <div key={index} className="flex items-center gap-1 py-1">
                        {getIconContent(item)}
                    </div>
                ))}
            </span>
        );
    };


    const CardHeader = ({ title, value, valueChange, icon, tooltipText, extra }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string, extra?: string }) => {

        return (
            <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-full lg:w-[32%] py-2 lg:py-0"
            >
                <img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />

                <div className="flex flex-col px-2 sm:px-4">

                    <div className="flex items-center gap-1">
                        <span className="text-xl sm:text-3xl  font-semibold">{value}</span>
                        {extra && <span className="text-lg text-gray-400 font-medium ">{extra}</span>}
                        {tooltipText && <div className="relative w-[10%]"

                            onMouseEnter={() => {
                                if (tooltipText) {
                                    setIsHovered(true)
                                }
                            }}
                            onMouseLeave={() => {
                                if (tooltipText) {
                                    setIsHovered(false)
                                }
                            }}
                        >
                            <img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
                            {isHovered && (
                                <div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
                                    {/* Tooltip triangle */}
                                    <div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
                                    {tooltipText}
                                </div>
                            )}
                        </div>}
                    </div>
                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 font-normal ">{title}</div>
                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 flex items-center gap-2">
                        <span className="text-sm sm:text-base lg:text-lg text-gray-500 font-bold">{valueChange}</span>
                    </div>

                </div>


            </div>

        )
    }

    return (
        <>
            <HeaderPage title="Dashboard" />

            {/* Main content area with new metric cards */}
            <main className="pb-4 px-2 sm:px-4 border-collapse border-2 mb-6 rounded-lg">
                <div className="flex flex-col lg:flex-row flex-wrap gap-4 justify-between items-stretch py-4 px-2 sm:px-4">
                    <CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} />
                    <CardHeader title="Total Backlinks" value="112" extra="/1012" icon={TotalBacklinks} />
                    <CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." />

                </div>
            </main>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7">
                {CARDS.map((card, idx) => (
                    <div
                        key={idx}
                        className="[perspective:1000px] h-[480px]"
                        onClick={() => handleCardClick(card.title, card.paused || false)}
                    >
                        <div className={`relative w-full h-full transition-transform duration-700 ease-in-out [transform-style:preserve-3d] ${selectedCampaigns.includes(card.title) ? '[transform:rotateY(180deg)]' : ''
                            }`}>
                            {/* Front of card */}
                            <div className={`absolute w-full h-full [backface-visibility:hidden] bg-white rounded-xl  border transition-all duration-300 ease-in-out cursor-pointer ${card.faded ? "opacity- 60" : ""} 
                            ${selectedCampaigns.includes(card.title) ? 'shadow-md scale-[1.02]' : 'hover:scale-135 hover:shadow-md'
                                }`}
                                style={{
                                    transform: selectedCampaigns.includes(card.title)
                                        ? 'translateY(-5px) scale(1.02)'
                                        : 'translateY(0px) scale(1)'
                                }}>
                                {
                                    card.paused && showKeywordAnalysis === card.title
                                        ?
                                        <div className="bg-[#f6f8fe] rounded-xl shadow-sm border border-gray-200 p-6 px-20 h-full">
                                            {/* New Keyword Badge */}

                                            <div className="flex justify-center mb-2">
                                                <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-[#197232]" style={{ background: "linear-gradient(90deg, #d6fbe2 30%, #edf9d5 100%)" }}>
                                                    <Sparkles className="w-4 h-4" />
                                                    NEW High-Value Keyword Found
                                                </div>
                                            </div>

                                            {/* Keyword Title */}
                                            <h2 className="text-2xl font-bold text-gray-900 text-center mb-4">Tax Prep Attorney Los Angeles</h2>

                                            {/* Competitors List */}
                                            <div className="space-y-3 mb-4">
                                                {competitors.map((competitor, index) => (
                                                    <div key={index} className="space-y-0">
                                                        <div className="text-md text-gray-600 font-bold">{competitor.domain}</div>
                                                        <div className="flex items-center gap-3 flex-wrap">
                                                            {competitor.tags.map((tag, i) => (
                                                                <TagComponent
                                                                    key={i}
                                                                    {...tag}
                                                                    faded={card.faded}
                                                                />
                                                            ))}

                                                        </div>
                                                    </div>
                                                ))}
                                            </div>

                                            {/* Bottom CTA */}
                                            <div className="text-center">
                                                <p className="text-md text-gray-500 ">Your competitors own this keyword.</p>
                                                <p className="text-md font-semibold text-[#2B2D3B] mb-3">Add it to capture visibility and sales.</p>
                                                <button className="inline-flex items-center gap-2 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors">
                                                    <span className="text-lg">+</span>
                                                    Add Keyword
                                                </button>
                                            </div>
                                        </div>
                                        :
                                        <div className={`p-5 pt-8 flex flex-col items-center h-full `}>
                                            {card.badge && (
                                                <div className="absolute top-0 right-0 overflow-hidden w-40 h-40 pointer-events-none">
                                                    <div className="absolute top-8 -right-10 w-48 bg-[#0CAA75] text-white font-bold py-2 text-center shadow-lg transform rotate-45">
                                                        <div className="flex items-center justify-center gap-2 text-xs whitespace-nowrap px-8">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none">
                                                                <path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" strokeWidth="1.625" />
                                                            </svg>
                                                            <span>{card.badge}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                            {idx === 3 && (
                                                <div className="absolute top-4 left-4">
                                                    <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold bg-[#ffebef] border-[#f8d0de] border-2 border-solid mr-2 h-[30px]" style={{ color: "#FFFFFF" }}>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
                                                            <path d="M5.83716 4.23774C7.31896 4.23774 8.74008 4.81435 9.78788 5.84071C10.8357 6.86707 11.4243 8.25912 11.4243 9.71062C11.4243 11.1621 10.8357 12.5542 9.78788 13.5805C8.74008 14.6069 7.31896 15.1835 5.83716 15.1835C4.35535 15.1835 2.93424 14.6069 1.88644 13.5805C0.838645 12.5542 0.25 11.1621 0.25 9.71062C0.25 8.25912 0.838645 6.86707 1.88644 5.84071C2.93424 4.81435 4.35535 4.23774 5.83716 4.23774ZM5.83716 5.60596C4.7258 5.60596 3.65997 6.03841 2.87412 6.80819C2.08827 7.57796 1.64679 8.62199 1.64679 9.71062C1.64679 10.7992 2.08827 11.8433 2.87412 12.613C3.65997 13.3828 4.7258 13.8153 5.83716 13.8153C6.94851 13.8153 8.01435 13.3828 8.8002 12.613C9.58604 11.8433 10.0275 10.7992 10.0275 9.71062C10.0275 8.62199 9.58604 7.57796 8.8002 6.80819C8.01435 6.03841 6.94851 5.60596 5.83716 5.60596ZM5.83716 6.63212L6.76044 8.46554L8.82629 8.7597L7.33172 10.1861L7.68441 12.2015L5.83716 11.2499L3.9899 12.2008L4.34259 10.1861L2.84803 8.75902L4.91388 8.46485L5.83716 6.63212ZM10.0275 0.817195V2.86952L9.07561 3.64804C8.28592 3.24152 7.42338 2.98853 6.53555 2.90304V0.817195H10.0275ZM5.13876 0.816511V2.90304C4.25123 2.98841 3.38893 3.24116 2.5994 3.64736L1.64679 2.86952V0.817195L5.13876 0.816511Z" fill="#D55169" />
                                                        </svg>
                                                        <span className="text-[#D55169]">Top rankings</span>
                                                    </div>

                                                    <div
                                                        className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold border-[#9af2b3] border-2 border-solid h-[30px]"
                                                        style={{
                                                            color: "#FFFFFF",
                                                            background: "linear-gradient(278deg, rgba(240, 250, 181, 0.60) 0.47%, rgba(193, 254, 207, 0.60) 46.54%)"
                                                        }}
                                                    >
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
                                                            <path d="M5.95435 4.23774C7.43615 4.23774 8.85727 4.81435 9.90506 5.84071C10.9529 6.86707 11.5415 8.25912 11.5415 9.71062C11.5415 11.1621 10.9529 12.5542 9.90506 13.5805C8.85727 14.6069 7.43615 15.1835 5.95435 15.1835C4.47254 15.1835 3.05142 14.6069 2.00363 13.5805C0.955833 12.5542 0.367188 11.1621 0.367188 9.71062C0.367188 8.25912 0.955833 6.86707 2.00363 5.84071C3.05142 4.81435 4.47254 4.23774 5.95435 4.23774ZM5.95435 5.60596C4.84299 5.60596 3.77715 6.03841 2.99131 6.80819C2.20546 7.57796 1.76398 8.62199 1.76398 9.71062C1.76398 10.7992 2.20546 11.8433 2.99131 12.613C3.77715 13.3828 4.84299 13.8153 5.95435 13.8153C7.0657 13.8153 8.13154 13.3828 8.91738 12.613C9.70323 11.8433 10.1447 10.7992 10.1447 9.71062C10.1447 8.62199 9.70323 7.57796 8.91738 6.80819C8.13154 6.03841 7.0657 5.60596 5.95435 5.60596ZM5.95435 6.63212L6.87762 8.46554L8.94348 8.7597L7.44891 10.1861L7.8016 12.2015L5.95435 11.2499L4.10709 12.2008L4.45978 10.1861L2.96522 8.75902L5.03107 8.46485L5.95435 6.63212ZM10.1447 0.817195V2.86952L9.1928 3.64804C8.40311 3.24152 7.54056 2.98853 6.65274 2.90304V0.817195H10.1447ZM5.25595 0.816511V2.90304C4.36841 2.98841 3.50612 3.24116 2.71659 3.64736L1.76398 2.86952V0.817195L5.25595 0.816511Z" fill="#30A372" /></svg>
                                                        <span className="text-[#197232]">Top rankings</span>
                                                    </div>
                                                </div>
                                            )}
                                            <MultiRingCircularProgress
                                                card={card}
                                                hoveredIndex={hoverState.cardId === card.title ? hoverState.ringIndex : null}
                                                onHover={(index) => handleRingHover(card.title, index)}
                                            />
                                            <div className={`mt-1 font-semibold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
                                                {card.title}
                                            </div>
                                            {/* Tags */}
                                            <div className="mt-2 flex flex-row gap-2 flex-wrap justify-center">
                                                {card.tags.map((tag, i) => (
                                                    <TagComponent
                                                        key={i}
                                                        {...tag}
                                                        faded={card.faded}
                                                    />
                                                ))}
                                            </div>
                                            {card.actionLink && (
                                                <div className="mt-3 text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800">
                                                    {card.actionLink}
                                                </div>
                                            )}

                                            {card.paused && (
                                                <div className="mt-1 text-center">
                                                    <div className="text-gray-400 text-sm">Campaign paused</div>
                                                    <button
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            handleResumeClick(card.title);
                                                        }}
                                                        className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800"
                                                    >
                                                        Resume
                                                    </button>
                                                </div>
                                            )

                                            }
                                        </div>

                                }

                            </div>

                            {/* Back of card */}
                            <div className="absolute w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] bg-white rounded-2xl shadow-lg border transition-all duration-300 ease-in-out"
                                style={{
                                    transform: selectedCampaigns.includes(card.title)
                                        ? 'translateY(-5px) scale(1.02) rotateY(180deg)'
                                        : 'translateY(0px) scale(1) rotateY(180deg)'
                                }}>
                                <div className="py-3 flex flex-col h-full">
                                    {/* Header */}
                                    <div className="flex items-center justify-between border-b border-gray-200 pb-2 px-3">
                                        <div className="flex items-center gap-4">
                                            <button
                                                onClick={handleBackClick}
                                                className="px-2 py-1 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110 border-2 border-gray-200"
                                            >
                                                <ArrowLeft className="w-5 h-5 text-gray-600" />
                                            </button>
                                            <h1 className="text-xl font-semibold text-gray-900">{card.title}</h1>
                                        </div>
                                        {/* <button
                                            onClick={() => handleMenuClick(card.title)}
                                            className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
                                            title="View table"
                                        >
                                            <Menu className="w-5 h-5 text-gray-600" />
                                        </button> */}
                                    </div>

                                    {/* Content with smooth transitions */}
                                    <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
                                        ? 'opacity-0 translate-y-4 pointer-events-none'
                                        : 'opacity-100 translate-y-0'
                                        }`}
                                        style={{ display: tableView !== card.title ? 'block' : 'none' }}>
                                        <CampaignTracker handleMenuClick={() => handleMenuClick(card.title)} />
                                    </div>

                                    {/* Table View with smooth transitions */}
                                    <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
                                        ? 'opacity-100 translate-y-0'
                                        : 'opacity-0 translate-y-4 pointer-events-none'
                                        }`}
                                        style={{ display: tableView === card.title ? 'block' : 'none' }}
                                    >
                                        <div className="custom-scrollbar-table">
                                            <table className="w-full rounded-lg ">
                                                <tbody>
                                                    {[
                                                        { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                        { icon: Amazon, title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' },
                                                        { icon: Amazon, title: 'Questions to ask your CPA Substack DR 97 DA 95' }
                                                    ].map((row, rIdx) => (
                                                        <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors px-2 flex items-center'>
                                                            <td className='py-3 pl-2 text-center '>
                                                                <img src={row.icon} alt='' className="w-8 h-8 rounded-lg" />
                                                            </td>
                                                            <td className='py-3 px-1 min-w-[300px] text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
                                                                <div className='truncate max-w-[340px] text-sm underline'>{row.title}</div>
                                                            </td>
                                                        </tr>
                                                    ))}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div className="text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800 text-center pt-3" style={{ boxShadow: '#dadada 0px -6px 10px' }}>View All</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

        </>
    );
}

// This line to make just try to open one card
// 106
// 112
// 118-121
// 149