/* Company Stock Price — shimmer / skeleton loaders */

function Shimmer({ w, h, r = 8, circle, className, style }) {
  return (
    <div
      className={`shimmer ${circle ? 'shimmer-circle' : ''} ${className || ''}`}
      style={{ width: w, height: h, borderRadius: circle ? '50%' : r, ...style }}
      aria-hidden="true"
    />
  );
}

function SkHeader({ titleW = 160, subW = 240 }) {
  return (
    <div className="sk-header" style={{ marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Shimmer w={titleW} h={30} r={8} />
        <Shimmer w={52} h={22} r={999} />
      </div>
      <Shimmer w={subW} h={14} r={6} style={{ marginTop: 8 }} />
    </div>
  );
}

function SkIndexStrip({ count = 6 }) {
  return (
    <div className="index-strip section sk-index-strip">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="sk-index-tile">
          <Shimmer w="55%" h={11} r={5} />
          <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
            <Shimmer w={72} h={18} r={6} />
            <Shimmer w={44} h={18} r={999} />
          </div>
        </div>
      ))}
    </div>
  );
}

function SkMoverRow() {
  return (
    <div className="sk-mover-row">
      <Shimmer w={32} h={32} circle />
      <div style={{ flex: 1 }}>
        <Shimmer w="70%" h={13} r={5} />
        <Shimmer w="35%" h={11} r={5} style={{ marginTop: 6 }} />
      </div>
      <Shimmer w={72} h={28} r={6} />
      <div style={{ textAlign: 'right' }}>
        <Shimmer w={64} h={13} r={5} />
        <Shimmer w={48} h={18} r={999} style={{ marginTop: 6, marginLeft: 'auto' }} />
      </div>
    </div>
  );
}

function SkQuoteCard() {
  return (
    <div className="sk-quote-card card">
      <div style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
        <Shimmer w={34} h={34} circle />
        <div style={{ flex: 1 }}>
          <Shimmer w="80%" h={13} r={5} />
          <Shimmer w="40%" h={11} r={5} style={{ marginTop: 6 }} />
        </div>
        <div style={{ textAlign: 'right' }}>
          <Shimmer w={56} h={13} r={5} />
          <Shimmer w={42} h={18} r={999} style={{ marginTop: 6 }} />
        </div>
      </div>
    </div>
  );
}

function SkeletonMarkets() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading markets">
      <SkHeader titleW={120} subW={280} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 18 }}>
        <Shimmer w={96} h={32} r={999} />
      </div>
      <SkIndexStrip count={6} />
      <div className="section sk-grid-2-1">
        <div className="card sk-chart-card">
          <Shimmer w={140} h={12} r={5} />
          <div style={{ display: 'flex', gap: 10, marginTop: 12, alignItems: 'center' }}>
            <Shimmer w={120} h={32} r={8} />
            <Shimmer w={56} h={22} r={999} />
          </div>
          <Shimmer w="100%" h={220} r={10} style={{ marginTop: 16 }} />
        </div>
        <div className="card">
          <Shimmer w={120} h={12} r={5} />
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="sk-stat-row">
              <Shimmer w="45%" h={13} r={5} />
              <Shimmer w={32} h={13} r={5} />
            </div>
          ))}
          <Shimmer w="100%" h={8} r={6} style={{ marginTop: 16 }} />
        </div>
      </div>
      <div className="section grid-2">
        {[0, 1].map((c) => (
          <div key={c} className="card">
            <Shimmer w={110} h={20} r={6} style={{ marginBottom: 8 }} />
            {[0, 1, 2, 3, 4].map((i) => <SkMoverRow key={i} />)}
          </div>
        ))}
      </div>
      <div className="section">
        <Shimmer w={100} h={20} r={6} style={{ marginBottom: 12 }} />
        <div className="grid-3">
          {[0, 1, 2, 3, 4, 5].map((i) => <SkQuoteCard key={i} />)}
        </div>
      </div>
    </div>
  );
}

