"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ActionGuard } from "@/components/action-guard";
import { CalendarIcon, DownloadIcon, SearchIcon, ShieldCheckIcon, UsersIcon, XIcon } from "@/components/dashboard-icons";
import { useAuth } from "@/lib/auth-context";
import {
  getCustomerPoStatus,
  getCustomerPoStatusClass,
  getCustomerPoStatusLabel,
  getRapStatusClass,
  getRapStatusLabel,
  type CustomerPoRapWorkspace,
  type RapItemCategory,
} from "@/lib/customer-po-rap-data";
import { getPurchaseRequestByRapNumber } from "@/lib/purchase-request-data";
import {
  getRapApprovalDecisionSummary,
  getRapApprovalPeerSummary,
  getRapApprovalProgress,
  getRapApprovalRoleLabel,
  getRapApprovalStatusClass,
  getRapApprovalStatusLabel,
  type RapApprovalRecord,
  type RapApprovalStatus,
} from "@/lib/rap-approval-data";
import { formatRupiah } from "@/lib/crm-pages-data";
import { cn } from "@/lib/utils";

type ModalMode = "approve" | "reject" | null;

type FeedbackState = {
  kind: "success" | "warning" | "error";
  message: string;
};

function Badge({ label, className }: { label: string; className: string }) {
  return <span className={cn("inline-flex rounded-full px-2.5 py-1 text-xs font-semibold", className)}>{label}</span>;
}

const categorySections: { key: RapItemCategory; label: string; color: string }[] = [
  { key: "material_utama",   label: "Material Utama",   color: "border-blue-400" },
  { key: "material_support", label: "Material Support", color: "border-emerald-400" },
  { key: "servis",           label: "Servis / Jasa",    color: "border-violet-400" },
];

function updateDecisionTrail(
  decisions: RapApprovalRecord["decisions"],
  role: RapApprovalRecord["approverRole"],
  status: RapApprovalStatus,
  notes: string,
) {
  const now = new Date().toISOString();

  return decisions.map((decision) =>
    decision.role === role
      ? {
          ...decision,
          status,
          decidedAt: now,
          notes,
        }
      : decision,
  );
}

