import React, { useMemo } from "react";
import {
  buildRecentActivity,
  formatRelativeTime,
} from "../../utils/recentActivity.js";

function ActivityIcon({ kind, tone }) {
  return (
    <span
      className={`swi-admin-activity__icon swi-admin-activity__icon--${kind} swi-admin-activity__icon--${tone}`}
      aria-hidden
    >
      {kind === "ticket" ? (
        <svg viewBox="0 0 20 20" fill="none">
          <path
            d="M5 6.5h10M5 10h7M5 13.5h5"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
          />
          <rect
            x="3.5"
            y="4"
            width="13"
            height="12"
            rx="2"
            stroke="currentColor"
            strokeWidth="1.6"
          />
        </svg>
      ) : (
        <svg viewBox="0 0 20 20" fill="none">
          <path
            d="M6 4.5h8l1.5 2v9.5a1 1 0 0 1-1 1H5.5a1 1 0 0 1-1-1V4.5h1.5Z"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinejoin="round"
          />
          <path
            d="M7 4.5V3.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"
            stroke="currentColor"
            strokeWidth="1.6"
          />
        </svg>
      )}
    </span>
  );
}

/**
 * @param {{
 *   documents?: Array<Record<string, unknown>>,
 *   ticketLogs?: Array<Record<string, unknown>>,
 *   loading?: boolean,
 *   limit?: number,
 *   onViewAll?: (navId: string) => void,
 * }} props
 */
export default function RecentActivityFeed({
  documents = [],
  ticketLogs = [],
  loading = false,
  limit = 12,
  onViewAll,
}) {
  const items = useMemo(
    () =>
      loading
        ? []
        : buildRecentActivity({ documents, ticketLogs, limit }),
    [documents, ticketLogs, limit, loading]
  );

  if (loading) {
    return (
      <section className="swi-admin-activity swi-panel" aria-busy="true">
        <header className="swi-admin-activity__head">
          <div>
            <h2 className="swi-admin-activity__title">Recent activity</h2>
            <p className="swi-admin-activity__desc">
              Latest SWI document and ticket events.
            </p>
          </div>
        </header>
        <p className="swi-muted">Loading recent activity…</p>
      </section>
    );
  }

  return (
    <section className="swi-admin-activity swi-panel" aria-label="Recent activity">
      <header className="swi-admin-activity__head">
        <div>
          <h2 className="swi-admin-activity__title">Recent activity</h2>
          <p className="swi-admin-activity__desc">
            Latest SWI document and ticket events.
          </p>
        </div>
        {onViewAll ? (
          <button
            type="button"
            className="swi-btn swi-btn--ghost swi-admin-activity__view-all"
            onClick={() => onViewAll("ticket-logs")}
          >
            View ticket logs
          </button>
        ) : null}
      </header>

      {!items.length ? (
        <p className="swi-muted">No recent activity yet.</p>
      ) : (
        <ol className="swi-admin-activity__list">
          {items.map((item) => (
            <li key={item.id} className="swi-admin-activity__item">
              <ActivityIcon kind={item.kind} tone={item.tone} />
              <div className="swi-admin-activity__body">
                <p className="swi-admin-activity__line">
                  <span className="swi-admin-activity__title-text">
                    {item.title}
                  </span>
                  <span
                    className={`swi-status-badge swi-admin-activity__badge ${item.badgeClass || ""}`}
                  >
                    {item.verb}
                  </span>
                </p>
                {item.subtitle ? (
                  <p className="swi-admin-activity__meta">{item.subtitle}</p>
                ) : null}
              </div>
              <time
                className="swi-admin-activity__time"
                dateTime={String(item.timestamp)}
                title={new Date(item.timestamp).toLocaleString()}
              >
                {formatRelativeTime(item.timestamp)}
              </time>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}
