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

import { useState } from "react";
import { usePage } from "@inertiajs/react";

import MembersLayout from "@/layouts/members";
import DashboardHeader from "@/components/shared/DashPageHeader";
import DashStatsCard from "@/components/shared/DashStatsCard";
import NewDataTable, { Column, Action } from "@/components/shared/NewDataTable";
import AppointmentDetailsModal from "@/components/modals/appointment-details-modal";
import AppointmentBookingModal from "@/components/modals/create-appointment-modal";
import { formatDateReadable } from "@/lib/utils";
import { capitalizeFirstLetter } from "@/lib/utils";

import {
  FiCalendar,
  FiCheckCircle,
  FiXCircle,
  FiClock,
} from "react-icons/fi";

import styles from "./member-appointments.module.scss";

const MemberAppointments = ({
  is_accepting_appointments,
  today_bookings,
  hasActiveAppointment,
}: any) => {
  const { props }: any = usePage();

  const backendAppointments = props.appointments || [];
  console.log("My appointments", backendAppointments)

  /* ================= STATE ================= */
  const [selected, setSelected] = useState<any>(null);
  const [open, setOpen] = useState(false);


  /* ================= TRANSFORM ================= */
  const appointments = backendAppointments.map((a: any) => ({
    id: a.id,
    type: capitalizeFirstLetter(a.appointment_type),
    booked_date: formatDateReadable(a.created_at),
    date: a.assigned_date
      ? new Date(a.assigned_date).toLocaleDateString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
        })
      : "Pending assignment",
    time: a.assigned_time || "Pending assignment",
    status: a.status,
    raw: a,
  }));



  /* ================= STATS ================= */
  const stats = [
    {
      title: "Total Requests",
      value: backendAppointments.length,
      icon: <FiCalendar />,
    },
    {
      title: "Scheduled",
      value: backendAppointments.filter((a: any) => a.status === "assigned").length,
      icon: <FiClock />,
    },
    {
      title: "Completed",
      value: backendAppointments.filter((a: any) => a.status === "completed").length,
      icon: <FiCheckCircle />,
    },
    {
      title: "Cancelled",
      value: backendAppointments.filter((a: any) => a.status === "cancelled").length,
      icon: <FiXCircle />,
      positive: false,
    },
  ];

  /* ================= TABLE ================= */
  const columns: Column<any>[] = [
    { header: "Appointment Type", accessor: "type" },
    { header: "Booked Date", accessor: "booked_date" },
    { header: "Assigned Date", accessor: "date" },
    { header: "Assigned Time", accessor: "time" },
    { header: "Status", accessor: "status" },
  ];

  const actions: Action<any>[] = [
    {
      label: "View",
      variant: "view",
      onClick: (row) => {
        setSelected(row.raw);
      },
    },
  ];

  /* ================= RENDER ================= */
  return (
    <>
      {/* ================= MODALS ================= */}
      {open && (
        <AppointmentBookingModal
          is_accepting_appointments={is_accepting_appointments}
          hasActiveAppointment={hasActiveAppointment}
          today_bookings={today_bookings}
          onClose={() => setOpen(false)}
        />
      )}

      {selected && (
        <AppointmentDetailsModal
          appointment={selected}
          onClose={() => setSelected(null)}
        />
      )}

      {/* ================= PAGE ================= */}
      <div className={styles.page}>
        <DashboardHeader
          title="Appointments"
          description="Track and manage your meetings with your pastor"
          actionButton={{
            label: "Request Appointment",
            onClick: () => setOpen(true),
          }}
        />

        <div className={styles.content}>
          {/* ================= INFO CARD ================= */}
         <div className={styles.infoCard}>
          <div className={styles.header}>
            <h4>Appointment Guidelines</h4>
            <span className={styles.badge}>Important</span>
          </div>

          <div className={styles.rules}>
            <div className={styles.rule}>
              <span className={styles.dot} />
              <p>Only one appointment request is allowed per month</p>
            </div>

            <div className={styles.rule}>
              <span className={styles.dot} />
              <p>Requests cannot be edited after submission</p>
            </div>
          </div>
        </div>

          {/* ================= STATS ================= */}
          <DashStatsCard stats={stats} /><br />

          {/* ================= TABLE ================= */}
          <div className={styles.tableSection}>
            <NewDataTable
              data={appointments}
              columns={columns}
              actions={actions}
            />
          </div>
        </div>
      </div>
    </>
  );
};

MemberAppointments.layout = (page: any) => (
  <MembersLayout title="Appointments">{page}</MembersLayout>
);

export default MemberAppointments;