"use client";

import { motion } from "framer-motion";

type Item = {
  id: number;
  sku: string;
  name: string;
  category: string;
  unit: string;
  is_active: boolean;
  total_stock: number;
  locations: { location: string; qty: number }[];
};

export function BarangTable({
  data,
  page,
  limit,
  selectedLocation,
}: {
  data: Item[];
  page: number;
  limit: number;
  selectedLocation: string;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.98 }}
      animate={{ opacity: 1, scale: 1 }}
      className="relative rounded-3xl p-[1px] bg-gradient-to-br from-green-200/40 to-transparent"
    >
      {/* DEPTH BACKGROUND */}
      <div className="absolute inset-0 translate-y-6 bg-green-300/20 blur-3xl rounded-3xl" />

      <div className="relative rounded-3xl bg-white/85 backdrop-blur-2xl border border-white/40 shadow-xl overflow-hidden">

        <div className="overflow-x-auto">
          <table className="w-full text-sm">

            {/* ================= HEADER ================= */}
            <thead className="bg-gradient-to-r from-green-50 to-emerald-50 text-gray-600">
              <tr>
                <th className="p-4 text-left w-[60px]">No</th>
                <th className="p-4 text-left">Barang</th>
                <th className="p-4 text-left">Kategori</th>
                <th className="p-4 text-left">SKU</th>
                <th className="p-4 text-right">
                  {selectedLocation
                    ? `Stok (${selectedLocation})`
                    : "Total Stok"}
                </th>
                <th className="p-4 text-center">Status</th>
              </tr>
            </thead>

            {/* ================= BODY ================= */}
            <tbody>
              {data.length === 0 ? (
                <tr>
                  <td colSpan={6} className="text-center p-6 text-gray-400">
                    Tidak ada data
                  </td>
                </tr>
              ) : (
                data.map((item, i) => {
                  const no = (page - 1) * limit + i + 1;

                  const qtySelected = selectedLocation
                    ? item.locations.find(
                        (l) => l.location === selectedLocation
                      )?.qty || 0
                    : item.total_stock;

                  return (
                    <motion.tr
                      key={item.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: i * 0.03 }}
                      className="border-t hover:bg-green-50/60 transition"
                    >
                      {/* NO */}
                      <td className="p-4 text-gray-500">{no}</td>

                      {/* BARANG */}
                      <td className="p-4">
                        <div className="flex flex-col">
                          <span className="font-semibold text-green-900 leading-tight">
                            {item.name}
                          </span>
                          <span className="text-xs text-gray-500">
                            {item.unit}
                          </span>
                        </div>
                      </td>

                      {/* KATEGORI */}
                      <td className="p-4 text-gray-700">
                        {item.category}
                      </td>

                      {/* SKU */}
                      <td className="p-4 text-gray-500 font-mono text-xs">
                        {item.sku}
                      </td>

                      {/* STOCK */}
                      <td className="p-4 text-right font-semibold text-green-700 tabular-nums">
                        {qtySelected}
                      </td>

                      {/* STATUS */}
                      <td className="p-4 text-center">
                        <span
                          className={`px-3 py-1 rounded-full text-xs font-medium
                          ${
                            item.is_active
                              ? "bg-green-100 text-green-700"
                              : "bg-gray-200 text-gray-500"
                          }`}
                        >
                          {item.is_active ? "Active" : "Inactive"}
                        </span>
                      </td>
                    </motion.tr>
                  );
                })
              )}
            </tbody>

          </table>
        </div>
      </div>
    </motion.div>
  );
}