import { useState } from "react";
import { Input, Modal, Toast } from "@douyinfe/semi-ui-19";
import { post } from "../api";
import type { Submission } from "../types";

export function AlphaSyncDialog({
  submission,
  suspended,
  onClose,
  onTask,
}: {
  submission: Submission;
  suspended: boolean;
  onClose: () => void;
  onTask: () => void;
}) {
  const [from, setFrom] = useState("");
  const [to, setTo] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const label = submission === "UNSUBMITTED" ? "待提交" : "已提交";
  const dateLabel = submission === "UNSUBMITTED" ? "创建日期" : "提交日期";
  const today = new Date().toISOString().slice(0, 10);
  async function start() {
    if (!from || !to || from > to || to > today) {
      setError("请选择有效的起止日期，结束日期不能晚于今天（UTC）。");
      return;
    }
    setBusy(true);
    try {
      await post("/sync-jobs", {
        kind: "daily_sync",
        submission,
        date_from: from,
        date_to: to,
      });
      onClose();
      onTask();
    } catch (e) {
      Toast.error((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <Modal
      title={`按天同步${label} Alpha`}
      visible={!suspended}
      onCancel={onClose}
      okText="开始同步"
      okButtonProps={{ "aria-label": "开始同步" }}
      confirmLoading={busy}
      onOk={() => void start()}
    >
      <p className="muted">
        按{dateLabel}（UTC）逐天获取，包含隐藏记录。相同起止日期表示只同步当天。
      </p>
      <div className="sync-date-range">
        <label>
          开始日期
          <Input
            aria-label="同步开始日期"
            type="date"
            max={today}
            value={from}
            onChange={(value) => {
              setFrom(value);
              if (!to) setTo(value);
              setError("");
            }}
          />
        </label>
        <label>
          结束日期
          <Input
            aria-label="同步结束日期"
            type="date"
            min={from || undefined}
            max={today}
            value={to}
            onChange={(value) => {
              setTo(value);
              setError("");
            }}
          />
        </label>
      </div>
      {error && (
        <p className="error-text" role="alert">
          {error}
        </p>
      )}
      <p className="muted">
        任务面板显示当前日期和进度，中断后可继续未完成部分。
      </p>
    </Modal>
  );
}