'use client';

import Modal from '@/components/ui/Modal';
import type { UserWithAvatar } from './types';

type EditUserModalProps = {
  open: boolean;
  user: UserWithAvatar;
  arbeitsname: string;
  firstName: string;
  lastName: string;
  saving: boolean;
  onArbeitsnameChange: (value: string) => void;
  onFirstNameChange: (value: string) => void;
  onLastNameChange: (value: string) => void;
  onClose: () => void;
  onSubmit: () => void;
};

export default function EditUserModal({
  open,
  user,
  arbeitsname,
  firstName,
  lastName,
  saving,
  onArbeitsnameChange,
  onFirstNameChange,
  onLastNameChange,
  onClose,
  onSubmit,
}: EditUserModalProps) {
  if (!open) return null;

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="User bearbeiten"
      tone="info"
      variant="centered"
      size="md"
      primaryAction={{
        label: saving ? 'Speichere …' : 'Speichern',
        onClick: onSubmit,
        variant: 'primary',
      }}
      secondaryAction={{
        label: 'Abbrechen',
        onClick: onClose,
        variant: 'secondary',
      }}
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmit();
        }}
        className="space-y-3 text-sm"
      >
        <div>
          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
            NW-Kennung *
          </label>
          <input
            type="text"
            readOnly
            className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-2.5 py-1.5 text-sm text-gray-900 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
            value={user.nwkennung}
          />
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
            Arbeitsname *
          </label>
          <input
            type="text"
            required
            className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
            value={arbeitsname}
            onChange={(e) => onArbeitsnameChange(e.target.value)}
          />
        </div>

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <div>
            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
              Vorname *
            </label>
            <input
              type="text"
              required
              className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
              value={firstName}
              onChange={(e) => onFirstNameChange(e.target.value)}
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
              Nachname *
            </label>
            <input
              type="text"
              required
              className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
              value={lastName}
              onChange={(e) => onLastNameChange(e.target.value)}
            />
          </div>
        </div>
      </form>
    </Modal>
  );
}