/**
 * CancellationDetailsCard Component
 *
 * Displays cancellation details for a subscription in the admin interface.
 * Shows cancellation reason, scheduled cancellation date, retention offer history,
 * and other relevant cancellation information.
 *
 * @package ArraySubs
 */

import React from "react";
import { __ } from "@wordpress/i18n";
import { XCircle, Clock, Gift, MessageCircle, CheckCircle } from "lucide-react";
import { getDisplayDate } from "@/libs/dateTime";

/**
 * Format a date string to a localized date
 *
 * @param {string} date - Date string
 * @returns {string} Formatted date
 */
const formatDate = (displayDate, rawDate) =>
  getDisplayDate(displayDate, rawDate);

/**
 * Get retention offer type label
 *
 * @param {string} type - Offer type
 * @returns {string} Human-readable label
 */
const getOfferTypeLabel = (type) => {
  const labels = {
    discount: __("Discount Offer", "arraysubs"),
    coupon: __("Discount Offer", "arraysubs"),
    pause: __("Pause Subscription", "arraysubs"),
    downgrade: __("Downgrade Plan", "arraysubs"),
    skip: __("Skip Next Renewal", "arraysubs"),
    contact: __("Contact Support", "arraysubs"),
    contact_support: __("Contact Support", "arraysubs"),
  };
  return labels[type] || type;
};

/**
 * CancellationDetailsCard component
 *
 * @param {Object} props Component props
 * @param {Object} props.cancellation Cancellation details from API
 * @param {string} props.status Subscription status
 * @returns {React.Element|null} Component or null if no cancellation data
 */
const CancellationDetailsCard = ({ cancellation, status }) => {
  // Don't render if no cancellation data exists
  if (
    !cancellation ||
    (!cancellation.is_cancelled &&
      !cancellation.is_waiting_cancellation &&
      !cancellation.has_retention_history)
  ) {
    return null;
  }

  const isCancelled =
    cancellation.is_cancelled || status === "arraysubs-cancelled";
  const isWaiting = cancellation.is_waiting_cancellation;
  const hasRetentionHistory = cancellation.has_retention_history;

  return (
    <div className="detail-card">
      <div className="detail-card__header">
        <XCircle size={20} />
        <h3>
          {isCancelled
            ? __("Cancellation Details", "arraysubs")
            : isWaiting
            ? __("Scheduled Cancellation", "arraysubs")
            : __("Retention History", "arraysubs")}
        </h3>
        {isWaiting && (
          <span className="status-badge status-waiting-cancel">
            <Clock size={12} style={{ marginRight: "4px" }} />
            {__("Pending", "arraysubs")}
          </span>
        )}
      </div>
      <div className="detail-card__body">
        <div className="info-list">
          {/* Cancellation Status */}
          {isCancelled && (
            <div className="info-item">
              <strong>{__("Status:", "arraysubs")}</strong>
              <span className="status-badge status-cancelled">
                {__("Cancelled", "arraysubs")}
              </span>
            </div>
          )}

          {/* Scheduled Date */}
          {isWaiting && cancellation.scheduled_date && (
            <div className="info-item">
              <strong>{__("Scheduled Cancel Date:", "arraysubs")}</strong>
              {formatDate(
                cancellation.scheduled_date_display,
                cancellation.scheduled_date,
              )}
            </div>
          )}

          {/* Cancelled Date */}
          {cancellation.cancelled_date && (
            <div className="info-item">
              <strong>{__("Cancelled On:", "arraysubs")}</strong>
              {formatDate(
                cancellation.cancelled_date_display,
                cancellation.cancelled_date,
              )}
            </div>
          )}

          {/* Cancellation Reason */}
          {cancellation.reason && (
            <div className="info-item">
              <strong>{__("Reason:", "arraysubs")}</strong>
              {cancellation.reason_label || cancellation.reason}
            </div>
          )}

          {/* Other Reason (additional details) */}
          {cancellation.other_reason && (
            <div className="info-item info-item--full">
              <strong>{__("Additional Details:", "arraysubs")}</strong>
              <p className="info-item__text">{cancellation.other_reason}</p>
            </div>
          )}

          {/* Retention Offers Section */}
          {hasRetentionHistory && (
            <>
              <div className="info-divider">
                <Gift size={14} />
                <span>{__("Retention Offers", "arraysubs")}</span>
              </div>

              {/* Offers Shown */}
              {cancellation.retention_offers?.shown?.length > 0 && (
                <div className="info-item">
                  <strong>{__("Offers Shown:", "arraysubs")}</strong>
                  <ul className="info-item__list">
                    {cancellation.retention_offers.shown.map((offer, index) => (
                      <li key={index}>{getOfferTypeLabel(offer)}</li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Date Offers Were Shown */}
              {cancellation.retention_offers?.shown_date && (
                <div className="info-item">
                  <strong>{__("Shown On:", "arraysubs")}</strong>
                  {formatDate(
                    cancellation.retention_offers.shown_date_display,
                    cancellation.retention_offers.shown_date,
                  )}
                </div>
              )}

              {/* Accepted Offer */}
              {cancellation.retention_offers?.accepted ? (
                <div className="info-item">
                  <strong>{__("Accepted Offer:", "arraysubs")}</strong>
                  <span className="info-item__success">
                    <CheckCircle size={14} />
                    {getOfferTypeLabel(cancellation.retention_offers.accepted)}
                  </span>
                </div>
              ) : (
                cancellation.retention_offers?.shown?.length > 0 && (
                  <div className="info-item">
                    <strong>{__("Accepted Offer:", "arraysubs")}</strong>
                    <span className="info-item__muted">
                      {__("No offer accepted", "arraysubs")}
                    </span>
                  </div>
                )
              )}

              {/* Acceptance Date */}
              {cancellation.retention_offers?.accepted_date && (
                <div className="info-item">
                  <strong>{__("Accepted On:", "arraysubs")}</strong>
                  {formatDate(
                    cancellation.retention_offers.accepted_date_display,
                    cancellation.retention_offers.accepted_date,
                  )}
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default CancellationDetailsCard;