"use client";

import styles from "./PermissionManager.module.css";

interface Props {
  refreshData?: () => void;
  stats?: {
    modules: number;
    permissions: number;
    roles: number;
    users: number;
  };
}

export default function PermissionHeader({ refreshData, stats }: Props) {
  return (
    <div className={styles.pageHeader}>
      {/* ── Background decoration ── */}
      <div className={styles.headerBg} />
      <div className={styles.headerOrb1} />
      <div className={styles.headerOrb2} />

      <div className={styles.headerContent}>
        <div className={styles.headerLeft}>
          <div className={styles.headerIconWrap}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </div>
          <div>
            <h1 className={styles.headerTitle}>Permission Manager</h1>
            <p className={styles.headerSubtitle}>
              Manage Modules, Roles, Permissions &amp; Access Control
            </p>
          </div>
        </div>

        <div className={styles.headerRight}>
          {stats && (
            <div className={styles.headerStats}>
              {[
                { label: "Modules", value: stats.modules, icon: "🏗️" },
                { label: "Permissions", value: stats.permissions, icon: "🔑" },
                { label: "Roles", value: stats.roles, icon: "👔" },
                { label: "Users", value: stats.users, icon: "👥" },
              ].map((s) => (
                <div key={s.label} className={styles.headerStat}>
                  <span className={styles.headerStatIcon}>{s.icon}</span>
                  <div>
                    <div className={styles.headerStatValue}>{s.value}</div>
                    <div className={styles.headerStatLabel}>{s.label}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
          <button className={styles.refreshBtn} onClick={refreshData}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="23 4 23 10 17 10" />
              <polyline points="1 20 1 14 7 14" />
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
            </svg>
            Refresh
          </button>
        </div>
      </div>
    </div>
  );
}