import React, { useState } from 'react';

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.svg"
import { CircleCheck } from 'lucide-react';
import Progress from "../assets/icons/InProgress.svg"
import No from "../assets/icons/NA.svg"
import Share2 from "../assets/icons/Share2.png"
import SharedIcon from '../components/icons/shared-icon';

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-[#4285F4] bg-[#001EE21C]',
        after: "bg-[#4C60E5]",
        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-[#0ea5e9] bg-[#3C87FF2B]',
        after: "bg-[#4285F4]",
        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-[#22c55e] bg-[#f0fdf4]',
        after: "bg-[#34A853]",
        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 Signals Portfolio" />
            <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  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 px-4'>
                        <div className='flex flex-col items-start gap-2'>
                            <span className='text-xl sm:text-2xl font-bold '>CPA Los Angeles</span>
                            <span className='text-gray-500  rounded-md text-sm sm:text-md font-normal'>
                                <span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl 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 border-[#B8D8EB] border-2 rounded-xl mx-1 text-xs sm:text-sm'>4%</b>
                            </span>
                            <span className='flex items-center font-normal   gap-2 text-[#787B91]  sm:text-md'>Content Publishing
                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-1 rounded-xl font-bold border-2 border-[#F7D2DF] 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="DR" subTitle="Show rings" />

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

                            <button className='bg-[#fff]  border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
                               <SharedIcon />

                                <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 border-b border-gray-100 border-solid'>
                        <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600 pr-6'>
                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors '>
                                DR <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4]  transition-colors'>
                                DA <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
                                Traffic <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
                                Indexed <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4]  transition-colors'>
                                Interlinked <SortIcon />
                            </span>
                            <span className='flex items-center cursor-pointer text-[#65677D] 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-1 rounded-lg font-bold text-sm m-2 ${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> */}
                                        <div className={`w-2 h-5 rounded ${cat.after}`}></div>
                                        <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  border-l-0 border-r-0 border last:border-b-0 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-[#4C60E5] hover:text-[#1e40af] font-normal leading-5 text-md' 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>

    )
}