function SkeletonScreener() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading screener">
      <SkHeader titleW={180} subW={220} />
      <div className="filter-bar section" style={{ marginBottom: 14 }}>
        <div className="pill-row">
          {[0, 1, 2, 3, 4].map((i) => <Shimmer key={i} w={72} h={34} r={999} />)}
        </div>
        <Shimmer w={200} h={38} r={9} style={{ marginLeft: 'auto' }} />
      </div>
      <div className="card section" style={{ padding: 0, overflow: 'hidden' }}>
        <div className="table-wrap">
          <table className="screener sk-table">
            <thead>
              <tr>
                {[40, 180, 70, 60, 80, 50, 70, 70, 50].map((w, i) => (
                  <th key={i}><Shimmer w={w} h={12} r={4} /></th>
                ))}
              </tr>
            </thead>
            <tbody>
              {Array.from({ length: 10 }).map((_, i) => (
                <tr key={i}>
                  <td><Shimmer w={20} h={12} r={4} /></td>
                  <td>
                    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                      <Shimmer w={30} h={30} circle />
                      <div style={{ flex: 1 }}>
                        <Shimmer w="75%" h={12} r={4} />
                        <Shimmer w="40%" h={10} r={4} style={{ marginTop: 5 }} />
                      </div>
                    </div>
                  </td>
                  {[60, 50, 70, 40, 60, 60, 44].map((w, j) => (
                    <td key={j}><Shimmer w={w} h={12} r={4} /></td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function SkeletonIndices({ showTabs }) {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading indices">
      <SkHeader titleW={100} subW={200} />
      {showTabs !== false && (
        <div className="pill-row" style={{ marginBottom: 14 }}>
          <Shimmer w={64} h={34} r={999} />
          <Shimmer w={100} h={34} r={999} />
        </div>
      )}
      <div className="idx-grid section">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="idx-card sk-idx-card">
            <Shimmer w="50%" h={12} r={5} />
            <Shimmer w={100} h={26} r={8} style={{ margin: '10px 0' }} />
            <Shimmer w="100%" h={34} r={6} />
          </div>
        ))}
      </div>
      <div className="detail-grid section">
        <div className="card">
          <Shimmer w={120} h={12} r={5} />
          <Shimmer w={140} h={32} r={8} style={{ marginTop: 10 }} />
          <Shimmer w="100%" h={240} r={10} style={{ marginTop: 16 }} />
          <Shimmer w="90%" h={12} r={5} style={{ marginTop: 12 }} />
        </div>
        <div className="card">
          <Shimmer w={140} h={18} r={6} style={{ marginBottom: 12 }} />
          {[0, 1, 2, 3, 4].map((i) => (
            <div key={i} className="sk-member-row">
              <Shimmer w={28} h={28} circle />
              <Shimmer w="55%" h={13} r={5} />
              <Shimmer w={48} h={12} r={5} />
              <Shimmer w={40} h={18} r={999} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SkeletonFunds() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading funds">
      <SkHeader titleW={150} subW={260} />
      <div className="filter-bar section" style={{ marginBottom: 14 }}>
        <div className="pill-row">
          {[0, 1, 2, 3, 4].map((i) => <Shimmer key={i} w={80} h={34} r={999} />)}
        </div>
      </div>
      <div className="card section" style={{ padding: 0, overflow: 'hidden' }}>
        <table className="data-table sk-table">
          <thead>
            <tr>
              {[160, 80, 70, 50, 50, 70, 60, 50].map((w, i) => (
                <th key={i}><Shimmer w={w} h={12} r={4} /></th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: 8 }).map((_, i) => (
              <tr key={i}>
                <td>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                    <Shimmer w={32} h={32} circle />
                    <div>
                      <Shimmer w={140} h={13} r={4} />
                      <Shimmer w={80} h={10} r={4} style={{ marginTop: 5 }} />
                    </div>
                  </div>
                </td>
                {[70, 60, 44, 44, 70, 44, 50].map((w, j) => (
                  <td key={j}><Shimmer w={w} h={12} r={4} /></td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function SkeletonNews() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading news">
      <SkHeader titleW={200} subW={220} />
      <div className="pill-row section" style={{ marginBottom: 14 }}>
        {[0, 1, 2, 3, 4, 5].map((i) => <Shimmer key={i} w={72} h={34} r={999} />)}
      </div>
      <div className="news-layout section">
        <div>
          <div className="card sk-news-featured">
            <Shimmer w="100%" h={180} r={0} style={{ borderRadius: '12px 12px 0 0' }} />
            <div style={{ padding: 16 }}>
              <Shimmer w={72} h={22} r={999} />
              <Shimmer w="95%" h={22} r={6} style={{ marginTop: 12 }} />
              <Shimmer w="80%" h={22} r={6} style={{ marginTop: 8 }} />
              <Shimmer w="100%" h={14} r={5} style={{ marginTop: 14 }} />
              <Shimmer w="100%" h={14} r={5} style={{ marginTop: 6 }} />
              <Shimmer w={160} h={12} r={5} style={{ marginTop: 14 }} />
            </div>
          </div>
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="card sk-news-row" style={{ marginTop: 12 }}>
              <Shimmer w={64} h={20} r={999} />
              <Shimmer w="90%" h={16} r={5} style={{ marginTop: 10 }} />
              <Shimmer w={120} h={12} r={5} style={{ marginTop: 8 }} />
            </div>
          ))}
        </div>
        <aside>
          <div className="card section">
            <Shimmer w={80} h={18} r={6} style={{ marginBottom: 12 }} />
            {[0, 1, 2, 3, 4].map((i) => (
              <div key={i} className="sk-stat-row">
                <Shimmer w="45%" h={13} r={5} />
                <Shimmer w={90} h={13} r={5} />
              </div>
            ))}
          </div>
        </aside>
      </div>
    </div>
  );
}

function SkeletonIpo() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading IPOs">
      <SkHeader titleW={140} subW={240} />
      <div className="pill-row section" style={{ marginBottom: 14 }}>
        {[0, 1, 2].map((i) => <Shimmer key={i} w={90} h={34} r={999} />)}
      </div>
      <div className="ipo-grid section">
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <div key={i} className="card sk-ipo-card">
            <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
              <Shimmer w={44} h={44} circle />
              <div style={{ flex: 1 }}>
                <Shimmer w="75%" h={16} r={5} />
                <Shimmer w="50%" h={12} r={5} style={{ marginTop: 8 }} />
              </div>
              <Shimmer w={64} h={24} r={999} />
            </div>
            <div className="sk-ipo-stats">
              {[0, 1, 2, 3].map((j) => (
                <div key={j}>
                  <Shimmer w={60} h={10} r={4} />
                  <Shimmer w={80} h={14} r={5} style={{ marginTop: 6 }} />
                </div>
              ))}
            </div>
            <Shimmer w="100%" h={36} r={8} style={{ marginTop: 14 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function SkeletonStock() {
  return (
    <div className="sk-page" aria-busy="true" aria-label="Loading stock">
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 20 }}>
        <Shimmer w={52} h={52} r={12} />
        <div style={{ flex: 1 }}>
          <Shimmer w="55%" h={24} r={8} />
          <Shimmer w="30%" h={14} r={6} style={{ marginTop: 8 }} />
        </div>
        <Shimmer w={80} h={36} r={999} />
      </div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
        <Shimmer w={72} h={36} r={999} />
        <Shimmer w={48} h={36} r={999} />
        <Shimmer w={48} h={36} r={999} />
      </div>
      <div className="card section">
        <Shimmer w="100%" h={280} r={10} />
      </div>
      <div className="grid-2 section">
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className="card" style={{ padding: 16 }}>
            <Shimmer w={80} h={12} r={5} />
            <Shimmer w={100} h={22} r={6} style={{ marginTop: 10 }} />
            <Shimmer w={60} h={11} r={5} style={{ marginTop: 6 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function SkeletonTicker() {
  return (
    <div className="ticker-bar sk-ticker" aria-hidden="true">
      <div className="ticker-track">
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} className="sk-ticker-item">
            <Shimmer w={48} h={12} r={4} />
            <Shimmer w={56} h={12} r={4} />
            <Shimmer w={44} h={12} r={4} />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  Shimmer,
  SkHeader,
  SkeletonMarkets,
  SkeletonScreener,
  SkeletonIndices,
  SkeletonFunds,
  SkeletonNews,
  SkeletonIpo,
  SkeletonStock,
  SkeletonTicker,
});