import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "antd-mobile";
import { NavBar } from "antd-mobile";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { createGroupPushTask } from "@/pages/workspace/group-push/detail/groupPush";
import Layout from "@/components/Layout/Layout";
import StepIndicator from "./components/StepIndicator";
import BasicSettings from "./components/BasicSettings";
import GroupSelector from "./components/GroupSelector";
import ContentSelector from "./components/ContentSelector";
import type { WechatGroup, ContentLibrary, FormData } from "./index.data";

const steps = [
  { id: 1, title: "步骤 1", subtitle: "基础设置" },
  { id: 2, title: "步骤 2", subtitle: "选择社群" },
  { id: 3, title: "步骤 3", subtitle: "选择内容库" },
  { id: 4, title: "步骤 4", subtitle: "京东联盟" },
];

const NewGroupPush: React.FC = () => {
  const navigate = useNavigate();
  const [currentStep, setCurrentStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    name: "",
    pushTimeStart: "06:00",
    pushTimeEnd: "23:59",
    dailyPushCount: 20,
    pushOrder: "latest",
    isLoopPush: false,
    isImmediatePush: false,
    isEnabled: false,
    groups: [],
    contentLibraries: [],
  });
  const [isEditMode, setIsEditMode] = useState(false);

  const handleBasicSettingsNext = (values: Partial<FormData>) => {
    setFormData((prev) => ({ ...prev, ...values }));
    setCurrentStep(2);
  };

  const handleGroupsChange = (groups: WechatGroup[]) => {
    setFormData((prev) => ({ ...prev, groups }));
  };

  const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
    setFormData((prev) => ({ ...prev, contentLibraries }));
  };

  const handleSave = async () => {
    if (!formData.name.trim()) {
      window.alert("请输入任务名称");
      return;
    }
    if (formData.groups.length === 0) {
      window.alert("请选择至少一个社群");
      return;
    }
    if (formData.contentLibraries.length === 0) {
      window.alert("请选择至少一个内容库");
      return;
    }
    setLoading(true);
    try {
      const apiData = {
        name: formData.name,
        timeRange: {
          start: formData.pushTimeStart,
          end: formData.pushTimeEnd,
        },
        maxPushPerDay: formData.dailyPushCount,
        pushOrder: formData.pushOrder,
        isLoopPush: formData.isLoopPush,
        isImmediatePush: formData.isImmediatePush,
        isEnabled: formData.isEnabled,
        targetGroups: formData.groups.map((g) => g.name),
        contentLibraries: formData.contentLibraries.map((c) => c.name),
        pushMode: formData.isImmediatePush
          ? ("immediate" as const)
          : ("scheduled" as const),
        messageType: "text" as const,
        messageContent: "",
        targetTags: [],
        pushInterval: 60,
      };
      const response = await createGroupPushTask(apiData);
      if (response.code === 200) {
        window.alert("保存成功");
        navigate("/workspace/group-push");
      } else {
        window.alert("保存失败，请稍后重试");
      }
    } catch (error) {
      window.alert("保存失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    navigate("/workspace/group-push");
  };

  return (
    <Layout
      header={
        <NavBar
          back={null}
          style={{ background: "#fff" }}
          left={
            <div className="nav-title">
              <ArrowLeftOutlined
                twoToneColor="#1677ff"
                onClick={() => navigate(-1)}
              />
            </div>
          }
        >
          <span className="nav-title">
            {isEditMode ? "编辑任务" : "新建任务"}
          </span>
        </NavBar>
      }
    >
      <div style={{ maxWidth: 600, margin: "0 auto", padding: 16 }}>
        <StepIndicator currentStep={currentStep} steps={steps} />
        <div style={{ marginTop: 32 }}>
          {currentStep === 1 && (
            <BasicSettings
              defaultValues={{
                name: formData.name,
                pushTimeStart: formData.pushTimeStart,
                pushTimeEnd: formData.pushTimeEnd,
                dailyPushCount: formData.dailyPushCount,
                pushOrder: formData.pushOrder,
                isLoopPush: formData.isLoopPush,
                isImmediatePush: formData.isImmediatePush,
                isEnabled: formData.isEnabled,
              }}
              onNext={handleBasicSettingsNext}
              onSave={handleSave}
              onCancel={handleCancel}
              loading={loading}
            />
          )}
          {currentStep === 2 && (
            <GroupSelector
              selectedGroups={formData.groups}
              onGroupsChange={handleGroupsChange}
              onPrevious={() => setCurrentStep(1)}
              onNext={() => setCurrentStep(3)}
              onSave={handleSave}
              onCancel={handleCancel}
              loading={loading}
            />
          )}
          {currentStep === 3 && (
            <ContentSelector
              selectedLibraries={formData.contentLibraries}
              onLibrariesChange={handleLibrariesChange}
              onPrevious={() => setCurrentStep(2)}
              onNext={() => setCurrentStep(4)}
              onSave={handleSave}
              onCancel={handleCancel}
              loading={loading}
            />
          )}
          {currentStep === 4 && (
            <div style={{ padding: 32, textAlign: "center", color: "#888" }}>
              京东联盟设置（此步骤为占位，实际功能待开发）
              <div
                style={{
                  marginTop: 24,
                  display: "flex",
                  justifyContent: "center",
                  gap: 8,
                }}
              >
                <Button onClick={() => setCurrentStep(3)} disabled={loading}>
                  上一步
                </Button>
                <Button color="primary" onClick={handleSave} loading={loading}>
                  完成
                </Button>
                <Button onClick={handleCancel} disabled={loading}>
                  取消
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default NewGroupPush;