// Left rail navigation

const Sidebar = ({ view, setView, onNew, onOpenRecent, history = [] }) => {
  const items = [
    { id: 'analyze', label: 'Analyze', icon: 'search' },
    { id: 'chat', label: 'Chat', icon: 'message' },
    { id: 'watchlist', label: 'Watchlist', icon: 'star' },
    { id: 'history', label: 'History', icon: 'history' },
  ];

  return (
    <aside style={{
      width: 220, flexShrink: 0,
      borderRight: '1px solid var(--line)',
      background: 'rgba(10,7,15,0.6)',
      backdropFilter: 'blur(8px)',
      display: 'flex', flexDirection: 'column',
      padding: '20px 14px',
    }}>
      {/* Logo — click to go home */}
      <button
        onClick={onNew}
        title="Home"
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '4px 10px', marginBottom: 24,
          background: 'transparent', border: 'none', cursor: 'pointer',
          textAlign: 'left', borderRadius: 2,
          transition: 'opacity 0.15s',
        }}
        onMouseEnter={(e) => e.currentTarget.style.opacity = '0.75'}
        onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
      >
        <img src="/sixclaw.png" alt="Sixclaw" width={32} height={32} style={{
          display: 'block', objectFit: 'contain',
          filter: 'drop-shadow(0 0 10px rgba(168,130,255,0.55))',
        }} />
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: 0.5, color: 'var(--ink)' }}>SIXCLAW</div>
          <div style={{ fontSize: 9, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: 1, textTransform: 'uppercase' }}>v0.4 · solana</div>
        </div>
      </button>

      {/* New analysis */}
      <button onClick={onNew} className="ob" style={{
        width: '100%', height: 40, marginBottom: 18, letterSpacing: 0.3,
      }}>
        + New Analysis
      </button>

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {items.map(it => {
          const active = view === it.id;
          return (
            <button key={it.id} onClick={() => setView(it.id)} style={{
              display: 'flex', alignItems: 'center', gap: 11,
              padding: '9px 12px', borderRadius: 2,
              background: active ? 'rgba(124,77,255,0.14)' : 'transparent',
              color: active ? 'var(--ink)' : 'var(--ink-3)',
              fontSize: 13, fontWeight: 500,
              borderLeft: active ? '2px solid var(--purple)' : '2px solid transparent',
              paddingLeft: active ? 10 : 12,
              transition: 'background 0.15s, color 0.15s',
              textAlign: 'left',
            }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = 'var(--ink-2)'; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = 'var(--ink-3)'; }}>
              <Icon name={it.icon} size={15} />
              <span>{it.label}</span>
            </button>
          );
        })}
      </nav>

      {/* Recent — only real coins the user has analyzed */}
      <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
        <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 600, padding: '0 12px', marginBottom: 8 }}>
          Recent
        </div>
        {history.length === 0 ? (
          <div style={{ padding: '8px 12px', fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.5 }}>
            Coins you analyze appear here.
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {history.slice(0, 6).map(it => {
              const change = it.change24h;
              const changeColor = change == null ? 'var(--ink-4)' : (change >= 0 ? 'var(--green)' : 'var(--red)');
              return (
                <button key={it.ca || it.ticker} onClick={() => onOpenRecent && onOpenRecent(it)} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '7px 12px', borderRadius: 2,
                  fontSize: 12, color: 'var(--ink-3)', textAlign: 'left',
                  transition: 'background 0.12s',
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(168,130,255,0.06)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <span style={{ flex: 1, color: 'var(--ink-2)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${it.ticker}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: changeColor }}>
                    {change == null ? '—' : window.fmtPct(change)}
                  </span>
                </button>
              );
            })}
          </div>
        )}
      </div>

      <div style={{ flex: 1 }} />

      {/* Token + socials */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
        <CaButton />
        <a
          href="https://x.com/sixclawfun"
          target="_blank"
          rel="noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            padding: '8px 10px', borderRadius: 2,
            background: 'transparent', border: '1px solid var(--line-2)',
            color: 'var(--ink-2)', fontSize: 12, fontWeight: 500,
            textDecoration: 'none',
            transition: 'border-color 0.15s, color 0.15s, background 0.15s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--purple)'; e.currentTarget.style.color = 'var(--purple-glow)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line-2)'; e.currentTarget.style.color = 'var(--ink-2)'; }}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          @sixclawfun
        </a>
      </div>

      {/* Quiet footer */}
      <div style={{ padding: '0 4px', fontSize: 10, color: 'var(--ink-4)', fontFamily: 'var(--mono)', letterSpacing: 0.5 }}>
        not financial advice
      </div>
    </aside>
  );
};

const SIXCLAW_CA = 'D6fRJAGc9EenvySSd9eb3zrKEX3DZ6N8GfkLYgFUpump';

const CaButton = () => {
  const [copied, setCopied] = React.useState(false);
  const isLive = SIXCLAW_CA && SIXCLAW_CA !== 'TBD';
  const onClick = () => {
    if (!isLive) return;
    try {
      navigator.clipboard?.writeText(SIXCLAW_CA);
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    } catch {}
  };
  return (
    <button
      onClick={onClick}
      title={isLive ? 'Click to copy contract address' : 'CA coming soon'}
      style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 10px', borderRadius: 2,
        background: 'transparent', border: '1px solid var(--purple)',
        color: 'var(--purple-glow)', fontSize: 11, fontWeight: 500,
        cursor: isLive ? 'pointer' : 'default',
        transition: 'background 0.15s, color 0.15s',
        width: '100%',
      }}
      onMouseEnter={(e) => { if (isLive) e.currentTarget.style.background = 'rgba(124,77,255,0.10)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
    >
      <span style={{ fontSize: 9, fontFamily: 'var(--mono)', color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1 }}>$SIXCLAW</span>
      <span style={{ flex: 1, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
        {!isLive ? 'CA — coming soon' : `${SIXCLAW_CA.slice(0, 4)}…${SIXCLAW_CA.slice(-4)}`}
      </span>
      <span style={{ fontSize: 10, color: copied ? 'var(--green)' : 'var(--ink-3)', fontFamily: 'var(--mono)' }}>
        {copied ? '✓' : (isLive ? '⧉' : '')}
      </span>
    </button>
  );
};

window.Sidebar = Sidebar;