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

const PERMIT_CARD_ITEMS = [
  {
    key: "my_permits",
    label: "My permits",
    hint: "Permits created by you",
    tone: "mine",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </svg>
    )
  },
  {
    key: "my_location_permits",
    label: "My location wise permits",
    hint: "Permits at your assigned location",
    tone: "location",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
        <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11z" />
        <circle cx="12" cy="10" r="2.5" />
      </svg>
    )
  },
  {
    key: "active",
    label: "Active",
    hint: "Currently valid permits",
    tone: "active",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
        <circle cx="12" cy="12" r="9" />
        <path d="M8 12l2.5 2.5L16 9" />
      </svg>
    )
  },
  {
    key: "closed",
    label: "Close",
    hint: "Closed or expired permits",
    tone: "closed",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
        <rect x="3" y="11" width="18" height="10" rx="2" />
        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
      </svg>
    )
  }
];

function PermitCountCard({
  index,
  icon,
  label,
  value,
  hint,
  tone,
  loading,
  locationName,
  onClick
}) {
  const displayHint =
    tone === "location" && locationName ? locationName : hint;

  return (
    <button
      type="button"
      className={`ptw-permit-card ptw-permit-card--${tone} ptw-permit-card--clickable${
        loading ? " is-loading" : ""
      }`}
      disabled={loading}
      aria-label={`${label}: ${loading ? "loading" : value}. Open filtered permits.`}
      onClick={onClick}
    >
      <span className="ptw-permit-card__index" aria-hidden>{index}</span>
      <span className="ptw-permit-card__icon" aria-hidden>{icon}</span>
      <div className="ptw-permit-card__body">
        <span className="ptw-permit-card__value">{loading ? "—" : value}</span>
        <span className="ptw-permit-card__label">{label}</span>
        {displayHint ? <span className="ptw-permit-card__hint">{displayHint}</span> : null}
      </div>
    </button>
  );
}

export default function DashboardPermitCards({
  cards = {},
  userLocationName,
  loading = false,
  onCardClick
}) {
  return (
    <section className="ptw-permit-cards-section" aria-label="Number of permits">
      <header className="ptw-permit-cards-section__head">
        <h2 className="ptw-permit-cards-section__title">Number of permits</h2>
        <p className="ptw-permit-cards-section__desc">
          Summary counts for your permits, location, and permit status. Click a card to view details.
        </p>
      </header>
      <div className="ptw-permit-cards-grid">
        {PERMIT_CARD_ITEMS.map((item, index) => (
          <PermitCountCard
            key={item.key}
            index={index + 1}
            icon={item.icon}
            label={item.label}
            value={cards[item.key] ?? 0}
            hint={item.hint}
            tone={item.tone}
            loading={loading}
            locationName={userLocationName}
            onClick={() => onCardClick?.(DASHBOARD_CARD_TARGETS[item.key])}
          />
        ))}
      </div>
    </section>
  );
}
