"use client";
import React, { useState, useEffect } from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Modal from "../components/Modal";
import FormField from "../components/FormField";
import OperationList from "../components/OparationList"; // Corrected import name
import { useRouter } from "next/navigation";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "@/app/firebase/config";

const Custom = ({ id }: { id: string | null }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
  const [operations, setOperations] = useState<any[]>([]);
  const [responseMessage, setResponseMessage] = useState("");
  const [formData, setFormData] = useState<any>({}); // Use 'any' if types are unknown
  const [jobOrderNumber, setJobOrderNumber] = useState("");
  const [bakimTarihi, setBakimTarihi] = useState("");
  const [bakimPeriyodu, setBakimPeriyodu] = useState("");
  const [sonrakiBakimTarihi, setSonrakiBakimTarihi] = useState("");

  const [user] = useAuthState(auth);
  const router = useRouter();

  useEffect(() => {
    if (typeof window !== "undefined") {
      const userSession = sessionStorage.getItem("user");

      console.log(user);

      if (!user && !userSession) {
        router.push("/login");
      }
    }
  }, [user, router]);

  useEffect(() => {
    console.log({ id });
    const fetchFormData = async () => {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-create-data?id=${id}`
        );
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        const operations = Object.keys(data)
          .filter(
            (key) =>
              key.startsWith("B") &&
              !isNaN(Number(key.slice(1))) &&
              Number(key.slice(1)) >= 16
          )
          .map((key, index) => ({
            id: index + 1,
            key,
            description: data[key],
          }));

        setFormData(data);
        setOperations(operations);
        setBakimTarihi(data.I5 || ""); // Set initial Bakım Tarihi
        setBakimPeriyodu(data.C12 || ""); // Set initial Bakım Periyodu
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    if (id) {
      fetchFormData();
    }
    generateJobOrderNumber();
  }, [id]);

  useEffect(() => {
    if (bakimTarihi && bakimPeriyodu) {
      const calculateNextMaintenanceDate = () => {
        const [day, month, year] = bakimTarihi.split(".");
        const date = new Date(+year, +month - 1, +day);

        if (bakimPeriyodu === "6 Ay") {
          date.setMonth(date.getMonth() + 6);
        } else if (bakimPeriyodu === "12 Ay") {
          date.setFullYear(date.getFullYear() + 1);
        }

        const nextDay = String(date.getDate()).padStart(2, "0");
        const nextMonth = String(date.getMonth() + 1).padStart(2, "0");
        const nextYear = date.getFullYear();

        setSonrakiBakimTarihi(`${nextDay}.${nextMonth}.${nextYear}`);
      };

      calculateNextMaintenanceDate();
    }
  }, [bakimTarihi, bakimPeriyodu]);

  const generateJobOrderNumber = async () => {
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_RENDER_LINK}/generate-job-order-number`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

      if (!response.ok) {
        throw new Error("Error generating job order number");
      }

      const data = await response.json();
      setJobOrderNumber(data.jobOrderNumber);
    } catch (error) {
      console.error("Error generating job order number:", error);
    }
  };
  const handleRemoveOperation = (id: number) => {
    setOperations((prevOperations) =>
      prevOperations.filter((operation) => operation.id !== id)
    );
  };

  const handleCancelClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setIsSubmitModalOpen(false);
  };

  const handleConfirmCancel = () => {
    setIsModalOpen(false);
    // Redirect to home or handle cancellation logic here
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsSubmitModalOpen(true);
  };

  const handleCustomSubmit = async () => {
    setIsSubmitModalOpen(false);
    const form = document.getElementById("excelForm") as HTMLFormElement;
    const formData = new FormData(form);
    const data: { [key: string]: string } = {};

    formData.forEach((value, key) => {
      data[key] = value as string;
    });

    data["I6"] = jobOrderNumber; // Set the job order number
    data["I11"] = sonrakiBakimTarihi;

    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_RENDER_LINK}/submit-custom-form`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        }
      );

      const result = await response.json();
      console.log(result);
      setResponseMessage(`${data.C1} başarıyla oluşturuldu.`);
      localStorage.setItem("lastJobOrderNumber", jobOrderNumber); // Update the last job order number
      setTimeout(() => {
        router.push("/search");
      }, 2000);
    } catch (error) {
      console.error("Error submitting form:", error);
      setResponseMessage(`${data.C1} oluşturulurken bi hata oluştu.`);
    }
  };

  const handleFormChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    if (name === "I5") {
      setBakimTarihi(value);
    } else if (name === "C12") {
      setBakimPeriyodu(value);
    }

    setFormData((prevFormData: any) => ({
      ...prevFormData,
      [name]: value,
    }));
  };

  const checkboxDisabled = (value: string) => (
    <input
      type="radio"
      id="bakimPeriyodu6"
      name="C12"
      value={value}
      disabled
      className="checkbox mr-2"
      checked={formData.C12 === value}
    />
  );

  const checkboxNormal = (value: string) => (
    <input
      type="radio"
      id="bakimPeriyodu6"
      name="C12"
      value={value}
      className="checkbox mr-2"
      checked={formData.C12 === value}
    />
  );

  return (
    <div>
      <Navbar isShow={false} toggleRightSidePage={() => {}} />
      <div className="max-w-3xl mx-auto bg-slate-200 p-8 rounded-lg shadow-md mt-10 mb-10">
        <h1 className="text-3xl text-neutral mb-6 text-center">
          {formData.C1}
        </h1>
        <form id="excelForm" onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            {/* Render FormField components with formData values */}
            <FormField
              id="baslik"
              label="Başlık:"
              name="C1"
              placeholder="Başlık girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C1 ?? ""}
            />
            <FormField
              id="yayınlanmaTarihi"
              label="Yayınlanma Tarihi:"
              name="J1"
              placeholder="Yayınlanma tarihi girin"
              required={false}
              readOnly={true}
              defaultValue={formData.J1 ?? ""}
            />

            <FormField
              id="dokumanKodu"
              label="Döküman Kodu:"
              name="J2"
              placeholder="Döküman kodu girin"
              required={false}
              readOnly={true}
              defaultValue={formData.J2 ?? ""}
            />
            <FormField
              id="versionNoTarih"
              label="Version No/Tarih:"
              name="J3"
              placeholder="Version No/Tarih girin"
              required={false}
              readOnly={true}
              defaultValue={formData.J3 ?? ""}
            />
            <FormField
              id="sayfaNo"
              label="Sayfa No:"
              name="J4"
              placeholder="Sayfa No girin"
              required={false}
              readOnly={true}
              defaultValue={formData.J4 ?? ""}
            />
            <FormField
              id="proje"
              label="Proje:"
              name="C5"
              placeholder="Proje girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C5 ?? ""}
            />
            <FormField
              id="adres"
              label="Adres:"
              name="C6"
              placeholder="Adres girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C6 ?? ""}
            />
            <div>
              <label id="bakimTarihi" className="block text-gray-700 mb-2">
                Bakım Tarihi:
              </label>
              <input
                type="text"
                id="bakimTarihi"
                name="I5"
                className="input input-bordered input-secondary w-full"
                placeholder="Bakım tarihi girin"
                required={true}
                readOnly={false}
                defaultValue={formData.I5 ?? ""}
                onChange={handleFormChange}
              />
            </div>
            <FormField
              id="isEmriNo"
              label="İş Emri No:"
              name="I6"
              placeholder="Otomatik Olarak Atanacak"
              required={false}
              readOnly={true}
              defaultValue={jobOrderNumber}
            />
            <FormField
              id="marka"
              label="Markası:"
              name="C8"
              placeholder="Marka girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C8 ?? ""}
            />
            <FormField
              id="tipModel"
              label="Tipi/Modeli:"
              name="C9"
              placeholder="Tipi/Modeli girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C9 ?? ""}
            />
            <FormField
              id="seriNo"
              label="Seri No:"
              name="C10"
              placeholder="Seri No girin"
              required={true}
              readOnly={false}
              defaultValue={formData.C10 ?? ""}
            />
            <FormField
              id="imalatYili"
              label="İmalat Yılı:"
              name="C11"
              placeholder="İmalat yılı girin"
              required={false}
              readOnly={true}
              defaultValue={formData.C11 ?? ""}
            />
            <div>
              <label
                htmlFor="bakimPeriyodu"
                className="block text-gray-700 mb-2"
              >
                Bakım Periyodu:
              </label>
              <div className="flex items-center space-x-4">
                <div className="flex items-center">
                  {formData.C12 === "6 Ay"
                    ? checkboxNormal("6 Ay")
                    : checkboxDisabled("6 Ay")}
                  <label htmlFor="bakimPeriyodu6" className="text-gray-700">
                    6 Ay
                  </label>
                </div>
                <div className="flex items-center">
                  {formData.C12 === "12 Ay"
                    ? checkboxNormal("12 Ay")
                    : checkboxDisabled("12 Ay")}
                  <label htmlFor="bakimPeriyodu12" className="text-gray-700 ">
                    12 Ay
                  </label>
                </div>
              </div>
            </div>
            <FormField
              id="bulunduguYer"
              label="Bulunduğu Yer:"
              name="I8"
              placeholder="Bulunduğu yer girin"
              required={true}
              readOnly={false}
              defaultValue={formData.I8 ?? ""}
            />
            <FormField
              id="kapasitesi"
              label="Kapasitesi:"
              name="I9"
              placeholder="Kapasite girin"
              required={false}
              readOnly={true}
              defaultValue={formData.I9 ?? ""}
            />
            <FormField
              id="kullananBirim"
              label="Kullanan Birim:"
              name="I10"
              placeholder="Kullanan birim girin"
              required={true}
              readOnly={false}
              defaultValue={formData.I10 ?? ""}
            />
            <FormField
              id="sonrakiBakimTarihi"
              label="Bir Sonraki Bakım Tarihi:"
              name="I11"
              placeholder="Otomatik olarak ayarlanacak"
              required={false}
              readOnly={true}
              defaultValue={sonrakiBakimTarihi}
            />
          </div>

          <OperationList
            deleteBtn={false}
            operations={operations}
            onRemove={handleRemoveOperation}
            disabled={false}
            readOnlyAva={true}
            readOnlyDes={false}
            requiredCheck={true}
            requiredText={false}
          />

          <label htmlFor="bakimPeriyodu" className="block text-gray-700 mb-2">
            Tespit edilen uygunsuzluklar ve öneriler:
          </label>
          <textarea
            className="textarea textarea-bordered w-full mb-2"
            placeholder="Uygunsuzluk ve öneri girin"
            name="A1"
          ></textarea>

          <label htmlFor="bakimPeriyodu" className="block text-gray-700 mb-2">
            Sonuç:
          </label>
          <textarea
            className="textarea textarea-bordered w-full mb-2"
            placeholder="Sonuç girin"
            name="A2"
          ></textarea>

          <div className="mb-6 flex justify-between">
            <input
              type="submit"
              value="Oluştur"
              className="btn btn-info text-lg"
            />
            <button
              type="button"
              className="btn btn-error text-lg"
              onClick={handleCancelClick}
            >
              İptal
            </button>
          </div>
          {responseMessage && (
            <div
              id="responseMessage"
              className="text-center text-green-500 font-semibold"
            >
              {responseMessage}
            </div>
          )}
        </form>
      </div>
      <Footer />
      <Modal
        returnHome={true}
        warningMessage={"Bu işlemi iptal etmek istediğinizden emin misiniz?"}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleConfirmCancel}
        link="/"
      />
      <Modal
        returnHome={false}
        warningMessage={`${formData.C1} oluşturmak istediğinizden emin misiniz?`}
        isOpen={isSubmitModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleCustomSubmit}
        link="/"
      />
    </div>
  );
};

export default Custom;