// HimLocal — v2.6 Auth (Sign-in / Sign-up), Notifications, Empty state, Skeletons

const { useState: useStateWAuth, useMemo: useMemoWAuth } = React;

// ─── Notifications data (fake) ──────────────────────────
window.HL_NOTIFICATIONS = [
  { id:'n1', kind:'booking', title:'Booking confirmed', sub:'Banjara Retreat · 11—12 May 2026. Ref BK-77291.', when:'2 min ago', read:false },
  { id:'n2', kind:'host',    title:'Sourabh replied',   sub:'"See you at Kaza on the 11th. I\u2019ll send the homestay coords by SMS."', when:'1 h ago',   read:false },
  { id:'n3', kind:'order',   title:'Order shipped',     sub:'Yak-wool blanket + Apricot preserve are on the way. Arriving Thu 14 May.', when:'5 h ago',   read:false },
  { id:'n4', kind:'alert',   title:'Weather advisory',  sub:'Heavy snow forecast at Kunzum pass on 12 May. Day 1 may be delayed.', when:'Yesterday', read:true },
  { id:'n5', kind:'booking', title:'Refund processed',  sub:'Triund permit refund of ₹340 received. 3—5 days to your account.', when:'3 days ago', read:true },
  { id:'n6', kind:'order',   title:'Order delivered',   sub:'Copper kettle from Norbu Atelier was delivered on 02 Apr.', when:'12 days ago', read:true },
];

// ─── Sign-in / Sign-up modal ────────────────────────────
function WebAuthModal({ onClose, onSignedIn, defaultMode = 'signin' }) {
  const [mode, setMode] = useStateWAuth(defaultMode);
  const [email, setEmail] = useStateWAuth('aanya@example.com');
  const [password, setPassword] = useStateWAuth('');
  const [name, setName] = useStateWAuth('');
  const isSignup = mode === 'signup';
  return (
    <div className="w2-auth-back" onClick={onClose}>
      <div className="w2-auth" onClick={e => e.stopPropagation()}>
        <div className="w2-auth__hero">
          <button className="w2-auth__close" onClick={onClose}>×</button>
          <div className="w2-auth__hero-copy">
            <div className="w2-auth__hero-lbl">{isSignup ? 'Create account' : 'Welcome back'}</div>
            <div className="w2-auth__hero-t">{isSignup ? <>Start your <em>field guide.</em></> : <>Sign in to <em>HimLocal.</em></>}</div>
          </div>
        </div>
        <div className="w2-auth__tabs">
          <button className={`w2-auth__tab ${!isSignup ? 'is-on' : ''}`} onClick={() => setMode('signin')}>Sign in</button>
          <button className={`w2-auth__tab ${isSignup ? 'is-on' : ''}`} onClick={() => setMode('signup')}>Sign up</button>
        </div>
        <div className="w2-auth__body">
          {isSignup && (
            <div className="w2-auth__field">
              <label className="w2-auth__field-l">Your name</label>
              <input className="w2-auth__input" placeholder="Aanya Rana" value={name} onChange={e => setName(e.target.value)}/>
            </div>
          )}
          <div className="w2-auth__field">
            <label className="w2-auth__field-l">Email</label>
            <input className="w2-auth__input" type="email" value={email} onChange={e => setEmail(e.target.value)}/>
          </div>
          <div className="w2-auth__field">
            <label className="w2-auth__field-l">Password</label>
            <input className="w2-auth__input" type="password" placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)}/>
          </div>
          {!isSignup && (
            <div style={{textAlign:'right',marginTop:-6,marginBottom:6}}>
              <button style={{background:0,border:0,font:'600 11px var(--font-body)',color:'var(--slate-600)',cursor:'pointer',padding:4}}>Forgot password?</button>
            </div>
          )}
          <button className="w2-auth__cta" onClick={() => onSignedIn?.({ email, name:name || 'Aanya Rana' })}>
            {isSignup ? 'Create account →' : 'Sign in →'}
          </button>
          <div className="w2-auth__divider">or continue with</div>
          <div className="w2-auth__social">
            <button className="w2-auth__social-btn">G  Google</button>
            <button className="w2-auth__social-btn"></button>
            <button className="w2-auth__social-btn">⊞ Phone</button>
          </div>
          <div className="w2-auth__alt">
            {isSignup
              ? <>Already have an account? <button onClick={() => setMode('signin')}>Sign in</button></>
              : <>New here? <button onClick={() => setMode('signup')}>Create one</button></>}
          </div>
          <div className="w2-auth__legal">
            By continuing, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.
          </div>
        </div>
      </div>
    </div>
  );
}
window.WebAuthModal = WebAuthModal;

