import type { AdminProductRow } from "../_lib/types";

export type ProductsTableVisibleCols = {
  brand: boolean;
  platform: boolean;
  role: boolean;
  caliber: boolean;
  import: boolean;
  flags: boolean;
  updated: boolean;
};

export default function ProductsTable({
  rows,
  loading,
  selected,
  onToggleAll,
  onToggleOne,
  allOnPageSelected,
  visibleCols,
}: {
  rows: AdminProductRow[];
  loading: boolean;
  selected: Set<number>;
  onToggleAll: () => void;
  onToggleOne: (id: number) => void;
  allOnPageSelected: boolean;
  visibleCols: ProductsTableVisibleCols;
}) {
  // Compute colSpan based on visible columns + 2 sticky columns (checkbox + product)
  const colSpan =
    2 +
    (visibleCols.brand ? 1 : 0) +
    (visibleCols.platform ? 1 : 0) +
    (visibleCols.role ? 1 : 0) +
    (visibleCols.caliber ? 1 : 0) +
    (visibleCols.import ? 1 : 0) +
    (visibleCols.flags ? 1 : 0) +
    (visibleCols.updated ? 1 : 0);

  return (
    <div className="overflow-x-auto max-w-full min-w-0 rounded-md border border-zinc-800">
      <table className="w-full min-w-[1100px] text-sm">
        <thead className="bg-zinc-950">
          <tr className="text-left">
            {/* Sticky checkbox col */}
            <th className="w-10 px-3 py-2 sticky left-0 z-30 bg-zinc-950">
              <input
                type="checkbox"
                checked={allOnPageSelected}
                onChange={onToggleAll}
              />
            </th>

            {/* Sticky product col */}
            <th className="px-3 py-2 sticky left-10 z-20 bg-zinc-950 shadow-[1px_0_0_0_rgba(255,255,255,0.08)] w-[480px] max-w-[480px]">
              Product
            </th>

            {visibleCols.brand && <th className="px-3 py-2">Brand</th>}
            {visibleCols.platform && <th className="px-3 py-2">Platform</th>}
            {visibleCols.role && <th className="px-3 py-2">Role</th>}
            {visibleCols.caliber && <th className="px-3 py-2">Caliber</th>}
            {visibleCols.import && <th className="px-3 py-2">Import</th>}
            {visibleCols.flags && <th className="px-3 py-2">Flags</th>}
            {visibleCols.updated && <th className="px-3 py-2">Updated</th>}
          </tr>
        </thead>

        <tbody>
          {loading && (
            <tr>
              <td colSpan={colSpan} className="px-3 py-6 text-center opacity-70">
                Loading…
              </td>
            </tr>
          )}

          {!loading && rows.length === 0 && (
            <tr>
              <td colSpan={colSpan} className="px-3 py-6 text-center opacity-70">
                No results.
              </td>
            </tr>
          )}

          {!loading &&
            rows.map((row) => (
              <tr
                key={row.id}
                className="border-t border-zinc-900 hover:bg-zinc-950/40"
              >
                {/* Sticky checkbox */}
                <td className="px-3 py-2 sticky left-0 z-30 bg-black">
                  <input
                    type="checkbox"
                    checked={selected.has(row.id)}
                    onChange={() => onToggleOne(row.id)}
                  />
                </td>

                {/* Sticky product */}
                <td className="px-3 py-2 sticky left-10 z-20 bg-black shadow-[1px_0_0_0_rgba(255,255,255,0.08)] w-[480px] max-w-[480px]">
                  <div className="flex items-center gap-3">
                    {row.mainImageUrl ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        src={row.mainImageUrl}
                        alt=""
                        className="h-10 w-10 rounded object-cover border border-zinc-800"
                      />
                    ) : (
                      <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
                    )}

                    <div className="min-w-0">
                      <div className="font-medium whitespace-normal break-words leading-snug">
                        {row.name}
                      </div>
                      <div className="truncate text-xs opacity-60">#{row.id}</div>
                      {row.adminNote ? (
                        <div className="truncate text-xs opacity-60">
                          📝 {row.adminNote}
                        </div>
                      ) : null}
                    </div>
                  </div>
                </td>

                {visibleCols.brand && (
                  <td className="px-3 py-2">{row.brandName ?? "—"}</td>
                )}

                {visibleCols.platform && (
                  <td className="px-3 py-2">{row.platform ?? "—"}</td>
                )}

                {visibleCols.role && (
                  <td className="px-3 py-2">{row.partRole ?? "—"}</td>
                )}

                {visibleCols.caliber && (
                  <td className="px-3 py-2">
                    <div className="flex flex-col">
                      <div className="text-sm">
                        {row.caliber ?? "—"}
                        {row.caliberLocked ? (
                          <span className="ml-2 rounded border border-zinc-700 px-1.5 py-0.5 text-[10px] opacity-80">
                            LOCK
                          </span>
                        ) : null}
                      </div>
                      {row.caliberGroup ? (
                        <div className="text-xs opacity-60">
                          {row.caliberGroup}
                        </div>
                      ) : null}
                    </div>
                  </td>
                )}

                {visibleCols.import && (
                  <td className="px-3 py-2">{row.importStatus ?? "—"}</td>
                )}

                {visibleCols.flags && (
                  <td className="px-3 py-2">
                    <div className="flex flex-wrap gap-1 text-xs">
                      {row.visibility === "HIDDEN" ? (
                        <span className="rounded border border-zinc-700 px-2 py-0.5">
                          HIDDEN
                        </span>
                      ) : null}
                      {row.status !== "ACTIVE" ? (
                        <span className="rounded border border-zinc-700 px-2 py-0.5">
                          {row.status}
                        </span>
                      ) : null}
                      {row.builderEligible === false ? (
                        <span className="rounded border border-zinc-700 px-2 py-0.5">
                          NO_BUILDER
                        </span>
                      ) : null}
                      {row.adminLocked ? (
                        <span className="rounded border border-zinc-700 px-2 py-0.5">
                          LOCKED
                        </span>
                      ) : null}
                    </div>
                  </td>
                )}

                {visibleCols.updated && (
                  <td className="px-3 py-2 text-xs opacity-70">
                    {row.updatedAt ?? "—"}
                  </td>
                )}
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}