import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
import HorizontalTabs from "../../../components/common/HorizionalTabs";
import Tab from "../../../components/common/Tab";
import GeneralTab from "./components/GeneralTab";
import { Navigate, useParams } from "react-router-dom";
import templateVersionsService, {
  CreateWorkflowTemplateVersion,
  TaskDefinition,
} from "./services/WorkflowTemplateService";
import Loading from "../../../components/common/Loading";
import { toast } from "react-toastify";
import Joi from "joi";
import {
  renderButton,
  renderError,
} from "../../../components/common/formHelpers";
import ErrorBlock from "../../../components/common/ErrorBlock";
import authentication from "../../frame/services/authenticationService";
import { GeneralIdRef, MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
import TasksTab from "./components/TasksTab";
import { useFormWithGuard } from "../../../components/common/useFormRouter";

const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
  editMode,
}) => {
  const { t } = useTranslation(Namespaces.Common);
  const { userId } = useParams<{ userId: string }>();
  const [activeTab, setActiveTab] = React.useState("general");

  const [taskValidation, setTaskValidation] = useState<Record<string, boolean>>(
    {},
  );

  // useForm promoted to the parent
  const form = useFormWithGuard({
    loaded: false,
    data: {
      name: "",
      domainId: {} as GeneralIdRef,
      activityNameTemplate: "",
      description: "",
      tasks: [] as TaskDefinition[],
    } as CreateWorkflowTemplateVersion,
    errors: {},
    redirect: "",
  });

  const heading = editMode
    ? t("EditWorkflowTemplate")
    : t("AddWorkflowTemplate");

  // -----------------------------
  // Joi schema (same pattern as original GeneralTab)
  // -----------------------------
  form.schema = {
    name: Joi.string().required().max(450).label(t("WorkflowTemplateName")),
    activityNameTemplate: Joi.string()
      .required()
      .max(450)
      .label(t("ActivityNameTemplate")),
    description: Joi.string().required().allow("").label(t("Description")),
    domainId: Joi.required(),
    tasks: Joi.array().required(),
  };

  // -----------------------------
  // Load existing template (edit mode)
  // -----------------------------
  useEffect(() => {
    const load = async () => {
      const newData: CreateWorkflowTemplateVersion = { ...form.state.data };

      if (editMode && userId) {
        try {
          const loadedData = await templateVersionsService.getTemplateVersion(
            BigInt(userId),
          );

          if (loadedData) {
            newData.name = loadedData.name ?? "";
          }
        } catch (ex: any) {
          form.handleGeneralError(ex);
        }
      } else {
        const user = authentication.getCurrentUser();
        newData.domainId = MakeGeneralIdRef(user?.domainid);
      }

      form.setState({ ...form.state, loaded: true, data: newData });
    };

    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editMode, userId]);

  // -----------------------------
  // Save handler (called by useForm.handleSubmit)
  // -----------------------------
  const doSubmit = async (buttonName: string) => {
    try {
      const { data } = form.state;

      var json = JSON.stringify(data);

      console.log("Submitting workflow template:", json);

      if (editMode) {
        //await templateVersionsService.putTemplateVersion({ name });
        toast.info(t("WorkflowTemplateEdited"));
      } else {
        //await templateVersionsService.postTemplateVersion({ name });
        toast.info(t("WorkflowTemplateAdded"));
      }

      if (buttonName === "save") {
        form.setState({ ...form.state, redirect: "/workflowTemplates" });
      }

      form.markAsSaved();
    } catch (ex: any) {
      form.handleGeneralError(ex);
    }
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    form.handleSubmit(e, doSubmit);
  };

  //const [tasksValid, setTasksValid] = useState(true);

  const handleTaskValidate = (taskId: string, isValid: boolean) => {
    setTaskValidation((prev) => {
      const updated = { ...prev, [taskId]: isValid };

      // Compute overall validity
      //const allValid = Object.values(updated).every((v) => v === true);

      // Bubble up to parent
      //setTasksValid(allValid);
      //setTaskValidation(updated);

      return updated;
    });
  };

  const { loaded, redirect, errors: formErrors, data } = form.state;
  if (redirect) return <Navigate to={redirect} />;

  let errors = { ...formErrors };

  const generalTabValid = !(
    errors["domainId"] ||
    errors["name"] ||
    errors["activityNameTemplate"] ||
    errors["description"]
  );

  const tasksValid = Object.values(taskValidation).every((v) => v === true);

  if (!tasksValid) {
    errors["tasks"] = t("TasksValidationError");
  }

  // -----------------------------
  // Tabs
  // -----------------------------
  const tabs = [
    <Tab
      key="general"
      id="general"
      label={t("General")}
      hasError={!generalTabValid}
    >
      <GeneralTab
        data={data}
        errors={errors}
        isEditMode={editMode}
        onFieldChange={form.handleChange}
        handleDomainPickerChange={(name, values) =>
          form.handlePickerChange(name, values[0].value)
        }
      />
    </Tab>,

    <Tab key="tasks" id="tasks" label={t("Tasks")} hasError={!tasksValid}>
      <TasksTab
        data={data}
        errors={errors}
        isEditMode={editMode}
        onTasksChange={form.handleTasksChange}
        onValidate={handleTaskValidate}
        taskValidation={taskValidation}
      />
    </Tab>,

    <Tab key="fields" id="fields" label={t("Fields")}>
      <div>Fields editor coming soon…</div>
    </Tab>,

    <Tab key="visualFlow" id="visualFlow" label={t("Visual Flow")}>
      <div>Visual Flow editor coming soon…</div>
    </Tab>,
  ];

  return (
    <Loading loaded={loaded}>
      <div className="full-height-container">
        <form onSubmit={handleSubmit}>
          <h1>{heading}</h1>

          <div style={{ marginBottom: "1rem" }}>
            {editMode && renderButton(t("Save"), errors, "apply")}
            {renderButton(t("SaveAndClose"), errors, "save")}
          </div>

          {Object.keys(errors).length > 0 && (
            <ErrorBlock error={t("ResolveAllValidation")} />
          )}

          {renderError("_general", errors)}

          <HorizontalTabs
            hashSegment={0}
            activeTab={activeTab}
            onTabChange={setActiveTab}
          >
            {tabs}
          </HorizontalTabs>
        </form>
      </div>
    </Loading>
  );
};

export default WorkflowTemplateDetails;