/**
 * 공용 모달 / 드로어 / 폼 컴포넌트
 *  - <Drawer> : 우측 슬라이드 드로어 (상세/편집)
 *  - <Modal>  : 가운데 모달
 *  - <Field>, <Input>, <Textarea>, <Select> : 폼 입력
 *  - <Section> : 폼 섹션
 */

function Backdrop({ onClose, children }) {
  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose?.(); };
    window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position:'absolute', inset:0, background:'rgba(15,23,42,0.45)',
      zIndex:50, display:'flex', justifyContent:'flex-end',
      backdropFilter:'blur(2px)',
    }}>
      {children}
    </div>
  );
}

function Drawer({ open, onClose, title, subtitle, width=520, footer, children }) {
  if (!open) return null;
  return (
    <Backdrop onClose={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{
        width, maxWidth:'92%', height:'100%', background:'#fff',
        display:'flex', flexDirection:'column', boxShadow:'-12px 0 30px rgba(0,0,0,0.18)',
        animation:'slideIn 0.18s ease-out',
      }}>
        <style>{`@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}`}</style>
        <div style={{ flexShrink:0, padding:'18px 22px', borderBottom:'1px solid #e2e8f0', display:'flex', alignItems:'flex-start', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:16, fontWeight:800, color:'#0f172a', letterSpacing:'-0.4px' }}>{title}</div>
            {subtitle && <div style={{ fontSize:11, color:'#64748b', marginTop:4 }}>{subtitle}</div>}
          </div>
          <button onClick={onClose} style={{ width:30, height:30, border:'none', background:'transparent', color:'#64748b', cursor:'pointer', fontSize:18, lineHeight:1 }}>×</button>
        </div>
        <div style={{ flex:1, overflowY:'auto', padding:'20px 22px' }}>
          {children}
        </div>
        {footer && (
          <div style={{ flexShrink:0, padding:'12px 22px', borderTop:'1px solid #e2e8f0', background:'#fafbfc', display:'flex', alignItems:'center', justifyContent:'flex-end', gap:8 }}>
            {footer}
          </div>
        )}
      </div>
    </Backdrop>
  );
}

function Modal({ open, onClose, title, subtitle, width=560, footer, children }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position:'absolute', inset:0, background:'rgba(15,23,42,0.45)',
      zIndex:50, display:'flex', justifyContent:'center', alignItems:'center',
      backdropFilter:'blur(2px)', padding:20,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        width, maxWidth:'94%', maxHeight:'92%', background:'#fff',
        display:'flex', flexDirection:'column', borderRadius:14,
        boxShadow:'0 20px 50px rgba(0,0,0,0.25)',
      }}>
        <div style={{ flexShrink:0, padding:'18px 22px', borderBottom:'1px solid #e2e8f0', display:'flex', alignItems:'flex-start', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:16, fontWeight:800, color:'#0f172a', letterSpacing:'-0.4px' }}>{title}</div>
            {subtitle && <div style={{ fontSize:11, color:'#64748b', marginTop:4 }}>{subtitle}</div>}
          </div>
          <button onClick={onClose} style={{ width:30, height:30, border:'none', background:'transparent', color:'#64748b', cursor:'pointer', fontSize:18, lineHeight:1 }}>×</button>
        </div>
        <div style={{ flex:1, overflowY:'auto', padding:'20px 22px' }}>
          {children}
        </div>
        {footer && (
          <div style={{ flexShrink:0, padding:'12px 22px', borderTop:'1px solid #e2e8f0', background:'#fafbfc', display:'flex', alignItems:'center', justifyContent:'flex-end', gap:8 }}>
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}

const FormSection = ({ title, sub, children }) => (
  <div style={{ marginBottom:22 }}>
    {title && (
      <div style={{ marginBottom:10 }}>
        <div style={{ fontSize:12, fontWeight:800, color:'#0f172a', letterSpacing:'-0.2px' }}>{title}</div>
        {sub && <div style={{ fontSize:11, color:'#94a3b8', marginTop:2 }}>{sub}</div>}
      </div>
    )}
    <div style={{ display:'flex', flexDirection:'column', gap:12 }}>{children}</div>
  </div>
);

const Field = ({ label, hint, required, children, layout='vertical' }) => (
  <label style={{ display:'flex', flexDirection: layout==='horizontal' ? 'row' : 'column', gap: layout==='horizontal' ? 14 : 6, alignItems: layout==='horizontal' ? 'center' : 'stretch' }}>
    <div style={{ flexShrink:0, width: layout==='horizontal' ? 90 : 'auto' }}>
      <div style={{ fontSize:11, color:'#475569', fontWeight:700 }}>
        {label}
        {required && <span style={{ color:'#dc2626', marginLeft:3 }}>*</span>}
      </div>
      {hint && <div style={{ fontSize:10, color:'#94a3b8', marginTop:2 }}>{hint}</div>}
    </div>
    <div style={{ flex:1, minWidth:0 }}>{children}</div>
  </label>
);

const inputStyle = {
  width:'100%', height:36, padding:'0 12px', fontSize:13,
  border:'1px solid #e2e8f0', borderRadius:6, outline:'none',
  background:'#fff', color:'#0f172a',
  fontFamily:'inherit',
};
const Input = (props) => <input {...props} style={{ ...inputStyle, ...(props.style||{}) }}/>;
const Textarea = (props) => <textarea {...props} style={{ ...inputStyle, height:'auto', padding:'10px 12px', minHeight:80, resize:'vertical', lineHeight:1.5, ...(props.style||{}) }}/>;
const Select = (props) => <select {...props} style={{ ...inputStyle, ...(props.style||{}) }}/>;

const PrimaryBtn = (p) => <button {...p} style={{ height:36, padding:'0 16px', background:'#16a34a', color:'#fff', border:'none', borderRadius:6, fontSize:13, fontWeight:700, cursor:'pointer', ...(p.style||{}) }}>{p.children}</button>;
const SecondaryBtn = (p) => <button {...p} style={{ height:36, padding:'0 14px', background:'#fff', color:'#475569', border:'1px solid #e2e8f0', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer', ...(p.style||{}) }}>{p.children}</button>;
const DangerBtn = (p) => <button {...p} style={{ height:36, padding:'0 14px', background:'#fff', color:'#dc2626', border:'1px solid #fecaca', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer', ...(p.style||{}) }}>{p.children}</button>;

const Tag = ({ bg, fg, children }) => (
  <span style={{ display:'inline-flex', alignItems:'center', padding:'2px 8px', background:bg, color:fg, fontSize:11, fontWeight:700, borderRadius:3 }}>{children}</span>
);

Object.assign(window, {
  Drawer, Modal, FormSection, Field, Input, Textarea, Select,
  PrimaryBtn, SecondaryBtn, DangerBtn, Tag,
});