"use client";

import { formatNumber } from "@/app/components/formatNumber";

type Props = {
  items: any[];
};

export default function StockOpnameCompareTable({ items }: Props) {
  return (
    <div className="w-full overflow-x-auto">
        <table className="w-full bg-white rounded-xl overflow-hidden">
        <thead>
            <tr className="bg-slate-100 text-left">
            <th>No</th>
            <th className="p-3">SKU</th>
            <th>Nama</th>
            <th>System</th>
            <th>Opname</th>
            <th>Selisih</th>
            </tr>
        </thead>

        <tbody>
            {items.map((i: any, idx: number) => {
            const isNewFromOpname =
                i.system_qty === 0 && i.opname_qty > 0;

            const isMissingInOpname =
                i.system_qty > 0 && i.opname_qty === 0;

            const isMoreThanSystem =
                i.opname_qty > i.system_qty && i.system_qty > 0;

            let rowClass = "border-t transition";

            if (isNewFromOpname) {
                rowClass += " bg-sky-50 hover:bg-sky-100";
            } else if (isMissingInOpname) {
                rowClass += " bg-red-50 hover:bg-red-100";
            } else if (isMoreThanSystem) {
                rowClass += " bg-amber-50 hover:bg-amber-100";
            }

            return (
                <tr key={i.item_id} className={rowClass}>
                <td className="p-3">{idx + 1}</td>
                <td className="p-3 font-medium">{i.sku}</td>
                <td className="p-3">{i.name}</td>
                <td className="p-3">{formatNumber(i.system_qty)}</td>
                <td className="p-3">{formatNumber(i.opname_qty)}</td>
                <td
                    className={`p-3 font-bold ${
                    i.variance === 0
                        ? "text-emerald-600"
                        : isNewFromOpname
                        ? "text-sky-600"
                        : isMissingInOpname
                        ? "text-red-600"
                        : "text-amber-700"
                    }`}
                >
                    {formatNumber(i.variance)}
                </td>
                </tr>
            );
            })}
        </tbody>
        </table>
    </div>
  );
}