"use client";

import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
import { CirclePause, KeyRound, Loader2, Pencil, Plus, RefreshCw, Save, Search, Trash2, UserCheck, UserPlus, UserX } from "lucide-react";
import { crossfadeIn, pulseFeedback, revealChildren, runScopedMotion } from "@/lib/ui/motion";

type OrganizationInfo = {
  organizationId: string;
  organizationName: string;
};

type OrganizationGroupInfo = {
  groupId: string;
  groupName: string;
};

type OrganizationRoleInfo = {
  roleId: string;
  roleName: string;
};

type OrganizationMemberInfo = {
  memberId: string;
  memberName: string;
  memberStatus: string;
  memberPhone: string;
  organizationId: string;
  memberRoleId?: string;
  memberRoleName?: string;
  memberGroupId?: string;
  memberGroupName?: string;
  memberUserId?: string;
};

type PageResult<T> = {
  records: T[];
  total: number;
  size: number;
  current: number;
  pages: number;
};

type AccountPayload = {
  configured: boolean;
  missing: string[];
  staffConfigured: boolean;
  staffMissing: string[];
  selectedOrganizationId: string;
  organizations: OrganizationInfo[];
  groups: OrganizationGroupInfo[];
  roles: OrganizationRoleInfo[];
  members: PageResult<OrganizationMemberInfo>;
  warnings?: string[];
  memberListAvailable?: boolean;
  passwordManagementAvailable: boolean;
};

type MemberForm = {
  organizationId: string;
  username: string;
  memberName: string;
  memberPhone: string;
  initialPassword: string;
  mustChangePassword: boolean;
  roleId: string;
  groupId: string;
};

type DepartmentForm = {
  groupName: string;
  groupDesc: string;
};

const blankForm: MemberForm = {
  organizationId: "",
  username: "",
  memberName: "",
  memberPhone: "",
  initialPassword: "",
  mustChangePassword: true,
  roleId: "",
  groupId: ""
};

const blankDepartmentForm: DepartmentForm = {
  groupName: "",
  groupDesc: ""
};

const STATUS_OPTIONS = [
  { value: "", label: "全部状态" },
  { value: "0", label: "在岗" },
  { value: "1", label: "休假" },
  { value: "2", label: "停用" }
];

