import React from "react";
import { useForm } from "@inertiajs/react";
import styles from "./add-estate.module.scss";

// ✅ Type definitions
interface Estate {
  id?: number;
  name?: string;
  estate_type?: string;
  price_per_unit?: number | null;
  min_units?: number | null;
  isSoldOut?: string;
  roi?: number | null;
  duration?: string;
  description?: string;
  investors_count?: number | null;
}

interface AddEstatePlanProps {
  closeModal: () => void;
  type: "add" | "edit";
  estate?: Estate;
}

const AddEstatePlan: React.FC<AddEstatePlanProps> = ({ closeModal, type, estate }) => {
  const { data, setData, post, put } = useForm<Estate>({
    name: estate?.name || "",
    estate_type: estate?.estate_type || "",
    price_per_unit: estate?.price_per_unit ?? null,
    min_units: estate?.min_units ?? null,
    isSoldOut: estate?.isSoldOut || "",
    roi: estate?.roi ?? null,
    duration: estate?.duration || "",
    description: estate?.description || "",
    investors_count: estate?.investors_count ?? null,
  });

  // ✅ Handle create
  const createEstatePlan = (e: React.FormEvent) => {
    e.preventDefault();
    post("/estate", {
      onSuccess: closeModal,
    });
  };

  // ✅ Handle update
  const updateEstate = (e: React.FormEvent) => {
    e.preventDefault();
    if (estate?.id) {
      put(`/estate/${estate.id}`, {
        onSuccess: closeModal,
      });
    }
  };

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

        <div className={styles["add__estate__content--details"]}>
          <div className={styles["add__estate__content--details--header"]}>
            <div className={styles["add__estate__content--details--header--helper"]}>
              {type === "add" ? "Add Resource" : "Update"}
            </div>
            <h2>
              {type === "add" ? "Create A New Estate Plan" : "Update Estate Plan"}
            </h2>
            <p>
              {type === "add"
                ? "Simply fill out the form to add a new estate plan. It will be available to users on your platform."
                : "Want to update an estate plan? Just modify the details and submit. It’s that simple."}
            </p>
          </div>

          <form onSubmit={type === "add" ? createEstatePlan : updateEstate}>
            {/* Property Name */}
            <div>
              <label htmlFor="name">Property name *</label>
              <input
                id="name"
                type="text"
                placeholder="Enter property name"
                value={data.name || ""}
                onChange={(e) => setData("name", e.target.value)}
                required
              />
            </div>

            {/* Estate Type */}
            <div>
              <label htmlFor="estate_type">Select plan type *</label>
              <select
                id="estate_type"
                value={data.estate_type}
                onChange={(e) => setData("estate_type", e.target.value)}
                required
              >
                <option value="" disabled>
                  Please select estate type
                </option>
                <option value="commercial">Commercial</option>
                <option value="residential">Residential</option>
              </select>
            </div>

            {/* Price Per Unit */}
            <div>
              <label htmlFor="price_per_unit">Price Per Unit *</label>
              <input
                id="price_per_unit"
                type="number"
                placeholder="Enter the price per unit"
                value={data.price_per_unit ?? ""}
                onChange={(e) => setData("price_per_unit", Number(e.target.value))}
                required
              />
            </div>

            {/* Minimum Units */}
            <div>
              <label htmlFor="min_units">Minimum Units To Purchase *</label>
              <input
                id="min_units"
                type="number"
                placeholder="Enter the minimum units a user can buy"
                value={data.min_units ?? ""}
                onChange={(e) => setData("min_units", Number(e.target.value))}
                required
              />
            </div>

            {/* Investors Count (Edit Only) */}
            {type === "edit" && (
              <div>
                <label htmlFor="investors_count">Investors count *</label>
                <input
                  id="investors_count"
                  type="number"
                  value={data.investors_count ?? ""}
                  onChange={(e) => setData("investors_count", Number(e.target.value))}
                  required
                />
              </div>
            )}

            {/* ROI */}
            <div>
              <label htmlFor="roi">Return on investment (%) *</label>
              <input
                id="roi"
                type="number"
                placeholder="Enter ROI users can get on this plan"
                value={data.roi ?? ""}
                onChange={(e) => setData("roi", Number(e.target.value))}
                required
              />
            </div>

            {/* Duration */}
            <div>
              <label htmlFor="duration">Investment Duration *</label>
              <input
                id="duration"
                type="text"
                placeholder="Enter investment duration for this plan"
                value={data.duration || ""}
                onChange={(e) => setData("duration", e.target.value)}
                required
              />
            </div>

            {/* Sold Out (Edit Only) */}
            {type === "edit" && (
              <div>
                <label htmlFor="isSoldOut">Sold Out?</label>
                <select
                  id="isSoldOut"
                  value={data.isSoldOut}
                  onChange={(e) => setData("isSoldOut", e.target.value)}
                >
                  <option value="True">True</option>
                  <option value="False">False</option>
                </select>
              </div>
            )}

            {/* Description */}
            <div>
              <label htmlFor="description">Estate Description *</label>
              <textarea
                id="description"
                placeholder="Enter estate description"
                value={data.description || ""}
                onChange={(e) => setData("description", e.target.value)}
                required
              ></textarea>
            </div>

            <button type="submit">
              {type === "add" ? "Add Estate Plan" : "Update Estate Plan"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default AddEstatePlan;