// 作业页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/homework

"use client";

import { useState } from "react";
import { useChildHomework } from "@/hooks/useChildHomework";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { formatDate, cn } from "@/lib/utils";
import type { HomeworkItem } from "@/types";

const STATUS_LABELS: Record<HomeworkItem["status"], string> = {
  not_started: "未开始",
  in_progress: "进行中",
  submitted: "已提交",
  graded: "已评分",
};

const STATUS_STYLES: Record<HomeworkItem["status"], string> = {
  not_started: "text-danger",
  in_progress: "text-warning",
  submitted: "text-ink-muted",
  graded: "text-success",
};

const FILTERS = [
  { value: "", label: "全部" },
  { value: "not_started", label: "未开始" },
  { value: "in_progress", label: "进行中" },
  { value: "submitted", label: "已提交" },
  { value: "graded", label: "已评分" },
];

export default function HomeworkPage() {
  const { currentChild } = useChildSwitcher();
  const [filter, setFilter] = useState("");
  const { homework, loading, error } = useChildHomework(filter || undefined);

  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="flex gap-2">
        {FILTERS.map((f) => (
          <button
            key={f.value}
            type="button"
            onClick={() => setFilter(f.value)}
            className={cn(
              "rounded px-3 py-1 text-sm transition-colors",
              filter === f.value
                ? "bg-accent text-paper"
                : "border border-rule text-ink-muted hover:bg-paper-elevated",
            )}
          >
            {f.label}
          </button>
        ))}
      </div>

      <div className="space-y-3">
        {homework.length === 0 ? (
          <p className="text-sm text-ink-muted">暂无作业</p>
        ) : (
          homework.map((hw) => (
            <div
              key={hw.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">{hw.title}</h3>
                  <p className="mt-1 text-xs text-ink-muted">
                    {hw.subject} · {hw.className}
                  </p>
                </div>
                <span
                  className={cn(
                    "text-sm font-medium",
                    STATUS_STYLES[hw.status],
                  )}
                >
                  {STATUS_LABELS[hw.status]}
                </span>
              </div>
              <div className="mt-3 flex gap-6 text-xs text-ink-muted">
                <span>布置：{formatDate(hw.assignedDate)}</span>
                <span>截止：{formatDate(hw.dueDate)}</span>
                {hw.score !== undefined && (
                  <span>
                    得分：<span className="font-mono text-ink">{hw.score}</span>{" "}
                    / {hw.maxScore}
                  </span>
                )}
              </div>
              {hw.feedback && (
                <p className="mt-2 border-t border-rule pt-2 text-sm mark-left">
                  {hw.feedback}
                </p>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}