export function RapApprovalDetailWorkspace({
  approval,
  workspace,
}: {
  approval: RapApprovalRecord;
  workspace: CustomerPoRapWorkspace | null;
}) {
  const [currentStatus, setCurrentStatus] = useState<RapApprovalStatus>(approval.currentStatus);
  const [rapStatus, setRapStatus] = useState(approval.rapStatus);
  const [decisions, setDecisions] = useState(approval.decisions);
  const [modalMode, setModalMode] = useState<ModalMode>(null);
  const [actionText, setActionText] = useState("");
  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
  const [formError, setFormError] = useState<string | null>(null);
  const [expandedSections, setExpandedSections] = useState<Record<RapItemCategory, boolean>>({
    material_utama: true,
    material_support: true,
    servis: true,
  });

  function toggleSection(key: RapItemCategory) {
    setExpandedSections((prev) => ({ ...prev, [key]: !prev[key] }));
  }

  const { activeRole } = useAuth();

  const isAnyModalOpen = modalMode !== null;
  const progress = useMemo(() => getRapApprovalProgress({ ...approval, currentStatus, rapStatus, decisions }), [approval, currentStatus, rapStatus, decisions]);
  const summary = getRapApprovalDecisionSummary({ ...approval, currentStatus, rapStatus, decisions });
  const peerSummary = getRapApprovalPeerSummary({ ...approval, currentStatus, rapStatus, decisions });
  const linkedPurchaseRequest = getPurchaseRequestByRapNumber(approval.rapCode);
  const isBlocked = decisions.some((decision) => decision.status === "rejected");
  const isReadOnly = currentStatus !== "pending" || isBlocked || rapStatus === "locked";
  const customerPoStatus = workspace ? getCustomerPoStatus(workspace) : null;
  const canManageApproval = activeRole === approval.approverRole || activeRole === "admin";

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setModalMode(null);
        setFormError(null);
      }
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  useEffect(() => {
    document.body.style.overflow = isAnyModalOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [isAnyModalOpen]);

  function closeModal() {
    setModalMode(null);
    setActionText("");
    setFormError(null);
  }

  function openModal(mode: ModalMode) {
    if (isReadOnly || !canManageApproval) {
      return;
    }

    setModalMode(mode);
    setActionText("");
    setFormError(null);
  }

  function persistDecision(nextStatus: RapApprovalStatus, notes: string) {
    const nextDecisions = updateDecisionTrail(decisions, approval.approverRole, nextStatus, notes);
    const approvedCount = nextDecisions.filter((decision) => decision.status === "approved").length;
    const allApproved = approvedCount === 3;

    setDecisions(nextDecisions);
    setCurrentStatus(nextStatus);
    setRapStatus(nextStatus === "approved" && allApproved ? "locked" : nextStatus === "approved" ? "pending_approval" : "revision");
    setFeedback({
      kind: nextStatus === "approved" ? "success" : "warning",
      message:
        nextStatus === "approved"
          ? allApproved
            ? "Persetujuan tercatat. RAP terkunci (Locked), modul Purchase Request terbuka."
            : "Persetujuan tercatat, menunggu approver lain."
          : "RAP ditolak, kembali ke status Revisi.",
    });
    closeModal();
  }

  function handleSubmit() {
    if (modalMode === null) {
      return;
    }

    if (modalMode === "approve") {
      persistDecision("approved", actionText.trim() || "Disetujui setelah review RAP final.");
      return;
    }

    if (!actionText.trim()) {
      setFormError("Alasan penolakan wajib diisi.");
      return;
    }

    persistDecision("rejected", actionText.trim());
  }

  if (!workspace) {
    return (
      <Card>
        <CardContent className="space-y-4 p-6">
          <div>
            <h2 className="mt-2 text-2xl font-semibold tracking-tight">Data RAP tidak ditemukan</h2>
          </div>

          <Link href="/rap-approvals" className={buttonVariants({ className: "w-full sm:w-auto" })}>
            Back to queue
          </Link>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <div className="space-y-6">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight md:text-3xl">Review RAP Detail</h2>
          </div>
        </div>

        {feedback ? (
          <div
            className={cn(
              "fixed bottom-6 right-6 z-50 flex w-80 items-start gap-3 rounded-xl border px-4 py-3 text-sm shadow-[0_20px_60px_rgba(0,0,0,0.15)] backdrop-blur-sm",
              feedback.kind === "success" && "border-emerald-200 bg-emerald-50/95 text-emerald-800",
              feedback.kind === "warning" && "border-amber-200 bg-amber-50/95 text-amber-800",
              feedback.kind === "error" && "border-rose-200 bg-rose-50/95 text-rose-800",
            )}
          >
            <div className="flex-1">
              <div className="flex items-start gap-3">
                <ShieldCheckIcon className="mt-0.5 h-4 w-4 shrink-0" />
                <span>{feedback.message}</span>
              </div>
              {rapStatus === "locked" ? (
                <div className="mt-3 flex flex-wrap gap-2">
                  {linkedPurchaseRequest ? (
                    <Link
                      href={`/purchase-requests/${linkedPurchaseRequest.id}`}
                      className={buttonVariants({ variant: "outline", size: "sm", className: "h-8 px-3 text-xs" })}
                    >
                      Buka PR terkait
                    </Link>
                  ) : (
                    <Link href="/purchase-requests" className={buttonVariants({ variant: "outline", size: "sm", className: "h-8 px-3 text-xs" })}>
                      Buka Purchase Request Queue
                    </Link>
                  )}
                </div>
              ) : null}
            </div>
            <button type="button" onClick={() => setFeedback(null)} className="shrink-0 text-muted-foreground hover:text-foreground">&times;</button>
          </div>
        ) : null}

        {isBlocked ? (
          <div className="rounded-xl bg-rose-50 px-4 py-3 text-sm text-rose-800">
            RAP ini sudah ditolak oleh {getRapApprovalRoleLabel(decisions.find((decision) => decision.status === "rejected")?.role ?? approval.approverRole)}.
            Pengajuan otomatis batal, RAP kembali ke status Revisi.
          </div>
        ) : null}

        {currentStatus !== "pending" && !isBlocked ? (
          <div className="rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
            Detail ini sudah diputuskan. Status saat ini: {getRapApprovalStatusLabel(currentStatus)}.
          </div>
        ) : null}

        {progress.approved === 2 && currentStatus === "pending" && !isBlocked ? (
          <div className="rounded-xl bg-sky-50 px-4 py-3 text-sm text-sky-800">
            Anda approver terakhir. Jika disetujui, RAP otomatis terkunci dan Purchase Request terbuka.
          </div>
        ) : null}

        <Card className="overflow-hidden">
          <div className="bg-gradient-to-r from-primary/5 via-primary/[0.02] to-transparent px-5 pb-5 pt-5 md:px-6">
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0 flex-1">
                <p className="text-xs font-medium uppercase tracking-[0.15em] text-primary/60">Opportunity</p>
                <h2 className="mt-1.5 text-xl font-bold tracking-tight text-foreground">{approval.projectName}</h2>
                <p className="mt-0.5 text-sm text-muted-foreground">{approval.customerName}</p>
              </div>
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-sm">
                <UsersIcon className="h-5 w-5" />
              </div>
            </div>
          </div>

          <div className="divide-y divide-border/40 px-5 py-4 md:px-6">
            <div className="grid gap-x-8 gap-y-4 pb-4 sm:grid-cols-2 lg:grid-cols-4">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">RAP code</p>
                <p className="mt-1 font-semibold">{approval.rapCode}</p>
                <p className="text-xs text-muted-foreground">Approval ID {approval.id}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Approval status</p>
                <div className="mt-1 flex flex-wrap gap-1.5">
                  <Badge label={getRapApprovalStatusLabel(currentStatus)} className={getRapApprovalStatusClass(currentStatus)} />
                  <Badge label={getRapStatusLabel(rapStatus)} className={getRapStatusClass(rapStatus)} />
                </div>
                <p className="mt-1 text-xs text-muted-foreground">Role aktif: {getRapApprovalRoleLabel(approval.approverRole)}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Operational reviewer</p>
                <p className="mt-1 font-semibold">{approval.operationalReviewedBy ?? "-"}</p>
                <div className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
                  <CalendarIcon className="h-3.5 w-3.5" />
                  <span>{approval.operationalReviewedAt ? new Date(approval.operationalReviewedAt).toLocaleString("id-ID") : "Belum direview"}</span>
                </div>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Submitted at</p>
                <p className="mt-1 font-semibold">{new Date(approval.submittedAt).toLocaleString("id-ID")}</p>
                <p className="mt-0.5 text-xs text-muted-foreground">Dari Operasional ke management</p>
              </div>
            </div>

            <div className="grid gap-x-8 gap-y-3 pt-4 sm:grid-cols-2 lg:grid-cols-4">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Total plafon RAP</p>
                <p className="mt-1 text-lg font-bold tracking-tight text-foreground">{formatRupiah(approval.totalBudgetModal)}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Customer PO</p>
                <div className="mt-1">
                  {customerPoStatus ? (
                    <Badge label={getCustomerPoStatusLabel(customerPoStatus)} className={getCustomerPoStatusClass(customerPoStatus)} />
                  ) : (
                    <span className="text-sm text-muted-foreground">PO belum tersedia</span>
                  )}
                </div>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Decision trail</p>
                <p className="mt-1 text-sm font-semibold">{summary}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Peer status</p>
                <p className="mt-1 text-sm font-semibold leading-relaxed text-foreground">{peerSummary}</p>
              </div>
            </div>

            {workspace.customerPo ? (
              <div className="mt-4 flex flex-wrap gap-x-8 gap-y-2 rounded-xl bg-muted/40 px-4 py-3 text-sm">
                <div>
                  <span className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">PO Number</span>
                  <p className="mt-0.5 font-semibold text-foreground">{workspace.customerPo.poNumber}</p>
                </div>
                <div>
                  <span className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">PO Value</span>
                  <p className="mt-0.5 font-semibold text-foreground">{formatRupiah(workspace.customerPo.poValue)}</p>
                </div>
                <div>
                  <span className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ code</span>
                  <p className="mt-0.5 font-semibold text-foreground">{approval.boqCode}</p>
                </div>
              </div>
            ) : null}
          </div>
        </Card>

        <Card className="overflow-hidden">
          <CardHeader className="p-0 md:p-0 px-5 md:px-6 pt-4 pb-1 md:pt-5 md:pb-1.5">
            <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
              <CardTitle className="text-lg">Item RAP final</CardTitle>
              <label className="relative flex items-center">
                <SearchIcon className="pointer-events-none absolute left-3 h-4 w-4 text-muted-foreground" />
                <input
                  type="search"
                  placeholder="Search..."
                  className="h-9 w-64 rounded-2xl border border-border/80 bg-background pl-9 pr-4 text-sm outline-none transition placeholder:text-muted-foreground focus:border-primary/40 focus:ring-2 focus:ring-primary/10"
                />
              </label>
              <Button variant="outline" className="h-9 w-full px-3 sm:w-auto">
                <DownloadIcon className="mr-1.5 h-3.5 w-3.5" />
                Export RAP
              </Button>
            </div>
          </CardHeader>

          <CardContent className="p-0">
            <div className="divide-y divide-border/70">
              {categorySections.map((section) => {
                const sectionItems = workspace?.rap.items.filter((item) => item.category === section.key) ?? [];
                return (
                  <div key={section.key} className={cn("border-l-4", section.color)}>
                    <div className="flex items-center justify-between px-5 py-4">
                      <button
                        type="button"
                        onClick={() => toggleSection(section.key)}
                        className="flex items-center gap-3 text-left transition hover:opacity-70"
                      >
                        <svg
                          className={cn(
                            "h-4 w-4 text-muted-foreground transition-transform duration-200",
                            expandedSections[section.key] && "rotate-90",
                          )}
                          fill="none"
                          viewBox="0 0 24 24"
                          strokeWidth={2.5}
                          stroke="currentColor"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                        <span className="font-semibold text-foreground">{section.label}</span>
                        <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
                          {sectionItems.length} item{sectionItems.length !== 1 ? "s" : ""}
                        </span>
                      </button>
                    </div>

                    {expandedSections[section.key] ? (
                      <div className="border-t border-border/50">
                        {sectionItems.length === 0 ? (
                          <div className="px-5 py-6 text-center text-sm text-muted-foreground">
                            Belum ada item di kategori ini.
                          </div>
                        ) : (
                          <div className="overflow-x-auto pr-4 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-track]:bg-transparent">
                            <table className="min-w-full border-separate border-spacing-0 text-left text-sm">
                              <thead>
                                <tr className="text-sm text-muted-foreground">
                                  <th className="w-[28%] border-b border-border/70 px-3 py-2 pl-12 font-medium">Nama Item</th>
                                  <th className="w-[60px] border-b border-border/70 px-3 py-2 font-medium text-center">Qty</th>
                                  <th className="w-[70px] border-b border-border/70 px-3 py-2 font-medium">Unit</th>
                                  <th className="w-[18%] border-b border-border/70 px-3 py-2 font-medium text-right">Harga Modal BOQ</th>
                                  <th className="w-[18%] border-b border-border/70 px-3 py-2 font-medium text-right">Plafon Anggaran</th>
                                  <th className="w-[18%] border-b border-border/70 px-3 py-2 font-medium text-right">Subtotal Plafon</th>
                                </tr>
                              </thead>
                              <tbody>
                                {sectionItems.map((item) => (
                                  <tr key={item.id} className="transition hover:bg-accent/30">
                                    <td className="border-b border-border/30 px-3 py-3 pl-12 align-top font-medium text-foreground">{item.itemName}</td>
                                    <td className="border-b border-border/30 px-3 py-3 align-top text-center font-medium">{item.quantity}</td>
                                    <td className="border-b border-border/30 px-3 py-3 align-top text-muted-foreground">{item.unit}</td>
                                    <td className="border-b border-border/30 px-3 py-3 align-top text-right font-medium">{formatRupiah(item.unitCostBoq)}</td>
                                    <td className="border-b border-border/30 px-3 py-3 align-top text-right font-medium">{formatRupiah(item.plafonAmount)}</td>
                                    <td className="border-b border-border/30 px-3 py-3 align-top text-right font-medium">{formatRupiah(item.plafonAmount)}</td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          </div>
                        )}
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-3">
            <CardTitle>Status 3-Tier Approval</CardTitle>
          </CardHeader>
          <CardContent className="space-y-1">
            {decisions.map((decision) => (
              <div
                key={decision.role}
                className={cn(
                  "flex items-center justify-between gap-3 rounded-xl px-4 py-3 transition",
                  decision.role === approval.approverRole && decision.status === "pending"
                    ? "bg-primary/5"
                    : "hover:bg-accent/30",
                )}
              >
                <div className="flex items-center gap-3">
                  <span
                    className={cn(
                      "h-2 w-2 shrink-0 rounded-full",
                      decision.status === "approved" && "bg-emerald-500",
                      decision.status === "rejected" && "bg-rose-500",
                      decision.status === "pending" && "bg-amber-400",
                    )}
                  />
                  <div>
                    <p className="text-sm font-medium">{getRapApprovalRoleLabel(decision.role)}</p>
                    <p className="text-xs text-muted-foreground">
                      {decision.decidedAt
                        ? new Date(decision.decidedAt).toLocaleString("id-ID")
                        : "Belum diputuskan"}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {decision.notes && decision.status !== "pending" ? (
                    <span className="hidden text-xs text-muted-foreground sm:inline">{decision.notes}</span>
                  ) : null}
                  <span
                    className={cn(
                      "rounded-full px-2.5 py-0.5 text-xs font-medium",
                      decision.status === "approved" && "bg-emerald-100 text-emerald-700",
                      decision.status === "rejected" && "bg-rose-100 text-rose-700",
                      decision.status === "pending" && "bg-amber-100 text-amber-700",
                    )}
                  >
                    {getRapApprovalStatusLabel(decision.status)}
                  </span>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

          <Card className="overflow-hidden">
            <div className="bg-gradient-to-r from-primary/5 via-primary/[0.02] to-transparent px-5 pb-4 pt-5 md:px-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.15em] text-primary/60">Action</p>
                  <h2 className="mt-1.5 text-xl font-bold tracking-tight text-foreground">
                    {isReadOnly ? "Aksi terkunci" : "Putuskan approval RAP"}
                  </h2>
                </div>
                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-sm">
                  <ShieldCheckIcon className="h-5 w-5" />
                </div>
              </div>
            </div>
            <CardContent className="flex flex-col gap-4 px-5 pb-5 md:flex-row md:items-center md:justify-between md:px-6 md:pb-6">
              <p className="text-sm text-muted-foreground">
                {isReadOnly
                  ? "Aksi terkunci untuk approval task ini."
                  : "Approve atau reject sesuai hasil review RAP final dari Operasional."}
              </p>

              <ActionGuard
                allowedRoles={[approval.approverRole, "admin"]}
                fallback={<div className="rounded-full border border-dashed border-border px-4 py-2 text-sm text-muted-foreground">Role aktif hanya read-only untuk approval ini.</div>}
              >
                <div className="flex shrink-0 gap-2">
                  <Button variant="outline" onClick={() => openModal("reject")} disabled={isReadOnly || !canManageApproval} className="h-10 text-rose-700">
                    Reject
                  </Button>
                  <Button onClick={() => openModal("approve")} disabled={isReadOnly || !canManageApproval} className="h-10">
                    Approve
                  </Button>
                </div>
              </ActionGuard>
            </CardContent>
          </Card>
      </div>

      {modalMode ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <button
            type="button"
            aria-label="Close approval modal"
            className="absolute inset-0 bg-slate-950/55 backdrop-blur-sm"
            onClick={closeModal}
          />

          <Card className="relative z-10 w-full max-w-3xl overflow-hidden border-border/80 bg-card shadow-[0_30px_100px_rgba(15,23,42,0.25)]">
            <CardHeader className="border-b border-border/70">
              <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary">
                    {modalMode === "approve" ? "Approve RAP" : "Reject RAP"}
                  </p>
                  <CardTitle className="mt-2 text-xl md:text-2xl">
                    {modalMode === "approve" ? `Setujui ${approval.rapCode}?` : `Tolak ${approval.rapCode}?`}
                  </CardTitle>
                  <p className="mt-2 text-sm text-muted-foreground">
                    {modalMode === "approve"
                      ? "Catatan opsional. Jika ini approver terakhir dan 3/3 setuju, RAP akan terkunci."
                      : "RAP akan kembali ke status Revisi dan perlu di-update ulang oleh Operasional."}
                  </p>
                </div>

                <Button
                  variant="outline"
                  size="icon"
                  aria-label="Close approval modal"
                  onClick={closeModal}
                  className="shrink-0"
                >
                  <XIcon className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>

            <CardContent className="space-y-5 p-4 md:p-6">
              <div className="flex flex-wrap gap-x-8 gap-y-3 text-sm">
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Approval role</p>
                  <p className="mt-0.5 text-lg font-semibold">{getRapApprovalRoleLabel(approval.approverRole)}</p>
                </div>
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Current status</p>
                  <p className="mt-0.5 text-lg font-semibold">{getRapApprovalStatusLabel(currentStatus)}</p>
                </div>
              </div>

              <div className="space-y-2">
                <label className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                  {modalMode === "approve" ? "Note / justification" : "Reason for rejection"}
                </label>
                <textarea
                  rows={5}
                  value={actionText}
                  onChange={(event) => setActionText(event.target.value)}
                  placeholder={
                    modalMode === "approve"
                      ? "Tambahkan catatan jika perlu..."
                      : "Jelaskan alasan penolakan..."
                  }
                  className="w-full rounded-3xl border border-border/80 bg-background px-4 py-3 text-sm outline-none transition placeholder:text-muted-foreground focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                />
              </div>

              {formError ? <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">{formError}</div> : null}

              <div className="flex flex-col gap-2 sm:flex-row">
                <Button variant="outline" className="w-full sm:w-auto" onClick={closeModal}>
                  Batal
                </Button>
                <Button className="w-full sm:w-auto" onClick={handleSubmit}>
                  {modalMode === "approve" ? "Ya, Setujui" : "Ya, Tolak"}
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      ) : null}
    </>
  );
}