// AMLify dashboard chrome — Sidebar, TopBar, DashboardFrame.
// Reused across nearly every scene of the 5-min tour.

const SIDEBAR_BG = '#0c1222';
const SIDEBAR_ACTIVE = '#5eead4';
const SIDEBAR_HAIRLINE = 'rgba(255,255,255,0.06)';

const navItems = [
  { icon: 'L_LayoutDashboard', label: 'Dashboard' },
  { icon: 'L_Users', label: 'Customers' },
  { icon: 'L_Activity', label: 'Transactions' },
  { icon: 'L_FileText', label: 'Reports' },
  { icon: 'L_FolderOpen', label: 'Programme' },
  { icon: 'L_ScrollText', label: 'Audit log' },
  { icon: 'L_BarChart3', label: 'Analytics' },
  { icon: 'L_BookOpen', label: 'Training' },
];

function Sidebar({ active = 'Dashboard', width = 240 }) {
  return (
    <div style={{
      width, height: '100%',
      background: SIDEBAR_BG,
      color: '#cbd5e1',
      display: 'flex', flexDirection: 'column',
      borderRight: `1px solid ${SIDEBAR_HAIRLINE}`,
      flexShrink: 0,
    }}>
      {/* Logo */}
      <div style={{
        padding: '18px 20px',
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: `1px solid ${SIDEBAR_HAIRLINE}`,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: 'linear-gradient(135deg,#0d9488,#0f766e)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff',
        }}>
          <window.L_ShieldCheck size={16} strokeWidth={2.25}/>
        </div>
        <div style={{ fontSize: 15, fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>
          AMLify
        </div>
      </div>

      {/* Nav */}
      <div style={{ padding: '12px 10px', display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
        {navItems.map(({ icon, label }) => {
          const Ico = window[icon];
          const isActive = label === active;
          return (
            <div key={label} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 12px',
              borderRadius: 8,
              fontSize: 13, fontWeight: isActive ? 600 : 500,
              color: isActive ? SIDEBAR_ACTIVE : '#94a3b8',
              background: isActive ? 'rgba(94,234,212,0.08)' : 'transparent',
              boxShadow: isActive ? 'inset 0 0 0 1px rgba(94,234,212,0.1)' : 'none',
            }}>
              <Ico size={16} strokeWidth={isActive ? 2 : 1.5} />
              <span>{label}</span>
            </div>
          );
        })}
      </div>

      {/* Bottom */}
      <div style={{
        padding: '14px 16px',
        borderTop: `1px solid ${SIDEBAR_HAIRLINE}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: '#475569', color: '#fff',
          fontSize: 11, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>SC</div>
        <div style={{ fontSize: 12 }}>
          <div style={{ color: '#fff', fontWeight: 600 }}>Sarah Chen</div>
          <div style={{ color: '#64748b', fontSize: 10.5 }}>Compliance Officer</div>
        </div>
      </div>
    </div>
  );
}

function TopBar({ title = 'Dashboard', subtitle, right = null }) {
  return (
    <div style={{
      height: 64,
      padding: '0 28px',
      borderBottom: '1px solid rgba(226,232,240,0.8)',
      background: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexShrink: 0,
    }}>
      <div>
        <div style={{ fontSize: 18, fontWeight: 700, color: '#0f172a', letterSpacing: '-0.02em' }}>
          {title}
        </div>
        {subtitle && (
          <div style={{ fontSize: 12, color: '#64748b', marginTop: 2 }}>{subtitle}</div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {right}
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          border: '1px solid rgba(226,232,240,0.8)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#64748b',
        }}>
          <window.L_Bell size={16}/>
        </div>
      </div>
    </div>
  );
}

// Browser chrome wrapper — used to frame the dashboard like a real screenshot.
function BrowserFrame({ url = 'app.amlify.au', children, style }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#fff',
      borderRadius: 14,
      overflow: 'hidden',
      border: '1px solid rgba(15,23,42,0.08)',
      boxShadow: '0 20px 60px -20px rgba(15,23,42,0.25), 0 8px 24px -8px rgba(15,23,42,0.12)',
      display: 'flex', flexDirection: 'column',
      ...style,
    }}>
      <div style={{
        height: 36,
        background: '#f8fafc',
        borderBottom: '1px solid rgba(226,232,240,0.8)',
        display: 'flex', alignItems: 'center',
        padding: '0 14px', gap: 14, flexShrink: 0,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#fb7185' }}/>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#fbbf24' }}/>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#34d399' }}/>
        </div>
        <div style={{
          flex: 1, height: 22,
          background: '#fff',
          border: '1px solid rgba(226,232,240,0.8)',
          borderRadius: 6,
          display: 'flex', alignItems: 'center',
          padding: '0 10px', gap: 8,
          fontSize: 11, color: '#64748b',
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        }}>
          <window.L_Lock size={10} color="#10b981" strokeWidth={2.5}/>
          {url}
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {children}
      </div>
    </div>
  );
}

function DashboardFrame({ activeNav = 'Dashboard', topTitle = 'Dashboard', topSubtitle, topRight, children, url = 'app.amlify.au' }) {
  return (
    <BrowserFrame url={url}>
      <Sidebar active={activeNav}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#fafaf9', minWidth: 0 }}>
        <TopBar title={topTitle} subtitle={topSubtitle} right={topRight}/>
        <div style={{ flex: 1, padding: 28, overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    </BrowserFrame>
  );
}

Object.assign(window, { Sidebar, TopBar, BrowserFrame, DashboardFrame });