import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router";
import { toast } from "react-toastify";
import { getLocationById, addLocation, editLocation } from "../api";

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

  const [formData, setFormData] = useState({
    name: "",
    address: "",
    city: "",
    state: "IL",
    zipCode: "",
    phone: "",
    contact: "",
    contactEmail: "",
    status: "Active",
    accountId: "",
  });

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

  useEffect(() => {
    if (isEdit && id) {
      const loadLocation = async () => {
        try {
          const location = await getLocationById(id);
          if (location) {
            setFormData(location);
          }
        } catch (err) {
          console.error("Failed to load location", err);
          toast.error("Failed to load location");
        }
      };
      loadLocation();
    }
  }, [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 editLocation(formData);
        toast.success("Location updated successfully!");
      } else {
        await addLocation(formData);
        toast.success("Location created successfully!");
      }
      navigate("/locations");
    } catch (err) {
      console.error(err);
      toast.error("Failed to save location");
    } finally {
      setLoading(false);
    }
  };

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

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

      <form onSubmit={handleSave} className="formWrapper">
        <div className="card formCard">
          <div className="formBody">
            {/* BASIC INFO SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Location Information</div>
              <div className="formRow">
                <div className="formGroup">
                  <label>Name *</label>
                  <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                    placeholder="Location name"
                  />
                </div>
                <div className="formGroup">
                  <label>Account</label>
                  <input
                    type="text"
                    name="accountId"
                    value={formData.accountId}
                    onChange={handleChange}
                    placeholder="Account ID or name"
                  />
                </div>
              </div>

              <div className="formRow">
                <div className="formGroup">
                  <label>Address *</label>
                  <input
                    type="text"
                    name="address"
                    value={formData.address}
                    onChange={handleChange}
                    required
                    placeholder="Street address"
                  />
                </div>
              </div>

              <div className="formRow">
                <div className="formGroup">
                  <label>City *</label>
                  <input
                    type="text"
                    name="city"
                    value={formData.city}
                    onChange={handleChange}
                    required
                    placeholder="City"
                  />
                </div>
                <div className="formGroup">
                  <label>State *</label>
                  <select
                    name="state"
                    value={formData.state}
                    onChange={handleChange}
                    required
                  >
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="MI">Michigan</option>
                    <option value="OH">Ohio</option>
                    <option value="WI">Wisconsin</option>
                  </select>
                </div>
                <div className="formGroup">
                  <label>Zip Code *</label>
                  <input
                    type="text"
                    name="zipCode"
                    value={formData.zipCode}
                    onChange={handleChange}
                    required
                    placeholder="12345"
                  />
                </div>
              </div>
            </div>

            {/* CONTACT INFO SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Contact Information</div>
              <div className="formRow">
                <div className="formGroup">
                  <label>Phone *</label>
                  <input
                    type="tel"
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    required
                    placeholder="(555) 000-0000"
                  />
                </div>
                <div className="formGroup">
                  <label>Contact Person *</label>
                  <input
                    type="text"
                    name="contact"
                    value={formData.contact}
                    onChange={handleChange}
                    required
                    placeholder="Full name"
                  />
                </div>
              </div>

              <div className="formRow">
                <div className="formGroup">
                  <label>Contact Email *</label>
                  <input
                    type="email"
                    name="contactEmail"
                    value={formData.contactEmail}
                    onChange={handleChange}
                    required
                    placeholder="email@company.com"
                  />
                </div>
              </div>
            </div>

            {/* STATUS SECTION */}
            <div className="formSection">
              <div className="sectionTitle">Status</div>
              <div className="formRow">
                <div className="formGroup">
                  <label>Status *</label>
                  <select
                    name="status"
                    value={formData.status}
                    onChange={handleChange}
                    required
                  >
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                    <option value="Closed">Closed</option>
                  </select>
                </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>
  );
}