"use client";

/**
 * AnnouncementDetail — 公告详情（批次 A）
 *
 * 数据源：useAnnouncementDetail + useMarkAnnouncementRead
 */

import { useEffect } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useAnnouncementDetail, useMarkAnnouncementRead } from "@/lib/graphql/hooks";
import type { AnnouncementType } from "@/lib/graphql/types";

const TYPE_LABELS: Record<AnnouncementType, string> = {
  school: "校级",
  grade: "年级",
  class: "班级",
};

export default function AnnouncementDetailPage(): JSX.Element {
  const params = useParams();
  const announcementId = params["id"] as string;

  const { data, fetching, error } = useAnnouncementDetail(announcementId);
  const { execute: markRead } = useMarkAnnouncementRead();

  useEffect(() => {
    if (data && !data.isReadByCurrentUser) {
      markRead({ announcementId: data.id });
    }
  }, [data, announcementId, markRead]);

  if (fetching) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-3xl mx-auto">
        <p className="text-sm" style={{ color: "var(--color-ink-muted)" }} aria-live="polite">
          加载中…
        </p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-3xl mx-auto">
        <div role="alert" className="card-paper p-6" style={{ borderColor: "var(--color-danger)" }}>
          <p className="text-sm" style={{ color: "var(--color-danger)" }}>
            公告加载失败：{error.message}
          </p>
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-3xl mx-auto">
        <div className="card-paper p-8 text-center">
          <p className="text-base font-serif" style={{ color: "var(--color-ink)" }}>
            未找到该公告
          </p>
          <Link href="/announcements" className="mt-4 inline-block btn-secondary text-xs">
            返回公告列表
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="px-6 lg:px-10 py-8 lg:py-10 max-w-3xl mx-auto">
      <Link href="/announcements" className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
        ← 返回公告列表
      </Link>

      <article className="mt-4">
        <header className="mb-6">
          <div className="flex items-center gap-2 mb-2">
            <span className="badge badge-info">{TYPE_LABELS[data.type]}</span>
            {data.isPinned && <span className="badge badge-warning">置顶</span>}
          </div>
          <h1 className="text-2xl lg:text-3xl font-serif" style={{ color: "var(--color-ink)" }}>
            {data.title}
          </h1>
          <div className="mt-3 flex items-center gap-4 text-xs" style={{ color: "var(--color-ink-muted)" }}>
            <span>{data.authorName ?? "—"}</span>
            {data.publishedAt && (
              <span>{new Date(data.publishedAt).toLocaleString("zh-CN")}</span>
            )}
          </div>
        </header>

        <div className="rule-thin mb-6" />

        <div className="prose-sm">
          <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
            {data.content}
          </p>
        </div>
      </article>
    </div>
  );
}
