/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from "./write-news.module.scss"
import { useForm, router } from "@inertiajs/react"
import { FiX } from "react-icons/fi"

interface BlogData {
  id?: any
  category?: string
  title?: string
  body?: string
}

interface WriteAndUpdateBlogModalProps {
  closeModal: () => void
  type: "add" | "update"
  blog?: BlogData
}

const WriteAndUpdateBlogModal = ({
  closeModal,
  type,
  blog,
}: WriteAndUpdateBlogModalProps) => {
  const {
    data,
    setData,
    post,
    put,
    processing,
    reset,
  } = useForm({
    category: blog?.category ?? "",
    title: blog?.title ?? "",
    body: blog?.body ?? "",
  })

  const handleSubmit = (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault()

    if (type === "add") {
      post(route("admin.publications.store"), {
        onSuccess: () => {
          reset()
          closeModal()

          router.reload({
            only: ["flash"],
          })
        },
      })

      return
    }

    if (type === "update" && blog?.id) {
      put(route("admin.publications.update", blog.id), {
        onSuccess: () => {
          reset()
          closeModal()

          router.reload({
            only: ["flash"],
          })
        },
      })
    }
  }

  return (
    <div
      className={styles.addNews}
      onClick={closeModal}
    >
      <div
        className={styles.addNews__content}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          className={styles.addNews__close}
          onClick={closeModal}
        >
          <FiX size={16} />
        </button>

        <div className={styles.addNews__header}>
          <span className={styles.addNews__badge}>
            {type === "add"
              ? "Create Publication"
              : "Update Publication"}
          </span>

          <h2>
            {type === "add"
              ? "Create New Blog Post"
              : "Update Blog Post"}
          </h2>

          <p>
            {type === "add"
              ? "Write and publish educational content, trading insights and platform updates for your users."
              : "Modify the publication details below and save your changes."}
          </p>
        </div>

        <form
          className={styles.addNews__form}
          onSubmit={handleSubmit}
        >
          <div className={styles.addNews__field}>
            <label htmlFor="category">
              Category
            </label>

            <input
              id="category"
              type="text"
              placeholder="Forex, Crypto, Trading Psychology..."
              value={data.category}
              onChange={(e) =>
                setData(
                  "category",
                  e.target.value
                )
              }
              required
            />
          </div>

          <div className={styles.addNews__field}>
            <label htmlFor="title">
              Blog Title
            </label>

            <input
              id="title"
              type="text"
              placeholder="Enter blog title"
              value={data.title}
              onChange={(e) =>
                setData(
                  "title",
                  e.target.value
                )
              }
              required
            />
          </div>

          <div className={styles.addNews__field}>
            <label htmlFor="body">
              Blog Content
            </label>

            <textarea
              id="body"
              placeholder="Write your content here..."
              value={data.body}
              onChange={(e) =>
                setData(
                  "body",
                  e.target.value
                )
              }
              required
            />
          </div>

          <button
            type="submit"
            disabled={processing}
            className={styles.addNews__submit}
          >
            {processing
              ? type === "add"
                ? "Publishing..."
                : "Updating..."
              : type === "add"
                ? "Publish Blog Post"
                : "Update Blog Post"}
          </button>
        </form>
      </div>
    </div>
  )
}

export default WriteAndUpdateBlogModal