// Task Confirmation Center — project-scoped todo review with notes, attachments and AI analysis.

function Tasks({ go, route }) {
  const { snapshot } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null };
  const routeProjectId = route?.projectId || "";
  const project = window.GGGApi?.resolveActiveProject?.(snapshot, routeProjectId) || snapshot?.projects?.[0];
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [priorityFilter, setPriorityFilter] = React.useState("all");
  const [tasks, setTasks] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    if (project?.id && !routeProjectId && window.location.pathname === "/tasks") {
      window.history.replaceState({}, "", `/tasks/${encodeURIComponent(project.id)}`);
    }
  }, [project?.id, routeProjectId]);

  const loadTasks = React.useCallback(async () => {
    if (!project?.id || !window.GGGApi?.listProjectTasks) return;
    setLoading(true);
    setError("");
    try {
      if (window.GGGApi?.setActiveProjectId) window.GGGApi.setActiveProjectId(project.id);
      const data = await window.GGGApi.listProjectTasks(project.id, { status: statusFilter, priority: priorityFilter });
      setTasks(data.tasks || []);
    } catch (err) {
      setError(err.message || "任务加载失败");
    } finally {
      setLoading(false);
    }
  }, [project?.id, statusFilter, priorityFilter]);

  React.useEffect(() => { loadTasks(); }, [loadTasks]);

  const updateLocalTask = (updated) => {
    if (!updated?.id) return;
    setTasks((current) => current.map((item) => item.id === updated.id ? { ...item, ...updated } : item));
  };

  const counts = countTasks(tasks);

  return (
    <AppShell go={go} current="tasks" pageBreadcrumbs={[
      { label: "项目", go: () => go("project") },
      { label: project?.name || "出海项目", go: () => project?.id ? go("project", project.id) : go("project") },
      { label: "任务确认" },
    ]}>
      <div className="page">
        <div className="page-header">
          <div>
            <h1 className="page-title">任务确认</h1>
            <p className="page-sub">
              {project?.name ? `当前项目：${project.name}` : "请先选择项目"}。任务可按完成进度和重要程度筛选，支持备注、附件和 AI 一键分析。
            </p>
          </div>
          <div className="row-flex">
            <button className="btn btn-ghost btn-sm" onClick={loadTasks} disabled={loading}><Icon name="regen" size={14} /> 刷新</button>
            <button className="btn btn-soft btn-sm" onClick={() => project?.id && go("document", project.id)}><Icon name="database" size={14} /> 项目资料</button>
          </div>
        </div>

        <div className="task-summary-grid">
          <TaskSummary label="待办" value={counts.todo} tone="orange" />
          <TaskSummary label="进行中" value={counts.in_progress} tone="ocean" />
          <TaskSummary label="已完成" value={counts.completed} tone="green" />
          <TaskSummary label="紧急" value={counts.urgent} tone="red" />
        </div>

        <div className="card card-pad task-filter-card">
          <div>
            <div className="section-label" style={{ margin: 0 }}>完成进度</div>
            <div className="row-flex" style={{ marginTop: 10 }}>
              {[
                ["all", "全部"],
                ["todo", "待办"],
                ["in_progress", "进行中"],
                ["completed", "已完成"]
              ].map(([key, label]) => (
                <button key={key} className={"chip " + (statusFilter === key ? "active" : "")} onClick={() => setStatusFilter(key)}>{label}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="section-label" style={{ margin: 0 }}>重要程度</div>
            <div className="row-flex" style={{ marginTop: 10 }}>
              {[
                ["all", "全部"],
                ["urgent", "紧急"],
                ["important", "重要"],
                ["normal", "普通"]
              ].map(([key, label]) => (
                <button key={key} className={"chip " + (priorityFilter === key ? "active" : "")} onClick={() => setPriorityFilter(key)}>{label}</button>
              ))}
            </div>
          </div>
        </div>

        {error ? <div className="form-alert" style={{ marginTop: 16 }}>{error}</div> : null}
        {loading ? <div className="callout info" style={{ marginTop: 16 }}>正在加载任务...</div> : null}

        <div className="task-list">
          {!loading && !tasks.length ? (
            <div className="card card-pad empty-project-state">
              <div className="empty-project-icon"><Icon name="check" size={24} /></div>
              <h4>当前筛选下没有任务</h4>
              <p>生成报告后，高风险确认项会自动进入任务中心；也可以在后续版本中手动创建任务。</p>
            </div>
          ) : null}
          {tasks.map((task) => (
            <TaskCard key={task.id} task={task} updateLocalTask={updateLocalTask} reload={loadTasks} />
          ))}
        </div>

        <div className="callout risk" style={{ marginTop: 24 }}>
          <div className="callout-title">任务确认边界</div>
          AI 分析仅整理备注和附件中的证据、缺口与下一步动作，不构成法律、税务、报关、认证或投资等专业意见。
        </div>
      </div>
    </AppShell>
  );
}

function TaskCard({ task, updateLocalTask, reload }) {
  const [notes, setNotes] = React.useState(task.notes || "");
  const [status, setStatus] = React.useState(task.status || "todo");
  const [priority, setPriority] = React.useState(task.priority || "normal");
  const [working, setWorking] = React.useState(false);
  const [message, setMessage] = React.useState("");
  const fileRef = React.useRef(null);
  const analysis = task.ai_analysis || parseJson(task.ai_analysis_json, {});
  const attachments = task.attachments || [];

  React.useEffect(() => {
    setNotes(task.notes || "");
    setStatus(task.status || "todo");
    setPriority(task.priority || "normal");
  }, [task.id, task.notes, task.status, task.priority]);

  const save = async () => {
    setWorking(true);
    setMessage("");
    try {
      const updated = await window.GGGApi.updateTask(task.id, { status, priority, notes });
      updateLocalTask(updated);
      setMessage("已保存");
    } catch (err) {
      setMessage(err.message || "保存失败");
    } finally {
      setWorking(false);
    }
  };

  const upload = async (files) => {
    if (!files?.length) return;
    setWorking(true);
    setMessage("");
    try {
      await window.GGGApi.uploadTaskAttachment(task.id, files);
      setMessage("附件已上传");
      if (fileRef.current) fileRef.current.value = "";
      await reload();
    } catch (err) {
      setMessage(err.message || "附件上传失败");
    } finally {
      setWorking(false);
    }
  };

  const analyze = async () => {
    setWorking(true);
    setMessage("");
    try {
      const data = await window.GGGApi.analyzeTask(task.id, notes);
      updateLocalTask(data.task);
      setMessage("AI 分析已完成");
    } catch (err) {
      setMessage(err.message || "AI 分析失败");
    } finally {
      setWorking(false);
    }
  };

  return (
    <div className="task-card">
      <div className="task-main">
        <div className="task-title-row">
          <div>
            <div className="task-title">{task.title}</div>
            <div className="task-meta">{task.task_type || "research"} · 更新于 {dateOnly(task.updated_at || task.created_at || "")}</div>
          </div>
          <div className="row-flex" style={{ justifyContent: "flex-end" }}>
            <span className={"badge badge-" + priorityTone(priority)}><span className="badge-dot"></span>{priorityLabel(priority)}</span>
            <span className={"badge badge-" + statusTone(status)}><span className="badge-dot"></span>{statusLabel(status)}</span>
          </div>
        </div>

        {task.acceptance_criteria?.length ? (
          <ul className="task-criteria">
            {task.acceptance_criteria.slice(0, 3).map((item, index) => <li key={index}>{item}</li>)}
          </ul>
        ) : null}

        <label className="field-label">备注</label>
        <textarea className="textarea task-notes" value={notes} onChange={(event) => setNotes(event.target.value)} placeholder="填写处理进展、专家意见、结论或需要补充的证据..." />

        <div className="task-attachment-list">
          {attachments.length ? attachments.map((item) => (
            <button key={item.id} className="task-attachment" onClick={() => window.GGGApi.downloadTaskAttachment(item.id)}>
              <Icon name="file-text" size={13} />
              <span>{item.file_name}</span>
            </button>
          )) : <span className="empty-mini">尚未上传附件</span>}
        </div>

        {analysis.summary ? (
          <div className="ai-note task-ai-note">
            <b>AI 分析意见</b>
            <p>{analysis.summary}</p>
            {analysis.nextActions?.length ? <div className="task-ai-actions">{analysis.nextActions.map((item, index) => <span key={index}>{item}</span>)}</div> : null}
          </div>
        ) : null}
      </div>

      <div className="task-actions">
        <label>状态</label>
        <select className="input" value={status} onChange={(event) => setStatus(event.target.value)}>
          <option value="todo">待办</option>
          <option value="in_progress">进行中</option>
          <option value="completed">已完成</option>
        </select>
        <label>重要程度</label>
        <select className="input" value={priority} onChange={(event) => setPriority(event.target.value)}>
          <option value="urgent">紧急</option>
          <option value="important">重要</option>
          <option value="normal">普通</option>
        </select>
        <input ref={fileRef} type="file" multiple style={{ display: "none" }} onChange={(event) => upload(event.target.files)} />
        <button className="btn btn-ghost btn-sm btn-block" disabled={working} onClick={() => fileRef.current?.click()}><Icon name="upload" size={14} /> 上传附件</button>
        <button className="btn btn-soft btn-sm btn-block" disabled={working} onClick={analyze}><Icon name="sparkles" size={14} /> 一键 AI 分析</button>
        <button className="btn btn-primary btn-sm btn-block" disabled={working} onClick={save}><Icon name="check" size={14} /> 保存</button>
        {message ? <div className="task-message">{message}</div> : null}
      </div>
    </div>
  );
}

function TaskSummary({ label, value, tone }) {
  return (
    <div className={"kpi kpi-" + tone}>
      <div className="label">{label}</div>
      <div className="val">{value}</div>
      <div className="meta"><Icon name="check" size={12} /> 当前筛选</div>
    </div>
  );
}

function countTasks(tasks) {
  return tasks.reduce((acc, task) => {
    acc[task.status] = (acc[task.status] || 0) + 1;
    acc[task.priority] = (acc[task.priority] || 0) + 1;
    return acc;
  }, { todo: 0, in_progress: 0, completed: 0, urgent: 0, important: 0, normal: 0 });
}

function statusLabel(status) {
  if (status === "completed") return "已完成";
  if (status === "in_progress") return "进行中";
  return "待办";
}

function statusTone(status) {
  if (status === "completed") return "green";
  if (status === "in_progress") return "ocean";
  return "orange";
}

function priorityLabel(priority) {
  if (priority === "urgent") return "紧急";
  if (priority === "important") return "重要";
  return "普通";
}

function priorityTone(priority) {
  if (priority === "urgent") return "red";
  if (priority === "important") return "orange";
  return "green";
}

window.Tasks = Tasks;
window.Expert = Tasks;