import React from "react";
import { formatActivityTime } from "../../utils/dashboardHelpers.js";

function statusBadgeClass(tone) {
  if (tone === "active") return "ptw-dash-activity-v2__badge--active";
  if (tone === "draft") return "ptw-dash-activity-v2__badge--draft";
  return "ptw-dash-activity-v2__badge--closed";
}

export default function DashboardRecentActivity({
  items = [],
  loading = false,
  onPermitClick,
  onViewAll
}) {
  return (
    <section className="ptw-dash-shell ptw-dash-activity-v2" aria-label="Recent activity">
      <header className="ptw-dash-shell__head">
        <div className="ptw-dash-shell__intro">
          <p className="ptw-dash-shell__eyebrow">Activity</p>
          <h3 className="ptw-dash-shell__title">Recent permits</h3>
          <p className="ptw-dash-shell__desc">
            Latest submissions across your location. Click a row to preview.
          </p>
        </div>
        <div className="ptw-dash-shell__head-actions">
          <button
            type="button"
            className="swi-btn swi-btn--ghost ptw-dash-activity-v2__view-all"
            disabled={loading}
            onClick={onViewAll}
          >
            View all
          </button>
          <div className="ptw-dash-shell__metric">
            <strong>{items.length}</strong>
            <span>Shown</span>
          </div>
        </div>
      </header>

      <div className="ptw-dash-shell__body">
        {loading ? (
          <p className="ptw-dash-activity-v2__loading">Loading activity…</p>
        ) : items.length ? (
          <ul className="ptw-dash-activity-v2__list">
            {items.map((item) => (
              <li key={item.permit_id}>
                <button
                  type="button"
                  className="ptw-dash-activity-v2__item"
                  onClick={() => onPermitClick?.(item.permit_id)}
                >
                  <span className="ptw-dash-activity-v2__dot" aria-hidden />
                  <span className="ptw-dash-activity-v2__main">
                    <strong>{item.permit_number}</strong>
                    <span>
                      {item.location_name}
                      {" · "}
                      {formatActivityTime(item.created_at)}
                    </span>
                  </span>
                  <span
                    className={`ptw-dash-activity-v2__badge ${statusBadgeClass(item.status_tone)}`}
                  >
                    {item.status_label}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        ) : (
          <button
            type="button"
            className="ptw-dash-activity-v2__empty"
            onClick={onViewAll}
          >
            No permit activity yet. Open permits to get started.
          </button>
        )}
      </div>
    </section>
  );
}
