// Admin user management page.

function Users({ go, route }) {
  const { snapshot, user } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null, user: null };
  const isAdmin = adminUserIsAdmin(user);
  const userId = route?.userId || "";
  return (
    <AppShell
      go={go}
      current="users"
      pageTitle="用户管理"
      pageBreadcrumbs={[
        { label: "管理" },
        { label: "用户管理", go: userId ? () => go("users") : undefined },
        ...(userId ? [{ label: "用户详情" }] : [])
      ]}
    >
      {!isAdmin ? (
        <div className="page users-page">
          <div className="settings-sec">
            <h3>需要管理员权限</h3>
            <p className="sub">用户管理只对 admin / super_admin 开放。</p>
          </div>
        </div>
      ) : userId ? (
        <AdminUserDetail userId={userId} go={go} />
      ) : (
        <AdminUserList go={go} />
      )}
    </AppShell>
  );
}

function AdminUserList({ go }) {
  const [users, setUsers] = React.useState([]);
  const [pagination, setPagination] = React.useState({ page: 1, pageSize: 20, total: 0, totalPages: 1 });
  const [filters, setFilters] = React.useState({ q: "", role: "", status: "", sort: "created_at", direction: "desc", page: 1 });
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState("");

  const load = React.useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const data = await window.GGGApi.listAdminUsers({ ...filters, pageSize: 20 });
      setUsers(data.users || []);
      setPagination(data.pagination || { page: 1, pageSize: 20, total: 0, totalPages: 1 });
    } catch (err) {
      setError(err.message || "用户列表加载失败。");
    } finally {
      setLoading(false);
    }
  }, [JSON.stringify(filters)]);

  React.useEffect(() => { load(); }, [load]);

  const updateFilter = (key, value) => setFilters((prev) => ({ ...prev, [key]: value, page: key === "page" ? value : 1 }));
  const stats = adminUserListStats(users);

  return (
    <div className="page users-page">
      <div className="page-head">
        <div>
          <div className="eyebrow">ADMIN / USERS</div>
          <h1 className="page-title">用户管理</h1>
          <p className="page-sub">查看用户概要、点数余额、项目与报告使用情况，并执行账号管理操作。</p>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={load} disabled={loading}><Icon name="refresh" size={14} /> 刷新</button>
      </div>

      <div className="admin-user-summary-grid">
        <div className="kpi"><div className="label">当前结果</div><div className="val">{pagination.total}</div><div className="meta">符合筛选条件的用户</div></div>
        <div className="kpi kpi-accent"><div className="label">可用用户</div><div className="val">{stats.active}</div><div className="meta">当前页可用账号</div></div>
        <div className="kpi kpi-warn"><div className="label">管理员</div><div className="val">{stats.admins}</div><div className="meta">admin / super_admin</div></div>
        <div className="kpi"><div className="label">当前页点数</div><div className="val">{stats.credits}</div><div className="meta">可用点数合计</div></div>
      </div>

      <div className="settings-sec admin-user-filter-card">
        <div className="admin-user-filter-row">
          <div className="field">
            <label className="field-label">搜索用户</label>
            <input className="input" value={filters.q} onChange={(e) => updateFilter("q", e.target.value)} placeholder="邮箱、姓名、公司名称" />
          </div>
          <div className="field">
            <label className="field-label">用户属性</label>
            <select className="select" value={filters.role} onChange={(e) => updateFilter("role", e.target.value)}>
              <option value="">全部</option>
              <option value="user">user</option>
              <option value="operator">operator</option>
              <option value="admin">admin</option>
              <option value="super_admin">super_admin</option>
            </select>
          </div>
          <div className="field">
            <label className="field-label">用户状态</label>
            <select className="select" value={filters.status} onChange={(e) => updateFilter("status", e.target.value)}>
              <option value="">全部</option>
              <option value="active">可用</option>
              <option value="disabled">失效</option>
            </select>
          </div>
          <div className="field">
            <label className="field-label">排序</label>
            <select className="select" value={filters.sort} onChange={(e) => updateFilter("sort", e.target.value)}>
              <option value="created_at">注册日期</option>
              <option value="last_login_at">上次登录</option>
              <option value="available_credits">当前点数</option>
              <option value="project_count">项目数</option>
              <option value="report_count">报告数</option>
              <option value="file_count">附件数</option>
              <option value="email">邮箱</option>
            </select>
          </div>
          <div className="field">
            <label className="field-label">方向</label>
            <select className="select" value={filters.direction} onChange={(e) => updateFilter("direction", e.target.value)}>
              <option value="desc">降序</option>
              <option value="asc">升序</option>
            </select>
          </div>
        </div>
      </div>

      {(error || loading) && <div className={error ? "form-alert" : "callout info"}>{error || "正在加载用户列表..."}</div>}

      <div className="settings-sec admin-user-list-card">
        <div className="admin-user-list-head">
          <span>用户</span><span>属性 / 状态</span><span>注册 / 登录</span><span>使用量</span><span>点数</span>
        </div>
        {users.map((item) => (
          <div key={item.id} className="admin-user-row" onClick={() => go("user-detail", item.id)}>
            <div className="admin-user-person">
              <AdminUserAvatar user={item} />
              <div>
                <div className="admin-user-name">{item.displayName || item.email}</div>
                <div className="admin-user-email">{item.email}</div>
                <div className="admin-user-company">{item.companyName || "未填写公司"}</div>
              </div>
            </div>
            <div>
              <span className={"badge " + adminUserRoleBadge(item.role)}><span className="badge-dot"></span>{item.role}</span>
              <div style={{ marginTop: 8 }}><span className={"badge " + adminUserStatusBadge(item.status)}><span className="badge-dot"></span>{adminUserStatusLabel(item.status)}</span></div>
            </div>
            <div className="admin-user-muted">
              <div>注册：{adminUserFormatDate(item.createdAt)}</div>
              <div>登录：{adminUserFormatDate(item.lastLoginAt)}</div>
            </div>
            <div className="admin-user-usage">
              <span>{item.projectCount} 项目</span>
              <span>{item.reportCount} 报告</span>
              <span>{item.fileCount} 附件</span>
            </div>
            <div className="admin-user-credit">{item.availableCredits || 0} 点</div>
          </div>
        ))}
        {!loading && users.length === 0 && <div className="empty-state">没有找到符合条件的用户。</div>}
      </div>

      <div className="admin-user-pagination">
        <button className="btn btn-ghost btn-sm" disabled={pagination.page <= 1} onClick={() => updateFilter("page", pagination.page - 1)}>上一页</button>
        <span>第 {pagination.page} / {pagination.totalPages} 页</span>
        <button className="btn btn-ghost btn-sm" disabled={pagination.page >= pagination.totalPages} onClick={() => updateFilter("page", pagination.page + 1)}>下一页</button>
      </div>
    </div>
  );
}

