/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./preferences.module.scss";
import PageIntro from "@/components/dashboard/PageIntro";
import { useForm } from "@inertiajs/react";

interface PreferencesForm {
  enable_announcement: boolean;
  kyc_required: boolean;
  email_verification_required: boolean;
  withdrawals_enabled: boolean;
}

const WebsitePreferences = ({ settings }: any) => {
  // Initialize form with settings from backend
  const { data, setData, post, processing } = useForm<PreferencesForm>({
    ...settings,
    enable_announcement: settings.enable_announcement ?? false,
    kyc_required: settings.kyc_required ?? false,
    email_verification_required: settings.email_verification_required ?? true,
    withdrawals_enabled: settings.withdrawals_enabled ?? true,
  });

  // Generic toggle handler
  const toggleField = (field: keyof PreferencesForm, value: boolean) => {
    setData(field, value);
  };

  // Submit preferences to backend
  const savePreferences = (e: React.FormEvent) => {
    e.preventDefault();

    post(route("admin.update"), {
      onSuccess: () => {
        console.log("Preferences updated successfully");
      },
      onError: (errors) => {
        console.error(errors);
      },
    });
  };

  return (
    <div className={styles["preferences"]}>
      <PageIntro
        title="Preferences"
        description="Manage all application-wide preferences here."
      />

      <form onSubmit={savePreferences}>
        {/* Announcement */}
        <div className={styles["preferences__children--item"]}>
          <h6>Announcement</h6>
          <span className={styles["preferences__children--item--helper"]}>
            <span
              className={
                data.enable_announcement
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("enable_announcement", true)}
            >
              Enable
            </span>
            <span
              className={
                !data.enable_announcement
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("enable_announcement", false)}
            >
              Disable
            </span>
          </span>
          <p>
            <strong>Note:</strong> If enabled, users will see the announcement
            on their dashboard.
          </p>
        </div>

        {/* KYC Verification */}
        <div className={styles["preferences__children--item"]}>
          <h6>KYC Verification</h6>
          <span className={styles["preferences__children--item--helper"]}>
            <span
              className={
                data.kyc_required
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("kyc_required", true)}
            >
              Enable
            </span>
            <span
              className={
                !data.kyc_required
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("kyc_required", false)}
            >
              Disable
            </span>
          </span>
          <p>
            <strong>Note:</strong> If enabled, users must verify KYC before
            they can withdraw.
          </p>
        </div>

        {/* Email Verification */}
        <div className={styles["preferences__children--item"]}>
          <h6>Email Verification</h6>
          <span className={styles["preferences__children--item--helper"]}>
            <span
              className={
                data.email_verification_required
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("email_verification_required", true)}
            >
              Enable
            </span>
            <span
              className={
                !data.email_verification_required
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("email_verification_required", false)}
            >
              Disable
            </span>
          </span>
          <p>
            <strong>Note:</strong> If enabled, users must have verified emails
            before they can withdraw.
          </p>
        </div>

        {/* Withdrawals */}
        <div className={styles["preferences__children--item"]}>
          <h6>Withdrawals</h6>
          <span className={styles["preferences__children--item--helper"]}>
            <span
              className={
                data.withdrawals_enabled
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("withdrawals_enabled", true)}
            >
              Enable
            </span>
            <span
              className={
                !data.withdrawals_enabled
                  ? styles["preferences__children--item--helper--active"]
                  : styles["preferences__children--item--helper--notactive"]
              }
              onClick={() => toggleField("withdrawals_enabled", false)}
            >
              Disable
            </span>
          </span>
          <p>
            <strong>Note:</strong> If enabled, users will be able to withdraw.
          </p>
        </div>

        <button type="submit" disabled={processing}>
          {processing ? "Saving..." : "Save Preferences"}
        </button>
      </form>
    </div>
  );
};

export default WebsitePreferences;