'use client';

import { Clock } from 'lucide-react';
import { useT } from '@/i18n/I18nProvider';

type ResourceKind = 'application' | 'service';

/** Resolve the "Deleting …" message for a resource using the active dictionary. */
function useDeletingMessage(message: string | undefined, name: string | undefined, kind: ResourceKind) {
  const t = useT();
  if (message) return message;
  if (name) return t.components.deletingNamed.replace('{name}', name);
  return kind === 'service' ? t.components.deletingService : t.components.deletingApplication;
}

/** Applied to row cells under the glass overlay so content stays visible but blurred. */
export const deletingRowContentClass =
  'opacity-45 blur-[2px] pointer-events-none select-none transition-[filter,opacity] duration-200';

const glassPanelClass =
  'flex min-h-[52px] h-full w-full items-center justify-center gap-2 bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50';

/**
 * Glass overlay on a table row. Parent `<tr>` must be `relative`; render all `<td>` cells first,
 * then this as the last child while deleting. Pass either an explicit `message`, or `name`/`kind`
 * to have the localized message built for you.
 */
export function DeletingTableRowOverlay({
  colSpan,
  message,
  name,
  kind = 'application',
}: {
  colSpan: number;
  message?: string;
  name?: string;
  kind?: ResourceKind;
}) {
  const text = useDeletingMessage(message, name, kind);
  return (
    <td
      colSpan={colSpan}
      className="!absolute inset-0 z-10 border-0 p-0 m-0 h-full w-full max-w-none bg-transparent"
      aria-live="polite"
      aria-busy="true"
    >
      <div className={glassPanelClass}>
        <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
        <span>{text}</span>
      </div>
    </td>
  );
}

/** Full-card glass overlay while delete is in progress. Parent must be `relative`. */
export function DeletingCardOverlay({
  message,
  name,
  kind = 'application',
}: {
  message?: string;
  name?: string;
  kind?: ResourceKind;
}) {
  const text = useDeletingMessage(message, name, kind);
  return (
    <div
      className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50"
      aria-live="polite"
      aria-busy="true"
    >
      <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
      <span>{text}</span>
    </div>
  );
}