/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./program-item.module.scss";
import {
  MdLocationPin,
  MdAccessTime,
  MdRemoveRedEye,
  MdDeleteForever,
  MdEdit,
} from "react-icons/md";
import { formatDateReadable } from "@/lib/utils";
import CreateProgramModal from "../../modals/create-program-modal";
import DeleteModal from "../../modals/delete-modal";
import { useState } from "react";
import { router } from "@inertiajs/react";

interface ProgramProps {
  program?: any;
  loading?: boolean;
}

const ProgramItem: React.FC<ProgramProps> = ({ program, loading }) => {
  const [updateModal, setUpdateModal] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);

  if (loading) {
    return (
      <div className={`${styles.card} ${styles.skeleton}`}>
        <div className={styles.thumb} />

        <div className={styles.content}>
          <div className={styles.skelHeader} />
          <div className={styles.skelMeta} />
          <div className={styles.skelDesc} />
          <div className={styles.skelActions} />
        </div>
      </div>
    );
  }

  const { id, name, location, status, description, created_at } = program;

  const goToDetails = () => {
    router.visit(route("dashboard.programs.show", id));
  };

  return (
    <>
      {updateModal && (
        <CreateProgramModal
          program={program}
          type="update"
          closeModal={() => setUpdateModal(false)}
        />
      )}

      {deleteModal && (
        <DeleteModal
          closeModal={() => setDeleteModal(false)}
          deleteUrl={route("dashboard.programs.delete", id)}
        />
      )}

      <div className={styles.card} onClick={goToDetails}>
        {/* THUMBNAIL */}
        <div className={styles.thumb} />

        {/* CONTENT */}
        <div className={styles.content}>
          {/* HEADER */}
          <div className={styles.header}>
            <h3>{name}</h3>
            <span className={`${styles.badge} ${styles[status]}`}>
              {status}
            </span>
          </div>

          {/* META */}
          <div className={styles.meta}>
            <span>
              <MdLocationPin /> {location}
            </span>
            <span>
              <MdAccessTime /> {formatDateReadable(created_at)}
            </span>
          </div>

          {/* DESCRIPTION */}
          <p className={styles.description}>{description}</p>

          {/* ACTIONS */}
          <div
            className={styles.actions}
            onClick={(e) => e.stopPropagation()}
          >
            <button className={styles.view}>
              <MdRemoveRedEye />
              <span>View</span>
            </button>

            <button
              className={styles.edit}
              onClick={() => setUpdateModal(true)}
            >
              <MdEdit />
              <span>Edit</span>
            </button>

            <button
              className={styles.delete}
              onClick={() => setDeleteModal(true)}
            >
              <MdDeleteForever />
              <span>Delete</span>
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ProgramItem;