CapaKraken/apps/web/src/components/resources/ResourceModal.tsx

"use client";

import { useRef, useState } from "react";
import { useFocusTrap } from "~/hooks/useFocusTrap.js";
import type { Resource, SkillEntry, ResourceType } from "@capakraken/shared";
import { trpc } from "~/lib/trpc/client.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { usePermissions } from "~/hooks/usePermissions.js";
import { ResourceOrgClassification } from "./ResourceOrgClassification.js";
import { ResourceSkillsEditor } from "./ResourceSkillsEditor.js";

interface RoleAssignment {
  roleId: string;
  isPrimary: boolean;
}

type RoleOption = { id: string; name: string; color?: string | null };
type CountryOption = { id: string; name: string; metroCities: { id: string; name: string }[] };
type OrgUnitOption = { id: string; name: string; level: number; isActive: boolean };
type ClientOption = { id: string; name: string };
type ManagementGroupOption = { id: string; name: string; levels: { id: string; name: string }[] };

interface SkillRow {
  skill: string;
  proficiency: 1 | 2 | 3 | 4 | 5;
  yearsExperience: string;
  category: string;
  certified: boolean;
  isMainSkill: boolean;
}

interface FormState {
  eid: string;
  displayName: string;
  email: string;
  chapter: string;
  lcrEuros: string;
  ucrEuros: string;
  currency: string;
  chargeabilityTarget: string;
  monday: string;
  tuesday: string;
  wednesday: string;
  thursday: string;
  friday: string;
  skills: SkillRow[];
  roles: RoleAssignment[];
  portfolioUrl: string;
  roleId: string;
  postalCode: string;
  federalState: string;
  countryId: string;
  metroCityId: string;
  orgUnitId: string;
  managementLevelGroupId: string;
  managementLevelId: string;
  resourceType: string;
  chgResponsibility: boolean;
  rolledOff: boolean;
  departed: boolean;
  enterpriseId: string;
  clientUnitId: string;
  fte: string;
}

function resourceToFormState(resource: Resource): FormState {
  const skills = (resource.skills as SkillEntry[]).map((s) => ({
    skill: s.skill,
    proficiency: s.proficiency,
    yearsExperience: s.yearsExperience != null ? String(s.yearsExperience) : "",
    category: s.category ?? "",
    certified: s.certified ?? false,
    isMainSkill: s.isMainSkill ?? false,
  }));

  const roles: RoleAssignment[] = (resource.roles ?? []).map((r) => ({
    roleId: r.roleId,
    isPrimary: r.isPrimary,
  }));

  const resourceWithMeta = resource as unknown as {
    portfolioUrl?: string | null;
    roleId?: string | null;
  };

  return {
    eid: resource.eid,
    displayName: resource.displayName,
    email: resource.email,
    chapter: resource.chapter ?? "",
    lcrEuros: String(resource.lcrCents / 100),
    ucrEuros: String(resource.ucrCents / 100),
    currency: resource.currency,
    chargeabilityTarget: String(resource.chargeabilityTarget),
    monday: String(resource.availability.monday),
    tuesday: String(resource.availability.tuesday),
    wednesday: String(resource.availability.wednesday),
    thursday: String(resource.availability.thursday),
    friday: String(resource.availability.friday),
    skills,
    roles,
    portfolioUrl: resourceWithMeta.portfolioUrl ?? "",
    roleId: resourceWithMeta.roleId ?? "",
    postalCode: (resource as unknown as { postalCode?: string | null }).postalCode ?? "",
    federalState: (resource as unknown as { federalState?: string | null }).federalState ?? "",
    countryId: (resource as unknown as { countryId?: string | null }).countryId ?? "",
    metroCityId: (resource as unknown as { metroCityId?: string | null }).metroCityId ?? "",
    orgUnitId: (resource as unknown as { orgUnitId?: string | null }).orgUnitId ?? "",
    managementLevelGroupId:
      (resource as unknown as { managementLevelGroupId?: string | null }).managementLevelGroupId ??
      "",
    managementLevelId:
      (resource as unknown as { managementLevelId?: string | null }).managementLevelId ?? "",
    resourceType: (resource as unknown as { resourceType?: string }).resourceType ?? "EMPLOYEE",
    chgResponsibility:
      (resource as unknown as { chgResponsibility?: boolean }).chgResponsibility ?? true,
    rolledOff: (resource as unknown as { rolledOff?: boolean }).rolledOff ?? false,
    departed: (resource as unknown as { departed?: boolean }).departed ?? false,
    enterpriseId: (resource as unknown as { enterpriseId?: string | null }).enterpriseId ?? "",
    clientUnitId: (resource as unknown as { clientUnitId?: string | null }).clientUnitId ?? "",
    fte: String((resource as unknown as { fte?: number }).fte ?? 1),
  };
}

