"use client";

import { useEffect, useMemo, useState } from "react";
import { api } from "@/lib/api";
import type { RawQAItem } from "@/lib/types";
import QAReviewCard from "@/components/QAReviewCard";

const riskFilters = [
  "全部",
  "学员隐私",
  "未成年人信息",
  "婚姻家庭敏感内容",
  "心理 / 医疗边界",
  "法律边界",
  "课程效果承诺",
  "团队表达风险",
  "其他"
];

export default function HighRiskPage() {
  const [items, setItems] = useState<RawQAItem[]>([]);
  const [filter, setFilter] = useState("全部");

  async function load() {
    const [high, forbidden] = await Promise.all([
      api.get<RawQAItem[]>("/raw-qa?risk_level=high"),
      api.get<RawQAItem[]>("/raw-qa?risk_level=forbidden")
    ]);
    setItems([...high, ...forbidden]);
  }

  useEffect(() => {
    load();
  }, []);

  const visible = useMemo(() => {
    if (filter === "全部") return items;
    if (filter === "其他") return items.filter((item) => item.risk_types.length === 0);
    return items.filter((item) => item.risk_types.includes(filter));
  }, [filter, items]);

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-2xl font-semibold text-ink">高风险问答</h1>
        <select
          value={filter}
          onChange={(event) => setFilter(event.target.value)}
          className="h-10 rounded-md border border-line bg-white px-3 text-sm outline-none focus:border-jade"
        >
          {riskFilters.map((item) => (
            <option key={item}>{item}</option>
          ))}
        </select>
      </div>
      <div className="space-y-4">
        {visible.map((item) => (
          <QAReviewCard key={item.id} item={item} onChanged={load} />
        ))}
        {visible.length === 0 ? (
          <div className="rounded-md border border-line bg-white p-8 text-center text-sm text-slate-500">暂无高风险问答</div>
        ) : null}
      </div>
    </div>
  );
}