/* =========================================================
   Shared UI components
   ========================================================= */
const { useState, useRef } = React;

/* ---------- ICON SET (feather-style) ---------- */
const PATHS = {
  pin:'<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
  flag:'<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>',
  home:'<path d="M3 9.5 12 3l9 6.5"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/>',
  route:'<circle cx="6" cy="19" r="2.4"/><circle cx="18" cy="5" r="2.4"/><path d="M8.2 18H14a3.5 3.5 0 0 0 0-7H9a3.5 3.5 0 0 1 0-7h2.8"/>',
  bus:'<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9H4z"/><path d="M4 15v3h2M20 15v3h-2"/><circle cx="8" cy="15" r="1.3"/><circle cx="16" cy="15" r="1.3"/><path d="M4 10h16"/>',
  car:'<path d="M5 13l1.5-5h11L19 13"/><path d="M3 13h18v5H3z"/><circle cx="7.5" cy="18" r="1.4"/><circle cx="16.5" cy="18" r="1.4"/>',
  walk:'<circle cx="13" cy="4" r="1.6"/><path d="M11 21l2-6-3-2 1-5 4 3 2 1M9 21l2-5"/>',
  bike:'<circle cx="6" cy="17" r="3.2"/><circle cx="18" cy="17" r="3.2"/><path d="M6 17l4-7h4l-2 7M10 10l3 0 2 3M14 7h3"/>',
  utensils:'<path d="M4 3v6a2 2 0 0 0 2 2 2 2 0 0 0 2-2V3M6 11v10M16 3c-1.5 0-3 1.5-3 4s1.5 4 3 4v10"/>',
  star:'<path d="M12 3l2.6 5.6L20.5 9l-4.3 4.2 1 6L12 16.6 6.8 19.2l1-6L3.5 9l5.9-.4z"/>',
  clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
  calendar:'<rect x="3" y="4.5" width="18" height="16" rx="2.5"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/>',
  camera:'<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.4"/>',
  x:'<path d="M18 6 6 18M6 6l12 12"/>',
  trash:'<path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13"/>',
  check:'<path d="M5 12.5 10 17.5 19.5 7"/>',
  chevL:'<path d="M15 5l-7 7 7 7"/>',
  chevR:'<path d="M9 5l7 7-7 7"/>',
  chevD:'<path d="M6 9l6 6 6-6"/>',
  edit:'<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M14 6l4 4"/>',
  heart:'<path d="M12 20s-7-4.5-9.5-9C1 8 2.5 4.5 6 4.5c2 0 3.2 1.2 4 2.3.8-1.1 2-2.3 4-2.3 3.5 0 5 3.5 3.5 6.5C19 15.5 12 20 12 20z"/>',
  info:'<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/>',
  map:'<path d="M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5 9 4z"/><path d="M9 4v13M15 6.5v13"/>',
  nav:'<path d="M3 11l18-8-8 18-2-8-8-2z"/>',
  sparkle:'<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>',
  image:'<rect x="3" y="4" width="18" height="16" rx="2.5"/><circle cx="8.5" cy="9.5" r="1.6"/><path d="M21 16l-5-5-7 7"/>',
  arrowR:'<path d="M5 12h14M13 6l6 6-6 6"/>',
  plus:'<path d="M12 5v14M5 12h14"/>',
  users:'<circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><path d="M16 5.2A3.2 3.2 0 0 1 18 11M21 20c0-2.6-1.6-4.9-4-5.7"/>',
  filter:'<path d="M3 5h18l-7 8v6l-4-2v-4z"/>',
  leaf:'<path d="M5 21c0-9 6-15 15-15 0 9-6 15-15 15z"/><path d="M5 21C9 14 14 11 18 9"/>',
  back:'<path d="M19 12H5M11 6l-6 6 6 6"/>',
  bookmark:'<path d="M6 4h12v17l-6-4-6 4z"/>',
  spark2:'<path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3.5 3.5M15.5 15.5 19 19M19 5l-3.5 3.5M8.5 15.5 5 19"/>',
  sliders:'<path d="M5 7h9M19 7h0M5 12h0M10 12h9M5 17h12M21 17h0"/><circle cx="16" cy="7" r="2.3"/><circle cx="7" cy="12" r="2.3"/><circle cx="19" cy="17" r="2.3"/>'
};
function Icon({ name, className, style }){
  return React.createElement('svg', {
    className, style, viewBox:'0 0 24 24', fill:'none',
    stroke:'currentColor', strokeWidth:2, strokeLinecap:'round', strokeLinejoin:'round',
    dangerouslySetInnerHTML:{ __html: PATHS[name] || '' }
  });
}
/* filled icon (for stars etc.) */
function IconFill({ name, className, style }){
  return React.createElement('svg', {
    className, style, viewBox:'0 0 24 24', fill:'currentColor',
    stroke:'none', dangerouslySetInnerHTML:{ __html: PATHS[name] || '' }
  });
}

