import React, { useEffect, useMemo, useRef, useState } from "react";
import { MessageCircleMore, RefreshCw, X } from "lucide-react";

const REASONS = [
  "内容不清晰",
  "数量不足",
  "问题不匹配",
  "回答不符合要求",
  "商品不一致",
  "其他",
];
const STATUSES = ["全部", "待审核"];
const formatTime = (value) =>
  value ? new Date(value).toLocaleString("zh-CN", { hour12: false }) : "--";
const productName = (record) =>
  [
    ...new Set(
      record.questions.filter((q) => q.selected).map((q) => q.product_title),
    ),
  ].join(" / ") || "待识别商品";
const StatusBadge = ({ status }) => (
  <em className={`review-v2-status ${status}`}>{status}</em>
);

function RefundPrompt({ onConfirm, onCancel }) {
  return (
    <div className="review-v2-backdrop refund-prompt-backdrop">
      <section className="refund-prompt" role="dialog" aria-modal="true" aria-labelledby="refund-prompt-title">
        <div className="refund-prompt-icon">✓</div>
        <div className="refund-prompt-content">
          <h2 id="refund-prompt-title">审核已通过</h2>
          <p>是否前往任务看板的“待返款”模块进行返款？</p>
        </div>
        <div className="refund-prompt-actions">
          <button type="button" className="refund-prompt-cancel" onClick={onCancel}>暂不前往</button>
          <button type="button" className="refund-prompt-confirm" onClick={onConfirm}>前往待返款</button>
        </div>
      </section>
    </div>
  );
}

function ReviewDetail({ record, close, decide, busy }) {
  const [reason, setReason] = useState(REASONS[0]);
  const [customReason, setCustomReason] = useState("");
  const selected = record.questions.filter((q) => q.selected);
  const pending = record.status === "待审核";
  return (
    <div
      className="review-v2-backdrop"
      onMouseDown={(event) => event.target === event.currentTarget && close()}
    >
      <section className="review-v2-modal">
        <header>
          <div>
            <h2>
              回答审核 · 用户任务列表 <StatusBadge status={record.status} />
            </h2>
            <p>任务ID：{record.submission_no}</p>
          </div>
          <button onClick={close}>
            <X size={22} />
          </button>
        </header>
        <div className="review-v2-modal-body">
          <div className="review-v2-summary">
            <code>{record.user_id}</code>
            <code>{record.submission_no}</code>
            <span>商品：{productName(record)}</span>
            <span>提交时间：{formatTime(record.updated_at)}</span>
          </div>
          <h3>① 问答记录（发布问题 ↔ 用户回答）</h3>
          <div className="review-v2-qa">
            {selected.map((question, index) => (
              <article key={question.id}>
                <strong>
                  Q{index + 1}：{question.question}
                </strong>
                <p>
                  <b>A：</b>
                  {question.answer}
                </p>
              </article>
            ))}
          </div>
          <div className="review-v2-media">
            <section>
              <h3>② 用户上传的任务截图</h3>
              <div>
                {record.completion_screenshots.map((image, index) => (
                  <figure key={image.id}>
                    <img
                      src={image.data_url}
                      alt={`任务截图${index + 1}`}
                    />
                    <figcaption>任务截图 {index + 1}</figcaption>
                  </figure>
                ))}
              </div>
            </section>
            <section>
              <h3>③ 返款二维码截图</h3>
              <div>
                {record.payment_screenshots?.length ? (
                  record.payment_screenshots.map((image) => (
                    <figure key={image.id}>
                      <img
                        src={image.data_url}
                        alt="收款码"
                      />
                      <figcaption>审核通过后用于后续人工处理</figcaption>
                    </figure>
                  ))
                ) : (
                  <div className="review-v2-no-payment">未单独上传收款码</div>
                )}
              </div>
            </section>
          </div>
          {record.latest_review && !pending && (
            <div
              className={`review-v2-result ${record.latest_review.approved ? "approved" : ""}`}
            >
              <strong>
                {record.latest_review.approved ? "审核已通过" : "审核未通过"}
              </strong>
              {!record.latest_review.approved && (
                <p>
                  原因：{record.latest_review.reason_code}
                  {record.latest_review.reason_text
                    ? `；${record.latest_review.reason_text}`
                    : ""}
                </p>
              )}
            </div>
          )}
        </div>
        {pending ? (
          <footer className="review-v2-sticky-actions">
            <div>
              <span>审核不通过原因：</span>
              <select
                value={reason}
                onChange={(event) => setReason(event.target.value)}
              >
                {REASONS.map((item) => (
                  <option key={item}>{item}</option>
                ))}
              </select>
              <input
                value={customReason}
                onChange={(event) => setCustomReason(event.target.value)}
                placeholder={
                  reason === "其他"
                    ? "请输入自定义原因（必填）"
                    : "补充说明（选填）"
                }
              />
            </div>
            <button
              className="reject"
              disabled={busy || (reason === "其他" && !customReason.trim())}
              onClick={() => decide(record, false, reason, customReason.trim())}
            >
              {busy ? "处理中…" : "审核不通过（需重做）"}
            </button>
            <button
              className="approve"
              disabled={busy}
              onClick={() => decide(record, true)}
            >
              {busy ? "处理中…" : "审核通过"}
            </button>
          </footer>
        ) : (
          <footer className="review-v2-processed-actions">
            <span>
              该任务已完成审核，当前状态：
              <StatusBadge status={record.status} />
            </span>
            <button onClick={close}>关闭</button>
          </footer>
        )}
      </section>
    </div>
  );
}

