import type { Printer } from "@/lib/api/printers";
import { MaterialIcon } from "../icons/nav-icons";
import { ActionIconButton } from "../ui/button";

const TYPE_LABELS: Record<string, string> = {
  network: "Network",
  bluetooth: "Bluetooth",
};

type PrinterTableProps = {
  items: Printer[];
  startIndex: number;
  fallbackBranchName?: string;
  onEdit: (item: Printer) => void;
  onDelete: (item: Printer) => void;
};

function formatType(type: string) {
  if (type === "-") return "-";
  return TYPE_LABELS[type.toLowerCase()] ?? type;
}

export function PrinterTable({
  items,
  startIndex,
  fallbackBranchName,
  onEdit,
  onDelete,
}: PrinterTableProps) {
  return (
    <table className="min-w-[1080px] w-full border-collapse">
      <thead>
        <tr className="overflow-hidden rounded-md">
          <th className="text-m-medium w-10 bg-neutral-20 px-3 py-2 text-center text-neutral-100">
            #
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Cabang
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Stand
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Nama Printer
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            IP / MAC Address
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Tipe
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Posisi
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Keterangan
          </th>
          <th className="w-[84px] bg-neutral-20" />
        </tr>
      </thead>
      <tbody>
        {items.length === 0 ? (
          <tr>
            <td
              colSpan={9}
              className="text-m-regular px-3 py-8 text-center text-neutral-80"
            >
              Belum ada data printer.
            </td>
          </tr>
        ) : (
          items.map((item, index) => (
            <tr
              key={item.id}
              className="border-b border-neutral-20 last:border-0"
            >
              <td className="text-m-regular px-3 py-2 text-center text-neutral-100">
                {startIndex + index + 1}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.branchName !== "-"
                  ? item.branchName
                  : (fallbackBranchName ?? "-")}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.standName}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.name}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.ip}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {formatType(item.type)}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.position}
              </td>
              <td className="text-m-regular px-3 py-2 text-neutral-100">
                {item.description}
              </td>
              <td className="px-3 py-2">
                <div className="flex items-center justify-center gap-1">
                  <ActionIconButton
                    variant="danger"
                    onClick={() => onDelete(item)}
                    aria-label={`Hapus printer ${item.name}`}
                    icon={<MaterialIcon name="delete" size={16} />}
                  />
                  <ActionIconButton
                    onClick={() => onEdit(item)}
                    aria-label={`Edit printer ${item.name}`}
                    icon={<MaterialIcon name="edit" size={16} />}
                  />
                </div>
              </td>
            </tr>
          ))
        )}
      </tbody>
    </table>
  );
}