// Shared components — placeholder image, avatar, header, illustrations
const { useState, useEffect, useRef, useMemo } = React;

function Placeholder({ label, ratio = '4/5', illustration, style = {}, accent }) {
  const useIllo = illustration === true;
  return (
    <div className="ph" style={{ aspectRatio: ratio, borderRadius: 4, ...style }}>
      {useIllo ? (
        <Illustration label={label} accent={accent} />
      ) : (
        <div className="ph-label">{label}</div>
      )}
    </div>
  );
}

function Illustration({ label, accent = '#6b5a42' }) {
  let h = 0;
  for (let i = 0; i < label.length; i++) h = (h * 31 + label.charCodeAt(i)) % 7;
  const shapes = [
    <g key="g">
      <rect x="30" y="40" width="40" height="35" fill={accent} opacity="0.18" stroke={accent} strokeWidth="1.5"/>
      <rect x="30" y="40" width="40" height="6" fill={accent} opacity="0.4"/>
      <rect x="48" y="40" width="4" height="35" fill={accent} opacity="0.4"/>
      <path d="M50 40 Q42 30 38 35 Q42 38 50 40 Q58 38 62 35 Q58 30 50 40" fill={accent} opacity="0.5"/>
    </g>,
    <g key="c">
      <path d="M35 45 L37 75 Q37 78 40 78 L60 78 Q63 78 63 75 L65 45 Z" fill={accent} opacity="0.2" stroke={accent} strokeWidth="1.5"/>
      <path d="M63 50 Q72 50 72 60 Q72 70 63 70" fill="none" stroke={accent} strokeWidth="1.5"/>
      <path d="M44 35 Q44 30 48 30 M52 35 Q52 30 56 30" fill="none" stroke={accent} strokeWidth="1.5" opacity="0.6"/>
    </g>,
    <g key="b">
      <rect x="44" y="30" width="12" height="14" fill={accent} opacity="0.4"/>
      <path d="M44 44 Q40 50 40 56 L40 78 Q40 80 42 80 L58 80 Q60 80 60 78 L60 56 Q60 50 56 44 Z" fill={accent} opacity="0.18" stroke={accent} strokeWidth="1.5"/>
      <rect x="42" y="58" width="16" height="10" fill={accent} opacity="0.3"/>
    </g>,
    <g key="f">
      <circle cx="50" cy="40" r="6" fill={accent} opacity="0.5"/>
      <circle cx="42" cy="44" r="5" fill={accent} opacity="0.35"/>
      <circle cx="58" cy="44" r="5" fill={accent} opacity="0.35"/>
      <circle cx="46" cy="36" r="5" fill={accent} opacity="0.35"/>
      <circle cx="54" cy="36" r="5" fill={accent} opacity="0.35"/>
      <path d="M50 46 L50 75" stroke={accent} strokeWidth="1.5"/>
      <path d="M50 60 Q44 56 42 50 M50 65 Q58 62 60 56" fill="none" stroke={accent} strokeWidth="1.5"/>
    </g>,
    <g key="s">
      <rect x="32" y="42" width="36" height="30" rx="3" fill={accent} opacity="0.2" stroke={accent} strokeWidth="1.5"/>
      <circle cx="50" cy="57" r="8" fill={accent} opacity="0.35"/>
      <path d="M45 55 Q47 50 50 50" fill="none" stroke={accent} strokeWidth="1" opacity="0.6"/>
    </g>,
    <g key="bk">
      <rect x="30" y="35" width="40" height="45" fill={accent} opacity="0.2" stroke={accent} strokeWidth="1.5"/>
      <path d="M50 35 L50 80" stroke={accent} strokeWidth="1.5" opacity="0.5"/>
      <path d="M35 45 L45 45 M35 52 L45 52 M55 45 L65 45 M55 52 L65 52" stroke={accent} strokeWidth="1" opacity="0.4"/>
    </g>,
    <g key="p">
      <path d="M30 60 L70 60 L66 78 L34 78 Z" fill={accent} opacity="0.2" stroke={accent} strokeWidth="1.5"/>
      <rect x="34" y="56" width="32" height="6" fill={accent} opacity="0.3"/>
      <path d="M25 58 L34 58 M66 58 L75 58" stroke={accent} strokeWidth="1.5"/>
    </g>,
  ];
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="100" height="100" fill="var(--paper)" opacity="0.4"/>
      {shapes[h]}
    </svg>
  );
}

