"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";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "@/app/firebase/config";

const Update = ({ 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 [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]);

  const handleAddOperation = () => {
    const newId =
      operations.length > 0 ? operations[operations.length - 1].id + 1 : 1;
    setOperations([...operations, { id: newId }]);
  };

  useEffect(() => {
    console.log({ id });
    const fetchFormData = async () => {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-custom-data?id=${id}`
        ); // Fetch data based on id
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // Ensure the data contains all necessary fields
        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],
            explanation: data[`H${index + 16}`] || "", // Adjust as needed
            checkbox: data[`D${index + 16}`] || "", // Adjust as needed
          }));

        setFormData(data);
        setOperations(operations);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

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

  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;
    });

    try {
      if (!id) {
        throw new Error("ID is required to update data.");
      }

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

      const result = await response.json();
      console.log(result);
      setResponseMessage(`${data.C1} başarıyla güncellendi.`);
      setTimeout(() => {
        router.push("/search");
      }, 2000);
    } catch (error) {
      console.error("Error updating form:", error);
      setResponseMessage(`${data.C1} güncellenşrken hata oluştu.`);
    }
  };

  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);
  };

  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={false}
              defaultValue={formData.C1 ?? ""}
            />
            <FormField
              id="yayınlanmaTarihi"
              label="Yayınlanma Tarihi:"
              name="J1"
              placeholder="Yayınlanma tarihi girin"
              required={false}
              readOnly={false}
              defaultValue={formData.J1 ?? ""}
            />
            <FormField
              id="dokumanKodu"
              label="Döküman Kodu:"
              name="J2"
              placeholder="Döküman kodu girin"
              required={false}
              readOnly={false}
              defaultValue={formData.J2 ?? ""}
            />
            <FormField
              id="versionNoTarih"
              label="Version No/Tarih:"
              name="J3"
              placeholder="Version No/Tarih girin"
              required={false}
              readOnly={false}
              defaultValue={formData.J3 ?? ""}
            />
            <FormField
              id="sayfaNo"
              label="Sayfa No:"
              name="J4"
              placeholder="Sayfa No girin"
              required={false}
              readOnly={false}
              defaultValue={formData.J4 ?? ""}
            />
            <FormField
              id="proje"
              label="Proje:"
              name="C5"
              placeholder="Proje girin"
              required={false}
              readOnly={false}
              defaultValue={formData.C5 ?? ""}
            />
            <FormField
              id="adres"
              label="Adres:"
              name="C6"
              placeholder="Adres girin"
              required={false}
              readOnly={false}
              defaultValue={formData.C6 ?? ""}
            />
            <FormField
              id="bakimTarihi"
              label="Bakım Tarihi:"
              name="I5"
              placeholder="Bakım tarihi girin"
              required={false}
              readOnly={false}
              defaultValue={formData.I5 ?? ""}
            />
            <FormField
              id="isEmriNo"
              label="İş Emri No:"
              name="I6"
              placeholder="Otomatik Olarak Atanacak"
              required={false}
              readOnly={false}
              defaultValue={formData.I6 ?? ""}
            />
            <FormField
              id="marka"
              label="Markası:"
              name="C8"
              placeholder="Marka girin"
              required={false}
              readOnly={false}
              defaultValue={formData.C8 ?? ""}
            />
            <FormField
              id="tipModel"
              label="Tipi/Modeli:"
              name="C9"
              placeholder="Tipi/Modeli girin"
              required={false}
              readOnly={false}
              defaultValue={formData.C9 ?? ""}
            />
            <FormField
              id="seriNo"
              label="Seri No:"
              name="C10"
              placeholder="Seri No girin"
              required={false}
              readOnly={false}
              defaultValue={formData.C10 ?? ""}
            />
            <FormField
              id="imalatYili"
              label="İmalat Yılı:"
              name="C11"
              placeholder="İmalat yılı girin"
              required={false}
              readOnly={false}
              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">
                  <input
                    type="radio"
                    id="bakimPeriyodu6"
                    name="C12"
                    value="6 Ay"
                    className="checkbox mr-2"
                    required
                  />
                  <label htmlFor="bakimPeriyodu6" className="text-gray-700">
                    6 Ay
                  </label>
                </div>
                <div className="flex items-center">
                  <input
                    type="radio"
                    id="bakimPeriyodu12"
                    name="C12"
                    value="12 Ay"
                    className="checkbox mr-2"
                    required
                  />
                  <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={false}
              readOnly={false}
              defaultValue={formData.I8 ?? ""}
            />
            <FormField
              id="kapasitesi"
              label="Kapasitesi:"
              name="I9"
              placeholder="Kapasite girin"
              required={false}
              readOnly={false}
              defaultValue={formData.I9 ?? ""}
            />
            <FormField
              id="kullananBirim"
              label="Kullanan Birim:"
              name="I10"
              placeholder="Kullanan birim girin"
              required={false}
              readOnly={false}
              defaultValue={formData.I10 ?? ""}
            />
            <FormField
              id="sonrakiBakimTarihi"
              label="Bir Sonraki Bakım Tarihi:"
              name="I11"
              placeholder="Bir sonraki bakım tarihi girin"
              required={false}
              readOnly={false}
              defaultValue={formData.I11 ?? ""}
            />
          </div>

          <OperationList
            deleteBtn={false}
            operations={operations}
            onRemove={handleRemoveOperation}
            disabled={false}
            readOnlyDes={false}
            readOnlyAva={false}
            requiredCheck={false}
            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"
            defaultValue={formData.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"
            defaultValue={formData.A2 ?? ""}
          ></textarea>

          <div className="mb-6 flex justify-between">
            <input
              type="submit"
              value="Düzenle"
              className="btn btn-info text-lg"
            />
            <Link href="/search">
              <button type="button" className="btn btn-error text-lg">
                Geri
              </button>
            </Link>
          </div>
          {responseMessage && (
            <div
              id="responseMessage"
              className="text-center text-green-500 font-semibold"
            >
              {responseMessage}
            </div>
          )}
        </form>
      </div>
      <Footer />
      <Modal
        returnHome={true}
        warningMessage={"Bu iş emrini düzenlemek istediğinizden emin misiniz?"}
        isOpen={isSubmitModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleCustomSubmit}
        link="/search"
      />
    </div>
  );
};

export default Update;