"use client";

/**
 * 题目详情对话框（ARCHITECTURE.md §5.4 / §9.4 / §10 P5）
 *
 * 数据契约：
 * - adminQuestion(id)：❌ schema 无 → MSW 兜底（@contract-pending）
 *
 * 适配 portal-shell：
 * - 用原生轻量模态（fixed inset-0 + bg-black/50 + 卡片）替代 shadcn Dialog
 * - 数据通过 useAdminQuestion hook 拉取
 * - 错误处理走 notify.error()
 *
 * 关联：ARCHITECTURE.md §5.3 契约纪律 / §9.4 / §11.3 DoD
 */
import { useEffect } from "react";
import { useTranslations } from "next-intl";
import {
  BookOpen,
  Calendar,
  FileText,
  Hash,
  HelpCircle,
  Lightbulb,
  RefreshCw,
  Target,
  User,
} from "lucide-react";

import { useAdminQuestion } from "@/lib/api";
import { notify } from "@/shared/lib/notify";
import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import { Separator } from "@/shared/components/ui/separator";
import {
  difficultyToColorClass,
  formatDifficulty,
  formatQuestionDate,
  formatQuestionStatus,
  formatQuestionType,
  questionStatusToBadgeClass,
} from "@/features/admin/questions/transformations";

export interface QuestionDetailDialogProps {
  /** 当前选中的题目 id，为空时关闭对话框 */
  questionId: string | null;
  onOpenChange: (open: boolean) => void;
}

/**
 * 题目详情对话框。questionId 非空时打开，按 id 拉取详情。
 */