const LEAF_D = "M307.536 28.989C306.474 27.579 305.051 26.481 303.418 25.81 301.785 25.139 300.001 24.92 298.254 25.176 265.08 30.035 234.13 44.448 206.768 67.507 206.078 65.101 205.239 62.74 204.256 60.438 202.562 56.247 200.81 51.914 201.64 48.826 202.28 46.442 205.606 43.81 208.822 41.265 212.811 38.108 217.331 34.53 219.375 29.532 221.2 25.069 220.518 19.953 219.858 15.005 219.465 12.578 219.254 10.124 219.224 7.665 219.253 6.297 218.906 4.946 218.22 3.761 217.535 2.577 216.537 1.603 215.335 0.947 214.125 0.276 212.754-0.049 211.371 0.006 209.989 0.062 208.648 0.496 207.495 1.261 183.07 17.45 165.137 41.649 154.751 72.115 144.364 41.655 126.448 17.448 102.027 1.261 100.874 0.496 99.533 0.061 98.15 0.006 96.767-0.049 95.396 0.276 94.186 0.947 92.984 1.604 91.987 2.577 91.301 3.762 90.615 4.947 90.268 6.297 90.297 7.665 90.267 10.124 90.055 12.578 89.664 15.005 89.004 19.953 88.321 25.068 90.146 29.531 92.189 34.529 96.711 38.107 100.7 41.265 103.916 43.81 107.242 46.442 107.882 48.825 108.712 51.913 106.96 56.247 105.266 60.438 104.283 62.74 103.444 65.101 102.754 67.507 75.391 44.448 44.442 30.034 11.267 25.176 9.521 24.921 7.738 25.14 6.106 25.811 4.473 26.481 3.051 27.578 1.987 28.986 0.924 30.395 0.259 32.063 0.062 33.817-0.136 35.571 0.142 37.345 0.866 38.955 2.035 41.704 3.065 44.51 3.953 47.363 6.067 53.76 8.253 60.375 12.913 64.553 18.181 69.275 25.473 70.888 32.524 72.448 38.671 73.808 44.478 75.093 47.124 78.144 50.441 81.969 50.903 88.787 51.35 95.381 51.797 101.983 52.26 108.81 55.602 113.906 59.585 119.976 66.574 123.669 72.74 126.927 78.199 129.812 83.355 132.537 84.974 135.973 87.443 141.212 85.864 148.299 84.337 155.153 83.531 158.422 82.943 161.74 82.577 165.087L72.937 165.087C71.743 165.087 70.599 165.561 69.755 166.405 68.911 167.249 68.437 168.394 68.437 169.587L68.437 188.052C68.426 223.736 74.244 259.182 85.663 292.989L91.729 310.966 83.977 310.966C82.783 310.966 81.639 311.44 80.795 312.284 79.951 313.127 79.477 314.272 79.477 315.466L79.477 343.229C79.477 344.423 79.951 345.567 80.795 346.411 81.639 347.255 82.783 347.729 83.977 347.729L225.545 347.729C226.739 347.729 227.883 347.255 228.727 346.411 229.571 345.567 230.045 344.423 230.045 343.229L230.045 315.466C230.045 314.272 229.571 313.128 228.727 312.284 227.883 311.44 226.739 310.966 225.545 310.966L217.794 310.966 223.86 292.989C235.278 259.182 241.097 223.736 241.085 188.052L241.085 169.587C241.085 168.394 240.611 167.249 239.767 166.405 238.923 165.561 237.779 165.087 236.585 165.087L226.945 165.087C226.58 161.741 225.992 158.422 225.185 155.153 223.659 148.3 222.08 141.213 224.548 135.973 226.168 132.537 231.324 129.812 236.783 126.927 242.949 123.669 249.937 119.976 253.921 113.905 257.263 108.81 257.726 101.983 258.172 95.381 258.62 88.787 259.081 81.969 262.398 78.144 265.044 75.093 270.85 73.808 276.999 72.448 284.05 70.888 291.341 69.276 296.609 64.553 301.269 60.375 303.455 53.76 305.569 47.363 306.456 44.511 307.487 41.705 308.656 38.956 309.38 37.347 309.659 35.573 309.462 33.819 309.265 32.065 308.6 30.397 307.536 28.989Z";
function MonsteraLeaf({ className, style }){
  return React.createElement('svg', { className, style, viewBox:'0 0 309.523 347.729', fill:'currentColor',
    dangerouslySetInnerHTML:{ __html:'<path d="'+LEAF_D+'"/>' } });
}

