"use client";

import styles from "../commonstyle/dattabale.module.css";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import { useRouter } from "next/navigation";

interface Props {
  refreshData?: () => void;
}

export default function CompanyHeader({ refreshData }: Props) {
  const router = useRouter();
  const { canPerform, isReady } = useModulePermissions("companies");

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Client Management</h1>
        <p className={styles.subtitle}>Manage and Track Clients for Certifications</p>
      </div>

      <div className={styles.headerRight}>
        {!isReady ? (
          <span style={{ fontSize: 12, color: "#9ca3af" }}>Loading...</span>
        ) : (
          <>
            {canPerform("export") && (
              <button
                className={styles.btnSecondary}
                onClick={() => router.push("/modules/companies/report")}
              >
                📊 Reports
              </button>
            )}
            {canPerform("export") && (
              <button
                className={styles.btnSecondary}
                style={{
                  background: "#fffbeb",
                  color: "#b45309",
                  border: "1px solid #fde68a",
                }}
                onClick={() => router.push("/modules/companies/companies_f/merge")}
              >
                🔄 Merge Duplicates
              </button>
            )}

            <button
              className={styles.btnSecondary}
              style={{
                background: "linear-gradient(135deg,#10b981,#059669)",
                color: "#fff",
                border: "none",
              }}
              onClick={() => router.push("/modules/certificates")}
              title="Go to Certificates Module"
            >
              📜 Certificates
            </button>

            {/* ✅ CHANGED — routes to /new page instead of opening modal */}
            {canPerform("create") && (
              <button
                className={styles.btnPrimary}
                onClick={() => router.push("/modules/companies/new")}
              >
                ＋ New Client
              </button>
            )}
          </>
        )}
      </div>
    </div>
  );
}