"use client";

import { motion } from "framer-motion";

/* ================= TYPES ================= */
type MovementType =
  | "IN"
  | "OUT"
  | "TRANSFER_IN"
  | "TRANSFER_OUT"
  | "ADJUSTMENT";

type Movement = {
  id: number;
  item_name: string;
  sku: string;
  location: string;
  movement_type: MovementType;
  quantity: number;
  reference_type: string;
  reference_id: number;
  created_by: string;
  created_at: string;
};

/* ================= HELPERS ================= */
function getColor(type: MovementType) {
  if (type === "IN") return "bg-green-100 text-green-700";
  if (type === "OUT") return "bg-red-100 text-red-700";
  if (type.includes("TRANSFER")) return "bg-blue-100 text-blue-700";
  return "bg-yellow-100 text-yellow-700";
}

function getArrow(type: MovementType) {
  if (type === "IN") return "⬆️";
  if (type === "OUT") return "⬇️";
  if (type === "TRANSFER_IN") return "➡️";
  if (type === "TRANSFER_OUT") return "⬅️";
  return "⚖️";
}

export function MutasiTable({
  data,
  page,
  limit,
}: {
  data: Movement[];
  page: number;
  limit: number;
}) {
  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"
    >
      <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">

            <thead className="bg-gradient-to-r from-green-50 to-emerald-50 text-gray-600">
              <tr>
                <th className="p-4 w-14 text-left">No</th>
                <th className="p-4 text-left">Item</th>
                <th className="p-4 text-left">Lokasi</th>
                <th className="p-4 text-center">Tipe</th>
                <th className="p-4 text-right">Qty</th>
                <th className="p-4 text-left">Referensi</th>
                <th className="p-4 text-left">User</th>
                <th className="p-4 text-left">Tanggal</th>
              </tr>
            </thead>

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

                  return (
                    <motion.tr
                      key={m.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">
                        <div className="font-semibold text-green-900">
                          {m.item_name}
                        </div>
                        <div className="text-xs text-gray-500">{m.sku}</div>
                      </td>

                      <td className="p-4 text-gray-700">{m.location}</td>

                      <td className="p-4 text-center">
                        <span
                          className={`px-3 py-1 rounded-full text-xs font-medium ${getColor(
                            m.movement_type
                          )}`}
                        >
                          {getArrow(m.movement_type)} {m.movement_type}
                        </span>
                      </td>

                      <td className="p-4 text-right font-semibold tabular-nums">
                        {m.quantity.toLocaleString("id-ID")}
                      </td>

                      <td className="p-4 text-xs text-gray-600">
                        {m.reference_type} #{m.reference_id}
                      </td>

                      <td className="p-4">{m.created_by}</td>

                      <td className="p-4 text-gray-500 whitespace-nowrap">
                        {new Date(m.created_at).toLocaleString("id-ID")}
                      </td>
                    </motion.tr>
                  );
                })
              )}
            </tbody>

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