// 学情页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/weakness

"use client";

import { useChildWeakness } from "@/hooks/useChildWeakness";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { formatPercent, cn } from "@/lib/utils";

export default function WeaknessPage() {
  const { currentChild } = useChildSwitcher();
  const { weaknesses, loading, error } = useChildWeakness();

  if (loading) {
    return <span className="skeleton h-64 w-full rounded" />;
  }

  if (error) {
    return (
      <div 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>

      <div className="space-y-3">
        {weaknesses.length === 0 ? (
          <p className="text-sm text-ink-muted">暂无学情数据</p>
        ) : (
          weaknesses.map((wp) => {
            const mastery = formatPercent(wp.masteryLevel);
            const isWeak = wp.masteryLevel < 0.6;
            return (
              <div
                key={wp.id}
                className="rounded border border-rule bg-paper-elevated p-4"
              >
                <div className="flex items-start justify-between">
                  <div>
                    <h3 className="font-serif text-base">
                      {wp.knowledgePoint}
                    </h3>
                    <p className="mt-1 text-xs text-ink-muted">{wp.subject}</p>
                  </div>
                  <div className="text-right">
                    <p
                      className={cn(
                        "font-mono text-lg",
                        isWeak ? "text-danger" : "text-success",
                      )}
                    >
                      {mastery}
                    </p>
                    <p className="text-xs text-ink-muted">掌握度</p>
                  </div>
                </div>
                {/* 掌握度进度条 */}
                <div className="mt-3 h-2 overflow-hidden rounded bg-rule">
                  <div
                    className={cn(
                      "h-full rounded",
                      isWeak ? "bg-danger" : "bg-success",
                    )}
                    style={{ width: `${wp.masteryLevel * 100}%` }}
                  />
                </div>
                {wp.recommendation && (
                  <p className="mt-3 border-t border-rule pt-2 text-sm mark-left">
                    {wp.recommendation}
                  </p>
                )}
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}