function AdminUserDetail({ userId, go }) {
  const [data, setData] = React.useState(null);
  const [form, setForm] = React.useState({});
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [message, setMessage] = React.useState("");
  const [error, setError] = React.useState("");
  const [resetResult, setResetResult] = React.useState(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const next = await window.GGGApi.getAdminUser(userId);
      setData(next);
      const user = next.user || {};
      setForm({
        name: user.name || "",
        companyName: user.companyName || "",
        country: user.country || "",
        preferredLanguage: user.preferredLanguage || "zh-CN",
        subscriptionPlan: user.subscriptionPlan || "free",
        role: user.role || "user",
        status: user.status || "active",
        availableCredits: user.availableCredits || 0
      });
    } catch (err) {
      setError(err.message || "用户详情加载失败。");
    } finally {
      setLoading(false);
    }
  }, [userId]);

  React.useEffect(() => { load(); }, [load]);

  const update = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
  const save = async () => {
    setSaving(true);
    setError("");
    setMessage("");
    try {
      const next = await window.GGGApi.updateAdminUser(userId, {
        ...form,
        availableCredits: Number(form.availableCredits || 0)
      });
      setData(next);
      setMessage("用户信息已保存。");
    } catch (err) {
      setError(err.message || "保存失败。");
    } finally {
      setSaving(false);
    }
  };
  const createReset = async (mode) => {
    setSaving(true);
    setError("");
    setMessage("");
    try {
      const result = await window.GGGApi.createAdminPasswordReset(userId, mode);
      setResetResult(result);
      setMessage(result.message || "密码重置链接已生成。");
      if (mode === "link" && result.resetUrl) await adminUserCopyText(result.resetUrl);
    } catch (err) {
      setError(err.message || "生成密码重置失败。");
    } finally {
      setSaving(false);
    }
  };

  const user = data?.user || {};
  const detail = data?.detail || {};
  return (
    <div className="page users-page">
      <div className="page-head">
        <div>
          <button className="btn btn-ghost btn-sm" onClick={() => go("users")} style={{ marginBottom: 12 }}>← 返回用户列表</button>
          <div className="eyebrow">ADMIN / USER DETAIL</div>
          <h1 className="page-title">{user.displayName || user.email || "用户详情"}</h1>
          <p className="page-sub">{user.email || "正在加载用户资料"}</p>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={load} disabled={loading}><Icon name="refresh" size={14} /> 刷新</button>
      </div>

      {(error || message || loading) && <div className={error ? "form-alert" : "callout info"}>{error || message || "正在加载用户详情..."}</div>}

      {data ? (
        <>
          <div className="admin-user-detail-hero">
            <div className="settings-sec admin-user-profile-card">
              <div className="admin-user-profile-top">
                <AdminUserAvatar user={user} large />
                <div>
                  <h3>{user.displayName || user.email}</h3>
                  <p className="sub">{user.companyName || "未填写公司"} · {user.country || "未填写国家/地区"}</p>
                  <div className="admin-user-badge-line">
                    <span className={"badge " + adminUserRoleBadge(user.role)}><span className="badge-dot"></span>{user.role}</span>
                    <span className={"badge " + adminUserStatusBadge(user.status)}><span className="badge-dot"></span>{adminUserStatusLabel(user.status)}</span>
                    <span className="badge badge-ocean"><span className="badge-dot"></span>{user.availableCredits || 0} 点</span>
                  </div>
                </div>
              </div>
              <div className="admin-user-detail-grid">
                <AdminUserInfo label="用户 ID" value={user.id} />
                <AdminUserInfo label="邮箱" value={user.email} />
                <AdminUserInfo label="注册日期" value={adminUserFormatDate(user.createdAt)} />
                <AdminUserInfo label="上次登录" value={adminUserFormatDate(user.lastLoginAt)} />
                <AdminUserInfo label="邮箱验证" value={adminUserFormatDate(user.emailVerifiedAt)} />
                <AdminUserInfo label="订阅方案" value={user.subscriptionPlan || "free"} />
                <AdminUserInfo label="项目数" value={user.projectCount || 0} />
                <AdminUserInfo label="生成报告数" value={user.reportCount || 0} />
                <AdminUserInfo label="附件数" value={user.fileCount || 0} />
                <AdminUserInfo label="保留点数" value={user.reservedCredits || 0} />
                <AdminUserInfo label="已消费点数" value={user.consumedCredits || 0} />
                <AdminUserInfo label="工作区" value={detail.workspace?.name || detail.workspace?.id || "-"} />
              </div>
            </div>

            <div className="settings-sec admin-user-edit-card">
              <h3>编辑用户</h3>
              <p className="sub">管理员可修改用户属性、状态和当前可用点数。</p>
              <div className="form-grid-2" style={{ marginTop: 16 }}>
                <div className="field"><label className="field-label">用户名</label><input className="input" value={form.name || ""} onChange={(e) => update("name", e.target.value)} /></div>
                <div className="field"><label className="field-label">公司名称</label><input className="input" value={form.companyName || ""} onChange={(e) => update("companyName", e.target.value)} /></div>
                <div className="field"><label className="field-label">国家/地区</label><input className="input" value={form.country || ""} onChange={(e) => update("country", e.target.value)} /></div>
                <div className="field"><label className="field-label">语言</label><input className="input" value={form.preferredLanguage || ""} onChange={(e) => update("preferredLanguage", e.target.value)} /></div>
                <div className="field">
                  <label className="field-label">用户属性</label>
                  <select className="select" value={form.role || "user"} onChange={(e) => update("role", e.target.value)}>
                    <option value="user">user</option>
                    <option value="operator">operator</option>
                    <option value="admin">admin</option>
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">用户状态</label>
                  <select className="select" value={form.status || "active"} onChange={(e) => update("status", e.target.value)}>
                    <option value="active">可用</option>
                    <option value="disabled">失效</option>
                  </select>
                </div>
                <div className="field"><label className="field-label">订阅方案</label><input className="input" value={form.subscriptionPlan || ""} onChange={(e) => update("subscriptionPlan", e.target.value)} /></div>
                <div className="field"><label className="field-label">当前点数</label><input className="input" type="number" min="0" value={form.availableCredits ?? 0} onChange={(e) => update("availableCredits", e.target.value)} /></div>
              </div>
              <button className="btn btn-primary btn-block" style={{ marginTop: 16 }} onClick={save} disabled={saving}>{saving ? "保存中..." : "保存修改"}</button>

              <div className="admin-user-reset-box">
                <h3>重置密码</h3>
                <p className="sub">生成 24 小时有效的密码重置链接。发送邮件依赖 Resend 配置；如果邮件未发送，可复制链接给用户。</p>
                <div className="admin-user-reset-actions">
                  <button className="btn btn-ghost btn-sm" onClick={() => createReset("send")} disabled={saving}><Icon name="mail" size={14} /> 发送重置邮件</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => createReset("link")} disabled={saving}><Icon name="lock" size={14} /> 复制重置链接</button>
                </div>
                {resetResult?.resetUrl && (
                  <div className="admin-user-reset-link">
                    <span>{resetResult.resetUrl}</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => adminUserCopyText(resetResult.resetUrl)}>复制</button>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="admin-user-related-grid">
            <AdminUserProjects projects={data.projects || []} />
            <AdminUserFiles files={data.files || []} />
          </div>
        </>
      ) : null}
    </div>
  );
}

