import React, { useCallback, useRef } from 'react';
import { X } from 'lucide-react';
import { useFocusTrap } from '../../hooks/use-focus-trap';
import { Button } from '@/components/ui/button';
import { __ } from '../../lib/i18n';

/**
 * Accessible modal: role=dialog, aria-modal, Escape to close, focus moved
 * inside on open, Tab cycle kept within the dialog, focus restored on close.
 */
export function McpModal({
  open,
  title,
  onClose,
  closeDisabled = false,
  children,
}: {
  open: boolean;
  title: string;
  onClose: () => void;
  /** Blocks Escape/backdrop/X dismissal (used while showing a show-once secret). */
  closeDisabled?: boolean;
  children: React.ReactNode;
}) {
  const dialogRef = useRef<HTMLDivElement>(null);
  const titleId = useRef(`llmagnet-mcp-modal-${Math.random().toString(36).slice(2)}`).current;

  const tryClose = useCallback(() => {
    if (!closeDisabled) onClose();
  }, [closeDisabled, onClose]);

  useFocusTrap(dialogRef, { active: open, onEscape: tryClose });

  if (!open) return null;

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(17, 24, 39, 0.5)',
        zIndex: 100000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 16,
      }}
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) tryClose();
      }}
    >
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        tabIndex={-1}
        className="bg-white rounded-md shadow-xl border border-gray-200 w-full max-w-lg max-h-[90vh] overflow-y-auto focus:outline-none"
      >
        <div className="flex items-center justify-between gap-4 border-b border-gray-100 px-5 py-4">
          <h3 id={titleId} className="text-base font-semibold text-gray-900">
            {title}
          </h3>
          <Button
            type="button"
            onClick={tryClose}
            disabled={closeDisabled}
            variant="ghost"
            size="icon-sm"
            aria-label={__('Close dialog', 'llmagnet-llm-txt-generator')}
            className="disabled:opacity-40"
          >
            <X className="h-4 w-4" aria-hidden />
          </Button>
        </div>
        <div className="px-5 py-4">{children}</div>
      </div>
    </div>
  );
}

/** Confirmation dialog built on McpModal (used for public_read + revoke flows). */
export function ConfirmDialog({
  open,
  title,
  body,
  confirmLabel,
  cancelLabel = __('Cancel', 'llmagnet-llm-txt-generator'),
  destructive = false,
  busy = false,
  onConfirm,
  onCancel,
}: {
  open: boolean;
  title: string;
  body: React.ReactNode;
  confirmLabel: string;
  cancelLabel?: string;
  destructive?: boolean;
  busy?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  return (
    <McpModal open={open} title={title} onClose={onCancel}>
      <div className="text-sm text-gray-700">{body}</div>
      <div className="mt-5 flex justify-end gap-2">
        <Button type="button" variant="outline" size="sm" onClick={onCancel} disabled={busy} data-autofocus>
          {cancelLabel}
        </Button>
        <Button
          type="button"
          variant={destructive ? 'destructive-solid' : 'default'}
          size="sm"
          onClick={onConfirm}
          disabled={busy}
        >
          {busy ? __('Working…', 'llmagnet-llm-txt-generator') : confirmLabel}
        </Button>
      </div>
    </McpModal>
  );
}