// Shell.jsx — the underlying Blutr app shell (status bar, search, alert, bottom nav)

function StatusBar({ time = '9:41' }) {
  return (
    <div className="status-bar">
      <span className="status-time">{time}</span>
      <div className="status-right">
        <svg width="18" height="11" viewBox="0 0 18 11"><rect x="0" y="7" width="3" height="4" rx="0.6" fill="#000"/><rect x="4.5" y="5" width="3" height="6" rx="0.6" fill="#000"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.6" fill="#000"/><rect x="13.5" y="0" width="3" height="11" rx="0.6" fill="#000"/></svg>
        <svg width="16" height="11" viewBox="0 0 16 11"><path d="M8 3C10.2 3 12.2 3.9 13.7 5.4L14.7 4.4C13 2.7 10.6 1.5 8 1.5C5.4 1.5 3 2.7 1.3 4.4L2.3 5.4C3.8 3.9 5.8 3 8 3Z" fill="#000"/><path d="M8 6.5C9.3 6.5 10.5 7 11.4 7.9L12.4 6.9C11.2 5.7 9.7 5 8 5C6.3 5 4.8 5.7 3.6 6.9L4.6 7.9C5.5 7 6.7 6.5 8 6.5Z" fill="#000"/><circle cx="8" cy="9.8" r="1.2" fill="#000"/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="#000" strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="18" height="8" rx="1.5" fill="#000"/><path d="M23 4V8C23.7 7.7 24.2 6.9 24.2 6.5C24.2 6.1 23.7 5.3 23 4.5Z" fill="#000" fillOpacity="0.4"/></svg>
      </div>
    </div>
  );
}

function SearchBar() {
  return (
    <div className="search-bar">
      <span className="search-text">Search</span>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <circle cx="11" cy="11" r="6.5" stroke="#1f2937" strokeWidth="2"/>
        <path d="M16 16 L21 21" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    </div>
  );
}

function AlertBanner({ onDismiss }) {
  return (
    <div className="alert-banner">
      <div className="alert-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="#1f2937" strokeWidth="2"/>
          <line x1="12" y1="7" x2="12" y2="13" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="12" cy="16.5" r="1" fill="#1f2937"/>
        </svg>
      </div>
      <div className="alert-body">
        <div className="alert-title-row">
          <strong>Alert — Karposh (Vardar Riverside)</strong>
        </div>
        <div className="alert-meta">critical in 2 days</div>
        <div className="alert-sub">Rain + upstream discharge. 14 volunteers auto-notified</div>
      </div>
      <button className="alert-x" aria-label="Dismiss" onClick={onDismiss}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#1f2937" strokeWidth="2.4" strokeLinecap="round"/>
        </svg>
      </button>
    </div>
  );
}

function BottomNav({ active = 'map', onTab, onReport }) {
  const tabs = [
    { id: 'map', label: 'Map' },
    { id: 'events', label: 'Events' },
    { id: 'ranking', label: 'Ranking' },
    { id: 'reports', label: 'Reports' },
  ];
  const Icon = ({ id, active }) => {
    const c = active ? '#5BB8C7' : '#1f2937';
    if (id === 'map') return (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
        <path d="M3 6 L9 4 L15 6 L21 4 L21 18 L15 20 L9 18 L3 20 Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round" fill={active?'#E5F4F7':'none'}/>
        <line x1="9" y1="4" x2="9" y2="18" stroke={c} strokeWidth="1.8"/>
        <line x1="15" y1="6" x2="15" y2="20" stroke={c} strokeWidth="1.8"/>
      </svg>
    );
    if (id === 'events') return (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
        <rect x="3.5" y="5.5" width="17" height="15" rx="2" stroke={c} strokeWidth="1.8" fill={active?'#E5F4F7':'none'}/>
        <line x1="3.5" y1="10" x2="20.5" y2="10" stroke={c} strokeWidth="1.8"/>
        <line x1="8" y1="3" x2="8" y2="7" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
        <line x1="16" y1="3" x2="16" y2="7" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    );
    if (id === 'reports') return (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
        <rect x="4" y="3" width="16" height="18" rx="2" stroke={c} strokeWidth="1.8" fill={active?'#E5F4F7':'none'}/>
        <line x1="8" y1="8" x2="16" y2="8" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
        <line x1="8" y1="12" x2="16" y2="12" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
        <line x1="8" y1="16" x2="12" y2="16" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    );
    return (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
        <path d="M7 4 H17 V10 A5 5 0 0 1 7 10 Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round" fill={active?'#E5F4F7':'none'}/>
        <path d="M7 6 H4 V8 A3 3 0 0 0 7 11" stroke={c} strokeWidth="1.8" fill="none"/>
        <path d="M17 6 H20 V8 A3 3 0 0 1 17 11" stroke={c} strokeWidth="1.8" fill="none"/>
        <path d="M9 15 H15 L14 20 H10 Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round" fill={active?'#E5F4F7':'none'}/>
        <line x1="8" y1="20" x2="16" y2="20" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    );
  };

  return (
    <div className="bottom-nav">
      {tabs.slice(0, 2).map(t => (
        <button key={t.id} className={`nav-tab ${active === t.id ? 'is-active' : ''}`} onClick={() => onTab?.(t.id)}>
          <Icon id={t.id} active={active === t.id}/>
          <span>{t.label}</span>
        </button>
      ))}
      <button className="nav-plus" onClick={onReport} aria-label="Report pollution">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M12 5v14M5 12h14" stroke="#fff" strokeWidth="2.4" strokeLinecap="round"/>
        </svg>
      </button>
      {tabs.slice(2).map(t => (
        <button key={t.id} className={`nav-tab ${active === t.id ? 'is-active' : ''}`} onClick={() => onTab?.(t.id)}>
          <Icon id={t.id} active={active === t.id}/>
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
}

function TopBar({ onProfile, onAlerts, alertCount = 0 }) {
  return (
    <div className="top-bar">
      <button className="top-avatar" onClick={onProfile} aria-label="Profile">
        <span>AB</span>
      </button>
      <div className="top-greet">
        <div className="top-hello">Hello, Andrej</div>
        <div className="top-loc">📍 Skopje</div>
      </div>
      <button className="top-bell" onClick={onAlerts} aria-label="Notifications">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M6 16 V11 a6 6 0 0 1 12 0 V16 L20 18 H4 Z" stroke="#1f2937" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
          <path d="M10 21 a2 2 0 0 0 4 0" stroke="#1f2937" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
        </svg>
        {alertCount > 0 && <span className="bell-dot">{alertCount}</span>}
      </button>
    </div>
  );
}

window.TopBar = TopBar;

window.StatusBar = StatusBar;
window.SearchBar = SearchBar;
window.AlertBanner = AlertBanner;
window.BottomNav = BottomNav;