"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { fadeUp, staggerContainer } from "@/lib/motion"
import { RotateCw, FilePlus2, Pencil, Bot } from "lucide-react"

const iconMap: Record<string, React.ComponentType<{ className?: string; style?: React.CSSProperties }>> = {
  "ti-refresh": RotateCw,
  "ti-file-plus": FilePlus2,
  "ti-pencil": Pencil,
}

function RenderIcon({ name, className, style }: { name: string; className?: string; style?: React.CSSProperties }) {
  const Icon = iconMap[name] || Bot
  return <Icon className={className} style={style} />
}

interface LeaderboardItem {
  rank: number | string
  title: string
  category?: string
  industry?: string
  cagr: string
  barWidth?: string
  percentageWidth?: string
}

interface FeedItem {
  icon: string
  color: string
  bg: string
  text?: string
  titleHTML?: string
  meta: string
}

interface FeedData {
  badge: string
  title: string
  description: string
  items: FeedItem[]
  footer?: string
  updatesCountText?: string
}

interface LeaderboardAndFeedData {
  leaderboard: {
    badge: string
    title: string
    description: string
    items: LeaderboardItem[]
  }
  feed?: FeedData
  liveFeed?: FeedData
}

export function LeaderboardAndFeed({ data }: { data: LeaderboardAndFeedData }) {
  if (!data) return null

  const feedData = data.feed || data.liveFeed
  if (!feedData) return null

  return (
    <section className="bg-white py-18 pb-20 border-b border-hairline">
      <div className="max-w-[1240px] mx-auto px-7">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="grid md:grid-cols-[1.1fr_0.9fr] gap-9 items-start"
        >
          {/* Leaderboard Column */}
          <motion.div variants={fadeUp} className="space-y-5">
            <div>
              <div className="inline-flex items-center gap-2 text-[11px] font-bold tracking-wider uppercase text-gold mb-3">
                <span className="w-5 h-[1.5px] bg-gold" />
                {data.leaderboard.badge}
              </div>
              <h2 className="font-display text-[30px] leading-[1.12] tracking-[-0.3px] text-[#0A0D14] m-0">
                {data.leaderboard.title}
              </h2>
              <p className="text-[13.5px] text-[#6B6760] font-light leading-[1.6] mt-2 mb-0">
                {data.leaderboard.description}
              </p>
            </div>

            <div className="border border-hairline rounded-[6px] overflow-hidden bg-white">
              {data.leaderboard.items.map((item, idx) => {
                const isLast = idx === data.leaderboard.items.length - 1
                const industryName = item.category || item.industry || ""
                const progressWidth = item.barWidth || item.percentageWidth || "0%"
                return (
                  <div
                    key={idx}
                    className={`flex items-center gap-3.5 p-[15px_18px] hover:bg-[#F7F6F3] transition-colors duration-150 cursor-pointer ${
                      isLast ? "" : "border-b border-[#F0EDE8]"
                    }`}
                  >
                    <span className="font-display text-lg text-[#C8C3BA] w-5.5">
                      {item.rank}
                    </span>
                    <div className="flex-1">
                      <div className="text-sm font-semibold text-ink mb-1.5">
                        {item.title} <span className="text-[11px] text-[#9A968E] font-normal">&middot; {industryName}</span>
                      </div>
                      <div className="h-1.5 bg-[#F0EDE8] rounded-full overflow-hidden">
                        <div
                          style={{ width: progressWidth }}
                          className="h-full bg-[#1A7340] rounded-full"
                        />
                      </div>
                    </div>
                    <span className="text-sm font-bold text-[#1A7340] w-15 text-right">
                      {item.cagr}
                    </span>
                  </div>
                )
              })}
            </div>
          </motion.div>

          {/* Live Feed Column */}
          <motion.div variants={fadeUp} className="space-y-5">
            <div>
              <div className="inline-flex items-center gap-2 text-[11px] font-bold tracking-wider uppercase text-gold mb-3">
                <span className="w-1.5 h-1.5 rounded-full bg-[#1A7340] animate-pulse shrink-0" />
                {feedData.badge}
              </div>
              <h2 className="font-display text-[30px] leading-[1.12] tracking-[-0.3px] text-[#0A0D14] m-0">
                {feedData.title}
              </h2>
              <p className="text-[13.5px] text-[#6B6760] font-light leading-[1.6] mt-2 mb-0">
                {feedData.description}
              </p>
            </div>

            <div className="border border-hairline rounded-[6px] overflow-hidden bg-white shadow-xs">
              {feedData.items.map((item, idx) => {
                const isLast = idx === feedData.items.length - 1
                const iconColor = item.color.startsWith("#") ? item.color : `#${item.color}`
                return (
                  <div
                    key={idx}
                    className={`flex gap-3.5 p-[15px_18px] hover:bg-[#F7F6F3] transition-colors duration-150 ${
                      isLast ? "" : "border-b border-[#F0EDE8]"
                    }`}
                  >
                    <div
                      style={{ background: item.bg }}
                      className="size-8.5 rounded-[4px] flex items-center justify-center shrink-0"
                    >
                      <RenderIcon
                        name={item.icon}
                        className="size-4"
                        style={{ color: iconColor }}
                      />
                    </div>
                    <div className="flex-1">
                      <div className="text-[13.5px] font-medium text-ink leading-[1.45]">
                        {item.titleHTML ? (
                          <span dangerouslySetInnerHTML={{ __html: item.titleHTML }} />
                        ) : item.text ? (
                          item.text.includes("Green Hydrogen") || item.text.includes("Solid-State Battery") || item.text.includes("Medical-Grade Collagen") ? (
                            <span dangerouslySetInnerHTML={{ __html: item.text.replace("$410B", "<strong>$410B</strong>").replace("Solid-State Battery Market, 2025–2034", "<strong>Solid-State Battery Market, 2025–2034</strong>").replace("Medical-Grade Collagen Market, 2025–2032", "<strong>Medical-Grade Collagen Market, 2025–2032</strong>") }} />
                          ) : (
                            item.text
                          )
                        ) : null}
                      </div>
                      <div className="text-[11.5px] text-[#9A968E] mt-1 font-sans">
                        {item.meta}
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>

            <div className="flex items-center justify-center gap-1.5 mt-3.5 text-[12.5px] text-[#1A7340] font-semibold font-sans">
              <span className="w-1.5 h-1.5 rounded-full bg-[#1A7340] animate-pulse shrink-0" />
              {feedData.footer || feedData.updatesCountText || ""}
            </div>
          </motion.div>

        </motion.div>
      </div>
    </section>
  )
}