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

import AdminDashboardLayout from "@/layouts/admin_layout";
import styles from "./messages.module.scss";

import PageIntro from "@/components/dashboard/PageIntro";
import NoResults from "@/components/dashboard/NoResults";
import Pagination from "@/components/shared/Pagination";

import { usePaginatedData } from "@/hooks/use-paginated-data";
import { formatDate } from "@/lib/utils/format-date";

import { useState } from "react";

import { router } from "@inertiajs/react";

interface Props {
  messages: any;
}

const AdminContactMessages = (
  {
    messages,
  }: Props,
  initialPerPage = 10
) => {
  const [filter, setFilter] = useState<
    "all" | "new" | "read"
  >("all");

  const [
    processingReadIds,
    setProcessingReadIds,
  ] = useState<number[]>([]);

  const [
    processingDeleteIds,
    setProcessingDeleteIds,
  ] = useState<number[]>([]);

  const [modalMessage, setModalMessage] =
    useState<any>(null);

  const { handlePageChange } =
    usePaginatedData(
      initialPerPage
    );

  const filteredMessages =
    filter === "all"
      ? messages?.data
      : messages?.data?.filter(
          (msg: any) =>
            filter === "new"
              ? !msg.is_read
              : msg.is_read
        );

  const totalMessages =
    messages?.data?.length || 0;

  const unreadMessages =
    messages?.data?.filter(
      (msg: any) =>
        !msg.is_read
    )?.length || 0;

  const readMessages =
    messages?.data?.filter(
      (msg: any) =>
        msg.is_read
    )?.length || 0;

  const handleMarkAsRead = (
    id: number
  ) => {
    if (
      processingReadIds.includes(id)
    )
      return;

    setProcessingReadIds(
      (prev) => [...prev, id]
    );

    router.patch(
      route(
        "admin.messages.read",
        { id }
      ),
      {},
      {
        preserveScroll: true,

        onSuccess: () => {
          setProcessingReadIds(
            (prev) =>
              prev.filter(
                (x) => x !== id
              )
          );

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

  const handleDelete = (
    id: number
  ) => {
    if (
      processingDeleteIds.includes(
        id
      )
    )
      return;

    setProcessingDeleteIds(
      (prev) => [...prev, id]
    );

    router.delete(
      route(
        "admin.messages.destroy",
        { id }
      ),
      {
        preserveScroll: true,

        onSuccess: () => {
          setProcessingDeleteIds(
            (prev) =>
              prev.filter(
                (x) => x !== id
              )
          );

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

  return (
    <div
      className={
        styles.adminContact
      }
    >
      <PageIntro
        title="Contact Messages"
        description="Monitor customer inquiries, support requests and platform feedback."
      />

      {/* =======================================
          STATS
      ======================================= */}

      <div
        className={
          styles.statsGrid
        }
      >
        <div
          className={
            styles.statCard
          }
        >
          <h4>
            Total Messages
          </h4>

          <h2>
            {totalMessages}
          </h2>
        </div>

        <div
          className={
            styles.statCard
          }
        >
          <h4>
            Unread Messages
          </h4>

          <h2>
            {unreadMessages}
          </h2>
        </div>

        <div
          className={
            styles.statCard
          }
        >
          <h4>
            Read Messages
          </h4>

          <h2>
            {readMessages}
          </h2>
        </div>
      </div>

      {/* =======================================
          FILTERS
      ======================================= */}

      <div
        className={
          styles.adminContact__filters
        }
      >
        <button
          className={
            filter === "all"
              ? styles.active
              : ""
          }
          onClick={() =>
            setFilter("all")
          }
        >
          All
        </button>

        <button
          className={
            filter === "new"
              ? styles.active
              : ""
          }
          onClick={() =>
            setFilter("new")
          }
        >
          Unread
        </button>

        <button
          className={
            filter === "read"
              ? styles.active
              : ""
          }
          onClick={() =>
            setFilter("read")
          }
        >
          Read
        </button>
      </div>

      {/* =======================================
          TABLE
      ======================================= */}

      <div
        className={
          styles.adminContact__tableCard
        }
      >
        {filteredMessages?.length >
        0 ? (
          <div
            className={
              styles.adminContact__tableWrapper
            }
          >
            <div
              className={
                styles.adminContact__table
              }
            >
              <div
                className={
                  styles.tableHeader
                }
              >
                <div>Name</div>

                <div>Email</div>

                <div>
                  Subject
                </div>

                <div>
                  Status
                </div>

                <div>Date</div>

                <div>
                  Actions
                </div>
              </div>

              {filteredMessages.map(
                (msg: any) => (
                  <div
                    key={msg.id}
                    className={
                      styles.tableRow
                    }
                  >
                    <div>
                      {msg.name}
                    </div>

                    <div>
                      {msg.email}
                    </div>

                    <div>
                      {msg.subject ||
                        "No Subject"}
                    </div>

                    <div>
                      <span
                        className={
                          msg.is_read
                            ? styles.statusRead
                            : styles.statusUnread
                        }
                      >
                        {msg.is_read
                          ? "Read"
                          : "Unread"}
                      </span>
                    </div>

                    <div>
                      {formatDate(
                        msg.created_at
                      )}
                    </div>

                    <div
                      className={
                        styles.actions
                      }
                    >
                      <button
                        className={
                          styles.viewBtn
                        }
                        onClick={() =>
                          setModalMessage(
                            msg
                          )
                        }
                      >
                        View
                      </button>

                      {!msg.is_read && (
                        <button
                          className={
                            styles.markReadBtn
                          }
                          disabled={processingReadIds.includes(
                            msg.id
                          )}
                          onClick={() =>
                            handleMarkAsRead(
                              msg.id
                            )
                          }
                        >
                          {processingReadIds.includes(
                            msg.id
                          )
                            ? "..."
                            : "Read"}
                        </button>
                      )}

                      <button
                        className={
                          styles.deleteBtn
                        }
                        disabled={processingDeleteIds.includes(
                          msg.id
                        )}
                        onClick={() =>
                          handleDelete(
                            msg.id
                          )
                        }
                      >
                        {processingDeleteIds.includes(
                          msg.id
                        )
                          ? "..."
                          : "Delete"}
                      </button>
                    </div>
                  </div>
                )
              )}
            </div>
          </div>
        ) : (
          <div
            className={
              styles.noData
            }
          >
            <NoResults
              title="No Messages"
              description="No contact messages found."
            />
          </div>
        )}
      </div>

      {/* =======================================
          PAGINATION
      ======================================= */}

      <div
        className={
          styles.attend__pagination
        }
      >
        {messages?.data
          ?.length > 0 &&
          messages?.links
            ?.length > 0 && (
            <Pagination
              links={
                messages.links
              }
              onChange={
                handlePageChange
              }
            />
          )}
      </div>

      {/* =======================================
          MESSAGE MODAL
      ======================================= */}

      {modalMessage && (
        <div
          className={
            styles.modalOverlay
          }
          onClick={() =>
            setModalMessage(
              null
            )
          }
        >
          <div
            className={
              styles.modalContent
            }
            onClick={(e) =>
              e.stopPropagation()
            }
          >
            <h3>
              {
                modalMessage.name
              }
            </h3>

            <p
              className={
                styles.modalEmail
              }
            >
              {
                modalMessage.email
              }
            </p>

            {modalMessage.subject && (
              <p
                className={
                  styles.modalEmail
                }
              >
                Subject:{" "}
                {
                  modalMessage.subject
                }
              </p>
            )}

            <div
              className={
                styles.modalMessage
              }
            >
              {
                modalMessage.message
              }
            </div>

            <button
              className={
                styles.modalCloseBtn
              }
              onClick={() =>
                setModalMessage(
                  null
                )
              }
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

AdminContactMessages.layout = (
  page: React.ReactNode
) => (
  <AdminDashboardLayout title="Contact Messages">
    {page}
  </AdminDashboardLayout>
);

export default AdminContactMessages;