// ─── Notifications drawer ───────────────────────────────
function WebNotificationsDrawer({ items, onClose, onMarkAllRead, onPick }) {
  const [filter, setFilter] = useStateWAuth('all');
  const filtered = useMemoWAuth(() => filter === 'all' ? items : items.filter(n => n.kind === filter), [items, filter]);
  const unread = items.filter(n => !n.read).length;
  return (
    <>
      <div className="w2-detail-backdrop" onClick={onClose}/>
      <div className="w2-notif-drawer">
        <div className="w2-notif__head">
          <div className="w2-notif__title">Notifications {unread > 0 && <span style={{font:'600 11px var(--font-mono)',color:'var(--leaf-700)',background:'var(--leaf-100)',padding:'3px 8px',borderRadius:999,marginLeft:8,letterSpacing:'.05em',verticalAlign:'middle'}}>{unread}</span>}</div>
          <button className="w2-notif__close" onClick={onClose}>×</button>
        </div>
        <div className="w2-notif__filter">
          {[['all','All'],['booking','Bookings'],['order','Orders'],['host','Hosts'],['alert','Alerts']].map(([id, lbl]) => (
            <button key={id} className={`w2-notif__chip ${filter === id ? 'is-on' : ''}`} onClick={() => setFilter(id)}>{lbl}</button>
          ))}
        </div>
        <div className="w2-notif__body">
          {filtered.length === 0 ? (
            <div className="w2-notif__empty">
              <div className="w2-notif__empty-h">All caught up.</div>
              <div className="w2-notif__empty-p">No notifications in this category. You'll see booking updates, host messages, and order tracking here.</div>
            </div>
          ) : (
            filtered.map(n => (
              <div key={n.id} className={`w2-notif ${n.read ? '' : 'is-unread'}`} onClick={() => onPick?.(n)}>
                <div className={`w2-notif__icon w2-notif__icon--${n.kind}`}>
                  {n.kind === 'booking' ? '◈' : n.kind === 'order' ? '⊛' : n.kind === 'host' ? '✉' : '⚠'}
                </div>
                <div className="w2-notif__body-c">
                  <div className="w2-notif__name">{n.title}</div>
                  <div className="w2-notif__sub">{n.sub}</div>
                </div>
                <div className="w2-notif__when">{n.when}</div>
              </div>
            ))
          )}
        </div>
        <div className="w2-notif__foot">
          <button onClick={onMarkAllRead}>Mark all as read</button>
        </div>
      </div>
    </>
  );
}
window.WebNotificationsDrawer = WebNotificationsDrawer;

// ─── Empty state primitive ──────────────────────────────
function WebEmptyState({ icon, title, body, ctaLabel, onCta }) {
  return (
    <div className="w2-empty">
      <div className="w2-empty__art">{icon || '◌'}</div>
      <div className="w2-empty__h">{title}</div>
      <div className="w2-empty__p">{body}</div>
      {ctaLabel && <button className="w2-empty__cta" onClick={onCta}>{ctaLabel}</button>}
    </div>
  );
}
window.WebEmptyState = WebEmptyState;

// ─── Loading skeleton primitives ─────────────────────────
function WebSkeletonRow() {
  return (
    <div className="w2-skel-row">
      <div className="w2-skel w2-skel--circle"/>
      <div className="w2-skel-row__body">
        <div className="w2-skel w2-skel--text"/>
        <div className="w2-skel w2-skel--text"/>
      </div>
    </div>
  );
}
function WebSkeletonGrid({ count = 6 }) {
  return (
    <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:16,padding:'24px 0'}}>
      {Array.from({ length:count }).map((_, i) => (
        <div key={i}>
          <div className="w2-skel w2-skel--card"/>
          <div style={{marginTop:12}}>
            <div className="w2-skel w2-skel--title"/>
            <div className="w2-skel w2-skel--text"/>
          </div>
        </div>
      ))}
    </div>
  );
}
window.WebSkeletonRow = WebSkeletonRow;
window.WebSkeletonGrid = WebSkeletonGrid;