function BrandHeader({ view, setView, onReset }) {
  const [open, setOpen] = useState(false);
  const go = (v) => {
    setOpen(false);
    if (v === 'home') onReset();
    setView(v);
  };
  return (
    <>
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px',
        borderBottom: '1px solid var(--line)',
        background: 'var(--cream)',
        position: 'sticky', top: 0, zIndex: 30,
      }}
      className="brand-header">
        <button
          onClick={() => go('home')}
          style={{
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
            textAlign: 'left',
          }}
        >
          <Logo />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.05 }}>
            <span className="display-md" style={{ fontSize: 15, fontWeight: 900 }}>
              ギフトセレクション
            </span>
            <span className="mono" style={{ fontSize: 9, opacity: 0.6, marginTop: 3, letterSpacing: '0.1em' }}>
              SUPERVISED BY CREAM TARO
            </span>
          </div>
        </button>

        {/* Desktop nav */}
        <nav className="nav-desktop" style={{ display: 'none', gap: 4, alignItems: 'center' }}>
          <NavBtn active={view === 'home'} onClick={() => go('home')}>HOME</NavBtn>
          <NavBtn active={view === 'chat'} onClick={() => go('chat')}>えらぶ</NavBtn>
          <NavBtn active={view === 'admin'} onClick={() => go('admin')}>管理</NavBtn>
        </nav>

        {/* Mobile hamburger */}
        <button
          className="nav-mobile"
          onClick={() => setOpen(!open)}
          aria-label="メニュー"
          style={{
            appearance: 'none', background: 'transparent', border: '1px solid var(--line)',
            width: 40, height: 40, borderRadius: 8, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 4,
            padding: 0,
          }}>
          <span style={{ width: 16, height: 1.5, background: 'var(--ink)' }} />
          <span style={{ width: 16, height: 1.5, background: 'var(--ink)' }} />
          <span style={{ width: 16, height: 1.5, background: 'var(--ink)' }} />
        </button>
      </header>

      {/* Mobile drawer */}
      {open && (
        <div onClick={() => setOpen(false)} className="fade-in" style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 25,
        }}>
          <div
            onClick={e => e.stopPropagation()}
            style={{
              background: 'var(--cream)',
              borderBottom: '1px solid var(--line)',
              padding: '16px 20px 20px',
              display: 'flex', flexDirection: 'column', gap: 4,
              marginTop: 65,
            }}>
            {[
              { id: 'home', label: 'HOME', sub: 'トップ' },
              { id: 'chat', label: 'えらぶ', sub: '質問に答える' },
              { id: 'admin', label: '管理', sub: '店舗・条件の編集' },
            ].map(n => (
              <button key={n.id}
                onClick={() => go(n.id)}
                style={{
                  appearance: 'none', textAlign: 'left',
                  background: view === n.id ? 'var(--ink)' : 'transparent',
                  color: view === n.id ? 'var(--cream)' : 'var(--ink)',
                  border: 'none', padding: '14px 14px',
                  borderRadius: 10, cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                <div>
                  <div className="display-md" style={{ fontSize: 18, fontWeight: 700 }}>{n.label}</div>
                  <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2 }}>{n.sub}</div>
                </div>
                <span className="mono" style={{ fontSize: 12, opacity: 0.6 }}>→</span>
              </button>
            ))}
          </div>
        </div>
      )}

      <style>{`
        @media (min-width: 768px) {
          .brand-header { padding: 16px 36px !important; }
          .brand-header .display-md { font-size: 17px !important; }
          .brand-header .mono { font-size: 10px !important; }
          .nav-desktop { display: flex !important; }
          .nav-mobile { display: none !important; }
        }
      `}</style>
    </>
  );
}

function NavBtn({ active, onClick, children }) {
  return (
    <button
      onClick={onClick}
      className="mono"
      style={{
        appearance: 'none', border: 'none', background: 'transparent',
        padding: '8px 14px', cursor: 'pointer',
        fontSize: 11, letterSpacing: '0.14em',
        color: active ? 'var(--ink)' : 'var(--ink-soft)',
        position: 'relative',
        fontWeight: active ? 700 : 400,
      }}
    >
      {children}
      {active && (
        <span style={{
          position: 'absolute', left: 14, right: 14, bottom: 2,
          height: 2, background: 'var(--ink)',
        }} />
      )}
    </button>
  );
}

function Logo() {
  return (
    <svg width="40" height="40" viewBox="0 0 44 44">
      <circle cx="22" cy="22" r="20" fill="var(--ink)" />
      <text x="22" y="29" textAnchor="middle"
        fontFamily="Yuji Mai, serif" fontSize="20" fill="var(--cream)"
        transform="rotate(-6 22 22)">
        太
      </text>
    </svg>
  );
}

function TaroAvatar({ size = 36 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'var(--ink)', color: 'var(--cream)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      fontFamily: 'Yuji Mai, serif', fontSize: size * 0.5,
      transform: 'rotate(-4deg)',
      lineHeight: 1,
    }}>
      <span style={{ marginTop: -2 }}>太</span>
    </div>
  );
}

Object.assign(window, { Placeholder, Illustration, BrandHeader, Logo, TaroAvatar });