import React, { useEffect, useState } from "react";
import { useForm, FormProvider } from "react-hook-form";
import apiFetch from "@wordpress/api-fetch";
import LawFirmDataTab from "./lawFirmDataTab";
import SubmitButton from "../form-elements/buttons/submitButton";
import Modal from "../modal/modal";
import AlarmWarningLine from "../../resources/icons/alarm-warning-line";

// Note: HashCode is generated on the lawFirmDataTab component

export type SettingsValues = {
  hex: string;
  borderState: string;
  font: string;
  lawFirmName: string;
  emailAddress: string;
  confirmEmail: string;
  freemiumHash: string;
};

const defaultValues: SettingsValues = {
  hex: "#0066FF",
  borderState: "Rounded",
  font: "Overpass",
  lawFirmName: "",
  emailAddress: "",
  confirmEmail: "",
  freemiumHash: "",
};

export default function LeadboosterSettings() {
  const methods = useForm<SettingsValues>({ mode: "onChange", defaultValues });
  const { handleSubmit, trigger, setValue } = methods;
  const [hasFetched, setHasFetched] = useState(false);
  const [isSubmitting] = useState(false);
  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);

  // Load existing plugin options
  useEffect(() => {
    if (hasFetched) return;
    apiFetch({ path: "/react-settings-page/v1/options", method: "GET" })
      .then((resp: any) => {
        if (resp.justin_legal_lawFirmName)
          setValue("lawFirmName", resp.justin_legal_lawFirmName);
        if (resp.justin_legal_emailAddress) {
          setValue("emailAddress", resp.justin_legal_emailAddress);
          setValue("confirmEmail", resp.justin_legal_emailAddress);
        }
        if (resp.justin_legal_hex) setValue("hex", resp.justin_legal_hex);
        if (resp.justin_legal_font) setValue("font", resp.justin_legal_font);
        if (resp.justin_legal_borderState)
          setValue("borderState", resp.justin_legal_borderState);
        if (resp.justin_legal_hash)
          setValue("freemiumHash", resp.justin_legal_hash);
        setHasFetched(true);
      })
      .catch((err) => console.error("Error fetching settings:", err));
  }, [hasFetched, setValue]);

  // Persist all fields including computed hash
  const onSubmit = async (data: SettingsValues) => {
    try {
      await apiFetch({
        path: "/react-settings-page/v1/options",
        method: "POST",
        data: {
          justin_legal_lawFirmName: data.lawFirmName,
          justin_legal_emailAddress: data.emailAddress,
          justin_legal_hex: data.hex,
          justin_legal_font: data.font,
          justin_legal_borderState: data.borderState,
          justin_legal_hash: data.freemiumHash,
        },
      });
    } catch (err) {
      console.error("Error saving settings:", err);
    }
  };

  const validateAndSubmit = async () => {
    return handleSubmit(onSubmit)();
  };

  if (!hasFetched) {
    return (
      <div className="flex justify-center items-center h-screen">
        Loading...
      </div>
    );
  }

  const validateAndOpenModal = async () => {
    const valid = await trigger(undefined, { shouldFocus: false });
    if (!valid) return;

    setIsChangeModalOpen(true);
  };

  return (
    <FormProvider {...methods}>
      <div
        id="tabbedForm"
        className="font-sans bg-white sm:px-8 py-8 px-4 rounded-xl border"
      >
        <LawFirmDataTab />

        <Modal
          isOpen={isChangeModalOpen}
          onClose={() => setIsChangeModalOpen(false)}
          onClickAccept={async () => {
            await validateAndSubmit();
            setIsChangeModalOpen(false);
          }}
          textAcceptButton="Bestätigen"
          textCancelButton="Abbrechen"
          closeOnAccept={true}
          onClickCancel={() => setIsChangeModalOpen(false)}
          title=""
          description={
            <div className="flex flex-col">
              <div className="bg-red-500 bg-interactive-alarm-hover/80 w-fit mx-auto rounded-lg p-4">
                <AlarmWarningLine className="w-8 h-8 fill-white" />
              </div>

              <h2 className="text-2xl mt-4 font-bold">
                {" "}
                Einstellungen speichern{" "}
              </h2>
              <p className="mt-4">
                Sobald Sie bestätigen, werden Ihre Änderungen auf allen
                Formularen und Widgets aktiv.
              </p>
            </div>
          }
        />

        <SubmitButton
          isSubmitting={isSubmitting}
          onSubmit={async () => {
            validateAndOpenModal();
          }}
        />
      </div>
    </FormProvider>
  );
}