export function QuestionDetailDialog({
  questionId,
  onOpenChange,
}: QuestionDetailDialogProps): React.ReactElement {
  const t = useTranslations("admin.questions.detailDialog");
  const tCommon = useTranslations("common");
  const open = questionId !== null && questionId.length > 0;

  const { data, loading, error, refetch } = useAdminQuestion(questionId ?? "", {
    enabled: open,
  });

  // 查询失败时通知用户（§11.3 DoD #8：catch 块必须包含 notify.error()）
  useEffect(() => {
    if (error) {
      notify.error(tCommon("error.loadFailed", { message: String(error) }));
    }
  }, [error, tCommon]);

  // ESC 键关闭
  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent): void => {
      if (e.key === "Escape") onOpenChange(false);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [open, onOpenChange]);

  if (!open) return <></>;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="question-detail-title"
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      onClick={() => onOpenChange(false)}
    >
      <div
        className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-lg border bg-card shadow-lg"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 头部 */}
        <div className="flex items-start justify-between border-b p-6 pb-4">
          <div className="flex-1">
            <h2
              id="question-detail-title"
              className="flex items-center gap-2 text-lg font-semibold"
            >
              <HelpCircle className="size-5" />
              {t("title")}
            </h2>
            {data ? (
              <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
                <Badge variant="outline">{formatQuestionType(data.type)}</Badge>
                <Badge variant="secondary">
                  {formatQuestionStatus(data.status)}
                </Badge>
                {data.subjectName ? (
                  <span className="text-muted-foreground">
                    {data.subjectName}
                  </span>
                ) : null}
              </div>
            ) : null}
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onOpenChange(false)}
            aria-label={t("close")}
          >
            ✕
          </Button>
        </div>

        {/* 内容区 */}
        <div className="flex-1 overflow-y-auto p-6">
          {loading ? (
            <div className="space-y-3">
              <div className="h-4 w-1/3 animate-pulse rounded bg-muted" />
              <div className="h-20 animate-pulse rounded bg-muted" />
              <div className="h-4 w-1/4 animate-pulse rounded bg-muted" />
              <div className="h-16 animate-pulse rounded bg-muted" />
            </div>
          ) : error ? (
            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-center">
              <p className="text-sm text-destructive">
                {tCommon("error.loadFailed", { message: String(error) })}
              </p>
              <Button
                variant="outline"
                size="sm"
                className="mt-3"
                onClick={() => void refetch()}
              >
                <RefreshCw className="size-4" />
                {t("retry")}
              </Button>
            </div>
          ) : data ? (
            <div className="space-y-5">
              {/* 元信息 */}
              <section className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
                <InfoItem
                  icon={<Hash className="size-4" />}
                  label={t("type")}
                  value={formatQuestionType(data.type)}
                />
                <InfoItem
                  icon={<Target className="size-4" />}
                  label={t("difficulty")}
                  value={
                    <span
                      className={`text-xs font-medium ${difficultyToColorClass(data.difficulty)}`}
                    >
                      {formatDifficulty(data.difficulty)}
                    </span>
                  }
                />
                <InfoItem
                  icon={<FileText className="size-4" />}
                  label={t("status")}
                  value={
                    <span
                      className={`inline-flex h-6 items-center rounded-full px-2 text-xs font-medium ${questionStatusToBadgeClass(data.status)}`}
                    >
                      {formatQuestionStatus(data.status)}
                    </span>
                  }
                />
                <InfoItem
                  icon={<BookOpen className="size-4" />}
                  label={t("subject")}
                  value={data.subjectName || data.subjectId || "--"}
                />
                <InfoItem
                  icon={<BookOpen className="size-4" />}
                  label={t("textbook")}
                  value={data.textbookTitle || data.textbookId || "--"}
                />
                <InfoItem
                  icon={<Lightbulb className="size-4" />}
                  label={t("knowledgePoint")}
                  value={
                    data.knowledgePointTitle || data.knowledgePointId || "--"
                  }
                />
              </section>

              <Separator />

              {/* 题目内容 */}
              <section>
                <h3 className="mb-2 text-sm font-medium">{t("content")}</h3>
                <div className="rounded-md border bg-muted/30 p-3 text-sm">
                  <pre className="whitespace-pre-wrap break-words font-sans">
                    {data.content || t("noContent")}
                  </pre>
                </div>
              </section>

              {/* 正确答案 */}
              {data.answer ? (
                <section>
                  <h3 className="mb-2 flex items-center gap-1 text-sm font-medium text-emerald-600 dark:text-emerald-400">
                    <Target className="size-4" />
                    {t("answer")}
                  </h3>
                  <div className="rounded-md border border-emerald-200 bg-emerald-50/50 p-3 text-sm dark:border-emerald-900 dark:bg-emerald-950/20">
                    <pre className="whitespace-pre-wrap break-words font-sans">
                      {data.answer}
                    </pre>
                  </div>
                </section>
              ) : null}

              {/* 解析 */}
              {data.explanation ? (
                <section>
                  <h3 className="mb-2 flex items-center gap-1 text-sm font-medium">
                    <Lightbulb className="size-4" />
                    {t("explanation")}
                  </h3>
                  <div className="rounded-md border bg-background p-3 text-sm">
                    <pre className="whitespace-pre-wrap break-words font-sans">
                      {data.explanation}
                    </pre>
                  </div>
                </section>
              ) : null}

              {/* 来源 */}
              {data.source ? (
                <section>
                  <h3 className="mb-2 text-sm font-medium">{t("source")}</h3>
                  <p className="text-sm text-muted-foreground">{data.source}</p>
                </section>
              ) : null}

              {/* 元信息 */}
              <section className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
                <span className="flex items-center gap-1">
                  <User className="size-3" />
                  {t("createdBy")}：{data.createdBy || "--"}
                </span>
                <span className="flex items-center gap-1">
                  <Calendar className="size-3" />
                  {t("createdAt")}：{formatQuestionDate(data.createdAt)}
                </span>
                <span className="flex items-center gap-1">
                  <Calendar className="size-3" />
                  {t("updatedAt")}：{formatQuestionDate(data.updatedAt)}
                </span>
              </section>
            </div>
          ) : (
            <div className="py-6 text-center text-sm text-muted-foreground">
              {t("noData")}
            </div>
          )}
        </div>

        {/* 底部 */}
        <div className="flex justify-end gap-2 border-t p-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            {t("close")}
          </Button>
        </div>
      </div>
    </div>
  );
}

/** 信息项（图标 + 标签 + 值）。 */
function InfoItem({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
}): React.ReactElement {
  return (
    <div className="flex items-center gap-2">
      <span className="text-muted-foreground">{icon}</span>
      <div>
        <p className="text-xs text-muted-foreground">{label}</p>
        <p className="font-medium">{value || "--"}</p>
      </div>
    </div>
  );
}