import MetricCard from "../shared/MetricCard"
import Progress from "../../assets/icons/InProgress.png"
import No from "../../assets/icons/no.png"
import { CircleCheck } from 'lucide-react'
import { Stepper } from "../shared/Stepper"
import Preplextiy from "../../assets/icons/preplextiy.png"
import ChatGPT from "../../assets/icons/gpt.png"
import Gemini from "../../assets/icons/gemini.png"
import Gemini1 from "../../assets/icons/gemini1.png"
import Gemini2 from "../../assets/icons/gemini-border.png"
import Google from "../../assets/icons/Google.png"


function ProgressMetrics() {

    return (
        <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">

            <div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
                <h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
                {/* Example 2: With Completed Status */}
                <div>
                    <Stepper
                        steps={[
                            { number: 1, label: "Building Backlinks", status: "completed" },
                            { number: 2, label: "Indexing", status: "active" },
                            { number: 3, label: "LLM Seeding", status: "inactive" },
                        ]}
                    />
                </div>

            </div>

            <div className="flex flex-col md:flex-row items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8">
                {/* Left section with progress indicators */}
                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 md:pr-10 pr-0">
                    {/* 60% Progress */}
                    <div className="w-[100%]">
                        <div className="flex items-center justify-between">
                            <div className="text-lg 2xl:text-4xl font-bold text-gray-900 mb-1">60%</div>
                            <div className="text-lg 2xl:text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
                        </div>
                        <div className="text-xs 2xl:text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
                        {/* Progress bar */}
                        <div className="w-70 h-3 bg-gray-200 rounded-full overflow-hidden">
                            <div
                                className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
                                style={{ width: "60%" }}
                            ></div>
                        </div>
                    </div>

                </div>

                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-12 lg:gap-6 gap-3">
                    {/* 75% Keyword Visibility */}
                    <div className="w-[30%]">
                        <div className="text-xl 2xl:text-3xl font-bold text-gray-900 mb-1">75%</div>
                        <div className="text-sm text-gray-500">Keyword Visibility</div>
                    </div>

                    <div className="flex items-center gap-3 w-[100%]">
                        <div className="flex items-center gap-3 flex-wrap">
                            <MetricCard
                                img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />

                            <MetricCard
                                img={Preplextiy}
                                tooltipText="Preplextiy" valueChange="+1" size="sm" />

                            <MetricCard
                                img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />

                            <MetricCard
                                img={Gemini} tooltipText="Gemini" valueChange="+1" size="sm" extraStyle="border-2 border-solid border-gray-300 rounded-lg " />


                        </div>
                    </div>
                </div>

                {/* Right section with Chat GPT and metrics */}
                <div className="flex items-center md:w-1/3 w-full">

                    {/* Performance metrics with chart */}
                    <div className="flex items-center gap-4">
                        <div className="w-42 h-24 relative">
                            <svg viewBox="0 0 96 48" className="w-full h-full">
                                <defs>
                                    <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
                                        <stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
                                    </linearGradient>
                                </defs>
                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
                                <circle cx="96" cy="15" r="2" fill="#10B981" />
                            </svg>
                        </div>
                        <div className="text-right">
                            <div className="flex items-center justify-start gap-1 mb-1">
                                <img src={Google} className="w-5 h-5 mr-2" alt="" />
                                <span className="text-lg font-bold text-gray-900">7</span>
                                <span className="text-lg text-green-600 font-medium">+10</span>
                            </div>
                            <div className="flex items-center justify-start gap-1 mb-1">
                            <img src={Google} className="w-5 h-5 mr-2" alt="" />
                                <span className="text-lg font-bold text-gray-900">5</span>
                                <span className="text-lg text-green-600 font-medium">+3</span>
                            </div>
                            <div className="text-md  text-gray-500">Current Rank</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* <ShowDetails /> */}
        </div>
    )
}

export default ProgressMetrics