import React, { useEffect, useState } from "react";
import { Search, X } from "lucide-react";

const STATUS_FILTERS = [
  ["all", "全部任务"],
  ["进行中", "进行中"],
  ["待审核", "待审核"],
  ["已完成", "已完成"],
  ["待返款", "待返款"],
  ["已撤销", "已撤销"],
];
const STATUS_ALIASES = {
  "待用户完成": "进行中",
  "未通过": "进行中",
  "已发布": "进行中",
};

// Keep the last lightweight board response while operators switch pages.
// Returning to the board renders immediately and refreshes silently.
let taskBoardCache = null;

const formatTime = (value) =>
  value ? new Date(value).toLocaleString("zh-CN", { hour12: false }) : "--";
const maskPhone = (phone = "") =>
  phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");

function TaskDetail({ task, close, onConfirmRefund }) {
  const [refundOpen, setRefundOpen] = useState(false);
  const [refundBusy, setRefundBusy] = useState(false);
  const [linkCopied, setLinkCopied] = useState(false);
  const isAskTask =
    task.task_type === "ask" || task.task_type_label === "提问任务";
  const taskLink = isAskTask
    ? `${window.location.origin}/ask/${task.task_id}`
    : "";
  const proofScreenshots = [
    ...(task.question_screenshots || []),
    ...(task.completion_screenshots || []),
  ];
  const paymentScreenshots = task.payment_screenshots || [];
  async function confirmRefund() {
    setRefundBusy(true);
    try {
      await onConfirmRefund(task);
      setRefundOpen(false);
    } catch (error) {
      window.alert(error.message);
    } finally {
      setRefundBusy(false);
    }
  }
  async function copyTaskLink() {
    if (!taskLink) return;
    let copied = false;
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(taskLink);
        copied = true;
      }
    } catch {
      copied = false;
    }
    if (!copied) {
      const textarea = document.createElement("textarea");
      textarea.value = taskLink;
      textarea.setAttribute("readonly", "");
      textarea.style.position = "fixed";
      textarea.style.opacity = "0";
      document.body.appendChild(textarea);
      textarea.select();
      try {
        copied = document.execCommand("copy");
      } catch {
        copied = false;
      }
      document.body.removeChild(textarea);
    }
    if (copied) {
      setLinkCopied(true);
      window.setTimeout(() => setLinkCopied(false), 1800);
    }
  }
  return (
    <div
      className="task-detail-backdrop"
      onMouseDown={(event) => event.target === event.currentTarget && close()}
    >
      <section className="task-detail-modal">
        <header>
          <div>
            <strong>{task.task_id}</strong>
            <span className={`board-status ${task.status_label}`}>
              {task.status_label}
            </span>
          </div>
          <button onClick={close}>
            <X size={21} />
          </button>
        </header>
        {taskLink && (
          <div className="task-detail-share">
            <span>提问链接</span>
            <input
              readOnly
              value={taskLink}
              aria-label="提问任务链接"
              onFocus={(event) => event.target.select()}
            />
            <button
              type="button"
              className={linkCopied ? "copied" : ""}
              onClick={copyTaskLink}
            >
              {linkCopied ? "已复制" : "复制链接"}
            </button>
          </div>
        )}
        <div className="task-detail-meta">
          <span>
            商品名称<b>{task.product_name}</b>
          </span>
          <span>
            任务类型<b>{task.task_type_label}</b>
          </span>
          <span>
            创建人<b>{task.creator_name}</b>
          </span>
          <span>
            创建时间<b>{formatTime(task.created_at)}</b>
          </span>
        </div>
        <h3>认领用户的问题与回答（共 {task.assigned_users.length} 位）</h3>
        <div className="task-detail-table">
          <div className="head">
            <span>序号</span>
            <span>关联问题与回答</span>
            <span>认领用户</span>
            <span>状态</span>
          </div>
          {task.selected_questions.length === 0 ? (
            <div className="task-detail-empty">暂无问题</div>
          ) : (
            task.selected_questions.map((question, index) => (
              <div className="row" key={question.id}>
                <span>{index + 1}</span>
                <span>
                  <b>Q：{question.question}</b>
                  <small>A：{question.answer}</small>
                </span>
                <span>
                  {task.user_id}
                  <small>{maskPhone(task.phone)}</small>
                </span>
                <span>
                  <em className={`board-status ${task.status_label}`}>
                    {task.status_label}
                  </em>
                </span>
              </div>
            ))
          )}
        </div>
        <div className="task-detail-evidence">
          <section>
            <h3>{isAskTask ? "提问完成截图" : "回答完成截图"}</h3>
            {proofScreenshots.length ? (
              <div>
                {proofScreenshots.map((image) => (
                  <button
                    type="button"
                    key={image.id}
                  >
                    <img src={image.data_url || image.url} alt={image.name || "完成截图"} />
                    <span>点击查看大图</span>
                  </button>
                ))}
              </div>
            ) : (
              <p>未上传完成截图</p>
            )}
          </section>
          <section className="payment">
            <h3>收款码</h3>
            {paymentScreenshots.length ? (
              <div>
                {paymentScreenshots.map((image) => (
                  <button
                    type="button"
                    key={image.id}
                  >
                    <img src={image.data_url || image.url} alt={image.name || "收款码"} />
                    <span>点击核对收款码</span>
                  </button>
                ))}
              </div>
            ) : (
              <p>用户未单独上传收款码</p>
            )}
          </section>
        </div>
        <footer>
          {task.refund_endpoint && (
            <button
              type="button"
              className="confirm-refund"
              onClick={() => setRefundOpen(true)}
            >
              确认返款
            </button>
          )}
          <button onClick={close}>关闭</button>
        </footer>
        {refundOpen && (
          <div
            className="refund-confirm-backdrop"
            onMouseDown={(event) =>
              event.target === event.currentTarget && setRefundOpen(false)
            }
          >
            <section className="refund-confirm-modal">
              <span>✓</span>
              <h2>确认已经完成返款？</h2>
              <p>
                请确认已按用户上传的收款码完成付款。确认后，该任务将归入“已完成”，此操作不可撤销。
              </p>
              <div>
                <button
                  type="button"
                  disabled={refundBusy}
                  onClick={() => setRefundOpen(false)}
                >
                  取消
                </button>
                <button
                  type="button"
                  className="confirm"
                  disabled={refundBusy}
                  onClick={confirmRefund}
                >
                  {refundBusy ? "确认中…" : "确定返款完成"}
                </button>
              </div>
            </section>
          </div>
        )}
      </section>
    </div>
  );
}

