// pages/pmschedules/form/PmScheduleFormPage.jsx
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { addPmSchedule, editPmSchedule, getPmScheduleById } from "../new/api";
import { toast } from "react-toastify";
import "./ContactFormPage.css";

export default function PmScheduleFormPage() {
  const { id } = useParams();
  const isEdit = !!id;
  const navigate = useNavigate();

  const [model, setModel] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (isEdit) load();
  }, [id]);

  const load = async () => {
    const res = await getPmScheduleById(id);
    setModel(res.Data);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setModel(prev => ({ ...prev, [name]: value }));
  };

  const submit = async (e) => {
    e.preventDefault();

    if (!model.Name) {
      toast.error("Name is required");
      return;
    }

    setLoading(true);
    try {
      if (isEdit) {
        await editPmSchedule({ ...model, Id: id });
        toast.success("PM Schedule updated");
      } else {
        await addPmSchedule(model);
        toast.success("PM Schedule created");
      }
      navigate("/pm-schedules");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="contactFormWrapper">
      <div className="formCard">
        <div className="formHeader">
          <h2>{isEdit ? "Edit PM Schedule" : "Create PM Schedule"}</h2>
        </div>

        <form onSubmit={submit}>
          <h5 className="sectionTitle">General Details</h5>

          <div className="contactFormBody">
            <div className="formGroup">
              <label className="formLabel">Name *</label>
              <input
                className="formControl"
                name="Name"
                value={model.Name || ""}
                onChange={handleChange}
              />
            </div>

            <div className="formGroup">
              <label className="formLabel">Trade</label>
              <input
                className="formControl"
                name="Trade"
                value={model.Trade || ""}
                onChange={handleChange}
              />
            </div>

            <div className="formGroup">
              <label className="formLabel">Priority</label>
              <input
                className="formControl"
                name="Priority"
                value={model.Priority || ""}
                onChange={handleChange}
              />
            </div>

            <div className="formGroup fullWidth">
              <label className="formLabel">Additional Details</label>
              <textarea
                className="formControl"
                name="AdditionalDetails"
                value={model.AdditionalDetails || ""}
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="formActions">
            <button className="btnPrimary" disabled={loading}>
              {loading ? "Saving..." : "Save PM Schedule"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}