import { popupOverlayStyle, popupSurfaceStyle } from '../lib/popupStyles';
import PageLoader from './PageLoader';

export default function InvoiceDetailPopup({
  title,
  subtitle,
  headerRight,
  metaContent,   // JSX fields rendered in flat meta grid (no cards)
  metaActions,   // optional JSX rendered right-aligned beside meta grid (e.g. Edit Dates)
  metaCols = 4,  // number of grid columns for meta strip
  footerActions,
  loading = false,
  children,
}) {
  return (
    <div style={popupOverlayStyle}>
      <div
        style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, paddingBottom: 18, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: 0.2, lineHeight: 1.1 }}>{title}</div>
            {subtitle && <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-secondary)' }}>{subtitle}</div>}
          </div>
          {headerRight && <div style={{ flexShrink: 0 }}>{headerRight}</div>}
        </div>

        {/* Flat meta strip */}
        {metaContent && (
          <div style={{ padding: '18px 0', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${metaCols}, minmax(0, 1fr))`, gap: '14px 18px', flex: 1 }}>
                {metaContent}
              </div>
              {metaActions && (
                <div style={{ flexShrink: 0, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  {metaActions}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Body */}
        {loading ? (
          <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <PageLoader />
          </div>
        ) : (
          <div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', paddingTop: 18 }}>
            {children}
          </div>
        )}

        {/* Footer */}
        {footerActions && (
          <div className="modal-action-row" style={{ paddingTop: 18, borderTop: '1px solid var(--border)', flexShrink: 0 }}>
            {footerActions}
          </div>
        )}
      </div>
    </div>
  );
}