import { useCallback, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { createAdminUser, listAdminUsers, updateAdminUser } from '../../api/client';
import type { PagedResult } from '../../api/client';
import type { AdminUserRow } from '../../types';
import { Pagination } from '../../components/Pagination';
import { formatYuan } from '../utils/format';

const PAGE_SIZE = 20;

export function UsersPage() {
  const [result, setResult] = useState<PagedResult<AdminUserRow> | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  // query params committed on search click — separate from pending inputs
  const [committed, setCommitted] = useState({ search: '', role: '', status: '' });
  const [pending, setPending] = useState({ search: '', role: '', status: '' });

  const [showCreate, setShowCreate] = useState(false);
  const [newUser, setNewUser] = useState({ username: '', password: '', displayName: '', workspaceRoot: '', balanceCents: 500 });
  const [creating, setCreating] = useState(false);

  const load = useCallback(async (p: number, q: { search: string; role: string; status: string }) => {
    setLoading(true);
    setError(null);
    try {
      const data = await listAdminUsers({ page: p, pageSize: PAGE_SIZE, search: q.search, role: q.role, status: q.status });
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load(1, committed);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleQuery = () => {
    setCommitted(pending);
    void load(1, pending);
  };

  const handlePage = (p: number) => void load(p, committed);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') handleQuery();
  };

  const reload = () => void load(result?.page ?? 1, committed);

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessage(null);
    setError(null);
    setCreating(true);
    try {
      await createAdminUser({
        username: newUser.username,
        password: newUser.password,
        displayName: newUser.displayName || undefined,
        workspaceRoot: newUser.workspaceRoot || undefined,
        balanceCents: Number(newUser.balanceCents),
      });
      setNewUser({ username: '', password: '', displayName: '', workspaceRoot: '', balanceCents: 500 });
      setMessage('用户已创建');
      setShowCreate(false);
      reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : '创建失败');
    } finally {
      setCreating(false);
    }
  };

  const toggleStatus = async (user: AdminUserRow) => {
    try {
      await updateAdminUser(user.id, { status: user.status === 'active' ? 'disabled' : 'active' });
      reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : '操作失败');
    }
  };

  return (
    <div className="admin-page">
      <div className="admin-page-head">
        <h2>用户管理</h2>
        <p className="muted">搜索账号、查看列表、进入用户详情配置权限</p>
      </div>

      {error && <p className="banner banner-error">{error}</p>}
      {message && <p className="banner banner-info">{message}</p>}

      {showCreate && (
        <section className="admin-card">
          <div className="admin-card-head">
            <h2>创建用户</h2>
            <button type="button" className="ghost-btn" onClick={() => setShowCreate(false)}>取消</button>
          </div>
          <form className="admin-form" onSubmit={handleCreate}>
            <input placeholder="用户名" autoComplete="username" required value={newUser.username} onChange={(e) => setNewUser((s) => ({ ...s, username: e.target.value }))} />
            <input placeholder="密码" type="password" autoComplete="new-password" required minLength={6} value={newUser.password} onChange={(e) => setNewUser((s) => ({ ...s, password: e.target.value }))} />
            <input placeholder="显示名称" value={newUser.displayName} onChange={(e) => setNewUser((s) => ({ ...s, displayName: e.target.value }))} />
            <input placeholder="工作目录（可选）" value={newUser.workspaceRoot} onChange={(e) => setNewUser((s) => ({ ...s, workspaceRoot: e.target.value }))} />
            <input placeholder="初始余额（分）" type="number" value={newUser.balanceCents} onChange={(e) => setNewUser((s) => ({ ...s, balanceCents: Number(e.target.value) }))} />
            <button type="submit" className="send-btn" disabled={creating}>{creating ? '创建中…' : '创建'}</button>
          </form>
        </section>
      )}

      <section className="admin-card">
        <div className="admin-card-head">
          <h2>
            用户列表
            {result && <span className="users-total-badge">{result.total.toLocaleString()} 人</span>}
          </h2>
          <div className="users-toolbar">
            <input
              className="users-search-input"
              placeholder="搜索用户名 / 显示名"
              value={pending.search}
              onChange={(e) => setPending((s) => ({ ...s, search: e.target.value }))}
              onKeyDown={handleKeyDown}
            />
            <select className="billing-filter-select" value={pending.role}
              onChange={(e) => setPending((s) => ({ ...s, role: e.target.value }))}>
              <option value="">全部角色</option>
              <option value="user">普通用户</option>
              <option value="admin">管理员</option>
            </select>
            <select className="billing-filter-select" value={pending.status}
              onChange={(e) => setPending((s) => ({ ...s, status: e.target.value }))}>
              <option value="">全部状态</option>
              <option value="active">正常</option>
              <option value="disabled">禁用</option>
              <option value="suspended">封禁</option>
            </select>
            <button type="button" className="send-btn billing-query-btn" onClick={handleQuery} disabled={loading}>
              查询
            </button>
            <button type="button" className="ghost-btn" onClick={() => setShowCreate((v) => !v)}>
              {showCreate ? '取消' : '+ 新建'}
            </button>
          </div>
        </div>

        {!result && !loading && (
          <p className="muted billing-empty">输入条件后点击查询，或直接点查询加载全部</p>
        )}
        {loading && <p className="muted">加载中…</p>}
        {!loading && result && (
          result.items.length === 0 ? (
            <p className="muted billing-empty">没有匹配的用户</p>
          ) : (
            <>
              <div className="admin-table-wrap">
                <table className="admin-table">
                  <thead>
                    <tr>
                      <th>用户</th>
                      <th>角色</th>
                      <th>状态</th>
                      <th>余额</th>
                      <th>工作目录</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {result.items.map((user) => (
                      <tr key={user.id}>
                        <td>
                          <div>{user.displayName}</div>
                          <div className="muted">@{user.username}</div>
                        </td>
                        <td><span className={`role-tag role-${user.role}`}>{user.role === 'admin' ? '管理员' : '用户'}</span></td>
                        <td>
                          <span className={`status-tag status-${user.status}`}>
                            {user.status === 'active' ? '正常' : user.status === 'disabled' ? '禁用' : '封禁'}
                          </span>
                        </td>
                        <td className="billing-num">¥{formatYuan(user.balanceCents)}</td>
                        <td className="admin-table-path">{user.workspaceRoot || '—'}</td>
                        <td className="admin-actions">
                          <Link to={`/admin/users/${user.id}`} className="ghost-btn">详情</Link>
                          {user.role === 'user' && (
                            <button type="button" className="ghost-btn" onClick={() => void toggleStatus(user)}>
                              {user.status === 'active' ? '禁用' : '启用'}
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <Pagination page={result.page} totalPages={result.totalPages} total={result.total}
                pageSize={result.pageSize} onChange={handlePage} />
            </>
          )
        )}
      </section>
    </div>
  );
}