// Top navigation bars — public + admin variants

const PublicNav = ({ current, onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const items = [
    { key:'home',     label:'首頁' },
    { key:'groups',   label:'找好鄰居' },
    { key:'match',    label:'AI 媒合', highlight:true },
    { key:'stories',  label:'特派員報導' },
    { key:'about',    label:'關於我們' },
  ];

  const handleNav = (key) => {
    setMenuOpen(false);
    onNav(key);
  };

  return (
    <nav style={{
      position:'sticky', top:0, zIndex:40,
      background: c.bg + 'F2',
      backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)',
      borderBottom:`1px solid ${c.line}`,
    }}>
      <div style={{
        maxWidth:1240, margin:'0 auto',
        padding: isMobile ? '12px 16px' : '16px 32px',
        display:'flex', alignItems:'center',
        gap: isMobile ? 12 : 40,
      }}>
        <div onClick={()=>handleNav('home')} style={{display:'flex', alignItems:'center', gap:10, cursor:'pointer', flexShrink:0}}>
          <Logo size={isMobile ? 28 : 34}/>
          <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
            <span style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 17 : 20, fontWeight:500, color:c.ink, letterSpacing:'0.05em'}}>好鄰居</span>
            {!isMobile && <span style={{fontSize:10, color:c.inkMuted, letterSpacing:'0.18em', marginTop:2}}>GOOD NEIGHBOR</span>}
          </div>
        </div>

        {!isMobile && (
          <div style={{display:'flex', gap:4, flex:1}}>
            {items.map(it => (
              <button
                key={it.key}
                onClick={()=>handleNav(it.key)}
                style={{
                  padding:'8px 14px', borderRadius:'var(--hl-radius-md)',
                  background: current === it.key ? c.bgAlt : 'transparent',
                  color: it.highlight ? c.primary : c.ink,
                  fontSize:15, fontWeight: current === it.key ? 600 : 500,
                  border:'none', cursor:'pointer',
                  fontFamily:'var(--hl-font-body)',
                  display:'inline-flex', alignItems:'center', gap:6,
                  whiteSpace:'nowrap',
                  transition:'background 140ms ease',
                }}
                onMouseEnter={e=>{ if(current!==it.key) e.currentTarget.style.background = c.bgAlt }}
                onMouseLeave={e=>{ if(current!==it.key) e.currentTarget.style.background = 'transparent' }}
              >
                {it.highlight && <IconSparkle size={15}/>}
                {it.label}
              </button>
            ))}
          </div>
        )}

        {!isMobile && (
          <div style={{display:'flex', gap:10, alignItems:'center', flexShrink:0}}>
            <Button variant="ghost" size="sm" onClick={()=>handleNav('neighbor-home')}>登入</Button>
            <Button variant="primary" size="sm" onClick={()=>handleNav('match')}>找一個好鄰居</Button>
          </div>
        )}

        {isMobile && (
          <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:8}}>
            <Button variant="primary" size="sm" onClick={()=>handleNav('match')} style={{padding:'8px 12px', fontSize:13}}>找好鄰居</Button>
            <button
              onClick={()=>setMenuOpen(o=>!o)}
              aria-label="選單"
              style={{
                width:40, height:40, padding:0,
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                background: menuOpen ? c.bgAlt : 'transparent',
                border:`1px solid ${c.line}`, borderRadius:'var(--hl-radius-md)',
                cursor:'pointer', color:c.ink,
              }}
            >
              {menuOpen ? (
                <span style={{fontSize:18, lineHeight:1}}>✕</span>
              ) : (
                <span style={{display:'inline-flex', flexDirection:'column', gap:4}}>
                  <span style={{width:18, height:2, background:c.ink, borderRadius:1}}/>
                  <span style={{width:18, height:2, background:c.ink, borderRadius:1}}/>
                  <span style={{width:18, height:2, background:c.ink, borderRadius:1}}/>
                </span>
              )}
            </button>
          </div>
        )}
      </div>

      {isMobile && menuOpen && (
        <div style={{
          background: c.paper,
          borderTop:`1px solid ${c.line}`,
          padding:'12px 16px 16px',
          display:'flex', flexDirection:'column', gap:2,
          boxShadow:'0 8px 20px rgba(80,50,25,0.08)',
        }}>
          {items.map(it => (
            <button
              key={it.key}
              onClick={()=>handleNav(it.key)}
              style={{
                padding:'12px 14px', borderRadius:'var(--hl-radius-md)',
                background: current === it.key ? c.bgAlt : 'transparent',
                color: it.highlight ? c.primary : c.ink,
                fontSize:15, fontWeight: current === it.key ? 600 : 500,
                border:'none', cursor:'pointer', textAlign:'left',
                fontFamily:'var(--hl-font-body)',
                display:'inline-flex', alignItems:'center', gap:8,
              }}
            >
              {it.highlight && <IconSparkle size={15}/>}
              {it.label}
            </button>
          ))}
          <div style={{height:1, background:c.line, margin:'8px 0'}}/>
          <button
            onClick={()=>handleNav('neighbor-home')}
            style={{
              padding:'12px 14px', borderRadius:'var(--hl-radius-md)',
              background:'transparent', color:c.inkSoft,
              fontSize:14, border:'none', cursor:'pointer', textAlign:'left',
              fontFamily:'var(--hl-font-body)',
            }}
          >登入</button>
        </div>
      )}
    </nav>
  );
};