function defaultFormState(): FormState {
  return {
    eid: "",
    displayName: "",
    email: "",
    chapter: "",
    lcrEuros: "",
    ucrEuros: "",
    currency: "EUR",
    chargeabilityTarget: "80",
    monday: "8",
    tuesday: "8",
    wednesday: "8",
    thursday: "8",
    friday: "8",
    skills: [],
    roles: [],
    portfolioUrl: "",
    roleId: "",
    postalCode: "",
    federalState: "",
    countryId: "",
    metroCityId: "",
    orgUnitId: "",
    managementLevelGroupId: "",
    managementLevelId: "",
    resourceType: "EMPLOYEE",
    chgResponsibility: true,
    rolledOff: false,
    departed: false,
    enterpriseId: "",
    clientUnitId: "",
    fte: "1",
  };
}

function defaultSkillRow(): SkillRow {
  return {
    skill: "",
    proficiency: 3,
    yearsExperience: "",
    category: "",
    certified: false,
    isMainSkill: false,
  };
}

interface ResourceModalProps {
  mode: "create" | "edit";
  resource?: Resource;
  onClose: () => void;
  onSuccess?: (displayName: string) => void;
}

const INPUT_CLASS =
  "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white dark:bg-gray-900 dark:text-gray-100";
const LABEL_CLASS = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
const SECTION_HEADER_CLASS =
  "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 mt-4";
const PRIMARY_BTN =
  "px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";

function Spinner() {
  return (
    <svg
      className="animate-spin h-4 w-4 text-white inline-block mr-2"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
  );
}

