import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import NavbarBlagajnik from "../../../components/NavbarBlagajnik/NavbarBlagajnik.jsx"
import dayjs from "dayjs";

const BlagajnikDashboard = ({ blagajnikId }) => {
  const navigate = useNavigate();
  const [
    showCreateSoopstenieZaPlakjanjeModal,
    setShowCreateSoopstenieZaPlakjanjeModal,
  ] = useState(false);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [soopstenijaZaPlakjanje, setSoopstenijaZaPlakjanje] = useState([]);

  const [formData, setFormData] = useState({
    naslov: "",
    sodrzina: "",
    iznos: "",
    valuta: "",
    rokZaPlakjanje: "",
  });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };
  const handleSubmitSoopstenie = async (e) => {
    e.preventDefault();
    setError("");
    const SoopstenieZaPlakjanjeRequestDTO = {
      naslov: formData.naslov,
      sodrzina: formData.sodrzina,
      iznos: parseFloat(formData.iznos),
      valuta: formData.valuta,
      rokZaPlakjanje: formData.rokZaPlakjanje,
      sozdadenoOdBlagajnikId: blagajnikId,
    };

    try {
      const response = await axios.post(
        "http://localhost:8080/api/paymentsSoopstenija",
        SoopstenieZaPlakjanjeRequestDTO,
        {
          withCredentials: true,
          headers: { "Content-Type": "application/json" },
        }
      );

      if (response.status === 200 || response.status === 201) {
        alert("Соопштението за плаќање е успешно креирано!");
        navigate("/dashboard");
      }
    } catch (err) {
      console.error("Грешка при POST:", err.response?.data);
      const serverMsg =
        err.response?.data?.message ||
        "Грешка при валидација. Проверете ги сите полиња.";
      setError(serverMsg);
    }
  };
  useEffect(() => {
    const initializeDashboard = async () => {
      if (!blagajnikId) return;
      try {
        setLoading(true);
        const [resSoopstenija] = await Promise.all([
          axios.get(`http://localhost:8080/api/paymentsSoopstenija/blagajnik`, {
            withCredentials: true,
          }),
        ]);
        setSoopstenijaZaPlakjanje(resSoopstenija.data);
      } catch (err) {
        setError(err);
        console.log(err);
      } finally {
        setLoading(false);
      }
    };
    initializeDashboard();
  }, [blagajnikId]);

  const handleShowCreateSoopstenieModal = () => {
    setShowCreateSoopstenieZaPlakjanjeModal(true);
  };
  return (
    <>
      <div>
        {error && <div className="alert alert-danger">{error}</div>}
        <NavbarBlagajnik />
        <div className="container mt-5 mh-100">
          <div className="row">
            <div className="col-12">
              <nav
                className="container text-white h-5 d-flex text-start p-3"
                style={{ backgroundColor: "#147176" }}
              >
                <Link to={`/dashboard`} className="btn btn-secondary">
                  Соопштенија за плаќање
                </Link>
              </nav>
              <div className="container">
                <button
                  className="btn btn-primary float-end"
                  data-bs-toggle="modal"
                  data-bs-target="#createSoopstenieZaPlakjanje"
                >
                  Креирај соопштение за плаќање
                </button>
                <div className="row">
                  {soopstenijaZaPlakjanje.length > 0 ? (
                    soopstenijaZaPlakjanje.map((pA) => (
                      <div key={pA.id} className="col-4">
                        <div className="card">
                          <div className="card-body">
                            <h5 className="card-title">{pA.naslov}</h5>
                            <p className="card-text">STATUS: {pA.status}</p>
                            <p>Рок за плаќање: {pA.rokZaPlakjanje}</p>
                            <p className="card-text">{pA.sodrzina}</p>
                            <p className="card-text">
                              {pA.valuta} {Number(pA.iznos).toFixed(18)}
                            </p>
                            <p>
                              Креирано на{" "}
                              {dayjs(pA.createdAt).format("HH:mm DD.MM.YYYY")}
                            </p>
                            <Link to={`/blagajnikDashboard//${pA.id}/payments`}>
                              Види плаќања
                            </Link>
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div>Нема соопштенија</div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        className="modal fade"
        tabIndex="-1"
        role="dialog"
        id="createSoopstenieZaPlakjanje"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLongTitle">
                Креирај соопштение за плаќање
              </h5>
            </div>
            <div className="modal-body">
              <form onSubmit={handleSubmitSoopstenie}>
                <div className="form-group">
                  <label htmlFor="naslov">Наслов</label>
                  <input
                    type="text"
                    name="naslov"
                    id="naslov"
                    placeholder="Наслов на соопштението"
                    className="form-control"
                    value={formData.naslov}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="sodrzina">Содржина</label>
                  <textarea
                    id="sodrzina"
                    name="sodrzina"
                    rows="4"
                    cols="50"
                    value={formData.sodrzina}
                    className="form-control"
                    onChange={handleChange}
                    required
                    placeholder="Содржина на соопштението"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="iznos">Износ</label>
                  <input
                    className="form-control"
                    type="number"
                    name="iznos"
                    id="iznos"
                    step="any"
                    value={formData.iznos}
                    min={0}
                    required
                    onChange={handleChange}
                    placeholder="0.00"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="valuta">Валута</label>
                  <input
                    type="text"
                    required
                    name="valuta"
                    className="form-control"
                    onChange={handleChange}
                    value={formData.valuta}
                    placeholder="ETH, LTC, XRP"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="rokZaPlakjanje">Рок за плаќање</label>
                  <input
                    type="date"
                    name="rokZaPlakjanje"
                    className="form-control"
                    value={formData.rokZaPlakjanje}
                    required
                    onChange={handleChange}
                  />
                </div>
                <div className="modal-footer ">
                  <button type="submit" className="btn btn-primary">
                    Креирај соопштение
                  </button>
                  <button type="button" data-bs-dismiss="modal" className="btn">
                    Затвори
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default BlagajnikDashboard;