// Components/Policy/PolicyToolbar.jsx  (updated to open modal)
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faPrint,
  faCommentSms,
  faFileExcel,
  faRightLeft,
} from "@fortawesome/free-solid-svg-icons";
import { Pill, ActionBtn } from "@/Components/Policy/PolicyUI";
import TransferModal from "./Modals/TransferModal";
import { useRouter } from "next/router";
import { companies } from "@/utils/Global";

export default function PolicyToolbar({ onPrint, onSms, onExcel }) {
  const [transferOpen, setTransferOpen] = useState(false);
  const router = useRouter();
 

  const slugify = (s = "") =>
    s
      .toString()
      .toLowerCase()
      .trim()
      .replace(/&/g, "and")
      .replace(/[\s/]+/g, "-")
      .replace(/[^\w-]+/g, "")
      .replace(/--+/g, "-");

  const onSelectCompany = (company) => {
    router.push(`/Policy/${slugify(company.name)}`);
  };

  return (
    <>
      <div className="px-4 sm:px-6 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-black/10">
        <div className="flex flex-wrap gap-2">
          <Pill active onClick={() => console.log("Atamalar")}>
            Atamalar
          </Pill>
          <Pill onClick={() => console.log("İşlemler")}>İşlemler</Pill>
          <Pill onClick={() => console.log("Plaka Sorgula")}>
            Plaka Sorgula
          </Pill>
        </div>

        <div className="flex flex-wrap gap-2">
          <ActionBtn
            icon={<FontAwesomeIcon icon={faPrint} />}
            label="Yazdır"
            onClick={onPrint}
          />
          <ActionBtn
            icon={<FontAwesomeIcon icon={faCommentSms} />}
            label="Sms"
            onClick={onSms}
          />
          <ActionBtn
            icon={<FontAwesomeIcon icon={faFileExcel} />}
            label="Excel"
            onClick={onExcel}
          />
          <ActionBtn
            icon={<FontAwesomeIcon icon={faRightLeft} />}
            label="Transfer"
            onClick={() => setTransferOpen(true)}
          />
        </div>
      </div>

      <TransferModal
        open={transferOpen}
        onClose={() => setTransferOpen(false)}
        companies={companies}
        onSelect={onSelectCompany}
      />
    </>
  );
}