/* ---------- FIELD ---------- */
function Field({ label, icon, value, onChange, onClear, placeholder, type='text', disabled }){
  return (
    <div className={'field' + (disabled ? ' disabled' : '')}>
      <label><span className="dot"></span>{label}</label>
      <div className="input-wrap">
        {icon && <span className="lead"><Icon name={icon} /></span>}
        <input type={type} value={value} placeholder={placeholder} disabled={disabled}
          onChange={e => onChange(e.target.value)} />
        {value && !disabled && (
          <button className="clear-x" title="지우기" onClick={onClear}><Icon name="x" /></button>
        )}
      </div>
    </div>
  );
}

/* ---------- NONE TOGGLE ---------- */
function MiniToggle({ on, onToggle, label }){
  return (
    <button className={'mini-toggle' + (on ? ' on' : '')} onClick={onToggle}>
      <span className="sw"><i></i></span>{label}
    </button>
  );
}

/* ---------- SEGMENTED ---------- */
function Segmented({ options, value, onChange }){
  return (
    <div className="seg-ctrl">
      {options.map(o => (
        <button key={o.key} className={value === o.key ? 'on' : ''} onClick={() => onChange(o.key)}>
          {o.icon && <Icon name={o.icon} />}{o.label}
        </button>
      ))}
    </div>
  );
}

