import React, { useState } from 'react';

import Vector from "../assets/icons/Vector.png"
import Vector2 from "../assets/icons/Vector2.png"
import BacklinkTypeDropdown from '../components/Portfolio/BacklinkTypeDropdown';
import RoadmapSidebar from '../components/Strategy/RoadmapSidebar';
import HeaderPage from '../components/shared/HeaderPage';
import ContainerPage from '../components/shared/ContainerPage';
import Amazing from "../assets/icons/amazon.png"
import { CircleCheck } from 'lucide-react';
// import Pinterest from "../assets/icons/pinterest.png"
// import AppleMusic from "../assets/icons/apple-music.png"
// import Substack from "../assets/icons/substack.png"
// import Pin from "../assets/icons/pin.png"
import Progress from "../assets/icons/InProgress.png"
import No from "../assets/icons/no.png"
import Share2 from "../assets/icons/Share2.png"
import MetricCard from '../components/shared/MetricCard';

const done = <div className='flex items-center gap-2 w-[100px]'> <CircleCheck className='w-6 h-6 text-[#fff] bg-green-500 rounded-full' /> <span className='text-green-500 font-bold text-md'>Done</span></div>

const progress = <div className='flex items-center gap-2 w-[100px]'>
    <img src={Progress} alt="" className='w-6 h-6' />
    <span className='text-blue-500 font-bold text-md'>In Progress</span></div>
// Category table data

const nA = <div className='flex items-center gap-2'>
    <img src={No} alt="" className='w-6 h-6' />
    <span className='text-gray-500 font-bold text-md'>N/A</span></div>

const categories = [
    {
        name: 'Social',
        color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
        rows: [
            {
                icon: Amazing, title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293',
                indexed: done,
                interlinked: done, date: '9/16/25'
            },
            { icon: Amazing, title: 'Questions to ask your CPA Published on Amazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: nA, date: '9/16/25' },
            { icon: Amazing, title: 'Pinterest DR 97 DA 95 Traffic 3,989,220', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Questions to ask your CPA Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: progress, date: '9/16/25' }
        ]
    },
    {
        name: 'Citation',
        color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
        rows: [
            { icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
            { icon: Amazing, title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' }
        ]
    },
    {
        name: 'Web 2.0',
        color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
        rows: [
            { icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
            { icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Pin DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: progress, date: '9/16/25' }
        ]
    }
];

const pillClass = (val: string) =>
    val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
        : val === 'In Progress' ? 'bg-blue-100 text-blue-700 whitespace-nowrap font-bold'
            : 'bg-gray -100 text-gray-700 font-bold';

function Portfolio() {
    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")


    return (
        <ContainerPage>
            <HeaderPage title="Live Library" />
            <div className='flex flex-col lg:flex-row gap-6 lg:gap-8 mx-auto'>

                <RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />

                {/* Table Section */}
                <section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
                    {/* Title Bar */}
                    <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
                        <div className='flex flex-col items-start gap-2'>
                            <span className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
                            <span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
                                <span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
                            </span>
                            <span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
                            </span>
                        </div>
                        <div className='flex flex-wrap items-center gap-2 sm:gap-3'>
                            <BacklinkTypeDropdown options={
                                {
                                    Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
                                }} title="Backlink Type" subTitle="Show rings:" />

                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />

                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />

                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" />

                            <button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-1 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
                                <img src={Share2} alt="" className='w-4 h-4' />
                                <span>Export</span>
                            </button>
                        </div>
                    </div>

                    {/* Global Filter/Sort Header Row */}
                    <div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
                        <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
                                DR <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
                                DA <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
                                Traffic <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
                                Indexed <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
                                Interlinked <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
                                Date <SortIcon />
                            </span>
                        </div>
                    </div>

                    {/* Tables */}
                    {categories.map((cat, idx) => (
                        <div key={idx} className='mb-8 last:mb-0'>
                            <div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
                                <div className='flex items-center gap-3'>
                                    <div className='flex items-center gap-2'>
                                        {/* <span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span> */}
                                        <span>{cat.name}</span>
                                    </div>
                                    <span className='text-md font-bold bg-white p-1 px-2  rounded-full'>{cat.rows.length}</span>
                                </div>
                            </div>
                            <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
                                <table className='w-full min-w-[800px]'>
                                    <tbody>
                                        {cat.rows.map((row, rIdx) => (
                                            <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
                                                <td className='w-12 px-2 sm:px-4 py-3'>
                                                    <div className='flex items-center gap-2'>
                                                        <img src={row.icon} alt="" className='w-8 h-8 sm:w-10 sm:h-10 rounded-full' />
                                                        <span className='text-xs font-bold w-[40px]'> </span>
                                                    </div>
                                                </td>

                                                <td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}>
                                                    <div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{row.title}</div>
                                                </td>
                                                <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>
                                                <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DA}</td>
                                                <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-semibold text-gray-700 text-sm'>{row.traffic}</td>
                                                <td className='py-3 px-2 sm:px-4 text-center'>
                                                    <div className={`rounded-full text-xs ${pillClass(row.indexed.toString())}`}>{row.indexed}</div>
                                                </td>
                                                <td className='py-3 px-2 text-center w-24 sm:w-28'>
                                                    <span className={`rounded-full text-xs ${pillClass(row.interlinked.toString())}`}>{row.interlinked}</span>
                                                </td>
                                                <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-medium text-gray-700 text-sm'>{row.date}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    ))}
                </section>
            </div>
        </ContainerPage>
    );
}

export default Portfolio;

const SortIcon = () => {
    return (
        <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" className='ml-2'>
            <path d="M10.6944 9.46965C10.6944 9.58746 10.6464 9.70528 10.5744 9.79953L7.52593 13.004C7.38191 13.1689 7.11788 13.1925 6.94985 13.0511C6.92585 13.0276 6.92585 13.0276 6.90184 13.004L3.85342 9.77596C3.78141 9.70528 3.7334 9.58746 3.7334 9.46965C3.7334 9.23403 3.92543 9.02197 4.16546 8.99841H10.2623C10.5024 8.99841 10.6944 9.21047 10.6944 9.46965ZM10.6944 5.89049C10.6944 6.12611 10.5024 6.33817 10.2623 6.36173H4.16546C3.92543 6.36173 3.7334 6.14967 3.7334 5.89049C3.7334 5.77268 3.78141 5.65486 3.85342 5.56062L6.90184 2.35614C7.04587 2.1912 7.3099 2.16764 7.47793 2.30902C7.50193 2.33258 7.50193 2.33258 7.52593 2.35614L10.5744 5.58418C10.6464 5.65486 10.6944 5.77268 10.6944 5.89049Z" fill="#999BAD" />
        </svg>

    )
}