function AskReviewDetail({ record, close, onChanged, api, onApproved }) {
  const [reason, setReason] = useState("截图不清晰");
  const [reasonText, setReasonText] = useState("");
  const [busy, setBusy] = useState(false);
  const selected = record.questions.filter((item) => item.selected);
  async function decide(approved) {
    setBusy(true);
    try {
      await api(
        `/api/admin/ask-completion-reviews/${record.batch_id || record.assignment_id}/decision`,
        {
          method: "POST",
          body: JSON.stringify({
            approved,
            reason_code: approved ? "" : reason,
            reason_text: reasonText.trim(),
          }),
        },
      );
      close();
      await onChanged();
      window.dispatchEvent(new Event("review-count-changed"));
      if (approved) onApproved();
    } catch (error) {
      window.alert(error.message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <div
      className="review-v2-backdrop"
      onMouseDown={(event) => event.target === event.currentTarget && close()}
    >
      <section className="review-v2-modal">
        <header>
          <div>
            <h2>
              提问审核 · 用户任务详情 <StatusBadge status={record.status} />
            </h2>
            <p>任务ID：{record.task_id}</p>
          </div>
          <button onClick={close}>
            <X size={22} />
          </button>
        </header>
        <div className="review-v2-modal-body">
          <div className="review-v2-summary">
            <code>{record.user_id}</code>
            <code>{record.task_id}</code>
            <span>商品：{record.product_name}</span>
            <span>提交时间：{formatTime(record.updated_at)}</span>
          </div>
          <h3>① 用户认领并完成的提问</h3>
          <div className="review-v2-qa">
            {selected.map((item, index) => (
              <article key={item.id}>
                <strong>
                  Q{index + 1}：{item.question}
                </strong>
              </article>
            ))}
          </div>
          <div className="review-v2-media">
            <section>
              <h3>② 用户上传的提问截图</h3>
              <div>
                {record.question_screenshots.map((image, index) => (
                  <figure key={image.id}>
                    <img
                      src={image.data_url}
                      alt={`提问截图${index + 1}`}
                    />
                    <figcaption>提问截图 {index + 1}</figcaption>
                  </figure>
                ))}
              </div>
            </section>
            <section>
              <h3>③ 用户上传的收款码</h3>
              <div>
                {record.payment_screenshots.map((image) => (
                  <figure key={image.id}>
                    <img
                      src={image.data_url}
                      alt="收款码"
                    />
                    <figcaption>收款码截图</figcaption>
                  </figure>
                ))}
              </div>
            </section>
          </div>
          {record.latest_review && record.status !== "待审核" && (
            <div
              className={`review-v2-result ${record.latest_review.approved ? "approved" : ""}`}
            >
              <strong>
                {record.latest_review.approved ? "审核已通过" : "审核未通过"}
              </strong>
              {!record.latest_review.approved && (
                <p>
                  原因：{record.latest_review.reason_code}
                  {record.latest_review.reason_text
                    ? `；${record.latest_review.reason_text}`
                    : ""}
                </p>
              )}
            </div>
          )}
        </div>
        {record.status === "待审核" ? (
          <footer className="review-v2-sticky-actions">
            <div>
              <span>审核不通过原因：</span>
              <select
                value={reason}
                onChange={(event) => setReason(event.target.value)}
              >
                <option>截图不清晰</option>
                <option>数量不足</option>
                <option>问题不匹配</option>
                <option>商品不一致</option>
                <option>重复提交</option>
                <option>其他</option>
              </select>
              <input
                value={reasonText}
                onChange={(event) => setReasonText(event.target.value)}
                placeholder="补充说明（选填）"
              />
            </div>
            <button
              className="reject"
              disabled={busy}
              onClick={() => decide(false)}
            >
              审核不通过
            </button>
            <button
              className="approve"
              disabled={busy}
              onClick={() => decide(true)}
            >
              审核通过
            </button>
          </footer>
        ) : (
          <footer className="review-v2-processed-actions">
            <span>
              当前审核状态：
              <StatusBadge status={record.status} />
            </span>
            <button onClick={close}>关闭</button>
          </footer>
        )}
      </section>
    </div>
  );
}

function AskReviewQueue({ api, onApproved }) {
  const [records, setRecords] = useState([]);
  const [detail, setDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  async function openDetail(record) {
    try {
      const result = await api(
        `/api/admin/ask-completion-reviews/${record.batch_id || record.assignment_id}`,
      );
      setDetail(result.data);
    } catch (error) {
      window.alert(error.message);
    }
  }
  async function load() {
    setLoading(true);
    try {
      const result = await api("/api/admin/ask-completion-reviews");
      setRecords(result.data);
    } catch (error) {
      window.alert(error.message);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    load();
  }, []);
  return (
    <>
      <section className="review-v2-table panel">
        <div className="head">
          <span>用户 / 任务</span>
          <span>商品</span>
          <span>提交时间</span>
          <span>提问数</span>
          <span>审核状态</span>
          <span>操作</span>
        </div>
        {loading ? (
          <div className="review-v2-empty">正在加载提问审核任务…</div>
        ) : records.length === 0 ? (
          <div className="review-v2-empty">暂无提问审核任务</div>
        ) : (
          records.map((record) => (
            <div className="row" key={record.batch_id || record.assignment_id}>
              <span>
                <b>
                  <code>{record.user_id}</code>
                  <code>{record.task_id}</code>
                </b>
                <small>
                  {record.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}
                </small>
              </span>
              <span>{record.product_name}</span>
              <span>{formatTime(record.updated_at)}</span>
              <span>
                <strong>
                  {record.questions.filter((item) => item.selected).length}
                </strong>{" "}
                条提问
              </span>
              <span>
                <StatusBadge status={record.status} />
              </span>
              <span>
                <button onClick={() => openDetail(record)}>
                  {record.status === "待审核" ? "查看并审核" : "查看详情"}
                </button>
              </span>
            </div>
          ))
        )}
      </section>
      {detail && (
        <AskReviewDetail
          record={detail}
          close={() => setDetail(null)}
          onChanged={load}
          api={api}
          onApproved={onApproved}
        />
      )}
    </>
  );
}

export default function ReviewCenterPage({ api }) {
  const [queue, setQueue] = useState("ask");
  const [statusFilter, setStatusFilter] = useState("待审核");
  const [records, setRecords] = useState([]);
  const [detail, setDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [refundPrompt, setRefundPrompt] = useState(false);
  const loadVersion = useRef(0);
  async function openAnswerDetail(record) {
    setDetailLoading(true);
    try {
      const result = await api(
        `/api/admin/answer-completion-reviews/${record.id}`,
      );
      setDetail(result.data);
    } catch (err) {
      window.alert(err.message);
    } finally {
      setDetailLoading(false);
    }
  }
  async function load() {
    const version = ++loadVersion.current;
    setLoading(true);
    try {
      const result = await api("/api/admin/answer-completion-reviews");
      if (version !== loadVersion.current) return;
      setRecords(result.data);
      setError("");
    } catch (err) {
      if (version === loadVersion.current) setError(err.message);
    } finally {
      if (version === loadVersion.current) setLoading(false);
    }
  }
  useEffect(() => {
    load();
  }, []);
  useEffect(() => {
    if (queue !== "answer") return undefined;
    const timer = window.setInterval(() => load(), 5000);
    return () => window.clearInterval(timer);
  }, [queue]);
  const allRows = useMemo(
    () => records.filter((record) => record.status === "待审核"),
    [records],
  );
  const rows = useMemo(
    () =>
      statusFilter === "全部"
        ? allRows
        : allRows.filter((record) => record.status === statusFilter),
    [allRows, statusFilter],
  );
  const count = (status) =>
    status === "全部"
      ? allRows.length
      : allRows.filter((record) => record.status === status).length;
  async function decide(record, approved, reasonCode = "", reasonText = "") {
    setBusy(true);
    try {
      await api(`/api/admin/answer-completion-reviews/${record.id}/decision`, {
        method: "POST",
        body: JSON.stringify({
          approved,
          reason_code: reasonCode,
          reason_text: reasonText,
        }),
      });
      setDetail(null);
      await load();
      window.dispatchEvent(new Event("review-count-changed"));
      setStatusFilter("待审核");
      if (approved) setRefundPrompt(true);
    } catch (err) {
      window.alert(err.message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <>
      <div className="review-v2-heading">
        <div>
          <h2>审核中心</h2>
          <p>提问审核与回答审核，对照用户提交截图进行任务终审。</p>
        </div>
        <div>
          <button
            className={queue === "ask" ? "active" : ""}
            onClick={() => setQueue("ask")}
          >
            队列一：提问审核
          </button>
          <button
            className={queue === "answer" ? "active" : ""}
            onClick={() => {
              setQueue("answer");
              load();
            }}
          >
            队列二：回答审核
          </button>
          <button
            className="review-v2-refresh"
            type="button"
            onClick={() => load()}
            disabled={loading}
            title="刷新审核列表"
          >
            <RefreshCw size={14} className={loading ? "spin" : ""} />
            {loading ? "刷新中…" : "刷新列表"}
          </button>
        </div>
      </div>
      <div className={`review-v2-guide ${queue}`}>
        <MessageCircleMore size={17} />
        <div>
          <strong>
            {queue === "answer" ? "回答审核说明" : "提问审核说明"}
          </strong>
          <p>
            {queue === "answer"
              ? "同一用户在同一任务下的多组问答按「用户ID + 任务ID」归并为一条；点击查看任务列表，逐组对照问答和用户完成截图。"
              : "审核提问用户提交的问题、截图及任务完成情况。提问任务链路接入后会显示在这里。"}
          </p>
        </div>
      </div>
      {error && <div className="form-error">{error}</div>}
      {queue === "ask" ? (
        <AskReviewQueue api={api} onApproved={() => setRefundPrompt(true)} />
      ) : (
        <>
          <div className="review-v2-status-filter">
            <strong>审核状态：</strong>
            {STATUSES.map((status) => (
              <button
                key={status}
                className={statusFilter === status ? "active" : ""}
                onClick={() => setStatusFilter(status)}
              >
                {status}
                <small>{count(status)}</small>
              </button>
            ))}
          </div>
          <section className="review-v2-table panel">
            <div className="head">
              <span>用户 / 任务</span>
              <span>商品</span>
              <span>提交时间</span>
              <span>问答数</span>
              <span>审核状态</span>
              <span>操作</span>
            </div>
            {loading ? (
              <div className="review-v2-empty">正在加载审核任务…</div>
            ) : rows.length === 0 ? (
              <div className="review-v2-empty">当前状态暂无回答审核任务</div>
            ) : (
              rows.map((record) => (
                <div className="row" key={record.id}>
                  <span>
                    <b>
                      <code>{record.user_id}</code>
                      <code>{record.submission_no}</code>
                    </b>
                    <small>
                      {record.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}
                    </small>
                  </span>
                  <span>{productName(record)}</span>
                  <span>{formatTime(record.updated_at)}</span>
                  <span>
                    <strong>
                      {record.questions.filter((q) => q.selected).length}
                    </strong>{" "}
                    组问答
                  </span>
                  <span>
                    <StatusBadge status={record.status} />
                  </span>
                  <span>
                    <button onClick={() => openAnswerDetail(record)}>
                      {record.status === "待审核"
                        ? "查看并审核"
                        : "查看任务列表"}
                    </button>
                  </span>
                </div>
              ))
            )}
          </section>
        </>
      )}
      {detail && (
        <ReviewDetail
          record={detail}
          close={() => setDetail(null)}
          decide={decide}
          busy={busy}
        />
      )}
      {refundPrompt && (
        <RefundPrompt
          onCancel={() => setRefundPrompt(false)}
          onConfirm={() => {
            setRefundPrompt(false);
            window.dispatchEvent(new CustomEvent("open-task-board", { detail: { status: "待返款" } }));
          }}
        />
      )}
    </>
  );
}