"use client";

import { useState } from "react";
import styles from "../commonstyle/dattabale.module.css";
import CertificateForm from "./Form/CertificateForm";
import BulkScanModal from "./BulkScan/BulkScanModal";
import SendReportModal from "./BulkScan/SendReportModal"; // ← modal lives in BulkScan folder
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import { useRouter } from "next/navigation";

// ✅ import LegacyForm from the excel folder
// ⚠️ Adjust path if your excel folder is in a different location
import LegacyForm from "./../../../(dashboard)/modules/excel/Form/LegacyForm";

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

export default function CertificateHeader({ refreshData }: Props) {
  const [isIssueOpen, setIsIssueOpen] = useState(false);
  const [isBulkOpen, setIsBulkOpen] = useState(false);
  const [isLegacyOpen, setIsLegacyOpen] = useState(false);

  // ✅ report modal open/close
  const [isReportOpen, setIsReportOpen] = useState(false);

  const router = useRouter();
  const { canPerform } = useModulePermissions("certificates");

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Certificates Module</h1>
          <p className={styles.subtitle}>
            Issue, track and verify ISO certifications
          </p>
        </div>
        <div className={styles.headerRight}>
          {canPerform("export") && (
            <button
              className={styles.btnSecondary}
              onClick={() => router.push("/modules/certificates/report")}
            >
              📊 Reports
            </button>
          )}

          {/* ✅ Email Report — opens the picker modal */}
          {canPerform("export") && (
            <button
              className={styles.btnSecondary}
              style={{
                background: "linear-gradient(135deg,#8b14d4,#4a0080)",
                color: "#fff",
                border: "none",
              }}
              onClick={() => setIsReportOpen(true)}
              title="Choose a month and email the report"
            >
              📧 Email Report
            </button>
          )}

          <button
            className={styles.btnSecondary}
            style={{
              background: "linear-gradient(135deg,#0ea5e9,#0284c7)",
              color: "#fff",
              border: "none",
            }}
            onClick={() => router.push("/modules/companies")}
            title="Manage Clients / Companies"
          >
            🏢 Clients
          </button>

          {/* "Add Legacy Cert" button (only for users with create perms) */}
          {canPerform("create") && (
            <button
              className={styles.btnSecondary}
              style={{
                background: "linear-gradient(135deg,#475569,#334155)",
                color: "#fff",
                border: "none",
              }}
              onClick={() => setIsLegacyOpen(true)}
              title="Add a previous certificate"
            >
              📋 Add Previous Cert
            </button>
          )}

          {canPerform("create") && (
            <button
              className={styles.btnSecondary}
              style={{
                background: "linear-gradient(135deg,#fb923c,#ea580c)",
                color: "#fff",
                border: "none",
              }}
              onClick={() => setIsBulkOpen(true)}
            >
              📤 Bulk Upload Scans
            </button>
          )}

          {canPerform("create") && (
            <button
              className={styles.btnPrimary}
              onClick={() => setIsIssueOpen(true)}
            >
              ＋ Issue Certificate
            </button>
          )}
        </div>
      </div>

      {isIssueOpen && (
        <CertificateForm
          isOpen={isIssueOpen}
          onClose={() => setIsIssueOpen(false)}
          refreshData={refreshData}
        />
      )}

      {isBulkOpen && (
        <BulkScanModal
          isOpen={isBulkOpen}
          onClose={() => setIsBulkOpen(false)}
          refreshData={refreshData}
        />
      )}

      {isLegacyOpen && (
        <LegacyForm
          isOpen={isLegacyOpen}
          onClose={() => setIsLegacyOpen(false)}
          refreshData={refreshData}
        />
      )}

      {/* ✅ Email Report modal */}
      {isReportOpen && (
        <SendReportModal
          isOpen={isReportOpen}
          onClose={() => setIsReportOpen(false)}
        />
      )}
    </>
  );
}