import Link from "next/link";
import { ArrowRight } from "lucide-react";
import type { DashboardCard } from "@/types/dashboard";

const TONE_CLASS: Record<DashboardCard["tone"], string> = {
  positive: "text-emerald-600",
  negative: "text-rose-600",
  neutral: "text-slate-500",
};

function getToneClass(tone: DashboardCard["tone"]): string {
  return TONE_CLASS[tone] ?? TONE_CLASS.neutral;
}

const CARD_ANIMATION_DELAY_MS = 80;

interface DashboardCardsProps {
  cards: DashboardCard[];
}

export function DashboardCards({ cards }: DashboardCardsProps) {
  return (
    <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1.5 sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 sm:overflow-visible sm:pb-0">
      {cards.map((card, index) => (
        <DashboardCardTile
          key={card.key}
          card={card}
          animationDelayMs={index * CARD_ANIMATION_DELAY_MS}
        />
      ))}
    </div>
  );
}

interface DashboardCardTileProps {
  card: DashboardCard;
  animationDelayMs: number;
}

function DashboardCardTile({ card, animationDelayMs }: DashboardCardTileProps) {
  const Icon = card.icon;
  const toneClass = getToneClass(card.tone);

  return (
    <div
      className={`group relative flex min-w-[240px] snap-center flex-col overflow-hidden rounded-2xl border border-white/20 bg-white/80 backdrop-blur-xl px-5 py-4 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:bg-white/90 animate-[fadeIn_0.5s_ease-in-out,slideUp_0.5s_ease-in-out] ${card.accent.hover}`}
      style={{ animationDelay: `${animationDelayMs}ms`, animationFillMode: "both" }}
    >
      {/* Enhanced decorative blobs with glassmorphism */}
      <div className={`absolute -right-12 -top-12 h-28 w-28 rounded-full ${card.accent.halo} blur-2xl transition-all duration-700 group-hover:scale-150 opacity-60`} />
      <div className={`absolute -bottom-16 -left-10 h-28 w-28 rounded-full ${card.accent.glow} blur-2xl transition-all duration-700 group-hover:scale-150 opacity-40`} />
      
      {/* Glassmorphism overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/40 to-transparent pointer-events-none" />

      {/* Header: label + icon */}
      <div className="relative z-10 flex items-start justify-between">
        <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-500/80">
          {card.title}
        </p>
        <span className={`inline-flex h-8 w-8 items-center justify-center rounded-xl shadow-md transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg ${card.accent.icon}`}>
          <Icon className="h-4 w-4" />
        </span>
      </div>

      {/* Metric */}
      <div className="relative z-10 mt-2.5 flex items-baseline gap-1.5">
        <h3 className="text-xl font-bold text-slate-900 tabular-nums">{card.metric}</h3>
        <span className="text-[10px] font-semibold uppercase tracking-wide text-slate-500/70">
          {card.currency}
        </span>
      </div>

      {card.description && (
        <p className="relative z-10 mt-1 text-xs text-slate-600/80">{card.description}</p>
      )}
      {card.delta && (
        <p className={`relative z-10 mt-0.5 text-xs font-medium ${toneClass}`}>{card.delta}</p>
      )}

      {/* Breakdown */}
      {card.breakdown.length > 0 && (
        <div className="relative z-10 mt-3 border-t border-slate-200/50 pt-3 space-y-1.5">
          {card.breakdown.map((item) => (
            <div key={item.label} className="flex items-center justify-between">
              <span className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500/70">
                {item.label}
              </span>
              <span className="text-xs font-bold text-slate-800 tabular-nums">{item.value}</span>
            </div>
          ))}
        </div>
      )}

      {/* View link */}
      <Link
        href={card.href}
        className="relative z-10 mt-auto inline-flex items-center gap-1 pt-4 text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500/70 transition-all duration-200 hover:gap-2 group-hover:text-slate-700"
      >
        View details
        <ArrowRight className="h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5" />
      </Link>
    </div>
  );
}