export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceModalProps) {
  const [form, setForm] = useState<FormState>(() =>
    resource ? resourceToFormState(resource) : defaultFormState(),
  );
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);

  const panelRef = useRef<HTMLDivElement>(null);
  useFocusTrap(panelRef, true);

  const { canManageUsers } = usePermissions();
  const utils = trpc.useUtils();

  const { data: chapters } = trpc.resource.chapters.useQuery(undefined, { staleTime: 60_000 });
  const { data: availableRoles } = trpc.role.list.useQuery(
    { isActive: true },
    { staleTime: 60_000 },
  );

  const { data: countries } = trpc.country.list.useQuery(undefined, { staleTime: 60_000 });
  const { data: orgUnits } = trpc.orgUnit.list.useQuery(undefined, { staleTime: 60_000 });
  const { data: mgmtGroups } = trpc.managementLevel.listGroups.useQuery(undefined, {
    staleTime: 60_000,
  });
  const { data: clients } = trpc.clientEntity.list.useQuery(undefined, { staleTime: 60_000 });

  const roleOptions = (availableRoles ?? []) as unknown as RoleOption[];
  const countryOptions = (countries ?? []) as unknown as CountryOption[];
  const orgUnitOptions = (orgUnits ?? []) as unknown as OrgUnitOption[];
  const managementGroupOptions = (mgmtGroups ?? []) as unknown as ManagementGroupOption[];
  const clientOptions = (clients ?? []) as unknown as ClientOption[];

  const createMutation = trpc.resource.create.useMutation();
  const updateMutation = trpc.resource.update.useMutation();
  const hardDeleteMutation = trpc.resource.hardDelete.useMutation({
    onSuccess: () => {
      void utils.resource.invalidate();
      onClose();
    },
    onError: (err) => {
      setErrorMsg(err.message);
    },
  });

  const isMutating =
    createMutation.isPending || updateMutation.isPending || hardDeleteMutation.isPending;

  function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
    setForm((prev) => ({ ...prev, [key]: value }));
    setErrorMsg(null);
  }

  function setSkillField(index: number, key: keyof SkillRow, value: string | number | boolean) {
    setForm((prev) => {
      const skills = prev.skills.map((s, i) => (i === index ? { ...s, [key]: value } : s));
      return { ...prev, skills };
    });
  }

  function addSkill() {
    setForm((prev) => ({ ...prev, skills: [...prev.skills, defaultSkillRow()] }));
  }

  function removeSkill(index: number) {
    setForm((prev) => ({ ...prev, skills: prev.skills.filter((_, i) => i !== index) }));
  }

  function buildPayload() {
    const lcrCents = Math.round(parseFloat(form.lcrEuros || "0") * 100);
    const ucrCents = Math.round(parseFloat(form.ucrEuros || "0") * 100);
    const chargeabilityTarget = parseFloat(form.chargeabilityTarget || "80");

    const mainSkillCount = form.skills.filter((s) => s.isMainSkill).length;
    const skills = form.skills
      .filter((s) => s.skill.trim() !== "")
      .map((s) => ({
        skill: s.skill.trim(),
        proficiency: s.proficiency,
        ...(s.yearsExperience !== "" ? { yearsExperience: parseFloat(s.yearsExperience) } : {}),
        ...(s.category.trim() !== "" ? { category: s.category.trim() } : {}),
        ...(s.certified ? { certified: s.certified } : {}),
        ...(s.isMainSkill ? { isMainSkill: true } : {}),
      }));

    void mainSkillCount; // used for UI validation only

    return {
      eid: form.eid.trim(),
      displayName: form.displayName.trim(),
      email: form.email.trim(),
      ...(form.chapter.trim() !== "" ? { chapter: form.chapter.trim() } : {}),
      lcrCents,
      ucrCents,
      currency: form.currency,
      chargeabilityTarget,
      availability: {
        monday: parseFloat(form.monday || "8"),
        tuesday: parseFloat(form.tuesday || "8"),
        wednesday: parseFloat(form.wednesday || "8"),
        thursday: parseFloat(form.thursday || "8"),
        friday: parseFloat(form.friday || "8"),
      },
      skills,
      roles: form.roles,
      ...(form.portfolioUrl.trim() !== "" ? { portfolioUrl: form.portfolioUrl.trim() } : {}),
      ...(form.roleId.trim() !== "" ? { roleId: form.roleId.trim() } : {}),
      ...(form.postalCode.trim() !== "" ? { postalCode: form.postalCode.trim() } : {}),
      ...(form.federalState.trim() !== "" ? { federalState: form.federalState.trim() } : {}),
      ...(form.countryId ? { countryId: form.countryId } : {}),
      ...(form.metroCityId ? { metroCityId: form.metroCityId } : {}),
      ...(form.orgUnitId ? { orgUnitId: form.orgUnitId } : {}),
      ...(form.managementLevelGroupId
        ? { managementLevelGroupId: form.managementLevelGroupId }
        : {}),
      ...(form.managementLevelId ? { managementLevelId: form.managementLevelId } : {}),
      resourceType: form.resourceType as ResourceType,
      chgResponsibility: form.chgResponsibility,
      rolledOff: form.rolledOff,
      departed: form.departed,
      ...(form.enterpriseId.trim() !== "" ? { enterpriseId: form.enterpriseId.trim() } : {}),
      ...(form.clientUnitId ? { clientUnitId: form.clientUnitId } : {}),
      fte: parseFloat(form.fte) || 1,
    };
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErrorMsg(null);

    const payload = buildPayload();

    try {
      if (mode === "create") {
        const created = await createMutation.mutateAsync(payload);
        void utils.resource.directory.invalidate();
        void utils.resource.listStaff.invalidate();
        onSuccess?.(created.displayName);
        onClose();
        return;
      } else if (resource) {
        await updateMutation.mutateAsync({ id: resource.id, data: payload });
      }

      void utils.resource.directory.invalidate();
      void utils.resource.listStaff.invalidate();
      onClose();
    } catch (err) {
      const message = err instanceof Error ? err.message : "An error occurred while saving.";
      setErrorMsg(message);
    }
  }

  return (
    <div
      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div
        ref={panelRef}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl mx-4"
        onKeyDown={(e) => {
          if (e.key === "Escape") onClose();
        }}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            {mode === "create" ? "New Resource" : "Edit Resource"}
          </h2>
          <button
            type="button"
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            aria-label="Close modal"
          >
            <svg
              className="w-5 h-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} noValidate>
          <div className="px-6 pb-4">
            {/* Section 1: Basic Info */}
            <p className={SECTION_HEADER_CLASS}>Basic Info</p>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-eid">
                  Employee ID <span className="text-red-500">*</span>
                  <InfoTooltip content="Unique employee identifier (e.g. EMP-042). Used for imports and cross-referencing." />
                </label>
                <input
                  id="rm-eid"
                  type="text"
                  className={INPUT_CLASS}
                  placeholder="EMP-042"
                  value={form.eid}
                  onChange={(e) => setField("eid", e.target.value)}
                  required
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-displayName">
                  Display Name <span className="text-red-500">*</span>
                  <InfoTooltip content="Full name shown in the timeline, reports, and staffing views." />
                </label>
                <input
                  id="rm-displayName"
                  type="text"
                  className={INPUT_CLASS}
                  placeholder="Jane Smith"
                  value={form.displayName}
                  onChange={(e) => setField("displayName", e.target.value)}
                  required
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-email">
                  Email <span className="text-red-500">*</span>
                </label>
                <input
                  id="rm-email"
                  type="email"
                  className={INPUT_CLASS}
                  placeholder="jane@example.com"
                  value={form.email}
                  onChange={(e) => setField("email", e.target.value)}
                  required
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-chapter">
                  Chapter{" "}
                  <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
                </label>
                <input
                  id="rm-chapter"
                  type="text"
                  className={INPUT_CLASS}
                  placeholder="Engineering"
                  value={form.chapter}
                  onChange={(e) => setField("chapter", e.target.value)}
                  list="rm-chapter-list"
                />
                <datalist id="rm-chapter-list">
                  {chapters?.map((c) => (
                    <option key={c} value={c} />
                  ))}
                </datalist>
              </div>
            </div>

            {/* Portfolio & Role */}
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-portfolioUrl">
                  Portfolio URL{" "}
                  <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
                </label>
                <input
                  id="rm-portfolioUrl"
                  type="url"
                  className={INPUT_CLASS}
                  placeholder="https://artstation.com/…"
                  value={form.portfolioUrl}
                  onChange={(e) => setField("portfolioUrl", e.target.value)}
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-roleId">
                  Area of Expertise{" "}
                  <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
                  <InfoTooltip content="The resource's primary area role. Used for skill matrix grouping and AI summary generation." />
                </label>
                <select
                  id="rm-roleId"
                  className={INPUT_CLASS}
                  value={form.roleId}
                  onChange={(e) => setField("roleId", e.target.value)}
                >
                  <option value="">— Not specified —</option>
                  {roleOptions.map((r) => (
                    <option key={r.id} value={r.id}>
                      {r.name}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <ResourceOrgClassification
              form={form}
              onSetField={setField as (key: string, value: string | boolean) => void}
              countryOptions={countryOptions}
              orgUnitOptions={orgUnitOptions}
              clientOptions={clientOptions}
              managementGroupOptions={managementGroupOptions}
              inputClass={INPUT_CLASS}
              labelClass={LABEL_CLASS}
              sectionHeaderClass={SECTION_HEADER_CLASS}
            />

            {/* Section 2: Cost & Chargeability */}
            <p className={SECTION_HEADER_CLASS}>Cost &amp; Chargeability</p>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-lcr">
                  LCR &euro;/h <span className="text-red-500">*</span>
                  <InfoTooltip content="Loaded Cost Rate in EUR per hour. E.g. 85 = 85.00 EUR/h. Stored internally as integer cents (8500)." />
                </label>
                <input
                  id="rm-lcr"
                  type="number"
                  min="0"
                  step="0.01"
                  className={INPUT_CLASS}
                  placeholder="80"
                  value={form.lcrEuros}
                  onChange={(e) => setField("lcrEuros", e.target.value)}
                  required
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-ucr">
                  UCR &euro;/h <span className="text-red-500">*</span>
                  <InfoTooltip content="Unit Cost Rate in EUR per hour. The rate billed to the project or client." />
                </label>
                <input
                  id="rm-ucr"
                  type="number"
                  min="0"
                  step="0.01"
                  className={INPUT_CLASS}
                  placeholder="120"
                  value={form.ucrEuros}
                  onChange={(e) => setField("ucrEuros", e.target.value)}
                  required
                />
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-currency">
                  Currency
                </label>
                <select
                  id="rm-currency"
                  className={INPUT_CLASS}
                  value={form.currency}
                  onChange={(e) => setField("currency", e.target.value)}
                >
                  <option value="EUR">EUR</option>
                  <option value="USD">USD</option>
                  <option value="GBP">GBP</option>
                </select>
              </div>
              <div>
                <label className={LABEL_CLASS} htmlFor="rm-chargeability">
                  Chargeability Target %
                  <InfoTooltip content="Target % of working time on chargeable projects. E.g. 80 means 80% of hours should be billable." />
                </label>
                <input
                  id="rm-chargeability"
                  type="number"
                  min="0"
                  max="100"
                  className={INPUT_CLASS}
                  placeholder="80"
                  value={form.chargeabilityTarget}
                  onChange={(e) => setField("chargeabilityTarget", e.target.value)}
                />
              </div>
            </div>

            {/* Section 3: Weekly Availability */}
            <p className={SECTION_HEADER_CLASS}>Weekly Availability (hours/day)</p>

            <div className="grid grid-cols-5 gap-3">
              {(
                [
                  ["monday", "Mon"],
                  ["tuesday", "Tue"],
                  ["wednesday", "Wed"],
                  ["thursday", "Thu"],
                  ["friday", "Fri"],
                ] as const
              ).map(([day, label]) => (
                <div key={day}>
                  <label className={LABEL_CLASS} htmlFor={`rm-${day}`}>
                    {label}
                  </label>
                  <input
                    id={`rm-${day}`}
                    type="number"
                    min="0"
                    max="24"
                    step="0.5"
                    className={INPUT_CLASS}
                    value={form[day]}
                    onChange={(e) => setField(day, e.target.value)}
                  />
                </div>
              ))}
            </div>

            {/* Section 4: Skills */}
            <p className={SECTION_HEADER_CLASS}>Skills</p>

            <ResourceSkillsEditor
              skills={form.skills}
              onSetSkillField={setSkillField}
              onAddSkill={addSkill}
              onRemoveSkill={removeSkill}
              inputClass={INPUT_CLASS}
              labelClass={LABEL_CLASS}
            />

            {/* Section 5: Roles */}
            <p className={SECTION_HEADER_CLASS}>Roles</p>

            <div className="space-y-2">
              {roleOptions.map((role) => {
                const assignment = form.roles.find((r) => r.roleId === role.id);
                const isChecked = Boolean(assignment);

                return (
                  <div key={role.id} className="flex items-center gap-3 py-1">
                    <input
                      type="checkbox"
                      id={`role-${role.id}`}
                      checked={isChecked}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setField("roles", [...form.roles, { roleId: role.id, isPrimary: false }]);
                        } else {
                          setField(
                            "roles",
                            form.roles.filter((r) => r.roleId !== role.id),
                          );
                        }
                      }}
                      className="rounded border-gray-300"
                    />
                    <div
                      className="w-3 h-3 rounded-full flex-shrink-0"
                      style={{ backgroundColor: role.color ?? "#6366f1" }}
                    />
                    <label
                      htmlFor={`role-${role.id}`}
                      className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer flex-1"
                    >
                      {role.name}
                    </label>
                    {isChecked && (
                      <label className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 cursor-pointer">
                        <input
                          type="radio"
                          name="primary-role"
                          checked={assignment?.isPrimary ?? false}
                          onChange={() => {
                            setField(
                              "roles",
                              form.roles.map((r) =>
                                r.roleId === role.id
                                  ? { ...r, isPrimary: true }
                                  : { ...r, isPrimary: false },
                              ),
                            );
                          }}
                          className="border-gray-300"
                        />
                        Primary
                      </label>
                    )}
                  </div>
                );
              })}
              {roleOptions.length === 0 && (
                <p className="text-sm text-gray-400 italic">
                  No roles defined yet. Create roles on the Roles page.
                </p>
              )}
            </div>

            {/* Error message */}
            {errorMsg && (
              <div className="mt-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">
                {errorMsg}
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-b-xl">
            <div>
              {mode === "edit" &&
                canManageUsers &&
                resource &&
                (confirmDelete ? (
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-red-600 dark:text-red-400 font-medium">
                      Permanently delete this resource?
                    </span>
                    <button
                      type="button"
                      onClick={() => void hardDeleteMutation.mutateAsync({ id: resource.id })}
                      disabled={isMutating}
                      className="px-3 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg disabled:opacity-50 transition-colors"
                    >
                      {hardDeleteMutation.isPending ? "Deleting…" : "Yes, delete"}
                    </button>
                    <button
                      type="button"
                      onClick={() => setConfirmDelete(false)}
                      disabled={isMutating}
                      className="px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 disabled:opacity-50"
                    >
                      Cancel
                    </button>
                  </div>
                ) : (
                  <button
                    type="button"
                    onClick={() => setConfirmDelete(true)}
                    disabled={isMutating}
                    className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 border border-red-300 dark:border-red-700 rounded-lg disabled:opacity-50 transition-colors"
                  >
                    Delete Resource
                  </button>
                ))}
            </div>
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={onClose}
                disabled={isMutating}
                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
              >
                Cancel
              </button>
              <button type="submit" disabled={isMutating} className={PRIMARY_BTN}>
                {isMutating && <Spinner />}
                {isMutating ? "Saving…" : "Save"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}