export default function TaskBoardPage({ api }) {
  const [tasks, setTasks] = useState(() => taskBoardCache || []);
  const [type, setType] = useState("all");
  const [status, setStatus] = useState(() => window.__taskBoardInitialStatus || "all");
  const [keyword, setKeyword] = useState("");
  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [selectedIds, setSelectedIds] = useState([]);
  const [expandedAskTasks, setExpandedAskTasks] = useState(() => new Set());
  const [detail, setDetail] = useState(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(() => taskBoardCache === null);
  const [busy, setBusy] = useState("");
  const [batchBusy, setBatchBusy] = useState(false);
  const [batchConfirm, setBatchConfirm] = useState(null);
  const [completeConfirm, setCompleteConfirm] = useState(null);
  async function load(showLoading = taskBoardCache === null) {
    if (showLoading) setLoading(true);
    try {
      const result = await api("/api/admin/task-board");
      taskBoardCache = result.data;
      setTasks(result.data);
      setError("");
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    load(taskBoardCache === null);
    window.__taskBoardInitialStatus = "";
  }, []);
  const rowKey = (task) => task.board_key || `${task.task_type}-${task.id}`;
  const isAskTask = (task) => task.task_type === "ask" || task.task_type_label === "提问任务";
  const childRows = (task) => (isAskTask(task) ? task.claimed_tasks || [] : []);
  // Keep filtering as a direct derivation so changing either filter always
  // immediately updates the table (without relying on a stale memoized list).
  const rows = tasks.filter((task) => {
    const taskType = String(task.task_type || "")
      .trim()
      .toLowerCase();
    const taskTypeLabel = String(task.task_type_label || "").trim();
    const rawStatus = String(task.status_label || task.status || "").trim();
    const taskStatus = STATUS_ALIASES[rawStatus] || rawStatus;
    const typeMatch =
      type === "all" ||
      (type === "ask" &&
        (taskType === "ask" || taskTypeLabel === "提问任务")) ||
      (type === "answer" &&
        (taskType === "answer" || taskTypeLabel === "回答任务"));
    const children = childRows(task);
    const childStatusMatch = children.some((child) => {
      const childRawStatus = String(child.status_label || child.status || "").trim();
      return (STATUS_ALIASES[childRawStatus] || childRawStatus) === status;
    });
    const statusMatch = status === "all" || taskStatus === status || childStatusMatch;
    const text = `${task.user_id || ""} ${task.task_id || ""} ${task.product_name || ""} ${children.map((child) => `${child.user_id || ""} ${child.phone || ""}`).join(" ")}`.toLowerCase();
    const createdDate = String(task.created_at || task.updated_at || "").slice(0, 10);
    const fromMatch = !dateFrom || (createdDate && createdDate >= dateFrom);
    const toMatch = !dateTo || (createdDate && createdDate <= dateTo);
    return typeMatch && statusMatch && text.includes(keyword.trim().toLowerCase()) && fromMatch && toMatch;
  });
  const visibleKeys = rows.map(rowKey);
  const allVisibleSelected = visibleKeys.length > 0 && visibleKeys.every((key) => selectedIds.includes(key));
  function toggleSelected(task) {
    const key = rowKey(task);
    setSelectedIds((current) => current.includes(key) ? current.filter((item) => item !== key) : [...current, key]);
  }
  function toggleAllVisible() {
    setSelectedIds((current) => {
      if (allVisibleSelected) return current.filter((key) => !visibleKeys.includes(key));
      return [...new Set([...current, ...visibleKeys])];
    });
  }
  function clearFilters() {
    setKeyword("");
    setDateFrom("");
    setDateTo("");
    setType("all");
    setStatus("all");
  }
  function toggleAskTask(task) {
    const key = rowKey(task);
    setExpandedAskTasks((current) => {
      const next = new Set(current);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  }
  function exportRows() {
    if (!rows.length) {
      window.alert("当前没有可导出的任务");
      return;
    }
    const headers = ["用户ID", "任务ID", "商品信息", "类型", "Q&A数", "待审/完成", "状态", "创建人", "创建时间"];
    const csvCell = (value) => `"${String(value ?? "").replace(/"/g, '""')}"`;
    const lines = [headers, ...rows.map((task) => [
      task.user_id,
      task.task_id,
      task.product_name,
      task.task_type_label,
      task.qa_count,
      `${task.pending_review_count} / ${task.completed_count}`,
      task.status_label,
      task.creator_name,
      formatTime(task.created_at),
    ])].map((line) => line.map(csvCell).join(","));
    const blob = new Blob([`\uFEFF${lines.join("\r\n")}`], { type: "text/csv;charset=utf-8" });
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.download = `任务看板-${new Date().toISOString().slice(0, 10)}.csv`;
    anchor.click();
    window.URL.revokeObjectURL(url);
  }
  async function batchClear() {
    const selected = tasks.filter((task) => selectedIds.includes(rowKey(task)));
    if (!selected.length) {
      window.alert("请先选择要清除的任务");
      return;
    }
    setBatchConfirm({ tasks: selected });
  }
  async function confirmBatchClear() {
    if (!batchConfirm) return;
    const { tasks: selected } = batchConfirm;
    setBatchConfirm(null);
    setBatchBusy(true);
    try {
      const results = await Promise.allSettled(selected.map((task) => api(
        task.delete_endpoint || (task.task_type === "ask"
          ? `/api/admin/ask-tasks/${task.id}`
          : `/api/admin/task-board/${task.id}`),
        { method: "DELETE" },
      )));
      const failedCount = results.filter((result) => result.status === "rejected").length;
      setSelectedIds([]);
      if (detail && selected.some((task) => task.id === detail.id && task.task_type === (detail.task_type || task.task_type))) {
        setDetail(null);
      }
      await load();
      if (failedCount) {
        window.alert(`${selected.length - failedCount} 条任务已删除，${failedCount} 条任务处理失败，请刷新后重试。`);
      }
    } catch (err) {
      window.alert(err.message);
    } finally {
      setBatchBusy(false);
    }
  }
  async function openDetail(task) {
    try {
      if (task.detail_endpoint) {
        const result = await api(task.detail_endpoint);
        setDetail(result.data);
      } else if (task.task_type === "ask") {
        setDetail(task);
      } else {
        const result = await api(`/api/admin/task-board/${task.id}`);
        setDetail(result.data);
      }
    } catch (err) {
      window.alert(err.message);
    }
  }
  async function cancel(task) {
    if (
      !window.confirm(
        `确定撤销任务 ${task.task_id} 吗？撤销后用户将不能继续提交。`,
      )
    )
      return;
    setBusy(task.id);
    try {
      await api(
        task.task_type === "ask"
          ? `/api/admin/ask-tasks/${task.id}/cancel`
          : `/api/admin/task-board/${task.id}/cancel`,
        { method: "POST" },
      );
      await load();
      if (detail?.id === task.id) setDetail(null);
    } catch (err) {
      window.alert(err.message);
    } finally {
      setBusy("");
    }
  }
  async function complete(task) {
    if (!completeConfirm || busy) return;
    setBusy(task.id);
    try {
      await api(`/api/admin/ask-tasks/${task.id}/complete`, { method: "POST" });
      setCompleteConfirm(null);
      setSelectedIds((current) => current.filter((key) => key !== rowKey(task)));
      await load();
      if (detail?.id === task.id) setDetail(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy("");
    }
  }
  async function confirmRefund(task) {
    const result = await api(task.refund_endpoint, { method: "POST" });
    const updatedDetail = {
      ...task,
      ...result.data,
      question_screenshots:
        task.question_screenshots || result.data.question_screenshots || [],
      completion_screenshots:
        task.completion_screenshots || result.data.completion_screenshots || [],
      payment_screenshots:
        task.payment_screenshots || result.data.payment_screenshots || [],
    };
    setDetail(updatedDetail);
    setTasks((current) => {
      const next = current.map((item) =>
        item.board_key === result.data.board_key
          ? { ...item, ...result.data }
          : item,
      );
      taskBoardCache = next;
      return next;
    });
    // A claimed ask row is nested under its system task. Refresh the compact
    // tree as well so the child immediately leaves “待返款” after payment.
    await load(false);
  }
  return (
    <>
      <div className="board-heading">
        <h2>任务看板</h2>
        <p>监控全量问答任务执行状态、完成进度与审核链路。</p>
      </div>
      <div className="board-type-row">
        <span>任务类型：</span>
        {[
          ["all", "全部类型"],
          ["ask", "提问任务"],
          ["answer", "回答任务"],
        ].map(([value, label]) => (
          <button
            type="button"
            className={type === value ? "active" : ""}
            key={value}
            onClick={() => setType(value)}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="board-status-row">
        {STATUS_FILTERS.map(([value, label]) => (
          <button
            type="button"
            className={status === value ? "active" : ""}
            key={value}
            onClick={() => setStatus(value)}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="board-search">
        <Search size={17} />
        <input
          value={keyword}
          onChange={(event) => setKeyword(event.target.value)}
          placeholder="搜索用户ID或任务ID…"
        />
      </div>
      <div className="board-tools">
        <label>
          <span>开始日期</span>
          <input type="date" value={dateFrom} onChange={(event) => setDateFrom(event.target.value)} />
        </label>
        <label>
          <span>结束日期</span>
          <input type="date" value={dateTo} onChange={(event) => setDateTo(event.target.value)} />
        </label>
        <button type="button" onClick={clearFilters}>清空筛选</button>
        <button type="button" onClick={exportRows}>导出表格</button>
        <button type="button" className="danger" disabled={batchBusy} onClick={batchClear}>
          {batchBusy ? "删除中…" : `批量删除${selectedIds.length ? `（${selectedIds.length}）` : ""}`}
        </button>
      </div>
      {error && <div className="form-error">{error}</div>}
      <section
        className="board-table panel"
        key={`${type}|${status}|${keyword.trim().toLowerCase()}|${dateFrom}|${dateTo}`}
      >
        <div className="board-table-head">
          <span className="board-select-cell">
            <input type="checkbox" checked={allVisibleSelected} onChange={toggleAllVisible} aria-label="全选当前任务" />
          </span>
          <span>用户ID</span>
          <span>任务ID</span>
          <span>商品信息</span>
          <span>类型</span>
          <span>Q&A数</span>
          <span>待审/完成</span>
          <span>状态</span>
          <span>创建人</span>
          <span>操作</span>
        </div>
        {loading ? (
          <div className="board-empty">正在加载任务…</div>
        ) : rows.length === 0 ? (
          <div className="board-empty">
            暂无符合条件的任务
          </div>
        ) : (
          rows.map((task) => {
            const key = rowKey(task);
            const children = childRows(task);
            const expanded = expandedAskTasks.has(key);
            return (
              <React.Fragment key={key}>
                <div className="board-table-row">
                  <span className="board-select-cell">
                    <input type="checkbox" checked={selectedIds.includes(key)} onChange={() => toggleSelected(task)} aria-label={`选择任务 ${task.task_id}`} />
                  </span>
                  <span className="board-user-cell">
                    {children.length > 0 && (
                      <button
                        type="button"
                        className={`board-expand-button${expanded ? " open" : ""}`}
                        onClick={() => toggleAskTask(task)}
                        aria-label={expanded ? "收起认领任务" : "展开认领任务"}
                      >
                        ▾
                      </button>
                    )}
                    <code>{task.user_id}</code>
                  </span>
                  <span><b>{task.task_id}</b></span>
                  <span><strong>{task.product_name}</strong><small>{maskPhone(task.phone)}</small></span>
                  <span><em className={`board-type ${task.task_type}`}>{task.task_type_label}</em></span>
                  <span>{task.qa_count}</span>
                  <span>{task.pending_review_count} / {task.completed_count}</span>
                  <span><em className={`board-status ${task.status_label}`}>{task.status_label}</em></span>
                  <span>{task.creator_name}<small>{formatTime(task.created_at)}</small></span>
                  <span className="board-actions">
                    <button onClick={() => openDetail(task)}>详情</button>
                    {task.can_cancel && (
                      <button className="cancel" disabled={busy === task.id} onClick={() => cancel(task)}>
                        {busy === task.id ? "撤销中" : "撤销"}
                      </button>
                    )}
                    {task.can_complete && task.task_type === "ask" && (
                      <button className="complete" disabled={busy === task.id} onClick={() => setCompleteConfirm(task)}>完成任务</button>
                    )}
                    <button className="delete" onClick={() => setBatchConfirm({ tasks: [task] })}>删除</button>
                  </span>
                </div>
                {expanded && children.map((child) => (
                  <div className="board-table-row board-child-row" key={rowKey(child)}>
                    <span className="board-select-cell" />
                    <span className="board-user-cell board-child-user"><i>↳</i><code>{child.user_id}</code></span>
                    <span><b>{child.task_id}</b></span>
                    <span><strong>{child.product_name}</strong><small>{maskPhone(child.phone)}</small></span>
                    <span><em className="board-type ask">提问任务</em></span>
                    <span>{child.qa_count}</span>
                    <span>{child.pending_review_count} / {child.completed_count}</span>
                    <span><em className={`board-status ${child.status_label}`}>{child.status_label}</em></span>
                    <span>{child.creator_name}<small>{formatTime(child.created_at)}</small></span>
                    <span className="board-actions"><button onClick={() => openDetail(child)}>详情</button></span>
                  </div>
                ))}
              </React.Fragment>
            );
          })
        )}
      </section>
      {detail && (
        <TaskDetail
          task={detail}
          close={() => setDetail(null)}
          onConfirmRefund={confirmRefund}
        />
      )}
      {batchConfirm && (
        <div
          className="board-confirm-backdrop"
          onMouseDown={(event) => event.target === event.currentTarget && setBatchConfirm(null)}
        >
          <section className="board-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="batch-clear-title">
            <div className="board-confirm-icon">!</div>
            <h2 id="batch-clear-title">确认是否删除？</h2>
            <p>
              确定删除已选的 {batchConfirm.tasks.length} 条任务吗？删除后将从任务看板和系统记录中永久移除，无法恢复。
            </p>
            <div className="board-confirm-actions">
              <button type="button" onClick={() => setBatchConfirm(null)} disabled={batchBusy}>取消</button>
              <button type="button" className="danger" onClick={confirmBatchClear} disabled={batchBusy}>
                {batchBusy ? "删除中…" : "确认删除"}
              </button>
            </div>
          </section>
        </div>
      )}
      {completeConfirm && (
        <div className="board-confirm-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setCompleteConfirm(null)}>
          <section className="board-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="complete-task-title">
            <div className="board-confirm-icon complete-icon">✓</div>
            <h2 id="complete-task-title">确认完成任务？</h2>
            <p>该提问任务当前已完成 {completeConfirm.completed_count || 0} / {completeConfirm.total_count || completeConfirm.qa_count || 0} 条。确认后将强制归档到“已完成”，用户将不能继续提交。</p>
            <div className="board-confirm-actions">
              <button type="button" onClick={() => setCompleteConfirm(null)} disabled={busy === completeConfirm.id}>取消</button>
              <button type="button" className="confirm-complete" onClick={() => complete(completeConfirm)} disabled={busy === completeConfirm.id}>{busy === completeConfirm.id ? "处理中…" : "确认完成"}</button>
            </div>
          </section>
        </div>
      )}
    </>
  );
}