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

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

export function PerangkatTable({
  items,
  startIndex,
  fallbackBranchName,
  onEdit,
  onDelete,
}: PerangkatTableProps) {
  return (
    <table className="min-w-[960px] 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">
            Kode
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Nama
          </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">
            Platform
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Versi App
          </th>
          <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
            Sync
          </th>
          <th className="w-[84px] bg-neutral-20" />
        </tr>
      </thead>
      <tbody>
        {items.length === 0 ? (
          <tr>
            <td
              colSpan={8}
              className="text-m-regular px-3 py-8 text-center text-neutral-80"
            >
              Belum ada data perangkat.
            </td>
          </tr>
        ) : (
          items.map((item, index) => {
            const branchName =
              item.branchName !== "-"
                ? item.branchName
                : (fallbackBranchName ?? "-");

            return (
              <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 font-mono text-neutral-100">
                  {item.deviceCode}
                </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">
                  {branchName}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.platform}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.appVersion}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.syncStatus}
                </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 perangkat ${item.deviceCode}`}
                      icon={<MaterialIcon name="delete" size={16} />}
                    />
                    <ActionIconButton
                      onClick={() => onEdit(item)}
                      aria-label={`Edit perangkat ${item.deviceCode}`}
                      icon={<MaterialIcon name="edit" size={16} />}
                    />
                  </div>
                </td>
              </tr>
            );
          })
        )}
      </tbody>
    </table>
  );
}