/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import { getStatusToken } from "../../lib/bookingStatus";
import { useBookingFor, useChatUIOptions } from "../../providers/ChatUIOptions";
import useChatUIStore from "../../stores/Zustant";
import { Booking, BookingField } from "../../types/type";

const Accordion = ({ title, rows }: { title: string; rows: BookingField[] }) => {
  const [open, setOpen] = useState(false);

  return (
    <div className="booking-accordion">
      <button
        type="button"
        className="booking-accordion__row"
        aria-expanded={open}
        onClick={() => setOpen((prev) => !prev)}
      >
        <span>{title}</span>
        <span className="booking-accordion__chevron">{open ? "▴" : "▾"}</span>
      </button>
      {open && (
        <div className="booking-accordion__body">
          {rows.map((row) => (
            <div className="booking-kv" key={row.label}>
              <span className="booking-kv__label">{row.label}</span>
              <span className="booking-kv__value">{row.value}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const Field = ({
  label,
  value,
  mono,
  accent,
}: {
  label: string;
  value: string;
  mono?: boolean;
  accent?: boolean;
}) => (
  <div className="booking-field">
    <span className="booking-field__label">{label}</span>
    <span
      className={[
        "booking-field__value",
        mono ? "booking-field__value--mono" : "",
        accent ? "booking-field__value--accent" : "",
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {value}
    </span>
  </div>
);

/**
 * Right-hand detail panel. Seeds itself from the selected conversation
 * (bookingId, serviceTitle, participant) and layers the host app's richer
 * `booking` on top, so it still shows something useful with no props at all.
 */
const BookingPanel = () => {
  const selectedConversation = useChatUIStore((s) => s.selectedConversation) as any;
  const supplied = useBookingFor(selectedConversation?._id);
  const { onAcceptBooking, onCancelBooking } = useChatUIOptions();

  if (!selectedConversation) return null;

  const bookingId = supplied?.id || selectedConversation.bookingId;
  // Only service conversations carry a booking; personal chats have none.
  if (!bookingId) return null;

  const booking: Booking = {
    id: bookingId,
    status: supplied?.status,
    service: supplied?.service || selectedConversation.serviceTitle,
    customer: supplied?.customer,
    date: supplied?.date,
    time: supplied?.time,
    total: supplied?.total,
    paymentDetails: supplied?.paymentDetails,
    history: supplied?.history,
    actionable: supplied?.actionable,
  };

  const status = getStatusToken(booking.status);
  const actionable = booking.actionable ?? status.label === "Pending";
  const showFooter = actionable && (onAcceptBooking || onCancelBooking);

  return (
    <aside className="booking-panel">
      <div className="booking-panel__scroll">
        <div className="booking-panel__header">
          <span className="chat-section-label">Booking Details</span>
          <span
            className="booking-status-pill"
            style={{ backgroundColor: status.bg, color: status.color }}
          >
            <span
              className="booking-status-pill__dot"
              style={{ backgroundColor: status.color }}
            />
            {status.label}
          </span>
        </div>

        <div className="booking-panel__stack">
          <Field label="Appointment ID" value={booking.id} mono />
          {booking.customer && <Field label="Customer" value={booking.customer} />}
          {booking.service && <Field label="Service" value={booking.service} />}
          {(booking.date || booking.time) && (
            <Field
              label="Date & Time"
              value={[booking.date, booking.time].filter(Boolean).join(" · ")}
            />
          )}
          {booking.total && <Field label="Total" value={booking.total} accent />}
        </div>

        {!!booking.paymentDetails?.length && (
          <Accordion title="Payment Details" rows={booking.paymentDetails} />
        )}
        {!!booking.history?.length && (
          <Accordion title="Booking History" rows={booking.history} />
        )}
      </div>

      {showFooter && (
        <div className="booking-panel__footer">
          {onAcceptBooking && (
            <button
              type="button"
              className="chat-btn chat-btn--primary"
              onClick={() => onAcceptBooking(booking)}
            >
              Accept Booking
            </button>
          )}
          {onCancelBooking && (
            <button
              type="button"
              className="chat-btn chat-btn--danger"
              onClick={() => onCancelBooking(booking)}
            >
              Cancel Booking
            </button>
          )}
        </div>
      )}
    </aside>
  );
};

export default BookingPanel;