import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getFollowUpById, saveFollowUp } from "../new/api";

export default function FollowUpFormPage() {
  const navigate = useNavigate();
  const { id } = useParams();

  const [form, setForm] = useState({
    id: 0,
    followUpTypeId: 0,
    workOrderId: null,
    scheduleDate: "",
    scheduleTime: "",
    employeeId: "",
    reason: "",
    completeFollowUp: false,
  });

  useEffect(() => {
    if (id) {
      getFollowUpById(id).then((res) => {
        setForm(res);
      });
    }
  }, [id]);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm({
      ...form,
      [name]: type === "checkbox" ? checked : value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    await saveFollowUp(form);
    navigate("/followups");
  };

  return (
    <div className="formPage">
      <h2>{id ? "Edit Follow Up" : "Add Follow Up"}</h2>

      <form onSubmit={handleSubmit}>
        <label>Schedule Date</label>
        <input
          type="date"
          name="scheduleDate"
          value={form.scheduleDate}
          onChange={handleChange}
          required
        />

        <label>Schedule Time</label>
        <input
          type="time"
          name="scheduleTime"
          value={form.scheduleTime}
          onChange={handleChange}
          required
        />

        <label>Assigned To (Employee Id)</label>
        <input
          name="employeeId"
          value={form.employeeId}
          onChange={handleChange}
          required
        />

        <label>Reason</label>
        <textarea
          name="reason"
          value={form.reason}
          onChange={handleChange}
          required
        />

        <label>
          <input
            type="checkbox"
            name="completeFollowUp"
            checked={form.completeFollowUp}
            onChange={handleChange}
          />
          Complete Follow Up
        </label>

        <div className="formActions">
          <button type="submit" className="btn btn-success">
            Save
          </button>
          <button
            type="button"
            className="btn btn-secondary"
            onClick={() => navigate("/followups")}
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}