import axios from "axios";
import { useEffect, useState } from "react";

function Sites() {
  const [sites, setSites] = useState([]);
  const [reload, setReload] = useState(0);
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [site, setSite] = useState({
    name: "",
    desc: "",
    address: "",
  });

  useEffect(() => {
    axios.get("/api/sites").then((res) => {
      setSites(res.data);
    });
  }, [reload]);

  const handleEditSite = (siteId) => {
    alert(`Edit site with ID: ${siteId}`);
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setSite({ ...site, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    const params = new URLSearchParams({
      name: site.name,
      description: site.desc,
      address: site.address,
    });

    axios.post(`/api/sites?${params.toString()}`).then((res) => {
      if (res.status === 200) {
        setSite({ name: "", desc: "", address: "" });
        setShowCreateForm(false);
        setReload(reload + 1);
      }
    });
  };

  return (
    <div className="container mx-auto p-6">
      <div className="bg-white shadow-lg rounded-lg p-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold text-blue-600">
            Manage Sites
          </h1>
          <button
            onClick={() => setShowCreateForm(!showCreateForm)}
            className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            {showCreateForm ? "Cancel" : "Create New Site"}
          </button>
        </div>

        {/* Create Site Form */}
        {showCreateForm && (
          <div className="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">
              Create New Site
            </h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Name:
                </label>
                <input
                  type="text"
                  name="name"
                  value={site.name}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="Enter site name"
                  required
                />
              </div>

              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Description:
                </label>
                <textarea
                  name="desc"
                  value={site.desc}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="Enter site description"
                  rows={4}
                  required
                ></textarea>
              </div>

              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Address:
                </label>
                <input
                  type="text"
                  name="address"
                  value={site.address}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="Enter site's address"
                  required
                />
              </div>

              <div className="text-right">
                <button
                  type="submit"
                  className="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500"
                >
                  Create Site
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Sites Table */}
        <div className="overflow-x-auto">
          <table className="table w-full">
            <thead>
              <tr>
                <th className="p-4">#</th>
                <th className="p-4">Name</th>
                <th className="p-4">Address</th>
                <th className="p-4">Roles</th>
                <th className="p-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {sites.map((site, index) => (
                <tr key={site.id} className="hover:bg-gray-100">
                  <td className="p-4">{index + 1}</td>
                  <td className="p-4">{site.name}</td>
                  <td className="p-4">{site.address}</td>
                  <td className="p-4">{site.listJi}</td>
                  <td className="p-4">
                    <button
                      className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400"
                      onClick={() => handleEditSite(site.id)}
                    >
                      Edit
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default Sites;