"use client";

import { useState } from "react";
import TrainingHeader from "./TrainingHeader";
import TrainingTable from "./TrainingTable";
import TrainingCertificateForm from "./Form/TrainingCertificateForm";
import { AppToaster } from "./../../../../components/AppToaster";

export default function TrainingCertificatesPage() {
  const [refreshFlag, setRefreshFlag] = useState(false);
  const [formOpen, setFormOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);

  const refreshData = () => setRefreshFlag((prev) => !prev);

  const openForm = (id?: number | null) => {
    setEditId(id ?? null);
    setFormOpen(true);
  };

  const closeForm = () => {
    setFormOpen(false);
    setEditId(null);
  };

  // Full-page form (issue or edit) replaces the table view — same
  // pattern as the batch audit request form
  if (formOpen) {
    return (
      <>
        <AppToaster />
        <TrainingCertificateForm
          editId={editId}
          onClose={closeForm}
          onSuccess={refreshData}
        />
      </>
    );
  }

  return (
    <>
      <AppToaster />
      <TrainingHeader onIssue={() => openForm()} />
      <TrainingTable refreshFlag={refreshFlag} onEdit={(id) => openForm(id)} />
    </>
  );
}