/* global React */
// The Banner — Client Portal: chrome (rail, topbar, primitives, icons).
const { useState: useStateC, useEffect: useEffectC } = React;

// Inline SVG icons (Lucide paths) — rendered by React directly so nothing
// mutates the DOM out from under it. Keeps re-rendering views (the accordion)
// reconciling cleanly. 1.5px stroke, currentColor, to match the brand.
const PB_ICONS = {
  'archive': '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
  'file-text': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
  'radio': '<path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/>',
  'eye': '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  'search': '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  'check': '<path d="M20 6 9 17l-5-5"/>',
  'x': '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
  'arrow-up-right': '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
  'arrow-left': '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
  'chevron-down': '<path d="m6 9 6 6 6-6"/>',
  'arrow-up': '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
  'arrow-down': '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
  'trash-2': '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
  'plus': '<path d="M5 12h14"/><path d="M12 5v14"/>',
};

function PIcon({ name, size = 18, stroke = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'inline-flex', flex: 'none', ...style }}
      dangerouslySetInnerHTML={{ __html: PB_ICONS[name] || '' }} />
  );
}

function PBtn({ variant = 'primary', children, onClick, small }) {
  return <button className={`pb-btn pb-${variant} ${small ? 'pb-sm' : ''}`} onClick={onClick}>{children}</button>;
}

// ---- Left navigation rail -------------------------------------------
function Rail({ active, onNav }) {
  const items = [
    ['briefs', 'file-text', 'Briefs'],
  ];
  return (
    <aside className="pb-rail">
      <div className="pb-rail-top">
        <div className="pb-wm">The Banner</div>
        <div className="pb-rail-sub">Members' Room</div>
      </div>
      <nav className="pb-nav">
        {items.map(([id, icon, label]) => (
          <button key={id} className={`pb-navitem ${active === id ? 'is-active' : ''}`} onClick={() => onNav(id)}>
            <PIcon name={icon} size={17} /><span>{label}</span>
          </button>
        ))}
      </nav>
      <div className="pb-rail-foot">
        <div className="pb-member">
          <div className="pb-avatar">MP</div>
          <div><div className="pb-member-name">W. Caro</div><div className="pb-member-plan">Premium</div></div>
        </div>
      </div>
    </aside>
  );
}

// ---- Top bar (context + request) ------------------------------------
function TopBar({ title, onRequest }) {
  return (
    <header className="pb-topbar">
      <div>
        <div className="pb-top-eyebrow">This week from the desk</div>
        <h1 className="pb-top-title">{title}</h1>
      </div>
      <div className="pb-top-actions">
        <button className="pb-icon-btn"><PIcon name="search" size={18} /></button>
        <PBtn onClick={onRequest}>Request analysis</PBtn>
      </div>
    </header>
  );
}

Object.assign(window, { PIcon, PBtn, Rail, TopBar });