"use client"

import type React from "react"
import { useState } from "react"
import { ArrowLeft, Menu, Sparkles } from "lucide-react"
import CampaignTracker from "./CampaignTracker";

// Your existing components - make sure these are imported
// import MultiRingCircularProgress from './multi-ring-circular-progress';
// import CampaignTracker from './campaign-tracker';

const CARDS = [
    {
        title: "Richard Bower CPA",
        percent: 99,
        rings: [
            { color: "#4285F4", value: 99 }, // blue
            { color: "#34A853", value: 80 }, // green
            { color: "#FBBC05", value: 60 }, // yellow
            { color: "#EA4335", value: 40 }  // red
        ],
        tags: [
            { text: "G 14", extra: "+1", color: "#4285F4" },
            { text: "Ai" },
            { text: "LLM" },
        ]
    },
    {
        title: "CPA Los Angeles",
        percent: 24,
        rings: [
            { color: "#4285F4", value: 24 },
            { color: "#34A853", value: 18 },
            { color: "#FBBC05", value: 14 },
            { color: "#EA4335", value: 8 }
        ],
        tags: [
            { text: "G 14", extra: "-2", color: "#4285F4" }
        ]
    },
    {
        title: "CPA Los Angeles4",
        percent: 45,
        rings: [
            { color: "#4285F4", value: 45 },
            { color: "#34A853", value: 42 },
            { color: "#FBBC05", value: 32 },
            { color: "#EA4335", value: 24 }
        ],
        tags: [
            { text: "G 14", extra: "-2", color: "#4285F4" },
            { text: "+7" },
            { text: "Ai" }
        ]
    },
    {
        title: "Best CPA Los Angeles5",
        percent: 89,
        rings: [
            { color: "#4285F4", value: 89 },
            { color: "#34A853", value: 80 },
            { color: "#FBBC05", value: 72 },
            { color: "#EA4335", value: 57 }
        ],
        tags: [
            { text: "G 14", extra: "+1", color: "#4285F4" },
            { text: "+7" },
            { text: "Ai" }
        ]
    },
    {
        title: "CPA Hollywood",
        percent: 100,
        rings: [
            { color: "#4285F4", value: 100 },
            { color: "#34A853", value: 100 },
            { color: "#FBBC05", value: 100 },
            { color: "#EA4335", value: 100 }
        ],
        tags: [
            { text: "G 14", extra: "+1", color: "#4285F4" },
            { text: "+7" },
            { text: "Ai" }
        ],
        badge: "Content Unlocked",
        actionLink: "View Published Content "
    },
    {
        title: "Best CPA Los Angeles21",
        percent: 89,
        rings: [
            { color: "#cccccc", value: 89 },
            { color: "#cccccc", value: 80 },
            { color: "#cccccc", value: 72 },
            { color: "#cccccc", value: 57 }
        ],
        tags: [
            { text: "G 14", extra: "+1", color: "#cccccc" },
            { text: "+7", color: "#cccccc" },
            { text: "Ai", color: "#cccccc" }
        ],
        faded: true,
        paused: true
    }
];