/* ---------- CONDITION CHIPS ---------- */
function CondChips({ presets, selected, onToggle }){
  return (
    <div className="chips">
      {presets.map(p => {
        const on = selected.includes(p.key);
        return (
          <button key={p.key} className={'chip' + (on ? ' on' : '')} onClick={() => onToggle(p.key)}>
            <span className="tick"><Icon name="check" /></span>{p.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- STARS ---------- */
function Stars({ value }){
  return (
    <span className="stars"><IconFill name="star" />{value.toFixed(1)}</span>
  );
}

/* ---------- PHOTO UPLOADER ---------- */
function PhotoUploader({ photos, onAdd, onRemove, onCaption, max=9 }){
  const ref = useRef(null);
  const handle = (e) => {
    const files = Array.from(e.target.files || []);
    files.forEach(f => {
      const reader = new FileReader();
      reader.onload = ev => onAdd(ev.target.result);
      reader.readAsDataURL(f);
    });
    e.target.value = '';
  };
  return (
    <div className="photo-grid">
      {photos.map((p, i) => (
        <div className="photo-cell-wrap" key={i}>
          <div className="photo-cell">
            <img src={window.photoSrc(p)} alt="" />
            <button className="rm" onClick={() => onRemove(i)}><Icon name="x" /></button>
          </div>
          {onCaption && (
            <input className="photo-cap" value={window.photoCap(p)} placeholder="한마디 캡션"
              onChange={e => onCaption(i, e.target.value)} />
          )}
        </div>
      ))}
      {photos.length < max && (
        <button className="photo-add" onClick={() => ref.current && ref.current.click()}>
          <Icon name="camera" /><span>사진 추가</span>
          <input ref={ref} type="file" accept="image/*" capture="environment" multiple
            style={{ display:'none' }} onChange={handle} />
        </button>
      )}
    </div>
  );
}

/* ---------- TOAST ---------- */
function Toast({ msg }){
  if (!msg) return null;
  return <div className="toast"><Icon name="check" />{msg}</div>;
}

/* ---------- PHOTO SLIDESHOW (추억 상세) ---------- */
function PhotoSlides({ photos }){
  const [i, setI] = useState(0);
  const n = photos.length;
  const idx = Math.min(i, n - 1);
  const cur = photos[idx];
  const go = (d) => setI(v => ((v + d) % n + n) % n);
  return (
    <div className="slides">
      <div className="slide-frame">
        <img src={window.photoSrc(cur)} alt="" />
        {n > 1 && (
          <React.Fragment>
            <button className="sl-nav prev" onClick={() => go(-1)}><Icon name="chevL" /></button>
            <button className="sl-nav next" onClick={() => go(1)}><Icon name="chevR" /></button>
            <div className="sl-count">{idx + 1} / {n}</div>
          </React.Fragment>
        )}
      </div>
      {window.photoCap(cur) && <div className="slide-cap">{window.photoCap(cur)}</div>}
      {n > 1 && (
        <div className="sl-dots">
          {photos.map((_, k) => <i key={k} className={k === idx ? 'on' : ''} onClick={() => setI(k)}></i>)}
        </div>
      )}
    </div>
  );
}

/* ---------- CUTE ORIGINAL MASCOTS (sprout couple) ---------- */
const MASCOT = {
  j: { body:'#F4C9A8', line:'#C9885F', blush:'#EC9C78' },  // 준영 — 따뜻한 새싹
  s: { body:'#E9C2D4', line:'#BC8AA2', blush:'#DB93B4' }   // 소정 — 보송한 새싹
};
function Mascot({ variant='j', size=40, style, className }){
  const c = MASCOT[variant] || MASCOT.j;
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 64 64" fill="none">
      {/* sprout */}
      <path d="M32 18V9" stroke={c.line} strokeWidth="2.4" strokeLinecap="round"/>
      <path d="M32 12c4-1 6-4 6-7-3 0-6 2-6 5" fill="#7FBF8E"/>
      <path d="M32 14c-3.4-.8-5.4-3-5.4-5.6 2.6 0 5 1.6 5.4 4" fill="#9AD0A6"/>
      {/* body */}
      <ellipse cx="32" cy="39" rx="20" ry="20.5" fill={c.body} stroke={c.line} strokeWidth="2.4"/>
      {/* blush */}
      <ellipse cx="22" cy="43" rx="3.2" ry="2.1" fill={c.blush} opacity="0.75"/>
      <ellipse cx="42" cy="43" rx="3.2" ry="2.1" fill={c.blush} opacity="0.75"/>
      {/* eyes */}
      <circle cx="25.5" cy="37.5" r="2.3" fill="#3A2A22"/>
      <circle cx="38.5" cy="37.5" r="2.3" fill="#3A2A22"/>
      {/* mouth */}
      <path d="M28.5 43.5c1.6 2 5.4 2 7 0" stroke="#3A2A22" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
    </svg>
  );
}
function CoupleMark({ size=48, style }){
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:size*0.04, ...style }}>
      <Mascot variant="j" size={size} style={{ marginRight:-size*0.18, transform:'rotate(-6deg)' }} />
      <svg width={size*0.42} height={size*0.42} viewBox="0 0 24 24" fill="#E0728A" style={{ marginBottom:size*0.12, zIndex:2 }}>
        <path d="M12 20s-7-4.5-9.5-9C1 8 2.5 4.5 6 4.5c2 0 3.2 1.2 4 2.3.8-1.1 2-2.3 4-2.3 3.5 0 5 3.5 3.5 6.5C19 15.5 12 20 12 20z"/>
      </svg>
      <Mascot variant="s" size={size} style={{ marginLeft:-size*0.18, transform:'rotate(6deg)' }} />
    </div>
  );
}

Object.assign(window, {
  Icon, IconFill, MonsteraLeaf, Mascot, CoupleMark, Field, MiniToggle, Segmented, CondChips, Stars, PhotoUploader, PhotoSlides, Toast
});