"use client";

import { useState } from "react";
import styles from "../commonstyle/dattabale.module.css";
import CompanyAuditForm from "./Form/CompanyAuditForm";
import AuditStageForm from "./AuditStages/AuditStageForm";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import type { ActiveModuleTab } from "./page";

interface Props {
  activeTab: ActiveModuleTab;
  setActiveTab: (tab: ActiveModuleTab) => void;
  refreshData?: () => void;
}

export default function CompanyAuditHeader({
  activeTab,
  setActiveTab,
  refreshData,
}: Props) {
  const [isAuditModalOpen, setIsAuditModalOpen] = useState(false);
  const [isStageModalOpen, setIsStageModalOpen] = useState(false);
  const { canPerform } = useModulePermissions("company-audits");
  // const MODULE_TABS: { key: ActiveModuleTab; label: string; icon: string }[] = [
  //   { key: "audits", label: "Company Audits", icon: "🗂" },
  //   { key: "stages", label: "Audit Stages",   icon: "⚙️" },
  // ];

  return (
    <>
      {/* ── Top header bar — identical structure to CompanyHeader ── */}
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Audit Management</h1>
          <p className={styles.subtitle}>
            {activeTab === "audits"
              ? "Schedule and track company audit records"
              : "Configure available audit stage types"}
            <br />
            <span style={{ fontSize: 12, color: "#9ca3af", fontWeight: 400 }}>
              {activeTab === "audits"
                ? "Each audit generates job-registrar documents — Stage 1, Stage 2, Surveillance, Recertification"
                : "Stage types feed the job registrar to generate audit documents — Stage 1, Stage 2, Surveillance, Recertification"}
            </span>
          </p>
        </div>

        <div className={styles.headerRight}>
          {activeTab === "audits" && canPerform("create") && (
            <button
              className={styles.btnPrimary}
              onClick={() => setIsAuditModalOpen(true)}
            >
              ＋ New Audit
            </button>
          )}
          {activeTab === "stages" && canPerform("create") && (
            <button
              className={styles.btnPrimary}
              onClick={() => setIsStageModalOpen(true)}
            >
              ＋ New Stage
            </button>
          )}
        </div>
      </div>

      {/* ── Module tab switcher ── */}
      <div
        style={{
          display: "flex",
          borderBottom: "2px solid #f3f4f6",
          background: "#fff",
          paddingLeft: 24,
          gap: 0,
        }}
      >
        {/* {MODULE_TABS.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              padding: "11px 24px",
              fontWeight: activeTab === tab.key ? 700 : 500,
              fontSize: 14,
              border: "none",
              background: "none",
              cursor: "pointer",
              borderBottom: activeTab === tab.key
                ? "2px solid #7c3aed"
                : "2px solid transparent",
              color: activeTab === tab.key ? "#7c3aed" : "#6b7280",
              display: "flex",
              alignItems: "center",
              gap: 6,
              transition: "color 0.2s",
              marginBottom: -2,
            }}
          >
            <span style={{ fontSize: 16 }}>{tab.icon}</span>
            {tab.label}
          </button>
        ))} */}
      </div>

      {/* ── Modals ── */}
      {isAuditModalOpen && (
        <CompanyAuditForm
          isOpen={isAuditModalOpen}
          onClose={() => setIsAuditModalOpen(false)}
          refreshData={refreshData}
        />
      )}
      {isStageModalOpen && (
        <AuditStageForm
          isOpen={isStageModalOpen}
          onClose={() => setIsStageModalOpen(false)}
          refreshData={refreshData}
        />
      )}
    </>
  );
}