// 家长个人设置页面（只读）
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/settings
// 对标 teacher-portal /settings（家长只读视角）

"use client";

import { useQuery } from "urql";
import { CURRENT_PARENT_DETAIL } from "@/lib/graphql/operations";
import type { UserSession } from "@/types";

interface CurrentParentDetailResponse {
  currentUser: UserSession;
}

export default function SettingsPage(): JSX.Element {
  const [result] = useQuery<CurrentParentDetailResponse>({
    query: CURRENT_PARENT_DETAIL,
  });

  if (result.fetching) {
    return (
      <div className="space-y-4" role="status" aria-live="polite">
        <span className="skeleton h-8 w-48 rounded" aria-hidden="true" />
        <span
          className="skeleton h-64 w-full max-w-2xl rounded"
          aria-hidden="true"
        />
        <span className="sr-only">加载个人信息中...</span>
      </div>
    );
  }

  if (result.error) {
    return (
      <div
        role="alert"
        className="rounded border border-danger p-4 text-sm text-danger"
      >
        加载失败：{result.error.message}
      </div>
    );
  }

  const user = result.data?.currentUser;

  if (!user) {
    return (
      <p className="text-sm text-ink-muted" role="status">
        暂无用户信息
      </p>
    );
  }

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">个人设置</h1>

      <section className="max-w-2xl">
        <h2 className="font-serif text-base">基本信息</h2>
        <div className="mt-3 rounded border border-rule bg-paper-elevated p-4">
          <dl className="space-y-3">
            <div className="grid grid-cols-3 items-baseline gap-4">
              <dt className="text-xs text-ink-muted">用户 ID</dt>
              <dd className="col-span-2-safe font-mono text-sm">{user.id}</dd>
            </div>
            <div className="grid grid-cols-3 items-baseline gap-4">
              <dt className="text-xs text-ink-muted">姓名</dt>
              <dd className="col-span-2-safe text-sm">{user.name}</dd>
            </div>
            <div className="grid grid-cols-3 items-baseline gap-4">
              <dt className="text-xs text-ink-muted">邮箱</dt>
              <dd className="col-span-2-safe text-sm">{user.email}</dd>
            </div>
            <div className="grid grid-cols-3 items-baseline gap-4">
              <dt className="text-xs text-ink-muted">角色</dt>
              <dd className="col-span-2-safe text-sm">
                {user.roles.join(", ") || "无角色"}
              </dd>
            </div>
            <div className="grid grid-cols-3 items-baseline gap-4">
              <dt className="text-xs text-ink-muted">数据范围</dt>
              <dd className="col-span-2-safe text-sm">{user.dataScope}</dd>
            </div>
          </dl>
        </div>

        <p className="mt-4 text-xs text-ink-muted">
          个人信息为只读展示，如需修改请联系学校管理员。
        </p>
      </section>
    </div>
  );
}
