"use client";

import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";
import { Package } from "@/lib/types";
import { getNetwork } from "@/lib/mock-data";
import { getPackageSpecs } from "@/lib/package-specs";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { NetworkBadge } from "./NetworkBadge";
import { Button } from "./ui/Button";
import { cn } from "@/lib/cn";

export function PackageCard({
  pkg,
  index = 0,
}: {
  pkg: Package;
  index?: number;
}) {
  const router = useRouter();
  const { t } = useTranslation();
  const network = getNetwork(pkg.network);
  if (!network) return null;

  const specs = getPackageSpecs(pkg, t);

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay: index * 0.05, ease: [0.22, 1, 0.36, 1] }}
      whileTap={{ scale: 0.985 }}
      onClick={() => router.push(`/packages/${pkg.id}`)}
      className="relative cursor-pointer overflow-hidden rounded-4xl glass"
    >
      {/* network accent stripe */}
      <div className={cn("h-1.5 w-full", network.colorClass)} />

      {pkg.discountPercentage != null && (
        <span className="absolute right-3 top-4 z-10 rounded-full bg-danger px-2.5 py-1 text-[11px] font-bold text-white shadow-sm">
          {pkg.discountPercentage}% {t("common.off")}
        </span>
      )}

      {/* top stub */}
      <div className="flex flex-col gap-4 px-5 pb-4 pt-4">
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-center gap-3">
            <NetworkBadge network={pkg.network} size="md" />
            <div>
              <p className={cn("text-[11px] font-semibold uppercase tracking-wide", network.textColorClass)}>
                {network.label}
              </p>
              <h3 className="font-display text-[15px] font-semibold leading-tight">
                {pkg.name}
              </h3>
            </div>
          </div>
          <span className="rounded-full bg-black/5 px-2.5 py-1 text-[11px] font-medium text-muted dark:bg-white/5">
            {pkg.validity}
          </span>
        </div>

        <div className="grid grid-cols-2 gap-3">
          {specs.map((spec) => {
            const Icon = spec.icon;
            return (
              <div key={spec.key} className="flex items-center gap-2">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-black/5 dark:bg-white/5">
                  <Icon size={15} strokeWidth={2} className="text-muted" />
                </span>
                <div className="min-w-0">
                  <p className="truncate text-[13px] font-semibold leading-tight">
                    {spec.value}
                  </p>
                  <p className="text-[10.5px] text-muted">{spec.label}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* perforation */}
      <div className="voucher-notch border-t-2 border-dashed border-ink/10 dark:border-white/10" />

      {/* bottom stub */}
      <div className="flex items-center justify-between px-5 py-4">
        <div>
          <p className="text-[10.5px] font-medium uppercase tracking-wide text-muted">
            {t("packages.price")}
          </p>
          {pkg.originalPrice != null ? (
            <div className="flex items-baseline gap-2">
              <p className="tnum font-mono text-xl font-semibold text-danger">
                Rs {pkg.price.toLocaleString()}
              </p>
              <p className="tnum font-mono text-xs text-muted line-through">
                Rs {pkg.originalPrice.toLocaleString()}
              </p>
            </div>
          ) : (
            <p className="tnum font-mono text-xl font-semibold">
              Rs {pkg.price.toLocaleString()}
            </p>
          )}
          {pkg.discountAmount != null && (
            <p className="tnum text-[10.5px] font-semibold text-danger">
              Rs {pkg.discountAmount.toLocaleString()} {t("common.off")}
            </p>
          )}
        </div>
        <Button
          size="sm"
          onClick={(e) => {
            e.stopPropagation();
            router.push(`/buy/${pkg.id}`);
          }}
        >
          {t("packages.buy")}
          <ArrowUpRight size={15} strokeWidth={2.5} />
        </Button>
      </div>
    </motion.div>
  );
}