import React from 'react';
import { createPortal } from 'react-dom';
import { useSiteDesign } from '../../state/SiteDesignContext';
import { Modal } from '../../ui/Modal';
import { CodeEditor } from '../../ui/CodeEditor';

interface HeadCodeModalProps {
  open: boolean;
  onClose: () => void;
}

export const HeadCodeModal: React.FC<HeadCodeModalProps> = ({ open, onClose }) => {
  const { design, updateDesign } = useSiteDesign();

  // Mobile-A2/Phase B: portaled to `document.body` -- same fix TemplateModal
  // already got (see its comment). TopBar.tsx mounts this modal as a child
  // of `.topbar`, which (as a flex item with its own z-index) forms its own
  // stacking context; that trapped the modal's fixed-position backdrop
  // underneath the mobile tab bar (z-index: var(--z-tabbar)) no matter how
  // high the modal's own z-index was set. Portaling escapes that stacking
  // context entirely so `--z-modal` (editor.css) is evaluated at the
  // document root, same as TemplateModal/SitesmithModal.
  return createPortal(
    <Modal open={open} onClose={onClose}>
      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div style={modalHeaderStyle}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <i className="fa fa-code" style={{ color: 'var(--color-accent)', fontSize: 16 }} />
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)' }}>
                Custom Head Code
              </div>
              <div style={{ fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2 }}>
                Add tracking scripts, meta tags, or custom CSS to your site's &lt;head&gt; section.
              </div>
            </div>
          </div>
          <button onClick={onClose} style={closeButtonStyle}>
            <i className="fa fa-times" />
          </button>
        </div>

        {/* Body */}
        <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{
            padding: '10px 14px',
            background: 'rgba(59,130,246,0.08)',
            border: '1px solid rgba(59,130,246,0.2)',
            borderRadius: 6,
            fontSize: 12,
            color: 'var(--color-text-muted)',
            lineHeight: 1.5,
          }}>
            <i className="fa fa-info-circle" style={{ color: 'var(--color-accent)', marginRight: 6 }} />
            Code added here will be injected into the <code style={{ background: 'rgba(255,255,255,0.08)', padding: '1px 4px', borderRadius: 3, fontSize: 11 }}>&lt;head&gt;</code> of every page on your site. Use it for analytics, custom fonts, or global CSS.
          </div>

          <div style={{ flex: 1, minHeight: 300 }}>
            <CodeEditor
              value={design.headCode || ''}
              onChange={(code) => updateDesign({ headCode: code })}
              language="html"
              height="100%"
              placeholder={"<!-- Google Analytics -->\n<script async src=\"https://...\"></script>\n\n<!-- Custom Fonts -->\n<link href=\"https://fonts.googleapis.com/...\" rel=\"stylesheet\">\n\n<style>\n  /* Global CSS overrides */\n  body { }\n</style>"}
            />
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: '12px 20px',
          borderTop: '1px solid var(--color-border)',
          display: 'flex',
          justifyContent: 'flex-end',
          gap: 8,
        }}>
          <button onClick={onClose} style={doneButtonStyle}>
            Done
          </button>
        </div>
      </div>
    </Modal>,
    document.body,
  );
};

/* ---------- Styles ---------- */

const modalStyle: React.CSSProperties = {
  width: '90vw',
  maxWidth: 700,
  maxHeight: '80vh',
  backgroundColor: 'var(--color-bg-surface)',
  borderRadius: 12,
  border: '1px solid var(--color-border)',
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
  boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
};

const modalHeaderStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '16px 20px',
  borderBottom: '1px solid var(--color-border)',
  flexShrink: 0,
};

const closeButtonStyle: React.CSSProperties = {
  width: 32,
  height: 32,
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  background: 'none',
  border: '1px solid var(--color-border)',
  borderRadius: 6,
  color: 'var(--color-text-muted)',
  cursor: 'pointer',
  fontSize: 14,
};

const doneButtonStyle: React.CSSProperties = {
  padding: '8px 24px',
  fontSize: 13,
  fontWeight: 600,
  background: 'var(--color-accent)',
  color: '#fff',
  border: 'none',
  borderRadius: 6,
  cursor: 'pointer',
};
