import React, { useState } from "react";
import { Check, Link2, Plus, Sparkles } from "lucide-react";

const blankForm = {
  product_link: "",
  product_name: "",
  category: "",
  benefits: "",
  selling_points: "",
  language_style: "口语（亲切随性）",
  target_group: "女性",
  usage_scene: "居家",
  purchase_channel: "电商平台",
  question_count: 5,
};

async function readReferenceFile(file) {
  if (!file) return "";
  return (await file.text()).slice(0, 20000);
}

export default function CreateAskTasksPage({ api }) {
  const [form, setForm] = useState(blankForm);
  const [task, setTask] = useState(null);
  const [questions, setQuestions] = useState([]);
  const [editing, setEditing] = useState(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [referenceFile, setReferenceFile] = useState(null);
  const update = (key, value) =>
    setForm((current) => ({ ...current, [key]: value }));

  async function generate() {
    setBusy(true);
    setError("");
    try {
      const reference_qa = await readReferenceFile(referenceFile);
      const result = await api("/api/admin/ask-tasks/generate", {
        method: "POST",
        body: JSON.stringify({
          ...form,
          question_count: Number(form.question_count),
          reference_qa,
        }),
      });
      setTask(result.data);
      setQuestions(
        result.data.selected_questions.map((item) => ({
          ...item,
          selected: true,
        })),
      );
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }
  async function saveQuestion(index, value) {
    setQuestions((current) =>
      current.map((item, i) =>
        i === index ? { ...item, question: value } : item,
      ),
    );
    const question = questions[index];
    if (
      task &&
      question &&
      !String(question.id).startsWith("new-") &&
      value.trim()
    )
      await api(`/api/admin/ask-tasks/${task.id}/questions/${question.id}`, {
        method: "PATCH",
        body: JSON.stringify({ question: value.trim() }),
      });
  }
  async function toggle(index) {
    const question = questions[index];
    const selected = !question.selected;
    setQuestions((current) =>
      current.map((item, i) => (i === index ? { ...item, selected } : item)),
    );
    if (task && !String(question.id).startsWith("new-"))
      await api(`/api/admin/ask-tasks/${task.id}/questions/${question.id}`, {
        method: "PATCH",
        body: JSON.stringify({ selected }),
      });
  }
  async function addQuestion() {
    const value = window.prompt("请输入提问内容");
    if (!value?.trim()) return;
    if (!task)
      return setQuestions((current) => [
        ...current,
        { id: `new-${Date.now()}`, question: value.trim(), selected: true },
      ]);
    try {
      const result = await api(`/api/admin/ask-tasks/${task.id}/questions`, {
        method: "POST",
        body: JSON.stringify({ question: value.trim() }),
      });
      setQuestions((current) => [...current, result.data]);
    } catch (err) {
      setError(err.message);
    }
  }
  async function publish() {
    if (!task) return setError("请先生成提问");
    setBusy(true);
    setError("");
    try {
      const result = await api(`/api/admin/ask-tasks/${task.id}/publish`, {
        method: "POST",
      });
      setTask(result.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }

  if (task?.status === "已发布")
    return (
      <>
        <div className="create-page-heading">
          <div>
            <h2>创建任务</h2>
            <p>提问任务已发布，可在任务看板查看。</p>
          </div>
        </div>
        <section className="ask-created-card panel">
          <div className="ask-created-icon">
            <Check size={34} />
          </div>
          <h2>任务创建成功！</h2>
          <p>
            任务ID：<strong>{task.task_id}</strong>
          </p>
          <div className="ask-link-box">
            <span>
              <Link2 size={14} />
              提问任务链接
            </span>
            <code>
              {window.location.origin}/ask/{task.task_id}
            </code>
            <small>当前链接为任务预留入口，后续接入提问用户页面。</small>
          </div>
          <div>
            <button
              className="primary-button"
              onClick={() =>
                window.dispatchEvent(new CustomEvent("open-task-board"))
              }
            >
              前往任务看板查看
            </button>
            <button
              className="ghost-button"
              onClick={() => {
                setForm(blankForm);
                setQuestions([]);
                setTask(null);
              }}
            >
              继续创建新任务
            </button>
          </div>
        </section>
      </>
    );

  return (
    <>
      <div className="create-page-heading">
        <div>
          <h2>创建任务</h2>
          <p>通过顶部切换创建「提问任务」或「回答任务」。</p>
        </div>
        <div className="create-mode-tabs">
          <button className="active">创建提问任务</button>
          <button
            onClick={() =>
              window.dispatchEvent(new CustomEvent("switch-create-answer"))
            }
          >
            创建回答任务
          </button>
        </div>
      </div>
      <div className="ask-stepper">
        <b>1</b>
        <strong>Step 1 生成并勾选提问</strong>
        <i />
        <span>2　Step 2 发布成功</span>
      </div>
      <div className="ask-workspace panel">
        <section className="ask-config">
          <div className="panel-title">
            <Sparkles size={17} />
            生成条件配置 <small>* 商品链接为必填项</small>
          </div>
          <label>
            商品链接 *
            <input
              value={form.product_link}
              onChange={(event) => update("product_link", event.target.value)}
              placeholder="粘贴商品链接，例如：https://item.jd.com/100028981.html"
            />
          </label>
          <h4>商品信息</h4>
          <label>
            商品名称
            <input
              value={form.product_name}
              onChange={(event) => update("product_name", event.target.value)}
              placeholder="请输入商品名称"
            />
          </label>
          <div className="two-col">
            <label>
              商品品类
              <input
                value={form.category}
                onChange={(event) => update("category", event.target.value)}
                placeholder="例如：面部精华"
              />
            </label>
            <label>
              商品功效
              <input
                value={form.benefits}
                onChange={(event) => update("benefits", event.target.value)}
                placeholder="例如：舒缓泛红、修护屏障"
              />
            </label>
          </div>
          <label>
            商品卖点
            <textarea
              value={form.selling_points}
              onChange={(event) => update("selling_points", event.target.value)}
              placeholder="例如：油敏肌救星，植萃配方"
            />
          </label>
          <label className="reference-qa-upload">
            真实问答参考（选填）
            <input type="file" accept=".txt,.csv,.json,.md,text/plain,text/csv,application/json,text/markdown" onChange={(event) => setReferenceFile(event.target.files?.[0] || null)} />
            <small>{referenceFile ? `已选择：${referenceFile.name}` : "支持 TXT、CSV、JSON、Markdown，生成提问时会参考其中的问题角度"}</small>
          </label>
          <h4>生成偏好与数量</h4>
          <div className="two-col">
            <label>
              语言风格
              <select
                value={form.language_style}
                onChange={(event) =>
                  update("language_style", event.target.value)
                }
              >
                <option>口语（亲切随性）</option>
                <option>专业</option>
                <option>幽默</option>
              </select>
            </label>
            <label>
              目标人群
              <select
                value={form.target_group}
                onChange={(event) => update("target_group", event.target.value)}
              >
                <option>女性</option>
                <option>男性</option>
                <option>学生</option>
              </select>
            </label>
          </div>
          <label>
            提问生成条数
            <input
              type="number"
              min="1"
              value={form.question_count}
              onChange={(event) => update("question_count", event.target.value)}
            />
          </label>
          <div className="two-col">
            <label>
              使用场景
              <select
                value={form.usage_scene}
                onChange={(event) => update("usage_scene", event.target.value)}
              >
                <option>居家</option>
                <option>旅行</option>
                <option>通勤</option>
              </select>
            </label>
            <label>
              购买渠道
              <select
                value={form.purchase_channel}
                onChange={(event) =>
                  update("purchase_channel", event.target.value)
                }
              >
                <option>电商平台</option>
                <option>大型商超</option>
                <option>药房</option>
              </select>
            </label>
          </div>
          {error && <div className="form-error">{error}</div>}
          <button
            className="answer-v2-primary wide"
            disabled={busy}
            onClick={generate}
          >
            <Sparkles size={16} />
            {busy ? "生成中…" : "生成提问"}
          </button>
        </section>
        <section className="ask-results">
          <div className="ask-toolbar">
            <label>
              <input
                type="checkbox"
                checked={
                  questions.length > 0 &&
                  questions.every((item) => item.selected)
                }
                onChange={(event) =>
                  setQuestions((current) =>
                    current.map((item) => ({
                      ...item,
                      selected: event.target.checked,
                    })),
                  )
                }
              />{" "}
              全选 ({questions.filter((item) => item.selected).length}/
              {questions.length})
            </label>
            <button className="ghost-button" onClick={addQuestion}>
              <Plus size={14} />
              添加提问
            </button>
            <button
              className="primary-button"
              disabled={
                !questions.some((item) => item.selected) || !task || busy
              }
              onClick={publish}
            >
              发布任务
            </button>
          </div>
          {questions.length === 0 ? (
            <div className="ask-empty">
              点击左侧「生成提问」，AI 生成的提问将展示在这里，可逐条勾选。
            </div>
          ) : (
            questions.map((question, index) => (
              <article
                className={question.selected ? "selected" : ""}
                key={question.id}
              >
                <input
                  type="checkbox"
                  checked={question.selected}
                  onChange={() => toggle(index)}
                />
                <div>
                  <header>
                    <b>Q{index + 1}</b>
                    {editing === index ? (
                      <input
                        autoFocus
                        value={question.question}
                        onChange={(event) =>
                          saveQuestion(index, event.target.value)
                        }
                        onBlur={() => setEditing(null)}
                      />
                    ) : (
                      <strong>{question.question}</strong>
                    )}
                    <button
                      onClick={() =>
                        setEditing(editing === index ? null : index)
                      }
                    >
                      {editing === index ? "完成" : "编辑"}
                    </button>
                  </header>
                  <small>来源：AI生成 · 可编辑后发布</small>
                </div>
              </article>
            ))
          )}
        </section>
      </div>
    </>
  );
}