const Logo = ({ size = 36 }) => {
  const c = window.HAOLIN_TOKENS.colors;
  return (
    <svg viewBox="0 0 40 40" width={size} height={size}>
      {/* house-ish + two figures */}
      <rect x="3" y="14" width="34" height="22" rx="4" fill={c.primary}/>
      <polygon points="2,15 20,3 38,15" fill={c.primaryDark}/>
      <circle cx="14" cy="24" r="4" fill={c.bg}/>
      <circle cx="26" cy="24" r="4" fill={c.accent}/>
    </svg>
  );
};

const AdminSidebar = ({ current, onNav }) => {
  const c = useTokens();
  const items = [
    { key:'admin-dash',      label:'總覽',       icon: IconGrid },
    { key:'admin-neighbors', label:'好鄰居管理', icon: IconUsers },
    { key:'admin-training',  label:'同行者支持管理',   icon: IconHeartHands },
    { key:'admin-content',   label:'支持資源地圖', icon: IconMap },
    { key:'admin-ai',        label:'AI 內容生成',icon: IconSparkle, highlight:true },
    { key:'admin-messaging', label:'通訊中心',   icon: IconChat },
    { key:'admin-announcements', label:'公告管理', icon: IconBell },
    { key:'admin-matchlogs', label:'媒合紀錄',   icon: IconSparkle },
    { key:'admin-settings',  label:'設定',       icon: IconSettings },
  ];
  return (
    <aside style={{
      width:240, background: c.paper, borderRight:`1px solid ${c.line}`,
      display:'flex', flexDirection:'column', padding:'24px 16px', gap:6,
      position:'sticky', top:0, height:'100vh',
    }}>
      <div style={{display:'flex', alignItems:'center', gap:10, padding:'4px 8px 20px', borderBottom:`1px solid ${c.line}`, marginBottom:8}}>
        <Logo size={30}/>
        <div style={{display:'flex', flexDirection:'column', lineHeight:1.1}}>
          <span style={{fontFamily:'var(--hl-font-heading)', fontSize:16, color:c.ink}}>好鄰居後台</span>
          <span style={{fontSize:11, color:c.inkMuted}}>好好生活協進會</span>
        </div>
      </div>
      {items.map(it => (
        <button
          key={it.key}
          onClick={()=>onNav(it.key)}
          style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'10px 12px', border:'none',
            borderRadius:'var(--hl-radius-md)',
            background: current === it.key ? c.primarySoft : 'transparent',
            color: current === it.key ? c.primaryDark : c.inkSoft,
            fontSize:14, fontWeight: current === it.key ? 600 : 500,
            cursor:'pointer', textAlign:'left',
            fontFamily:'var(--hl-font-body)',
            transition:'background 140ms ease, color 140ms ease',
            position:'relative',
          }}
          onMouseEnter={e=>{ if(current!==it.key) e.currentTarget.style.background = c.bgAlt }}
          onMouseLeave={e=>{ if(current!==it.key) e.currentTarget.style.background = 'transparent' }}
        >
          <it.icon size={18}/>
          {it.label}
          {it.highlight && <span style={{marginLeft:'auto', fontSize:10, padding:'2px 6px', background: c.primary, color:'#fff', borderRadius:'999px', fontWeight:600}}>AI</span>}
        </button>
      ))}
      <div style={{marginTop:'auto', padding:'12px', background: c.bgAlt, borderRadius:'var(--hl-radius-lg)', display:'flex', alignItems:'center', gap:10}}>
        <AvatarGeo size={32} seed={7}/>
        <div style={{display:'flex', flexDirection:'column', lineHeight:1.2}}>
          <span style={{fontSize:13, color:c.ink, fontWeight:600}}>小好</span>
          <span style={{fontSize:11, color:c.inkMuted}}>協會秘書</span>
        </div>
      </div>
    </aside>
  );
};

