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

type ManagementUserTableProps = {
  items: User[];
  startIndex: number;
  togglingId: number | null;
  onEdit: (item: User) => void;
  onDelete: (item: User) => void;
  onToggleActive: (item: User, isActive: boolean) => void;
};

function ActiveSwitch({
  active,
  disabled,
  onChange,
}: {
  active: boolean;
  disabled?: boolean;
  onChange: (value: boolean) => void;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={active}
      disabled={disabled}
      onClick={() => onChange(!active)}
      className={`relative h-[21px] w-[38px] rounded-full transition-colors disabled:opacity-60 ${
        active ? "bg-primary-500" : "bg-neutral-40"
      }`}
    >
      <span
        className={`absolute top-[2px] size-[17px] rounded-full bg-neutral-10 transition-transform ${
          active ? "left-[19px]" : "left-[2px]"
        }`}
      />
    </button>
  );
}

export function ManagementUserTable({
  items,
  startIndex,
  togglingId,
  onEdit,
  onDelete,
  onToggleActive,
}: ManagementUserTableProps) {
  return (
    <table className="min-w-[900px] 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">
              Nama Lengkap
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              No Whatsapp
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Username
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Role
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Aktif
            </th>
            <th className="w-[84px] bg-neutral-20" />
          </tr>
        </thead>
        <tbody>
          {items.length === 0 ? (
            <tr>
              <td
                colSpan={7}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Belum ada data user.
              </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.fullName}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.whatsappNumber}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.username}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.roleLabel}
                </td>
                <td className="px-3 py-2">
                  <ActiveSwitch
                    active={item.isActive}
                    disabled={togglingId === item.id}
                    onChange={(isActive) => onToggleActive(item, isActive)}
                  />
                </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 user ${item.fullName}`}
                      icon={<MaterialIcon name="delete" size={16} />}
                    />
                    <ActionIconButton
                      onClick={() => onEdit(item)}
                      aria-label={`Edit user ${item.fullName}`}
                      icon={<MaterialIcon name="edit" size={16} />}
                    />
                  </div>
                </td>
              </tr>
            ))
          )}
        </tbody>
    </table>
  );
}