// 学习路径页面（家长查看子女知识点掌握）
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/learning-path
// 对标 student-portal /learning-path（家长只读视角）

"use client";

import { useChildLearningPath } from "@/hooks/useChildLearningPath";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { cn } from "@/lib/utils";
import type { LearningPathNode, NodeStatus } from "@/types";

const STATUS_LABELS: Record<NodeStatus, string> = {
  locked: "未解锁",
  available: "可学习",
  "in-progress": "学习中",
  completed: "已完成",
};

const STATUS_TONES: Record<NodeStatus, string> = {
  locked: "text-ink-muted",
  available: "text-accent",
  "in-progress": "text-warning",
  completed: "text-success",
};

const PROGRESS_TONES: Record<NodeStatus, string> = {
  locked: "bg-ink-muted",
  available: "bg-accent",
  "in-progress": "bg-warning",
  completed: "bg-success",
};

function masteryPercent(node: LearningPathNode): number {
  return Math.round(Math.max(0, Math.min(1, node.mastery)) * 100);
}

export default function LearningPathPage(): JSX.Element {
  const { currentChild } = useChildSwitcher();
  const { nodes, loading, error } = useChildLearningPath();

  if (loading) {
    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-24 w-full rounded" aria-hidden="true" />
        <span className="skeleton h-24 w-full rounded" aria-hidden="true" />
        <span className="sr-only">加载学习路径中...</span>
      </div>
    );
  }

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

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">{currentChild?.name}的学习路径</h1>

      {nodes.length === 0 ? (
        <p className="text-sm text-ink-muted">暂无学习路径数据</p>
      ) : (
        <ol className="space-y-3" aria-label="学习路径节点列表">
          {nodes.map((node, index) => (
            <li key={node.id}>
              <LearningPathCard node={node} index={index} />
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

function LearningPathCard({
  node,
  index,
}: {
  node: LearningPathNode;
  index: number;
}): JSX.Element {
  const pct = masteryPercent(node);
  const step = node.recommendedOrder || index + 1;

  return (
    <article className="rounded border border-rule bg-paper-elevated p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <span className="text-xs text-ink-muted">第 {step} 步</span>
            <span
              className={cn("text-xs font-medium", STATUS_TONES[node.status])}
              aria-label={`状态：${STATUS_LABELS[node.status]}`}
            >
              {STATUS_LABELS[node.status]}
            </span>
          </div>
          <h2 className="mt-1 font-serif text-base">{node.name}</h2>
        </div>
        <div className="text-right">
          <p className="text-xs text-ink-muted">掌握度</p>
          <p
            className={cn("font-serif text-lg", STATUS_TONES[node.status])}
            aria-label={`掌握度 ${pct}%`}
          >
            {pct}%
          </p>
        </div>
      </div>

      {/* 掌握度进度条 */}
      <div
        className="mt-3 h-2 w-full overflow-hidden rounded bg-rule"
        role="progressbar"
        aria-valuenow={pct}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-label={`${node.name} 掌握度进度条`}
      >
        <div
          className={cn("h-full rounded", PROGRESS_TONES[node.status])}
          style={{ width: `${pct}%` }}
        />
      </div>

      {node.recommendation && (
        <p className="mt-3 border-t border-rule pt-2 text-sm mark-left">
          <span className="text-ink-muted">推荐：</span>
          {node.recommendation}
        </p>
      )}
    </article>
  );
}
