"use client";

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

import { FiX, FiCalendar, FiClock } from "react-icons/fi";
import { MdOutlineLocationOn } from "react-icons/md";
import styles from "./appointment-details-modal.module.scss";
import { capitalizeFirstLetter, formatDateReadable, formatToWAT } from "@/lib/utils";

interface Props {
  appointment: any;
  onClose: () => void;
}

const AppointmentDetailsModal = ({ appointment, onClose }: Props) => {
  if (!appointment) return null;

  const assignedDate = appointment.assigned_date == null ? "Yet to be assigned" : formatDateReadable(appointment.assigned_date)

  const statusKey = appointment.status?.toLowerCase()?.trim();

  return (
    <div className={styles.modalBackdrop}>
      <div className={styles.modalContent}>
        {/* ================= HEADER ================= */}
        <div className={styles.header}>
          <div>
            <h2>{capitalizeFirstLetter(appointment.appointment_type)} Appointment</h2>

            <span
              className={`${styles.status} ${
                styles[statusKey] || ""
              }`}
            >
              {capitalizeFirstLetter(appointment.status)}
            </span>
          </div>

          <button className={styles.closeBtn} onClick={onClose}>
            <FiX />
          </button>
        </div>

        {/* ================= USER CARD ================= */}
        <div className={styles.userCard}>
          {/* <div className={styles.avatar} /> */}

          <div className={styles.userInfo}>
            <h4>{appointment.name}</h4>
            <p>{appointment.email}</p>
          </div>
        </div>

        {/* ================= SCHEDULE ================= */}
        <div className={styles.card}>
          <h4>Schedule</h4>

          <div className={styles.row}>
            <div className={styles.icon}><FiCalendar /></div>
            <div>
              <span>Assigned Date</span>
              <strong>{ assignedDate }</strong>
            </div>
          </div>

          <div className={styles.row}>
            <div className={styles.icon}><FiClock /></div>
            <div>
              <span>Assigned Time</span>
              <strong>{formatToWAT(appointment.assigned_time) || "Yes to be assigned"}</strong>
            </div>
          </div>

          <div className={styles.row}>
            <div className={styles.icon}><MdOutlineLocationOn /></div>
            <div>
              <span>Venue</span>
              <strong>{appointment.venue || "The Church Office"}</strong>
            </div>
          </div>
        </div>

        {/* ================= NOTE ================= */}
        {appointment.note && (
          <div className={styles.card}>
            <h4>Appointment Reason</h4>
            <p>{appointment.note}</p>
          </div>
        )}

        {/* ================= RESCHEDULE ================= */}
        {appointment.status === "rescheduled" && (
          <div className={styles.card}>
            <h4>Reschedule Reason</h4>
            <p>{appointment.reschedule_reason}</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default AppointmentDetailsModal;