"use client";

/**
 * Модалка изменения сотрудника (#2556, эпик #2549) — месячная квота + (опц.)
 * сброс пароля. Один PATCH-запрос `/api/v1/team/employees/{id}` — backend
 * принимает `monthly_limit` и `new_password` в одном теле (см.
 * `app/api/v1/team.py::update_employee`), поэтому оба поля живут в одной
 * форме вместо двух раздельных round-trip'ов.
 *
 * Явная установка `monthly_limit` ВСЕГДА сбрасывает `unlimited=false` на
 * бэкенде (см. `_upsert_quota_override`) — предупреждаем об этом в тексте,
 * если у сотрудника сейчас безлимит.
 */

import { useState } from "react";
import type { FormEvent } from "react";

import type { Employee, UpdateEmployeeInput } from "@/lib/team-api";
import { teamErrorMessage, useUpdateEmployee } from "@/lib/team-api";

interface QuotaEditorProps {
  employee: Employee;
  onClose: () => void;
}

export function QuotaEditor({ employee, onClose }: QuotaEditorProps) {
  const [monthlyLimit, setMonthlyLimit] = useState(
    employee.quota.unlimited ? "" : String(employee.quota.limit),
  );
  const [newPassword, setNewPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  const updateMutation = useUpdateEmployee();

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (updateMutation.isPending) return;

    const patch: UpdateEmployeeInput = {};

    const trimmedLimit = monthlyLimit.trim();
    if (trimmedLimit !== "") {
      const parsed = Number(trimmedLimit);
      if (Number.isFinite(parsed) && parsed >= 1) {
        patch.monthly_limit = Math.trunc(parsed);
      }
    }

    if (newPassword.length > 0) {
      patch.new_password = newPassword;
    }

    if (Object.keys(patch).length === 0) {
      onClose();
      return;
    }

    updateMutation.mutate(
      { employeeId: employee.id, patch },
      { onSuccess: onClose },
    );
  }

  return (
    <div className="team-modal-backdrop" role="presentation" onClick={onClose}>
      <form
        className="team-modal"
        role="dialog"
        aria-modal="true"
        aria-label={`Изменить сотрудника ${employee.username}`}
        onClick={(e) => e.stopPropagation()}
        onSubmit={handleSubmit}
      >
        <h2>Изменить сотрудника</h2>
        <p className="team-modal-subtitle">{employee.username}</p>

        {updateMutation.isError ? (
          <p role="alert" className="team-form-error">
            {teamErrorMessage(updateMutation.error)}
          </p>
        ) : null}

        <div className="team-field">
          <label htmlFor="team-quota-limit">Месячный лимит оценок</label>
          <input
            id="team-quota-limit"
            type="number"
            min={1}
            step={1}
            value={monthlyLimit}
            onChange={(e) => setMonthlyLimit(e.target.value)}
            disabled={updateMutation.isPending}
          />
          <p className="team-field-hint">
            Сейчас использовано {employee.quota.used}
            {employee.quota.unlimited
              ? " · без лимита"
              : ` из ${employee.quota.limit} (осталось ${employee.quota.remaining})`}
            {employee.quota.unlimited
              ? ". Заполнение поля снимет безлимитный статус."
              : ""}
          </p>
        </div>

        <div className="team-field team-password-row">
          <label htmlFor="team-quota-password">Новый пароль (необязательно)</label>
          <input
            id="team-quota-password"
            type={showPassword ? "text" : "password"}
            autoComplete="new-password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            disabled={updateMutation.isPending}
          />
          <button
            type="button"
            className="team-password-toggle"
            onClick={() => setShowPassword((v) => !v)}
            tabIndex={-1}
          >
            {showPassword ? "Скрыть" : "Показать"}
          </button>
          <p className="team-field-hint">
            Смена пароля завершает все текущие сессии сотрудника.
          </p>
        </div>

        <div className="team-modal-actions">
          <button
            type="button"
            className="team-btn-secondary"
            onClick={onClose}
            disabled={updateMutation.isPending}
          >
            Отмена
          </button>
          <button type="submit" className="team-btn-primary" disabled={updateMutation.isPending}>
            {updateMutation.isPending ? "Сохраняем…" : "Сохранить"}
          </button>
        </div>
      </form>
    </div>
  );
}