const NeighborSidebar = ({ current, onNav }) => {
  const c = useTokens();
  const items = [
    { key:'neighbor-home',    label:'我的首頁',  icon: IconHome },
    { key:'neighbor-support', label:'我收到的支持', icon: IconHeartHands },
    { key:'neighbor-upload',  label:'上傳活動',  icon: IconUpload, highlight:true },
    { key:'neighbor-events',  label:'歷次活動',  icon: IconCalendar },
    { key:'neighbor-messages',label:'訊息',      icon: IconChat },
    { key:'neighbor-announcements', label:'協會訊息', icon: IconBell },
    { key:'neighbor-reports', label:'我的報導',  icon: IconDoc },
    { key:'neighbor-settings',label:'團體設定',  icon: IconSettings },
  ];
  return (
    <aside style={{
      width:220, background: c.paper, borderRight:`1px solid ${c.line}`,
      display:'flex', flexDirection:'column', padding:'24px 14px', gap:4,
      position:'sticky', top:0, height:'100vh',
    }}>
      <div style={{display:'flex', alignItems:'center', gap:10, padding:'4px 8px 18px'}}>
        <Logo size={28}/>
        <span style={{fontFamily:'var(--hl-font-heading)', fontSize:16, color:c.ink}}>好鄰居</span>
      </div>
      {items.map(it => (
        <button
          key={it.key}
          onClick={()=>onNav(it.key)}
          style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'10px 12px', border:'none',
            borderRadius:'var(--hl-radius-md)',
            background: current === it.key ? c.primarySoft : 'transparent',
            color: current === it.key ? c.primaryDark : c.inkSoft,
            fontSize:14, fontWeight: current === it.key ? 600 : 500,
            cursor:'pointer', textAlign:'left',
            fontFamily:'var(--hl-font-body)',
            position:'relative',
          }}
          onMouseEnter={e=>{ if(current!==it.key) e.currentTarget.style.background = c.bgAlt }}
          onMouseLeave={e=>{ if(current!==it.key) e.currentTarget.style.background = 'transparent' }}
        >
          <it.icon size={18}/>
          {it.label}
        </button>
      ))}
    </aside>
  );
};

const Footer = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  return (
    <footer style={{background: c.ink, color:'#E8DCCC', padding: isMobile ? '40px 20px 24px' : '60px 32px 32px'}}>
      <div style={{
        maxWidth:1240, margin:'0 auto',
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : '1.6fr 1fr 1fr 1.2fr 1fr',
        gap: isMobile ? 28 : 40,
      }}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:16}}>
            <Logo size={34}/>
            <span style={{fontFamily:'var(--hl-font-heading)', fontSize:20, color:'#fff'}}>好鄰居</span>
          </div>
          <p style={{fontSize:14, lineHeight:1.8, color:'#B8A998', margin:0, maxWidth:320}}>
            由好好生活協進會籌備，希望讓願意陪伴他人的人，都能在自己的社區成為被需要的好鄰居。
          </p>
        </div>
        <div>
          <h4 style={{fontSize:13, color:'#fff', letterSpacing:'0.1em', marginBottom:16}}>探索</h4>
          <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14}}>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('groups')}>找好鄰居</span>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('match')}>AI 媒合</span>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('stories')}>特派員報導</span>
          </div>
        </div>
        <div>
          <h4 style={{fontSize:13, color:'#fff', letterSpacing:'0.1em', marginBottom:16}}>參與</h4>
          <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14}}>
            <span style={{cursor:'pointer'}}>同行成為好鄰居</span>
            <span style={{cursor:'pointer'}}>主揪登入</span>
            <span style={{cursor:'pointer'}}>贊助我們</span>
          </div>
        </div>
        <div>
          <h4 style={{fontSize:13, color:'#fff', letterSpacing:'0.1em', marginBottom:16}}>關於</h4>
          <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14}}>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('about')}>協會緣起</span>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('host-profile')}>主揪公開頁範例</span>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('privacy')}>隱私政策</span>
            <span style={{cursor:'pointer'}} onClick={()=>onNav('terms')}>服務條款</span>
          </div>
        </div>
        <div>
          <h4 style={{fontSize:13, color:'#fff', letterSpacing:'0.1em', marginBottom:16}}>聯絡</h4>
          <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14, color:'#B8A998'}}>
            <span>hello@haolin.tw</span>
            <span>台北市中正區仁愛路二段</span>
          </div>
        </div>
      </div>
      <div style={{
        maxWidth:1240, margin:'40px auto 0', paddingTop:24,
        borderTop:'1px solid #3A3028', fontSize:12, color:'#D9A84A',
        display:'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 8 : 0,
        justifyContent:'space-between',
      }}>
        <span>© 2026 好好生活協進會．籌備中</span>
        <span>v 0.3 • 雛形版本</span>
      </div>
    </footer>
  );
};

Object.assign(window, { PublicNav, AdminSidebar, NeighborSidebar, Footer, Logo });