export function AccountManager() {
  const [payload, setPayload] = useState<AccountPayload | null>(null);
  const [organizationId, setOrganizationId] = useState("");
  const [status, setStatus] = useState("");
  const [query, setQuery] = useState("");
  const [draftQuery, setDraftQuery] = useState("");
  const [pageNum, setPageNum] = useState(1);
  const [form, setForm] = useState<MemberForm>(blankForm);
  const [departmentForm, setDepartmentForm] = useState<DepartmentForm>(blankDepartmentForm);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [creatingGroup, setCreatingGroup] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const managerRef = useRef<HTMLDivElement | null>(null);
  const listRef = useRef<HTMLElement | null>(null);
  const feedbackRef = useRef<HTMLDivElement | null>(null);

  const selectedOrganizationId = organizationId || payload?.selectedOrganizationId || "";
  const members = payload?.members.records || [];
  const total = payload?.members.total || 0;
  const pages = payload?.members.pages || 0;
  const memberListAvailable = payload?.memberListAvailable !== false;
  const warnings = payload?.warnings || [];
  const canSubmit = Boolean(payload?.configured && selectedOrganizationId && form.memberName.trim() &&
    (editingId || (payload.staffConfigured && form.memberPhone.trim())) &&
    selectedRoleId(payload, form) && selectedGroupId(payload, form));

  const currentOrganization = useMemo(() => {
    return payload?.organizations.find((item) => item.organizationId === selectedOrganizationId);
  }, [payload?.organizations, selectedOrganizationId]);

  useEffect(() => {
    void loadAccounts();
  }, [organizationId, pageNum, query, status]);

  useEffect(() => {
    return runScopedMotion(managerRef, (scope) => revealChildren(scope));
  }, []);

  useEffect(() => {
    crossfadeIn(listRef.current);
  }, [members.length, pageNum, query, status, selectedOrganizationId]);

  useEffect(() => {
    pulseFeedback(feedbackRef.current);
  }, [error, message]);

  async function loadAccounts() {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({
        pageNum: String(pageNum),
        pageSize: "10"
      });
      if (organizationId) params.set("organizationId", organizationId);
      if (query) params.set("memberName", query);
      if (status) params.set("memberStatus", status);
      const response = await fetch(`/api/admin/accounts?${params.toString()}`, { cache: "no-store" });
      const nextPayload = await response.json() as AccountPayload & { error?: string };
      if (!response.ok) throw new Error(nextPayload.error || "读取账号数据失败");
      setPayload(nextPayload);
      syncSelectedOrganization(nextPayload);
      syncFormDefaults(nextPayload);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(false);
    }
  }

  function syncSelectedOrganization(nextPayload: AccountPayload) {
    if (!organizationId && nextPayload.selectedOrganizationId) {
      setOrganizationId(nextPayload.selectedOrganizationId);
    }
  }

  function syncFormDefaults(nextPayload: AccountPayload) {
    setForm((current) => {
      const nextOrganizationId = nextPayload.selectedOrganizationId || current.organizationId;
      return {
        ...current,
        organizationId: nextOrganizationId,
        roleId: nextPayload.roles.some((role) => role.roleId === current.roleId)
          ? current.roleId
          : nextPayload.roles[0]?.roleId || "",
        groupId: nextPayload.groups.some((group) => group.groupId === current.groupId)
          ? current.groupId
          : nextPayload.groups[0]?.groupId || ""
      };
    });
  }

  function submitSearch(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setPageNum(1);
    setQuery(draftQuery.trim());
  }

  async function submitMember(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const roleId = selectedRoleId(payload, form);
      const groupId = selectedGroupId(payload, form);
      const body = editingId ? {
        memberId: editingId,
        memberName: form.memberName.trim(),
        roleId,
        groupId
      } : {
        organizationId: selectedOrganizationId,
        username: form.username.trim(),
        phone: form.memberPhone.trim(),
        name: form.memberName.trim(),
        initialPassword: form.initialPassword.trim(),
        mustChangePassword: form.mustChangePassword,
        memberName: form.memberName.trim(),
        memberPhone: form.memberPhone.trim(),
        roleId,
        groupId
      };
      const response = await fetch("/api/admin/accounts", {
        method: editingId ? "PATCH" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.error || "保存成员失败");
      const initialPassword = result.user?.initialPassword;
      const successMessage = editingId
        ? "成员信息已更新。"
        : initialPassword
          ? `成员已创建，初始密码：${initialPassword}`
          : "成员已创建。";
      setMessage(!editingId && !memberListAvailable
        ? `${successMessage} 成员列表暂不可用，上游授权后可在列表看到。`
        : successMessage);
      resetForm();
      await loadAccounts();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  async function changeStatus(memberId: string, memberStatus: "0" | "1" | "2") {
    await mutateMember("PUT", { memberId, memberStatus }, "成员状态已更新。");
  }

  async function removeMember(memberId: string) {
    if (!window.confirm("确定删除这个成员？")) return;
    await mutateMember("DELETE", { memberId }, "成员已删除。");
  }

  async function resetPassword(member: OrganizationMemberInfo) {
    if (!member.memberUserId) {
      setError("该成员还没有绑定企业端用户，不能重置密码。");
      return;
    }
    const newPassword = window.prompt(`请输入 ${member.memberName} 的新密码`);
    if (!newPassword) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const response = await fetch("/api/admin/accounts/password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId: member.memberUserId,
          newPassword,
          mustChangePassword: true
        })
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.error || "重置密码失败");
      setMessage("密码已重置，用户下次登录需要修改密码。");
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  async function mutateMember(method: "PUT" | "DELETE", body: Record<string, string>, successMessage: string) {
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const response = await fetch("/api/admin/accounts", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.error || "成员操作失败");
      setMessage(successMessage);
      await loadAccounts();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  async function submitGroup(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!selectedOrganizationId) {
      setError("请先选择组织。");
      return;
    }
    const groupName = departmentForm.groupName.trim();
    if (!groupName) {
      setError("部门名称不能为空。");
      return;
    }
    setCreatingGroup(true);
    setError(null);
    setMessage(null);
    try {
      const response = await fetch("/api/admin/accounts/groups", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          organizationId: selectedOrganizationId,
          groupName,
          groupDesc: departmentForm.groupDesc.trim()
        })
      });
      const result = await response.json() as { error?: string; group?: OrganizationGroupInfo | null };
      if (!response.ok) throw new Error(result.error || "创建部门失败");
      setDepartmentForm(blankDepartmentForm);
      await loadAccounts();
      if (result.group?.groupId) {
        setForm((current) => ({ ...current, groupId: result.group?.groupId || current.groupId }));
      }
      setMessage("部门已创建。");
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setCreatingGroup(false);
    }
  }

  function editMember(member: OrganizationMemberInfo) {
    setEditingId(member.memberId);
    setForm({
      organizationId: member.organizationId || selectedOrganizationId,
      username: "",
      memberName: member.memberName || "",
      memberPhone: member.memberPhone || "",
      initialPassword: "",
      mustChangePassword: true,
      roleId: member.memberRoleId || payload?.roles[0]?.roleId || "",
      groupId: member.memberGroupId || payload?.groups[0]?.groupId || ""
    });
  }

  function resetForm() {
    setEditingId(null);
    setForm({
      organizationId: selectedOrganizationId,
      username: "",
      memberName: "",
      memberPhone: "",
      initialPassword: "",
      mustChangePassword: true,
      roleId: payload?.roles[0]?.roleId || "",
      groupId: payload?.groups[0]?.groupId || ""
    });
  }

  return (
    <div className="account-manager" ref={managerRef}>
      <div className="workspace-head" data-animate>
        <div>
          <h1 className="workspace-title">账号管理</h1>
        </div>
        <div className="workspace-meta">
          <span className="status">{payload?.organizations.length || 0} 组织</span>
          <span className="status running">{total} 成员</span>
          <span className={`status ${payload?.configured ? "" : "failed"}`}>{payload?.configured ? "已接入" : "待配置"}</span>
        </div>
      </div>

      <section className="panel account-actions" data-animate>
        <label className="field account-org-field">
          <span>组织</span>
          <select
            value={selectedOrganizationId}
            onChange={(event) => {
              setOrganizationId(event.target.value);
              setPageNum(1);
              setEditingId(null);
              setForm({ ...blankForm, organizationId: event.target.value });
            }}
            disabled={!payload?.configured || loading}
          >
            {payload?.organizations.length ? payload.organizations.map((item) => (
              <option value={item.organizationId} key={item.organizationId}>{item.organizationName || item.organizationId}</option>
            )) : (
              <option value="">{payload?.configured ? "暂无组织" : "组织接口未配置"}</option>
            )}
          </select>
        </label>
        <form className="log-search account-search" onSubmit={submitSearch}>
          <Search aria-hidden="true" />
          <input
            value={draftQuery}
            placeholder="搜索成员姓名"
            onChange={(event) => setDraftQuery(event.target.value)}
            disabled={!memberListAvailable || loading}
          />
        </form>
        <select className="account-status-select" value={status} onChange={(event) => {
          setStatus(event.target.value);
          setPageNum(1);
        }} disabled={!memberListAvailable || loading}>
          {STATUS_OPTIONS.map((item) => <option value={item.value} key={item.value}>{item.label}</option>)}
        </select>
        <div className="toolbar">
          <button className="button" type="button" onClick={loadAccounts} disabled={loading || saving}>
            {loading ? <Loader2 className="spin" size={18} /> : <RefreshCw size={18} />}
            刷新
          </button>
        </div>
      </section>

      {error || message ? (
        <div ref={feedbackRef}>
          {error ? <div className="callout" role="alert">{error}</div> : null}
          {message ? <div className="callout success-callout" role="status" aria-live="polite">{message}</div> : null}
        </div>
      ) : null}

      {warnings.length ? (
        <div className="callout" role="status" data-animate>
          {accountWarningText(warnings[0])}
        </div>
      ) : null}

      {!payload?.configured ? (
        <div className="callout" role="status" data-animate>
          组织接口未配置：需要组织能力网关地址，用于读取组织、部门、角色和成员列表。
        </div>
      ) : !payload.passwordManagementAvailable ? (
        <div className="callout" role="status" data-animate>
          企业端用户接口未配置：{payload?.staffMissing.join("、") || "ZHINIAN_STAFF_API_BASE_URL、ZHINIAN_ORG_TENANT_ID"}。配置后可创建企业用户并重置密码。
        </div>
      ) : null}

      <section className="panel account-department-panel" data-animate>
        <div className="settings-group-head">
          <div>
            <h2>部门管理</h2>
            <p className="muted">{currentOrganization?.organizationName || selectedOrganizationId || "请选择组织"}</p>
          </div>
        </div>
        <form className="account-department-form" onSubmit={submitGroup}>
          <label className="field">
            <span>部门名称</span>
            <input
              value={departmentForm.groupName}
              onChange={(event) => setDepartmentForm((item) => ({ ...item, groupName: event.target.value }))}
              disabled={!payload?.configured || !selectedOrganizationId || creatingGroup}
            />
          </label>
          <label className="field">
            <span>部门描述</span>
            <input
              value={departmentForm.groupDesc}
              placeholder="可留空"
              onChange={(event) => setDepartmentForm((item) => ({ ...item, groupDesc: event.target.value }))}
              disabled={!payload?.configured || !selectedOrganizationId || creatingGroup}
            />
          </label>
          <button className="button" type="submit" disabled={!payload?.configured || !selectedOrganizationId || creatingGroup || !departmentForm.groupName.trim()}>
            {creatingGroup ? <Loader2 className="spin" size={18} /> : <Plus size={18} />}
            创建部门
          </button>
        </form>
      </section>

      <section className="panel account-form-panel" data-animate>
        <div className="settings-group-head">
          <div>
            <h2>{editingId ? "编辑成员" : "新建用户"}</h2>
            <p className="muted">{currentOrganization?.organizationName || selectedOrganizationId || "请选择组织"}</p>
          </div>
          {editingId ? (
            <button className="button" type="button" onClick={resetForm} disabled={saving}>
              取消编辑
            </button>
          ) : null}
        </div>
        <form className="account-form-grid" onSubmit={submitMember}>
          <label className="field">
            <span>成员名称</span>
            <input value={form.memberName} onChange={(event) => setForm((item) => ({ ...item, memberName: event.target.value }))} disabled={!payload?.configured || saving} />
          </label>
          <label className="field">
            <span>手机号</span>
            <input value={form.memberPhone} onChange={(event) => setForm((item) => ({ ...item, memberPhone: event.target.value }))} disabled={!payload?.configured || saving || Boolean(editingId)} />
          </label>
          <label className="field">
            <span>用户名</span>
            <input value={form.username} placeholder="默认使用手机号" onChange={(event) => setForm((item) => ({ ...item, username: event.target.value }))} disabled={!payload?.staffConfigured || saving || Boolean(editingId)} />
          </label>
          <label className="field">
            <span>初始密码</span>
            <input type="password" value={form.initialPassword} placeholder="留空由服务端生成" onChange={(event) => setForm((item) => ({ ...item, initialPassword: event.target.value }))} disabled={!payload?.staffConfigured || saving || Boolean(editingId)} />
          </label>
          <label className="field">
            <span>角色</span>
            <select value={selectedRoleId(payload, form)} onChange={(event) => setForm((item) => ({ ...item, roleId: event.target.value }))} disabled={!payload?.roles.length || saving}>
              {payload?.roles.length ? payload.roles.map((role) => (
                <option value={role.roleId} key={role.roleId}>{role.roleName}</option>
              )) : <option value="">暂无角色</option>}
            </select>
          </label>
          <label className="field">
            <span>部门</span>
            <select value={selectedGroupId(payload, form)} onChange={(event) => setForm((item) => ({ ...item, groupId: event.target.value }))} disabled={!payload?.groups.length || saving}>
              {payload?.groups.length ? payload.groups.map((group) => (
                <option value={group.groupId} key={group.groupId}>{group.groupName}</option>
              )) : <option value="">暂无部门</option>}
            </select>
          </label>
          <label className="toggle-line account-password-toggle">
            <input
              type="checkbox"
              checked={form.mustChangePassword}
              onChange={(event) => setForm((item) => ({ ...item, mustChangePassword: event.target.checked }))}
              disabled={!payload?.staffConfigured || saving || Boolean(editingId)}
            />
            首次登录改密
          </label>
          <div className="toolbar account-form-submit">
            <button className="button primary account-create-submit" type="submit" disabled={!canSubmit || saving || creatingGroup}>
              {saving ? <Loader2 className="spin" size={18} /> : editingId ? <Save size={18} /> : <UserPlus size={18} />}
              {editingId ? "保存成员" : "新建用户"}
            </button>
          </div>
        </form>
      </section>

      <section className="panel account-list" data-animate ref={listRef}>
        {loading && !payload ? (
          <div className="settings-loading">
            <Loader2 className="spin" size={18} />
            正在读取账号
          </div>
        ) : members.length ? (
          <div className="account-table" role="table" aria-label="账号成员">
            <div className="account-row account-head" role="row">
              <span>成员</span>
              <span>角色 / 部门</span>
              <span>状态</span>
              <span>操作</span>
            </div>
            {members.map((member) => (
              <div className="account-row" role="row" key={member.memberId}>
                <div className="account-member-main">
                  <strong>{member.memberName}</strong>
                  <small>{member.memberPhone || member.memberId}</small>
                </div>
                <div className="account-member-main">
                  <strong>{member.memberRoleName || "-"}</strong>
                  <small>{member.memberGroupName || "-"}</small>
                </div>
                <span className={`status ${member.memberStatus === "2" ? "failed" : member.memberStatus === "1" ? "running" : ""}`}>{memberStatusLabel(member.memberStatus)}</span>
                <div className="toolbar account-row-actions">
                  <button className="icon-button" type="button" title="编辑成员" aria-label="编辑成员" onClick={() => editMember(member)} disabled={saving}>
                    <Pencil aria-hidden="true" />
                  </button>
                  <button className="icon-button" type="button" title="重置密码" aria-label="重置密码" onClick={() => resetPassword(member)} disabled={saving || !payload?.staffConfigured || !member.memberUserId}>
                    <KeyRound aria-hidden="true" />
                  </button>
                  <button className="icon-button" type="button" title={member.memberStatus === "0" ? "设为休假" : "设为在岗"} aria-label={member.memberStatus === "0" ? "设为休假" : "设为在岗"} onClick={() => changeStatus(member.memberId, member.memberStatus === "0" ? "1" : "0")} disabled={saving}>
                    {member.memberStatus === "0" ? <CirclePause aria-hidden="true" /> : <UserCheck aria-hidden="true" />}
                  </button>
                  <button className="icon-button danger-icon" type="button" title="停用成员" aria-label="停用成员" onClick={() => changeStatus(member.memberId, "2")} disabled={saving || member.memberStatus === "2"}>
                    <UserX aria-hidden="true" />
                  </button>
                  <button className="icon-button danger-icon" type="button" title="删除成员" aria-label="删除成员" onClick={() => removeMember(member.memberId)} disabled={saving}>
                    <Trash2 aria-hidden="true" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="log-empty">{accountEmptyText(payload)}</div>
        )}
        {pages > 1 ? (
          <div className="pagination">
            <button className="icon-button" type="button" onClick={() => setPageNum((item) => Math.max(1, item - 1))} disabled={pageNum <= 1 || loading}>‹</button>
            <span className="pager-meta">{pageNum} / {pages}</span>
            <button className="icon-button" type="button" onClick={() => setPageNum((item) => Math.min(pages, item + 1))} disabled={pageNum >= pages || loading}>›</button>
          </div>
        ) : null}
      </section>
    </div>
  );
}

function selectedRoleId(payload: AccountPayload | null, form: MemberForm): string {
  if (payload?.roles.some((role) => role.roleId === form.roleId)) return form.roleId;
  return payload?.roles[0]?.roleId || "";
}

function selectedGroupId(payload: AccountPayload | null, form: MemberForm): string {
  if (payload?.groups.some((group) => group.groupId === form.groupId)) return form.groupId;
  return payload?.groups[0]?.groupId || "";
}

function memberStatusLabel(status: string): string {
  if (status === "0") return "在岗";
  if (status === "1") return "休假";
  if (status === "2") return "停用";
  return status || "未知";
}

function accountEmptyText(payload: AccountPayload | null): string {
  if (!payload?.configured) return "组织接口配置后显示成员";
  if (payload.memberListAvailable === false) return "成员列表暂不可用，新增账号仍可使用";
  return "暂无成员";
}

function accountWarningText(message: string): string {
  if (/仅管理员角色|上游.*管理员|hotelStaff 管理员|管理员角色/i.test(message)) {
    return "成员列表需要认证中心管理员角色 1。当前账号已允许进入本平台后台，但上游 hotelStaff 暂未授权成员列表查询。";
  }
  if (/成员列表|organizationMemberList|ZHINIAN_ORG_MEMBER_LIST_PATH/i.test(message)) {
    return "成员列表待接入：当前组织服务还没有开放成员查询，新增账号仍可使用。";
  }
  return message;
}