"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 {useAuthState} from 'react-firebase-hooks/auth'
import {auth} from '@/app/firebase/config'


const Create = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
  const [operations, setOperations] = useState<any[]>([]);

  const [responseMessage, setResponseMessage] = 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]);

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

  const handleRemoveOperation = (id: number) => {
    setOperations(operations.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 handleCreateSubmit = 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 {
      const response = await fetch(`${process.env.NEXT_PUBLIC_RENDER_LINK}/submit-create-form`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });
  
      const result = await response.json();
      console.log(result);
      setResponseMessage("Yeni Form başarıyla oluşturuldu!");
      setTimeout(() => {
        router.push("/");
      }, 2000);
    } catch (error) {
      console.error("Error submitting form:", error);
      setResponseMessage("Yeni Form oluşturulurken bir hata oluştu.");
    }
  };
  

  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">Yeni İş Emri</h1>
        <form id="excelForm" onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <FormField
              id="baslik"
              label="Başlık:"
              name="C1"
              placeholder="Başlık girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="yayınlanmaTarihi"
              label="Yayınlanma Tarihi:"
              name="J1"
              placeholder="Yayınlanma tarihi girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="dokumanKodu"
              label="Döküman Kodu:"
              name="J2"
              placeholder="Döküman kodu girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="versionNoTarih"
              label="Version No/Tarih:"
              name="J3"
              placeholder="Version No/Tarih girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="sayfaNo"
              label="Sayfa No:"
              name="J4"
              placeholder="Sayfa No girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="proje"
              label="Proje:"
              name="C5"
              placeholder="Proje girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="adres"
              label="Adres:"
              name="C6"
              placeholder="Adres girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="bakimTarihi"
              label="Bakım Tarihi:"
              name="I5"
              placeholder="Bakım tarihi girin"
              required={false}
              readOnly={true}
              defaultValue=""
            />
            <FormField
              id="isEmriNo"
              label="İş Emri No:"
              name="I6"
              placeholder="Otomatik Olarak Atanacak"
              required={false}
              readOnly={true}
              defaultValue=""
            />
            <FormField
              id="marka"
              label="Markası:"
              name="C8"
              placeholder="Marka girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="tipModel"
              label="Tipi/Modeli:"
              name="C9"
              placeholder="Tipi/Modeli girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="seriNo"
              label="Seri No:"
              name="C10"
              placeholder="Seri No girin"
              required={false}
              readOnly={true}
              defaultValue=""
            />
            <FormField
              id="imalatYili"
              label="İmalat Yılı:"
              name="C11"
              placeholder="İmalat yılı girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <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={true}
              defaultValue=""
            />
            <FormField
              id="kapasitesi"
              label="Kapasitesi:"
              name="I9"
              placeholder="Kapasite girin"
              required={true}
              readOnly={false}
              defaultValue=""
            />
            <FormField
              id="kullananBirim"
              label="Kullanan Birim:"
              name="I10"
              placeholder="Kullanan birim girin"
              required={false}
              readOnly={true}
              defaultValue=""
            />
            <FormField
              id="sonrakiBakimTarihi"
              label="Bir Sonraki Bakım Tarihi:"
              name="I11"
              placeholder="Bir sonraki bakım tarihi girin"
              required={false}
              readOnly={true}
              defaultValue=""
            />
          </div>

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

          <div className="mb-6">
            <button
              type="button"
              className="btn btn-success text-lg"
              onClick={handleAddOperation}
            >
              İşlem Ekle
            </button>
          </div>

          <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={"Formu oluşturmak istediğinizden emin misiniz?"}
        isOpen={isSubmitModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleCreateSubmit}
        link="/"
      />
    </div>
  );
};

export default Create;