"use client";

import type { TopProduct } from "@/lib/dashboard/mock-data";
import { formatRupiah } from "@/lib/dashboard/mock-data";
import { motion } from "motion/react";
import { MaterialIcon } from "../icons/nav-icons";

type TopProductsProps = {
  products: TopProduct[];
};

function TopProductsEmpty() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
      className="flex min-h-48 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-40 bg-neutral-20/50 px-6 py-10 text-center"
    >
      <div className="flex size-14 items-center justify-center rounded-full bg-neutral-10 text-neutral-70 shadow-sm">
        <MaterialIcon name="restaurant" size={28} />
      </div>
      <div className="flex max-w-sm flex-col gap-1">
        <p className="text-m-medium text-neutral-100">
          Belum ada produk terlaris
        </p>
        <p className="text-s-regular text-neutral-80">
          Data akan muncul setelah ada transaksi pada periode dan cabang yang
          dipilih.
        </p>
      </div>
    </motion.div>
  );
}

export function TopProducts({ products }: TopProductsProps) {
  return (
    <motion.section
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, delay: 0.15, ease: [0.16, 1, 0.3, 1] }}
      className="rounded-lg border border-neutral-40 bg-neutral-10 p-5"
    >
      <div className="mb-5">
        <h2 className="heading-s text-neutral-100">Produk Terlaris</h2>
        <p className="text-m-regular text-neutral-80">
          Menu dengan kontribusi penjualan tertinggi
        </p>
      </div>

      {products.length === 0 ? (
        <TopProductsEmpty />
      ) : (
        <div className="flex flex-col gap-4">
          {products.map((product, index) => (
            <motion.div
              key={`${product.name}-${index}`}
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{
                duration: 0.35,
                delay: 0.2 + index * 0.06,
                ease: [0.16, 1, 0.3, 1],
              }}
              className="flex flex-col gap-2"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-start gap-3">
                  <span className="text-s-medium flex size-7 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600">
                    {index + 1}
                  </span>
                  <div>
                    <p className="text-m-medium text-neutral-100">
                      {product.name}
                    </p>
                    <p className="text-s-regular text-neutral-70">
                      {product.category} · {product.sold} terjual
                    </p>
                  </div>
                </div>
                <p className="text-m-medium shrink-0 tabular-nums text-neutral-100">
                  {formatRupiah(product.revenue)}
                </p>
              </div>

              <div className="flex items-center gap-3 pl-10">
                <div className="h-2 flex-1 overflow-hidden rounded-full bg-neutral-20">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${product.share}%` }}
                    transition={{
                      duration: 0.7,
                      delay: 0.3 + index * 0.06,
                      ease: [0.16, 1, 0.3, 1],
                    }}
                    className="h-full rounded-full bg-gradient-to-r from-secondary-400 to-secondary-600"
                  />
                </div>
                <span className="text-s-medium w-8 text-right tabular-nums text-neutral-80">
                  {product.share}%
                </span>
              </div>
            </motion.div>
          ))}
        </div>
      )}
    </motion.section>
  );
}