'use client';

import Dropdown from '@/components/ui/Dropdown';
import Button from '@/components/ui/Button';
import {
  PencilIcon,
  TrashIcon,
  KeyIcon,
} from '@heroicons/react/24/outline';
import type { UserWithAvatar } from './types';

type UserRowActionsProps = {
  user: UserWithAvatar;
  currentUserId: string | null;
  onEdit: () => void;
  onChangePassword: () => void;
  onDelete: () => void;
  isDeleting?: boolean;
  isSavingPassword?: boolean;
};

export default function UserRowActions({
  user,
  currentUserId,
  onEdit,
  onChangePassword,
  onDelete,
  isDeleting = false,
  isSavingPassword = false,
}: UserRowActionsProps) {
  const isCurrentUser =
    !!currentUserId && user.nwkennung === currentUserId;

  return (
    <div className="flex items-center gap-3">
      {/* Desktop / Tablet: Buttons */}
      <div className="hidden sm:flex items-center gap-2">
        <Button
          type="button"
          size="lg"
          variant="secondary"
          icon={<PencilIcon className="size-5" />}
          onClick={onEdit}
        />

        <Button
          type="button"
          size="lg"
          variant="soft"
          tone="indigo"
          icon={<KeyIcon className="size-5" />}
          onClick={onChangePassword}
        />

        {!isCurrentUser && (
          <Button
            type="button"
            size="lg"
            variant="soft"
            tone="rose"
            icon={<TrashIcon className="size-5" />}
            onClick={onDelete}
            disabled={isDeleting}
          />
        )}
      </div>

      {/* Mobile: Dropdown mit denselben Actions */}
      <div className="sm:hidden">
        <Dropdown
          triggerVariant="icon"
          ariaLabel="Weitere Aktionen"
          align="right"
          sections={[
            {
              id: 'main',
              items: [
                {
                  id: 'edit',
                  label: 'Bearbeiten',
                  onClick: onEdit,
                },
                {
                  id: 'change-password',
                  label: isSavingPassword
                    ? 'Passwort …'
                    : 'Passwort ändern',
                  onClick: onChangePassword,
                },
                ...(!isCurrentUser
                  ? [
                      {
                        id: 'delete',
                        label: isDeleting ? 'Lösche …' : 'Löschen',
                        tone: 'danger' as const,
                        onClick: onDelete,
                        disabled: isDeleting,
                      },
                    ]
                  : []),
              ],
            },
          ]}
        />
      </div>
    </div>
  );
}