"use client";

import { BarChart3, Cpu, Users } from "lucide-react";
import { useTranslations } from "next-intl";
import type { PillarData } from "@/data/why-choose-us";

interface PillarCardProps {
  pillar: PillarData;
}

const iconMap = {
  BarChart3,
  Cpu,
  Users,
};

function metricTrendClass(trend: string): string {
  if (trend === "up") {
    return "text-[#FD105E]";
  }
  if (trend === "down") {
    return "text-red-500";
  }
  return "text-white";
}

export function PillarCard({ pillar }: PillarCardProps) {
  const t = useTranslations("whyChooseUs");
  const IconComponent =
    iconMap[pillar.icon as keyof typeof iconMap] || BarChart3;

  return (
    <div className="pillar-card group relative h-full">
      <div className="relative h-full rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-white/30 sm:p-6 md:p-8">
        {/* Gradient background on hover */}
        <div
          className={`absolute inset-0 bg-gradient-to-br ${pillar.color} rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-5`}
        />

        {/* Main content */}
        <div className="main-content relative">
          {/* Icon */}
          <div
            className={`inline-flex rounded-xl bg-gradient-to-br p-3 ${pillar.color} mb-6`}
          >
            <IconComponent className="h-6 w-6 text-white" />
          </div>

          {/* Content */}
          <h3 className="mb-4 font-bold text-white text-xl transition-all duration-300 group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-[#FD105E] group-hover:bg-clip-text group-hover:text-transparent">
            {t(pillar.headlineKey as Parameters<typeof t>[0])}
          </h3>

          <p className="mb-6 text-neutral-300 text-sm leading-relaxed">
            {t(pillar.copyKey as Parameters<typeof t>[0])}
          </p>

          {/* Preview Metrics */}
          <div className="preview-metrics space-y-3">
            {pillar.metrics.slice(0, 2).map((metric) => (
              <div
                className="flex items-center justify-between"
                key={metric.labelKey}
              >
                <span className="text-neutral-500 text-xs">
                  {t(metric.labelKey as Parameters<typeof t>[0])}
                </span>
                <span
                  className={`font-bold text-sm ${metricTrendClass(metric.trend)}`}
                >
                  {metric.value}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Hover overlay with detailed metrics */}
        <div className="detailed-metrics pointer-events-none absolute inset-0 flex translate-y-2 transform flex-col justify-center rounded-2xl border border-white/10 bg-black/95 p-4 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 sm:p-6 md:p-8">
          <h4 className="mb-4 font-bold text-lg text-white">
            {t("detailedMetrics")}
          </h4>
          <div className="space-y-3">
            {pillar.metrics.map((metric, index) => (
              <div
                className="metric-detail border-[#FD105E] border-l-2 pl-4"
                key={metric.labelKey}
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <div className="mb-1 flex items-center justify-between">
                  <span className="font-medium text-sm text-white">
                    {t(metric.labelKey as Parameters<typeof t>[0])}
                  </span>
                  <span
                    className={`font-bold text-lg ${metricTrendClass(metric.trend)}`}
                  >
                    {metric.value}
                  </span>
                </div>
                <span className="text-neutral-400 text-xs">
                  {t(metric.contextKey as Parameters<typeof t>[0])}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}