'use client';

import { useId } from 'react';

export interface AdminModalProps {
  opened: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  /** When true, backdrop clicks do not call onClose. */
  disableBackdropClose?: boolean;
  width?: number;
  /** Stacking when nested (e.g. confirm inside another modal). Defaults 1000 / 1001. */
  zIndexBackdrop?: number;
  zIndexContent?: number;
}

export default function AdminModal({
  opened,
  onClose,
  title,
  children,
  disableBackdropClose = false,
  width = 440,
  zIndexBackdrop = 1000,
  zIndexContent = 1001,
}: AdminModalProps) {
  const titleId = useId();
  if (!opened) return null;

  return (
    <>
      <div
        role="presentation"
        onClick={() => {
          if (!disableBackdropClose) onClose();
        }}
        style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.35)',
          zIndex: zIndexBackdrop,
        }}
      />
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width,
          maxWidth: '92vw',
          maxHeight: '85vh',
          overflow: 'auto',
          backgroundColor: '#fff',
          borderRadius: 12,
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.18)',
          zIndex: zIndexContent,
          padding: '20px 22px',
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            gap: 12,
            marginBottom: 14,
          }}
        >
          <h2
            id={titleId}
            style={{
              margin: 0,
              fontSize: 17,
              fontWeight: 700,
              color: '#1a1a2e',
              flex: 1,
              minWidth: 0,
            }}
          >
            {title}
          </h2>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            style={{
              flexShrink: 0,
              width: 32,
              height: 32,
              border: 'none',
              borderRadius: 8,
              background: '#f3f4f6',
              color: '#6b7280',
              fontSize: 20,
              lineHeight: 1,
              cursor: 'pointer',
            }}
          >
            ×
          </button>
        </div>
        {children}
      </div>
    </>
  );
}

export interface AdminConfirmModalProps {
  opened: boolean;
  onClose: () => void;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  /** Red/destructive primary button */
  danger?: boolean;
  onConfirm: () => void;
}

export function AdminConfirmModal({
  opened,
  onClose,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  danger = false,
  onConfirm,
}: AdminConfirmModalProps) {
  return (
    <AdminModal opened={opened} onClose={onClose} title={title}>
      <p
        style={{
          margin: '0 0 20px',
          fontSize: 14,
          color: '#4b5563',
          lineHeight: 1.6,
          whiteSpace: 'pre-wrap',
        }}
      >
        {message}
      </p>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, flexWrap: 'wrap' }}>
        <button
          type="button"
          onClick={onClose}
          style={{
            padding: '8px 16px',
            borderRadius: 8,
            border: '1px solid #e5e7eb',
            background: '#fff',
            color: '#374151',
            fontWeight: 600,
            fontSize: 14,
            cursor: 'pointer',
          }}
        >
          {cancelLabel}
        </button>
        <button
          type="button"
          onClick={() => {
            onConfirm();
            onClose();
          }}
          style={{
            padding: '8px 16px',
            borderRadius: 8,
            border: 'none',
            background: danger
              ? 'linear-gradient(135deg, #dc2626, #b91c1c)'
              : 'linear-gradient(135deg, #5c5fbc, #7c7fdc)',
            color: '#fff',
            fontWeight: 600,
            fontSize: 14,
            cursor: 'pointer',
          }}
        >
          {confirmLabel}
        </button>
      </div>
    </AdminModal>
  );
}

export interface AdminInfoModalProps {
  opened: boolean;
  onClose: () => void;
  title: string;
  message: string;
  okLabel?: string;
}

export function AdminInfoModal({
  opened,
  onClose,
  title,
  message,
  okLabel = 'OK',
}: AdminInfoModalProps) {
  return (
    <AdminModal opened={opened} onClose={onClose} title={title}>
      <p
        style={{
          margin: '0 0 20px',
          fontSize: 14,
          color: '#4b5563',
          lineHeight: 1.6,
        }}
      >
        {message}
      </p>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <button
          type="button"
          onClick={onClose}
          style={{
            padding: '8px 16px',
            borderRadius: 8,
            border: 'none',
            background: 'linear-gradient(135deg, #5c5fbc, #7c7fdc)',
            color: '#fff',
            fontWeight: 600,
            fontSize: 14,
            cursor: 'pointer',
          }}
        >
          {okLabel}
        </button>
      </div>
    </AdminModal>
  );
}