"use client";

/**
 * View Jobs (2026-11-10) — opened from the Companies table "View Jobs" icon.
 * Same as scheme.qrs.ae company documents: search + stage filter + Download All (PDF / Word) on top,
 * the job documents table below (PDF / Word per document). Styled like the CRM's other popups.
 */
import React from "react";
import { createPortal } from "react-dom";
import styles from "../../commonstyle/FormStyles.module.css";
import CompanyJobDocuments from "./CompanyJobDocuments";

export default function ViewJobsModal({ company, onClose }: { company: { id: number; name: string } | null; onClose: () => void }) {
  if (!company || typeof document === "undefined") return null;
  return createPortal(
    <div
      className={styles.modalOverlay}
      onClick={(e) => {
        e.stopPropagation();
        onClose();
      }}
    >
      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()} style={{ maxWidth: 1100, width: "96%" }}>
        <div className={styles.modalHeader}>
          <div>
            <h2 className={styles.modalTitle}>📁 Jobs &amp; Documents</h2>
            <p className={styles.modalSubtitle}>{company.name}</p>
          </div>
          <button className={styles.closeBtn} onClick={onClose} type="button" aria-label="Close">
            ✕
          </button>
        </div>
        <div className={styles.formBody}>
          <CompanyJobDocuments key={company.id} companyId={company.id} companyName={company.name} showCreate={false} />
        </div>
        <div className={styles.modalFooter}>
          <button type="button" className={styles.cancelBtn} onClick={onClose}>
            Close
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}