import { useEffect, type FormEvent } from "react";

import { type Employee } from "../../services/api";
import { useAuth } from "../../context/AuthContext";
import Icon from "../../components/common/Icon";
import { useAdminStore } from "../../features/admin/state/adminStore";

import "../../styles/admin.css";

type Notice = {
  tone: "success" | "error" | "info";
  message: string;
};

export function UserManagementPage({
  onNotify,
  onConnectionChange,
}: {
  onNotify: (notice: Notice) => void;
  onConnectionChange: (online: boolean) => void;
}) {
  const { user, currentWorkspace } = useAuth();

  const employees = useAdminStore((s) => s.employees);
  const loading = useAdminStore((s) => s.usersLoading);
  const saving = useAdminStore((s) => s.usersSaving);
  const editing = useAdminStore((s) => s.editingUser);
  const dialogOpen = useAdminStore((s) => s.userDialogOpen);
  const form = useAdminStore((s) => s.userForm);
  const userSearchTerm = useAdminStore((s) => s.userSearchTerm);

  const setEditingUser = useAdminStore((s) => s.setEditingUser);
  const setUserDialogOpen = useAdminStore((s) => s.setUserDialogOpen);
  const setUserForm = useAdminStore((s) => s.setUserForm);
  const setUserSearchTerm = useAdminStore((s) => s.setUserSearchTerm);

  const loadEmployees = useAdminStore((s) => s.loadEmployees);
  const createEmployee = useAdminStore((s) => s.createEmployee);
  const updateEmployee = useAdminStore((s) => s.updateEmployee);
  const deleteEmployee = useAdminStore((s) => s.deleteEmployee);
  const reset = useAdminStore((s) => s.reset);

  const canManage = user?.role_code === "admin";

  const wsId = currentWorkspace?.workspace_id;
  useEffect(() => {
    reset();
    void loadEmployees();
  }, [loadEmployees, reset, wsId]);

  const openCreate = (): void => {
    setEditingUser(null);
    setUserForm({
      username: "",
      display_name: "",
      email: "",
      role_code: "developer",
      password: "",
      status: "active",
    });
    setUserDialogOpen(true);
  };

  const openEdit = (employee: Employee): void => {
    setEditingUser(employee);
    setUserForm({
      username: employee.username,
      display_name: employee.display_name,
      email: employee.email ?? "",
      role_code: employee.role_code,
      password: "",
      status: employee.status,
    });
    setUserDialogOpen(true);
  };

  const submit = async (event: FormEvent): Promise<void> => {
    event.preventDefault();
    if (!form.display_name.trim() || (!editing && !form.username.trim())) return;
    if (!editing && !form.password.trim()) {
      onNotify({ tone: "error", message: "请输入密码" });
      return;
    }
    if (editing) {
      const editingSelf = editing.user_id === user?.user_id;
      const targetIsAdmin = editing.role_code === "admin";
      if (editingSelf && form.status !== editing.status) {
        onNotify({ tone: "error", message: "不能停用当前登录账号" });
        return;
      }
      if (targetIsAdmin && form.status !== editing.status) {
        onNotify({ tone: "error", message: "不能停用或锁定管理员账号" });
        return;
      }
      if (targetIsAdmin && form.role_code !== editing.role_code) {
        onNotify({ tone: "error", message: "不能降级管理员账号" });
        return;
      }
      if (editingSelf && form.role_code !== editing.role_code) {
        onNotify({ tone: "error", message: "不能降级自身管理员角色" });
        return;
      }
    }
    if (form.password && (form.password.length < 8 || form.password.length > 72)) {
      onNotify({ tone: "error", message: "密码长度必须在 8~72 字符之间" });
      return;
    }
    if (editing) {
      await updateEmployee(
        editing,
        {
          display_name: form.display_name.trim(),
          email: form.email.trim() || null,
          role_code: form.role_code,
          status: form.status,
        },
        onNotify,
        onConnectionChange,
      );
    } else {
      await createEmployee(
        {
          username: form.username.trim(),
          display_name: form.display_name.trim(),
          email: form.email.trim() || null,
          role_code: form.role_code,
          password: form.password,
        },
        onNotify,
        onConnectionChange,
      );
    }
  };

  const remove = async (employee: Employee): Promise<void> => {
    if (!window.confirm(`确定从当前 Workspace 删除用户"${employee.display_name}"吗？`)) return;
    await deleteEmployee(employee, onNotify, onConnectionChange);
  };

  return (
    <section className="admin-page">
      <div className="admin-toolbar">
        <div className="admin-toolbar__search">
          <Icon name="search" size={14} />
          <input
            type="text"
            placeholder="请输入用户名"
            className="admin-toolbar__input"
            value={userSearchTerm}
            onChange={(event) => setUserSearchTerm(event.target.value)}
          />
        </div>
        <button
          className="primary-button admin-toolbar__button"
          type="button"
          disabled={!canManage}
          onClick={openCreate}
        >
          <Icon name="plus" size={15} />
          新建用户
        </button>
      </div>

      {!canManage && <div className="admin-readonly">当前为开发人员，只能查看用户列表。</div>}
      <div className="employee-table">
        <div className="employee-table__head"><span>用户</span><span>账号</span><span>角色</span><span>状态</span><span>操作</span></div>
        {loading ? (
          <p className="admin-empty">正在加载用户…</p>
        ) : (
          employees
            .filter((employee) => {
              const term = userSearchTerm.toLowerCase().trim();
              if (!term) return true;
              return (
                employee.display_name.toLowerCase().includes(term) ||
                employee.username.toLowerCase().includes(term) ||
                (employee.email && employee.email.toLowerCase().includes(term))
              );
            })
            .map((employee) => {
              const isProtectedAdmin = employee.role_code === "admin";
              return (
                <div className="employee-row" key={employee.user_id}>
                  <span className="employee-name"><b className="avatar">{employee.display_name.slice(0, 1)}</b><span><strong>{employee.display_name}</strong><small>{employee.email ?? "未设置邮箱"}</small></span></span>
                  <code>{employee.username}</code>
                  <span className={`role-pill is-${employee.role_code}`}>{employee.role_name}</span>
                  <span className={`status-pill is-${employee.status}`}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span>
                  <span className="employee-actions">
                    <button type="button" disabled={!canManage} onClick={() => openEdit(employee)}>编辑</button>
                    <button type="button" className="is-danger" disabled={!canManage || isProtectedAdmin} title={isProtectedAdmin ? "管理员账号不能删除" : "删除"} onClick={() => void remove(employee)}>删除</button>
                  </span>
                </div>
              );
            })
        )}
      </div>

      {dialogOpen && (
        <div className="modal-backdrop">
          <section className="modal modal--compact" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">EMPLOYEE</span>
                <h2>{editing ? "编辑用户" : "添加用户"}</h2>
              </div>
              <button className="icon-button" type="button" onClick={() => setUserDialogOpen(false)}><Icon name="close" /></button>
            </div>
            <form onSubmit={(event) => void submit(event)}>
              <label className="form-field">
                <span>姓名<span className="required">*</span></span>
                <input
                  autoFocus={!editing}
                  value={form.display_name}
                  onChange={(event) => setUserForm({ ...form, display_name: event.target.value })}
                  placeholder="请输入姓名"
                />
              </label>
              <label className="form-field">
                <span>登录账号<span className="required">*</span></span>
                <input
                  disabled={Boolean(editing)}
                  value={form.username}
                  onChange={(event) => setUserForm({ ...form, username: event.target.value })}
                  placeholder="请输入登录账号"
                  autoComplete="username"
                />
              </label>
              {!editing && (
                <label className="form-field">
                  <span>密码<span className="required">*</span></span>
                  <input
                    type="password"
                    autoComplete="new-password"
                    value={form.password}
                    onChange={(event) => setUserForm({ ...form, password: event.target.value })}
                    placeholder="请输入密码（8~72 字符）"
                  />
                </label>
              )}
              <label className="form-field">
                <span>邮箱</span>
                <input
                  type="email"
                  autoComplete="email"
                  value={form.email}
                  onChange={(event) => setUserForm({ ...form, email: event.target.value })}
                  placeholder="请输入邮箱（可选）"
                />
              </label>
              <label className="form-field">
                <span>角色</span>
                <select value={form.role_code} disabled={Boolean(editing) && ((editing as Employee).user_id === user?.user_id || (editing as Employee).role_code === "admin")} onChange={(event) => setUserForm({ ...form, role_code: event.target.value as "admin" | "developer" })}>
                  <option value="developer">开发人员</option>
                  <option value="admin">管理员</option>
                </select>
              </label>
              {editing && (
                <label className="form-field">
                  <span>状态</span>
                  <select value={form.status} disabled={Boolean(editing) && ((editing as Employee).user_id === user?.user_id || (editing as Employee).role_code === "admin")} onChange={(event) => setUserForm({ ...form, status: event.target.value as typeof form.status })}>
                    <option value="active">正常</option>
                    <option value="disabled">停用</option>
                    <option value="locked">锁定</option>
                  </select>
                </label>
              )}
              <div className="modal__footer">
                <button className="secondary-button" type="button" onClick={() => setUserDialogOpen(false)}>取消</button>
                <button className="primary-button" type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
              </div>
            </form>
          </section>
        </div>
      )}
    </section>
  );
}