/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./contact.module.scss"
import UserDashboardLayout from "@/layouts/user_dashboard_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useForm, usePage } from "@inertiajs/react"
import { useState } from "react"

import {
  MdLocationOn,
  MdEmail,
} from "react-icons/md"

const ContactPage = () => {
  const { appSettings, auth } =
    usePage().props as any

  const [messageSent, setMessageSent] =
    useState(false)

  const {
    data,
    setData,
    post,
    processing,
  } = useForm({
    name: auth?.user?.name || "",
    email: auth?.user?.email || "",
    subject: "",
    message: "",
  })

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

    post(route("contact.store"), {
      preserveScroll: true,

      onSuccess: () => {
        setData({
          name:
            auth?.user?.name || "",
          email:
            auth?.user?.email || "",
          subject: "",
          message: "",
        })

        setMessageSent(true)
      },
    })
  }

  const infoCards = [
    {
      icon: (
        <MdLocationOn size="2rem" />
      ),
      title: "Office Address",
      value:
        appSettings?.office_address ||
        "Remote - Global",
    },
    {
      icon: <MdEmail size="2rem" />,
      title: "Email",
      value:
        appSettings?.contact_email ||
        "contact@yourdomain.com",
    },
  ]

  return (
    <div className={styles.contactPage}>
      <PageIntro
        title="Contact Us"
        description="Have questions or concerns? Reach out and our support team will respond as quickly as possible."
      />

      {/* CONTACT INFO */}

      <div
        className={
          styles.contactPage__infoGrid
        }
      >
        {infoCards.map(
          (card, index) => (
            <div
              key={index}
              className={styles.infoCard}
            >
              <div
                className={
                  styles.infoCard__icon
                }
              >
                {card.icon}
              </div>

              <h4>{card.title}</h4>

              <p>{card.value}</p>
            </div>
          )
        )}
      </div>

      {/* FORM CARD */}

      <div
        className={
          styles.contactPage__card
        }
      >
        {messageSent && (
          <div
            className={
              styles.successCard
            }
          >
            <div
              className={
                styles.successIcon
              }
            >
              ✓
            </div>

            <div>
              <h4>
                Message Sent
                Successfully
              </h4>

              <p>
                Thank you for
                contacting {appSettings?.website_name} support. Our
                team has
                received your
                message and will
                get back to you
                shortly.
              </p>
            </div>
          </div>
        )}

        <form
          onSubmit={handleSubmit}
          className={
            styles.contactPage__form
          }
        >
          <div className={styles.row}>
            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Full Name
              </label>

              <input
                disabled
                type="text"
                value={data.name}
                placeholder="Your full name"
              />
            </div>

            <div
              className={
                styles.formGroup
              }
            >
              <label>Email</label>

              <input
                disabled
                type="email"
                value={data.email}
                placeholder="you@example.com"
              />
            </div>
          </div>

          <div
            className={
              styles.formGroup
            }
          >
            <label>
              Subject
            </label>

            <input
              type="text"
              value={data.subject}
              onChange={(e) => {
                setMessageSent(false)

                setData("subject", e.target.value)
              }}
              placeholder="What can we help you with?"
              required
            />
          </div>

          <div
            className={
              styles.formGroup
            }
          >
            <label>
              Message
            </label>

            <textarea
              rows={7}
              value={data.message}
              onChange={(e) => {
                setMessageSent(false)

                setData("message", e.target.value)
              }}
              placeholder="Describe your issue, question or request..."
              required
            />
          </div>

          <button
            type="submit"
            disabled={processing}
          >
            {processing
              ? "Sending Message..."
              : "Send Message"}
          </button>
        </form>
      </div>
    </div>
  )
}

ContactPage.layout = (
  page: React.ReactNode
) => (
  <UserDashboardLayout
    title="Contact Us"
  >
    {page}
  </UserDashboardLayout>
)

export default ContactPage