function AdminUserAvatar({ user, large }) {
  const size = large ? 64 : 42;
  return (
    <div className="avatar admin-user-avatar" style={{ width: size, height: size, fontSize: large ? 22 : 14, overflow: "hidden" }}>
      {user?.avatarUrl ? <img src={user.avatarUrl} alt="avatar" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : (user?.initials || adminUserInitials(user?.displayName || user?.email))}
    </div>
  );
}

function AdminUserInfo({ label, value }) {
  return (
    <div className="admin-user-info">
      <span>{label}</span>
      <b>{value || "-"}</b>
    </div>
  );
}

function AdminUserProjects({ projects }) {
  return (
    <div className="settings-sec">
      <h3>项目列表</h3>
      <p className="sub">该用户创建的出海调研项目。</p>
      <div className="report-table">
        <table>
          <thead><tr><th>项目</th><th>产品</th><th>目标市场</th><th>状态</th><th>更新日期</th></tr></thead>
          <tbody>
            {projects.map((item) => (
              <tr key={item.id}>
                <td>{item.name}</td>
                <td>{item.product_name || "-"}</td>
                <td>{item.target_country || "-"}</td>
                <td>{item.status || "draft"}</td>
                <td>{adminUserFormatDate(item.updated_at)}</td>
              </tr>
            ))}
            {!projects.length && <tr><td colSpan="5">暂无项目。</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AdminUserFiles({ files }) {
  return (
    <div className="settings-sec">
      <h3>文件列表</h3>
      <p className="sub">该用户上传的项目资料和附件。</p>
      <div className="report-table">
        <table>
          <thead><tr><th>文件</th><th>项目</th><th>类型</th><th>大小</th><th>上传日期</th></tr></thead>
          <tbody>
            {files.map((item) => (
              <tr key={item.id}>
                <td>{item.file_name}</td>
                <td>{item.project_name || item.project_id}</td>
                <td>{item.file_type || "-"}</td>
                <td>{adminUserFormatFileSize(item.file_size)}</td>
                <td>{adminUserFormatDate(item.created_at)}</td>
              </tr>
            ))}
            {!files.length && <tr><td colSpan="5">暂无文件。</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function adminUserListStats(users) {
  return (users || []).reduce((acc, user) => {
    if ((user.status || "active") === "active") acc.active += 1;
    if (["admin", "super_admin"].includes(user.role)) acc.admins += 1;
    acc.credits += Number(user.availableCredits || 0);
    return acc;
  }, { active: 0, admins: 0, credits: 0 });
}

function adminUserRoleBadge(role) {
  if (role === "admin" || role === "super_admin") return "badge-red";
  if (role === "operator") return "badge-ocean";
  return "badge-green";
}

function adminUserStatusBadge(status) {
  return (status || "active") === "active" ? "badge-green" : "badge-orange";
}

function adminUserStatusLabel(status) {
  return (status || "active") === "active" ? "可用" : "失效";
}

function adminUserFormatDate(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return String(value).replace("T", " ").slice(0, 16);
  return date.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
}

function adminUserFormatFileSize(size) {
  const value = Number(size || 0);
  if (value >= 1024 * 1024) return `${(value / 1024 / 1024).toFixed(1)} MB`;
  if (value >= 1024) return `${Math.round(value / 1024)} KB`;
  return `${value} B`;
}

function adminUserInitials(value) {
  const source = String(value || "GG").trim();
  if (/[\u4e00-\u9fa5]/.test(source)) return source.slice(0, 2);
  return source.split(/[\s@._-]+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "GG";
}

function adminUserIsAdmin(user) {
  return ["admin", "super_admin"].includes(String(user?.role || "").toLowerCase());
}

async function adminUserCopyText(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();
  }
}

window.Users = Users;