"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { api } from "@/lib/api";
import type { FeishuSession, RawQAItem } from "@/lib/types";
import RiskBadge from "@/components/RiskBadge";
import StatusBadge from "@/components/StatusBadge";

export default function SessionDetailPage() {
  const params = useParams<{ id: string }>();
  const [session, setSession] = useState<FeishuSession | null>(null);
  const [items, setItems] = useState<RawQAItem[]>([]);

  useEffect(() => {
    async function load() {
      const id = Number(params.id);
      const [sessionData, rawData] = await Promise.all([
        api.get<FeishuSession>(`/sessions/${id}`),
        api.get<RawQAItem[]>(`/raw-qa?session_id=${id}`)
      ]);
      setSession(sessionData);
      setItems(rawData);
    }
    load();
  }, [params.id]);

  if (!session) return <div className="text-sm text-slate-500">加载中...</div>;

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-semibold text-ink">{session.title}</h1>
          <p className="mt-1 text-sm text-slate-500">
            {session.session_code} / {session.date ?? "-"} / {session.teachers ?? "-"}
          </p>
        </div>
        <StatusBadge status={session.process_status} />
      </div>

      <div className="rounded-md border border-line bg-white p-4">
        <div className="mb-3 text-sm font-semibold text-ink">原始资料</div>
        <pre className="max-h-96 overflow-auto whitespace-pre-wrap rounded-md bg-panel p-4 text-sm leading-6 text-slate-700">
          {session.source_text || "暂无原始资料"}
        </pre>
      </div>

      <div className="space-y-3">
        {items.map((item) => (
          <div key={item.id} className="rounded-md border border-line bg-white p-4">
            <div className="mb-3 flex flex-wrap items-center gap-2">
              <span className="text-sm font-semibold">{item.qa_code}</span>
              <RiskBadge level={item.risk_level} />
              <StatusBadge status={item.review_status} />
            </div>
            <div className="grid gap-4 lg:grid-cols-2">
              <div>
                <div className="text-xs text-slate-500">原始问题</div>
                <div className="mt-1 text-sm leading-6">{item.raw_question}</div>
              </div>
              <div>
                <div className="text-xs text-slate-500">原始回答</div>
                <div className="mt-1 text-sm leading-6">{item.raw_answer}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}