"use client";

import { motion } from "framer-motion";

type Location = {
  id: number;
  code: string;
  name: string;
  type: "WAREHOUSE" | "STORE" | "TRANSIT";
  address: string;
  total_items: number | string | null; // ✅ lebih fleksibel dari API
};

function getTypeColor(type: Location["type"]) {
  switch (type) {
    case "WAREHOUSE":
      return "bg-green-100 text-green-700";
    case "STORE":
      return "bg-blue-100 text-blue-700";
    case "TRANSIT":
      return "bg-yellow-100 text-yellow-700";
    default:
      return "bg-gray-100 text-gray-600";
  }
}

export function LocationTable({
  data,
  page,
  limit,
}: {
  data: Location[];
  page: number;
  limit: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.98 }}
      animate={{ opacity: 1, scale: 1 }}
      className="relative rounded-3xl p-px bg-linear-to-br from-green-200/40 to-transparent"
    >
      <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-linear-to-r from-green-50 to-emerald-50 text-gray-600">
              <tr>
                <th className="p-4 text-left w-14">No</th>
                <th className="p-4 text-left">Kode</th>
                <th className="p-4 text-left">Nama</th>
                <th className="p-4 text-left">Tipe</th>
                <th className="p-4 text-left">Alamat</th>
                <th className="p-4 text-left">Total Barang</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((loc, i) => {
                  const no = (page - 1) * limit + i + 1;

                  // ✅ SAFE PARSE (anti error dari API)
                  const total = Number(loc.total_items ?? 0);

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

                      <td className="p-4 font-mono text-xs">
                        {loc.code}
                      </td>

                      <td className="p-4 font-semibold text-green-900">
                        {loc.name}
                      </td>

                      <td className="p-4">
                        <span
                          className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(
                            loc.type
                          )}`}
                        >
                          {loc.type}
                        </span>
                      </td>

                      <td className="p-4 text-gray-600">
                        {loc.address || "-"}
                      </td>

                      {/* ✅ TOTAL ITEMS (FIXED) */}
                      <td className="p-4 text-gray-700 font-semibold">
                        {total.toLocaleString()}
                      </td>
                    </motion.tr>
                  );
                })
              )}
            </tbody>

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