"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import Header from "@/components/Header";
import Positions from "@/components/Positions";
import {
  type ApplicantWithPosition,
  initializeAtsStorage,
  type Position,
  readAllApplicantsFromStorage,
  readPositionsFromStorage,
  resetAtsStorage,
} from "@/components/initialPositionsData";
import {
  appendEventToStorage,
  initializeEventStreamStorage,
  readEventsFromStorage,
  resetEventStreamStorage,
  type AtsEvent,
} from "@/components/eventStream";
import { APPLICANT_STAGE_LABELS, formatEventForRecruiter } from "@/components/hrEventFormatter";

function getCurrentReportingPeriod() {
  const now = new Date();
  const quarter = Math.floor(now.getUTCMonth() / 3) + 1;
  return `Q${quarter} ${now.getUTCFullYear()}`;
}

function formatPercent(value: number) {
  const rounded = value.toFixed(1);
  return rounded.endsWith(".0") ? rounded.slice(0, -2) : rounded;
}

export default function Page() {  
  const router = useRouter();
  const [events, setEvents] = useState<AtsEvent[]>([]);
  const [isPositionsOpen, setIsPositionsOpen] = useState(false);
  const [isManagerActionsOpen, setIsManagerActionsOpen] = useState(true);
  const [isAuditLogOpen, setIsAuditLogOpen] = useState(false);
  const [isReportInfoOpen, setIsReportInfoOpen] = useState(true);
  const [isOfferInfoOpen, setIsOfferInfoOpen] = useState(true);
  const [resetVersion, setResetVersion] = useState(0);
  const [managerActionsRenderVersion, setManagerActionsRenderVersion] = useState(0);
  const [auditLogRenderVersion, setAuditLogRenderVersion] = useState(0);
  const [isManagerActionsLoading, setIsManagerActionsLoading] = useState(true);
  const [isAuditLogLoading, setIsAuditLogLoading] = useState(false);
  const [isOfferModalOpen, setIsOfferModalOpen] = useState(false);
  const [offerPositions, setOfferPositions] = useState<Position[]>([]);
  const [offerApplicants, setOfferApplicants] = useState<ApplicantWithPosition[]>([]);
  const [selectedOfferPositionId, setSelectedOfferPositionId] = useState("");
  const [selectedOfferApplicantId, setSelectedOfferApplicantId] = useState("");
  const [reportToast, setReportToast] = useState<{
    type: "loading" | "success";
    message: string;
  } | null>(null);

  function refreshEvents() {
    const allEvents = readEventsFromStorage().sort((a, b) =>
      a.occurredAt < b.occurredAt ? 1 : -1
    );
    setEvents(allEvents);
  }

  useEffect(() => {
    initializeAtsStorage();
    initializeEventStreamStorage();
    refreshEvents();
  }, []);

  useEffect(() => {
    if (!isManagerActionsOpen) {
      return;
    }

    setIsManagerActionsLoading(true);
    const timeout = window.setTimeout(() => {
      setIsManagerActionsLoading(false);
    }, 220);

    return () => {
      window.clearTimeout(timeout);
    };
  }, [isManagerActionsOpen, managerActionsRenderVersion, resetVersion]);

  useEffect(() => {
    if (!isAuditLogOpen) {
      return;
    }

    setIsAuditLogLoading(true);
    const timeout = window.setTimeout(() => {
      setIsAuditLogLoading(false);
    }, 220);

    return () => {
      window.clearTimeout(timeout);
    };
  }, [isAuditLogOpen, auditLogRenderVersion, resetVersion]);

  function handleResetDemoData() {
    resetAtsStorage();
    resetEventStreamStorage();
    initializeAtsStorage();
    initializeEventStreamStorage();
    refreshEvents();
    setResetVersion((current) => current + 1);
    setManagerActionsRenderVersion((current) => current + 1);
    setAuditLogRenderVersion((current) => current + 1);
  }

  function downloadAuditLog() {
    const fileName = "global-ats-audit-log.json";
    const json = JSON.stringify(events, null, 2);
    const blob = new Blob([json], { type: "application/json" });
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.download = fileName;
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
    window.URL.revokeObjectURL(url);
  }

  function handleGenerateCandidatePipelineReport() {
    setReportToast({ type: "loading", message: "Generating report..." });

    const positions = readPositionsFromStorage();
    const applicants = readAllApplicantsFromStorage();
    const totalApplicants = applicants.length;

    const applicantsByPositionId = applicants.reduce<Record<string, number>>((acc, applicant) => {
      acc[applicant.positionId] = (acc[applicant.positionId] ?? 0) + 1;
      return acc;
    }, {});

    let topPositionTitle = "N/A";
    let topPositionApplicantCount = -1;
    for (const position of positions) {
      const positionApplicantCount = applicantsByPositionId[position.id] ?? 0;
      if (positionApplicantCount > topPositionApplicantCount) {
        topPositionApplicantCount = positionApplicantCount;
        topPositionTitle = position.title;
      }
    }

    const stageOrder = [
      "new_applied",
      "resume_review_screening",
      "offer_letter_sent",
      "hired_or_closed",
    ];

    const stageCounts = applicants.reduce<Record<string, number>>((acc, applicant) => {
      acc[applicant.stageId] = (acc[applicant.stageId] ?? 0) + 1;
      return acc;
    }, {});

    const allEvents = readEventsFromStorage();
    const latestDispositionByApplicant = new Map<string, { occurredAt: string; disposition: string }>();
    for (const event of allEvents) {
      if (event.eventType !== "ApplicantHireCloseDecisionMade") {
        continue;
      }
      const applicantId =
        typeof event.payload.applicantId === "string" ? event.payload.applicantId : "";
      const disposition =
        typeof event.payload.disposition === "string" ? event.payload.disposition : "";
      if (!applicantId || (disposition !== "hired" && disposition !== "closed")) {
        continue;
      }
      const previous = latestDispositionByApplicant.get(applicantId);
      if (!previous || event.occurredAt > previous.occurredAt) {
        latestDispositionByApplicant.set(applicantId, {
          occurredAt: event.occurredAt,
          disposition,
        });
      }
    }

    let hiredCount = 0;
    let closedCount = 0;
    latestDispositionByApplicant.forEach(({ disposition }) => {
      if (disposition === "hired") {
        hiredCount += 1;
      } else if (disposition === "closed") {
        closedCount += 1;
      }
    });
    const hiredPercent = totalApplicants > 0 ? formatPercent((hiredCount / totalApplicants) * 100) : "0";
    const closedPercent =
      totalApplicants > 0 ? formatPercent((closedCount / totalApplicants) * 100) : "0";
    const hiredClosedSummary = `Hired ${hiredPercent}%, Closed ${closedPercent}`;

    const pipelineBreakdown = stageOrder
      .map((stageId) => {
        const count = stageCounts[stageId] ?? 0;
        const percent =
          stageId === "hired_or_closed"
            ? hiredClosedSummary
            : totalApplicants > 0
              ? ((count / totalApplicants) * 100).toFixed(1)
              : "0.0";
        return {
          "PipelineBreakdown.stage": APPLICANT_STAGE_LABELS[stageId] ?? stageId,
          "PipelineBreakdown.count": String(count),
          "PipelineBreakdown.percent": percent,
        };
      })
      .filter((entry) => Number(entry["PipelineBreakdown.count"]) > 0);

    const reportEventId = window.crypto?.randomUUID?.() ?? `evt_${Date.now()}`;

    const reportData = {
      generatedAt: new Date().toISOString(),
      reportType: "CandidatePipelineReport",
      documentValues: {
        EventId: reportEventId,
        ReportTitle: "Candidate Pipeline Summary",
        ReportingPeriod: getCurrentReportingPeriod(),
        TotalOpenPositions: String(positions.length),
        TotalApplicants: String(totalApplicants),
        TopPosition: topPositionTitle,
        HiredClosedSummary: hiredClosedSummary,
        PipelineBreakdown: pipelineBreakdown,
      },
    };

    appendEventToStorage({
      eventType: "CandidatePipelineReportGenerated",
      traceId: "global",
      payload: {
        streamCategory: "manager_actions_stream",
        streamId: "manager-actions:global",
        eventId: reportEventId,
        action: "generate_candidate_pipeline_report",
        reportType: reportData.reportType,
        totalOpenPositions: reportData.documentValues.TotalOpenPositions,
        totalApplicants: reportData.documentValues.TotalApplicants,
      },
    });
    refreshEvents();

    void (async () => {
      const response = await fetch("/api/manager-actions/generate-candidate-pipeline-report", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          documentValues: reportData.documentValues,
        }),
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(errorText || "Failed to generate candidate pipeline report.");
      }

      const data = (await response.json()) as {
        foxitResponse?: Record<string, unknown>;
      };

      const foxitResponse = data.foxitResponse ?? {};
      const pdfBase64 =
        (typeof foxitResponse.base64FileString === "string" && foxitResponse.base64FileString) ||
        (typeof foxitResponse.fileContent === "string" && foxitResponse.fileContent) ||
        (typeof foxitResponse.generatedFileBase64 === "string" && foxitResponse.generatedFileBase64);

      if (!pdfBase64) {
        throw new Error("Foxit response did not include a PDF base64 payload.");
      }

      setReportToast({ type: "success", message: "Report Generated! Starting download.." });

      const binaryString = window.atob(pdfBase64);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i += 1) {
        bytes[i] = binaryString.charCodeAt(i);
      }

      const blob = new Blob([bytes], { type: "application/pdf" });
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = `candidate-pipeline-report-${new Date().toISOString().slice(0, 10)}.pdf`;
      document.body.appendChild(anchor);
      anchor.click();
      document.body.removeChild(anchor);
      window.URL.revokeObjectURL(url);

      window.setTimeout(() => {
        setReportToast(null);
      }, 2200);
    })().catch((error: unknown) => {
      const message = error instanceof Error ? error.message : "Unknown error";
      console.error("Generate report error:", message);
      setReportToast(null);
      window.alert("Failed to generate candidate pipeline report. Check console for details.");
    });
  }

  const filteredOfferApplicants = useMemo(
    () => offerApplicants.filter((applicant) => applicant.positionId === selectedOfferPositionId),
    [offerApplicants, selectedOfferPositionId]
  );

  function openOfferLetterModal() {
    const positions = readPositionsFromStorage();
    const applicants = readAllApplicantsFromStorage();

    setOfferPositions(positions);
    setOfferApplicants(applicants);

    const defaultPositionId = positions[0]?.id ?? "";
    setSelectedOfferPositionId(defaultPositionId);

    const defaultApplicantId =
      applicants.find((applicant) => applicant.positionId === defaultPositionId)?.id ?? "";
    setSelectedOfferApplicantId(defaultApplicantId);
    setIsOfferModalOpen(true);
  }

  function handleOfferPositionChange(nextPositionId: string) {
    setSelectedOfferPositionId(nextPositionId);
    const nextApplicantId =
      offerApplicants.find((applicant) => applicant.positionId === nextPositionId)?.id ?? "";
    setSelectedOfferApplicantId(nextApplicantId);
  }

  function handleSendOfferLetter() {
    if (!selectedOfferPositionId || !selectedOfferApplicantId) {
      return;
    }

    setIsOfferModalOpen(false);
    router.push(
      `/applicants/${selectedOfferApplicantId}?positionId=${selectedOfferPositionId}&sendOffer=1`
    );
  }

  return (
    <div className="min-h-screen flex flex-col">
      {reportToast && (
        <div
          className={`fixed left-1/2 top-6 z-50 -translate-x-1/2 rounded-md px-4 py-3 text-sm font-semibold text-white shadow-lg ${
            reportToast.type === "loading" ? "bg-slate-700" : "bg-emerald-600"
          }`}
        >
          {reportToast.message}
        </div>
      )}

      <Header />

      <div className="min-h-screen bg-gradient-to-b from-orange-50 via-white to-white text-slate-900">
        {/* Intro */}
        <div className="pt-12 px-6 md:px-12 lg:px-20">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
              <span className="text-4xl font-bold">
                Welcome to the ATS Sample Application
              </span>
              &emsp;&emsp;

              <span className="text-xl">
                Auditable AI Document Workflows
              </span>
            </div>
            <button
              type="button"
              onClick={handleResetDemoData}
              className="h-11 rounded-md bg-slate-700 px-5 text-sm font-semibold text-white transition-colors hover:bg-slate-800"
            >
              Reset Demo Data
            </button>
          </div>
        </div>
        <section className="px-6 pb-2 pt-4 md:px-12 lg:px-20">
          <button
            type="button"
            onClick={() => setIsPositionsOpen((current) => !current)}
            className="flex items-center gap-3 text-left"
          >
            <h2 className="text-4xl font-bold text-slate-900">Your Positions</h2>
            <span
              className={`text-2xl text-slate-700 transition-transform ${
                isPositionsOpen ? "rotate-180" : "rotate-0"
              }`}
            >
              ˅
            </span>
          </button>
          {!isPositionsOpen && (
            <p className="mt-2 text-lg text-slate-600">Expand to view open positions.</p>
          )}
        </section>
        {isPositionsOpen && <Positions key={`positions-${resetVersion}`} showHeader={false}></Positions>}

        <section className="px-6 pb-2 pt-4 md:px-12 lg:px-20">
          <button
            type="button"
            onClick={() => {
              setIsManagerActionsOpen((current) => !current);
              setManagerActionsRenderVersion((current) => current + 1);
            }}
            className="flex items-center gap-3 text-left"
          >
            <h2 className="text-4xl font-bold text-slate-900">Manager Actions</h2>
            <span
              className={`text-2xl text-slate-700 transition-transform ${
                isManagerActionsOpen ? "rotate-180" : "rotate-0"
              }`}
            >
              ˅
            </span>
          </button>
          {!isManagerActionsOpen && (
            <p className="mt-2 text-lg text-slate-600">
              Expand to view manager shortcuts.
            </p>
          )}

        </section>

        {isManagerActionsOpen && (
          <section
            key={`manager-actions-${managerActionsRenderVersion}-${resetVersion}`}
            className="px-6 pb-16 pt-2 md:px-12 lg:px-20"
          >
            {isManagerActionsLoading ? (
              <>
                <div className="mt-2 h-6 w-80 rounded bg-slate-200 animate-pulse" />
                <div className="mt-6 grid gap-4 lg:grid-cols-2">
                  {Array.from({ length: 2 }).map((_, index) => (
                    <div
                      key={`manager-actions-skeleton-${index}`}
                      className="rounded-xl border border-slate-200 bg-white p-6 animate-pulse"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-4">
                          <div className="h-14 w-14 rounded-full bg-slate-200" />
                          <div className="h-7 w-72 rounded bg-slate-200" />
                        </div>
                        <div className="h-11 w-28 rounded-full bg-slate-200" />
                      </div>
                      <div className="mt-4 h-6 w-32 rounded bg-slate-200" />
                    </div>
                  ))}
                </div>
              </>
            ) : (
              <>
                <p className="mt-2 text-lg text-slate-600">
                  You can see this because you have admin permissions.
                </p>

                <div className="mt-6 grid gap-4 lg:grid-cols-2">
                  <article className="rounded-xl border border-slate-200 bg-white p-6">
                    <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                      <div className="flex items-center gap-4">
                        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600">
                          RPT
                        </div>
                        <p className="text-2xl font-semibold text-slate-800">
                          Generate Candidate Pipeline Report
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={handleGenerateCandidatePipelineReport}
                        className="inline-flex h-11 items-center justify-center rounded-full bg-orange-500 px-8 text-lg font-semibold text-white transition-colors hover:bg-orange-600"
                      >
                        Generate
                      </button>
                    </div>
                    <div className="mt-4">
                      <button
                        type="button"
                        onClick={() => setIsReportInfoOpen((current) => !current)}
                        className="flex items-center gap-2 text-xl text-slate-700"
                      >
                        View Info
                        <span
                          className={`text-xl transition-transform ${
                            isReportInfoOpen ? "rotate-180" : "rotate-0"
                          }`}
                        >
                          ˅
                        </span>
                      </button>
                      {isReportInfoOpen && (
                        <p className="mt-4 text-lg text-slate-700">
                          This feature showcases the Document Generation feature within Foxit Developer
                          APIs:{" "}
                          <a
                            href="https://developer-api.foxit.com/document-generation/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-semibold text-orange-600 underline underline-offset-4"
                          >
                            https://developer-api.foxit.com/document-generation/
                          </a>
                        </p>
                      )}
                    </div>
                  </article>

                  <article className="rounded-xl border border-slate-200 bg-white p-6">
                    <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                      <div className="flex items-center gap-4">
                        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600">
                          OFR
                        </div>
                        <p className="text-2xl font-semibold text-slate-800">
                          Send a Candidate Offer Letter
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={openOfferLetterModal}
                        className="inline-flex h-11 items-center justify-center rounded-full bg-orange-500 px-8 text-lg font-semibold text-white transition-colors hover:bg-orange-600"
                      >
                        Send
                      </button>
                    </div>
                    <div className="mt-4">
                      <button
                        type="button"
                        onClick={() => setIsOfferInfoOpen((current) => !current)}
                        className="flex items-center gap-2 text-xl text-slate-700"
                      >
                        View Info
                        <span
                          className={`text-xl transition-transform ${
                            isOfferInfoOpen ? "rotate-180" : "rotate-0"
                          }`}
                        >
                          ˅
                        </span>
                      </button>
                      {isOfferInfoOpen && (
                        <p className="mt-4 text-lg text-slate-700">
                          This feature showcases the Signature feature within Foxit Developer APIs:{" "}
                          <a
                            href="https://developer-api.foxit.com/esign/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-semibold text-orange-600 underline underline-offset-4"
                          >
                            https://developer-api.foxit.com/esign/
                          </a>
                        </p>
                      )}
                    </div>
                  </article>
                </div>
              </>
            )}
          </section>
        )}

        <section className="px-6 pb-2 pt-4 md:px-12 lg:px-20">
          <button
            type="button"
            onClick={() => {
              setIsAuditLogOpen((current) => !current);
              setAuditLogRenderVersion((current) => current + 1);
            }}
            className="flex items-center gap-3 text-left"
          >
            <h2 className="text-4xl font-bold text-slate-900">Audit Log</h2>
            <span
              className={`text-2xl text-slate-700 transition-transform ${
                isAuditLogOpen ? "rotate-180" : "rotate-0"
              }`}
            >
              ˅
            </span>
          </button>
          {!isAuditLogOpen && (
            <p className="mt-2 text-lg text-slate-600">
              Expand to view recent hiring activity across all positions.
            </p>
          )}
        </section>

        {isAuditLogOpen && (
          <section
            key={`audit-log-${auditLogRenderVersion}-${resetVersion}`}
            className="px-6 pb-16 pt-2 md:px-12 lg:px-20"
          >
            {isAuditLogLoading ? (
              <>
                <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                  <div className="mt-2 h-6 w-96 rounded bg-slate-200 animate-pulse" />
                  <div className="h-11 w-40 rounded-md bg-slate-200 animate-pulse" />
                </div>
                <div className="mt-6 rounded-xl border border-slate-200 bg-white p-4 animate-pulse">
                  {Array.from({ length: 4 }).map((_, index) => (
                    <div key={`audit-log-skeleton-${index}`} className="py-3">
                      <div className="h-5 w-48 rounded bg-slate-200" />
                      <div className="mt-2 h-4 w-2/3 rounded bg-slate-200" />
                      <div className="mt-2 h-4 w-1/2 rounded bg-slate-200" />
                    </div>
                  ))}
                </div>
              </>
            ) : (
              <>
                <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                  <p className="mt-2 text-lg text-slate-600">
                    Hiring activity timeline across all positions and applicants.
                  </p>
                  <button
                    type="button"
                    onClick={downloadAuditLog}
                    className="h-11 rounded-md bg-slate-700 px-5 text-sm font-semibold text-white transition-colors hover:bg-slate-800"
                  >
                    Download Audit Log
                  </button>
                </div>

                <div className="mt-6 overflow-hidden rounded-xl border border-slate-200 bg-white">
                  {events.length === 0 ? (
                    <p className="p-5 text-sm text-slate-600">No audit events found.</p>
                  ) : (
                    <ul className="divide-y divide-slate-200">
                      {events.slice(0, 20).map((event) => {
                        const formatted = formatEventForRecruiter(event);
                        const streamCategory =
                          typeof event.payload.streamCategory === "string"
                            ? event.payload.streamCategory
                            : "activity";
                        const positionId =
                          typeof event.payload.positionId === "string"
                            ? event.payload.positionId
                            : "unknown";

                        return (
                          <li key={event.eventId} className="p-4">
                            <p className="text-base font-semibold text-slate-900">{formatted.title}</p>
                            <p className="mt-1 text-sm text-slate-700">{formatted.detail}</p>
                            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-500">
                              <span className="rounded-full bg-slate-100 px-2 py-1">{streamCategory}</span>
                              <span className="rounded-full bg-slate-100 px-2 py-1">{positionId}</span>
                              <span>{new Date(event.occurredAt).toLocaleString()}</span>
                              <span className="font-mono">{event.eventId}</span>
                            </div>
                          </li>
                        );
                      })}
                    </ul>
                  )}
                </div>
              </>
            )}
          </section>
        )}

        {isOfferModalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4 backdrop-blur-sm">
            <div className="w-full max-w-2xl rounded-xl border border-slate-200 bg-white p-6 shadow-xl">
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold text-slate-900">Send Candidate Offer Letter</h3>
                <button
                  type="button"
                  onClick={() => setIsOfferModalOpen(false)}
                  className="text-sm font-semibold text-slate-500 underline underline-offset-4"
                >
                  Close
                </button>
              </div>

              <div className="mt-6 grid gap-4">
                <label className="grid gap-1">
                  <span className="text-sm font-medium text-slate-700">Select Position</span>
                  <select
                    value={selectedOfferPositionId}
                    onChange={(event) => handleOfferPositionChange(event.target.value)}
                    className="rounded-md border border-slate-300 px-3 py-2 text-slate-800"
                  >
                    {offerPositions.map((position) => (
                      <option key={position.id} value={position.id}>
                        {position.title}
                      </option>
                    ))}
                  </select>
                </label>

                <label className="grid gap-1">
                  <span className="text-sm font-medium text-slate-700">Select Candidate</span>
                  <select
                    value={selectedOfferApplicantId}
                    onChange={(event) => setSelectedOfferApplicantId(event.target.value)}
                    className="rounded-md border border-slate-300 px-3 py-2 text-slate-800"
                  >
                    {filteredOfferApplicants.map((applicant) => (
                      <option key={applicant.id} value={applicant.id}>
                        {applicant.name}
                      </option>
                    ))}
                  </select>
                </label>

                {filteredOfferApplicants.length === 0 && (
                  <p className="text-sm text-slate-600">No candidates found for this position.</p>
                )}
              </div>

              <div className="mt-6 flex justify-end">
                <button
                  type="button"
                  onClick={handleSendOfferLetter}
                  disabled={!selectedOfferPositionId || !selectedOfferApplicantId}
                  className="h-11 rounded-md bg-orange-500 px-5 text-sm font-semibold text-white transition-colors hover:bg-orange-600 disabled:cursor-not-allowed disabled:bg-slate-300"
                >
                  Send Offer Letter
                </button>
              </div>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}
