/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import { useForm } from "@inertiajs/react";
import styles from "./update-signal.module.scss";

interface Signal {
  id?: number | string;
  name?: string;
  amount?: number | string;
  date?: string;
}

interface UpdateUserSignalProps {
  closeModal: any;
  action?: (data: Record<string, any>) => void;
  title: string;
  description?: string;
  signal?: Signal;
  loading?: boolean; // optional external loading control
}

const UpdateUserSignal: React.FC<UpdateUserSignalProps> = ({
  closeModal,
  action,
  title,
  description,
  signal,
  loading: externalLoading = false,
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const { data, setData, post, processing } = useForm({
    signalName: signal?.name || "",
    amount: signal?.amount || "",
    date: signal?.date || "",
  });

  // Simulate load for skeleton (or use real loading state)
  useEffect(() => {
    if (signal) {
      const timer = setTimeout(() => setIsLoading(false), 500);
      return () => clearTimeout(timer);
    }
  }, [signal]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (action) {
      action(data);
    } else {
      post(`/signals/${signal?.id || ""}`, {
        onSuccess: closeModal,
      });
    }
  };

  const isFormLoading = isLoading || externalLoading;

  return (
    <div className={styles["confirm__modal"]}>
      <div className={styles["confirm__modal__content"]}>
        <div
          onClick={closeModal}
          className={styles["confirm__modal__content--close"]}
        >
          Close
        </div>

        <div className={styles["confirm__modal__content--details"]}>
          {isFormLoading ? (
            <div className={styles["skeleton"]}>
              <div className={styles["skeleton__header"]}></div>
              <div className={styles["skeleton__line"]}></div>
              <div className={styles["skeleton__line"]}></div>
              <div className={styles["skeleton__line--short"]}></div>
              <div className={styles["skeleton__button"]}></div>
            </div>
          ) : (
            <div className={styles["confirm__modal__content--details--header"]}>
              <div
                className={
                  styles["confirm__modal__content--details--header--helper"]
                }
              >
                Confirmation
              </div>
              <h2>{title}</h2>
              {description && <p>{description}</p>}

              <form onSubmit={handleSubmit}>
                <div>
                  <label htmlFor="signalName">Signal name *</label>
                  <input
                    type="text"
                    id="signalName"
                    placeholder="Enter signal name"
                    value={data.signalName}
                    onChange={(e) => setData("signalName", e.target.value)}
                    required
                  />
                </div>

                <div>
                  <label htmlFor="amount">Amount paid *</label>
                  <input
                    type="number"
                    id="amount"
                    placeholder="Enter amount paid"
                    value={data.amount}
                    onChange={(e) => setData("amount", e.target.value)}
                    required
                  />
                </div>

                <div>
                  <label htmlFor="date">Date purchased *</label>
                  <input
                    type="date"
                    id="date"
                    value={data.date}
                    onChange={(e) => setData("date", e.target.value)}
                    required
                  />
                </div>

                <button type="submit" disabled={processing}>
                  {processing ? "Updating..." : "Confirm Action"}
                </button>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default UpdateUserSignal;