import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router";
import { toast } from "react-toastify";
import { getFollowUpById, addFollowUp, editFollowUp } from "../api";

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

  const [formData, setFormData] = useState({
    workOrder: "",
    reason: "",
    scheduledDate: "",
    status: "Pending",
    createdBy: "",
    createdDate: new Date().toISOString().split("T")[0],
    notes: "",
  });

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (isEdit && id) {
      const loadFollowUp = async () => {
        try {
          const followUp = await getFollowUpById(id);
          if (followUp) {
            setFormData(followUp);
          }
        } catch (err) {
          console.error("Failed to load follow up", err);
          toast.error("Failed to load follow up");
        }
      };
      loadFollowUp();
    }
  }, [id, isEdit]);

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

  const handleSave = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      if (isEdit) {
        await editFollowUp(formData);
        toast.success("Follow-up updated successfully!");
      } else {
        await addFollowUp(formData);
        toast.success("Follow-up created successfully!");
      }
      navigate("/followups");
    } catch (err) {
      console.error(err);
      toast.error("Failed to save follow-up");
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    navigate("/followups");
  };

  return (
    <section className="formPage">
      <div className="pageTitle">
        {isEdit ? "Edit Follow-up" : "Create Follow-up"}
      </div>

      <form onSubmit={handleSave} className="formWrapper">
        <div className="card formCard">
          <div className="formBody">
            {/* BASIC INFO SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Follow-up Details</div>
              <div className="formRow">
                <div className="formGroup">
                  <label>Work Order *</label>
                  <select
                    name="workOrder"
                    value={formData.workOrder}
                    onChange={handleChange}
                    required
                  >
                    <option value="">Select Work Order</option>
                    <option value="WO-001">WO-001 - HVAC System Maintenance</option>
                    <option value="WO-002">WO-002 - Electrical Repair</option>
                    <option value="WO-003">WO-003 - Plumbing Issue</option>
                  </select>
                </div>
                <div className="formGroup">
                  <label>Reason *</label>
                  <input
                    type="text"
                    name="reason"
                    value={formData.reason}
                    onChange={handleChange}
                    required
                    placeholder="Follow-up reason"
                  />
                </div>
              </div>

              <div className="formRow">
                <div className="formGroup">
                  <label>Scheduled Date *</label>
                  <input
                    type="date"
                    name="scheduledDate"
                    value={formData.scheduledDate}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="formGroup">
                  <label>Status *</label>
                  <select
                    name="status"
                    value={formData.status}
                    onChange={handleChange}
                    required
                  >
                    <option value="Pending">Pending</option>
                    <option value="In Progress">In Progress</option>
                    <option value="Completed">Completed</option>
                    <option value="Cancelled">Cancelled</option>
                  </select>
                </div>
              </div>
            </div>

            {/* CREATOR INFO SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Creator Information</div>
              <div className="formRow">
                <div className="formGroup">
                  <label>Created By *</label>
                  <select
                    name="createdBy"
                    value={formData.createdBy}
                    onChange={handleChange}
                    required
                  >
                    <option value="">Select Employee</option>
                    <option value="John Anderson">John Anderson</option>
                    <option value="Sarah Martinez">Sarah Martinez</option>
                    <option value="Mike Johnson">Mike Johnson</option>
                  </select>
                </div>
                <div className="formGroup">
                  <label>Created Date *</label>
                  <input
                    type="date"
                    name="createdDate"
                    value={formData.createdDate}
                    onChange={handleChange}
                    required
                  />
                </div>
              </div>
            </div>

            {/* NOTES SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Notes</div>
              <div className="formRow">
                <div className="formGroup fullWidth">
                  <label>Notes</label>
                  <textarea
                    name="notes"
                    value={formData.notes}
                    onChange={handleChange}
                    placeholder="Additional notes or details"
                    rows="5"
                    style={{
                      width: "100%",
                      padding: "10px",
                      borderRadius: "4px",
                      border: "1px solid #ddd",
                      fontFamily: "inherit",
                    }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* ACTION BUTTONS */}
          <div className="formActions">
            <button
              type="button"
              className="btnSecondary"
              onClick={handleCancel}
              disabled={loading}
            >
              Cancel
            </button>
            <button
              type="submit"
              className="btnPrimary"
              disabled={loading}
            >
              {loading ? "Saving..." : isEdit ? "Update" : "Create"}
            </button>
          </div>
        </div>
      </form>
    </section>
  );
}