export default function FlipCardComplete() {
  const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([])
  const [activeCard, setActiveCard] = useState<string | null>(null)
  const [tableView, setTableView] = useState<string | null>(null)
  const [flippedCards, setFlippedCards] = useState<string[]>([])

  const handleCardClick = (title: string, paused: boolean) => {
    if (paused) return

    if (!flippedCards.includes(title)) {
      setFlippedCards([...flippedCards, title])
      setSelectedCampaigns([...selectedCampaigns, title])
      setActiveCard(title)
    }
  }

  const handleBackClick = (e: React.MouseEvent, title: string) => {
    e.stopPropagation()
    setFlippedCards(flippedCards.filter((t) => t !== title))
    setSelectedCampaigns(selectedCampaigns.filter((t) => t !== title))
    setActiveCard(null)
    setTableView(null)
  }

  const handleMenuClick = (title: string) => {
    setTableView(tableView === title ? null : title)
  }
console.log(CARDS)
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {CARDS.map((card, idx) => (
        <div key={idx} className="relative h-[500px]" style={{ perspective: "1000px" }}>
          <div
            className={`relative w-full h-full transition-transform duration-700 ease-in-out`}
            style={{
              transformStyle: "preserve-3d",
              transform: flippedCards.includes(card.title) ? "rotateY(180deg)" : "rotateY(0deg)",
            }}
          >
            
            {/* FRONT FACE - Your original card preview */}
            <div
              className={`absolute w-full h-full bg-white rounded-2xl shadow-lg border transition-all duration-300 hover:shadow-2xl hover:scale-105 cursor-pointer
                                ${card.faded ? "opacity-60" : ""}
                                ${card.paused ? "cursor-not-allowed" : "cursor-pointer"}`}
              style={{
                backfaceVisibility: "hidden",
                WebkitBackfaceVisibility: "hidden",
              }}
              onClick={() => handleCardClick(card.title, card.paused)}
            >
              <div className="p-5 flex flex-col items-center h-full justify-center">
                {card.badge && (
                   <div className="absolute top-8 right-[-100px] w-[320px] bg-[#0CAA75] text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
                   {/* Unlock Icon (SVG) */}
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="w-6 h-6"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     strokeWidth={2}
                   >
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       d="M12 11V7a4 4 0 0 1 8 0v4m-8 0h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h2z"
                     />
                   </svg>
           
                   <span className="text-lg tracking-wide">Content Unlocked</span>
                 </div>
                )}
                <div className="w-32 h-32 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-bold text-2xl">
                  {card.title.charAt(0)}
                </div>

                <div className={`mt-4 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
                  {card.title}
                </div>

                <div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
                  {card.tags.map((tag, i) => (
                    <span
                      key={i}
                      className={`rounded-full border-2 bg-white px-3 py-1 flex items-center text-sm font-medium transition-all duration-300 hover:scale-105 ${
                        card.faded
                          ? "text-gray-400 border-gray-300"
                          : "text-gray-700 border-gray-200 hover:border-blue-300"
                      }`}
                      style={tag.color ? { color: tag.color, borderColor: tag.color } : {}}
                    >
                      {tag.text}
                      {tag.extra && (
                        <span className={`ml-1 text-xs ${card.faded ? "text-gray-400" : "text-green-600 font-bold"}`}>
                          {tag.extra}
                        </span>
                      )}
                    </span>
                  ))}
                </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-3 text-center">
                    <div className="text-gray-400 text-sm">Campaign paused</div>
                    <button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">
                      Resume
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* BACK FACE - Your original expanded card view */}
            <div
              className="absolute w-full h-full bg-white rounded-2xl shadow-2xl border"
              style={{
                backfaceVisibility: "hidden",
                WebkitBackfaceVisibility: "hidden",
                transform: "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-4">
                  <div className="flex items-center gap-4">
                    <button
                      onClick={(e) => handleBackClick(e, card.title)}
                      className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
                    >
                      <ArrowLeft className="w-5 h-5 text-gray-600" />
                    </button>
                    <h1 className="text-xl font-bold 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 px-4 ${
                    tableView === card.title
                      ? "opacity-0 translate-y-4 pointer-events-none"
                      : "opacity-100 translate-y-0"
                  }`}
                  style={{ display: tableView !== card.title ? "block" : "none" }}
                >
                  <div className="py-4">
                  <CampaignTracker />
                  </div>
                </div>

                {/* Table View with smooth transitions */}
                <div
                  className={`transition-all duration-700 ease-in-out flex-1 overflow-hidden ${
                    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="overflow-y-auto h-full custom-scrollbar-table">
                    <table className="w-full rounded-lg">
                      <tbody>
                        {[
                          { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" },
                          { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" },
                          { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" },
                          { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" },
                          { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" },
                          { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" },
                          { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" },
                          { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" },
                          { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" },
                          { icon: "🅿️", title: "Pinterest DR 97 DA 95 Traffic 3,989,220" },
                          { icon: "📄", 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">
                            <td className="py-3 pl-2 text-center w-10">{row.icon}</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-[300px] 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>
  )
}
