import { useState, useEffect, useRef } from 'react'

const BASE_METALS = [
  { id: 'cu', name: 'مس',        value: 9_512,  unit: '$/t', change: +1.4, trend: 'up'   as const },
  { id: 'al', name: 'آلومینیوم', value: 2_548,  unit: '$/t', change: -0.8, trend: 'down' as const },
  { id: 'zn', name: 'روی',       value: 2_913,  unit: '$/t', change: +0.5, trend: 'up'   as const },
  { id: 'ni', name: 'نیکل',      value: 16_840, unit: '$/t', change: -1.2, trend: 'down' as const },
  { id: 'pb', name: 'سرب',       value: 1_924,  unit: '$/t', change: +0.3, trend: 'up'   as const },
  { id: 'sn', name: 'قلع',       value: 26_150, unit: '$/t', change: -0.6, trend: 'down' as const },
]

const UPDATE_LOG = [
  { label: 'شمش فولاد', delta: '+۱۲۰', t: '۱۴:۴۸' },
  { label: 'میلگرد A3',  delta: '-۸۵',  t: '۱۴:۴۵' },
  { label: 'آهن قراضه',  delta: '+۶',   t: '۱۴:۴۱' },
  { label: 'تیرآهن ۱۴',  delta: '+۲۱۰', t: '۱۴:۳۷' },
  { label: 'فرو منگنز',  delta: '-۳۰',  t: '۱۴:۳۲' },
]

export default function SnapshotBar() {
  const [now, setNow] = useState(() => new Date())
  const [logIdx, setLogIdx] = useState(0)
  const logRef = useRef(logIdx)
  logRef.current = logIdx

  useEffect(() => {
    const c = setInterval(() => setNow(new Date()), 1000)
    const l = setInterval(() => setLogIdx(i => (i + 1) % UPDATE_LOG.length), 2600)
    return () => { clearInterval(c); clearInterval(l) }
  }, [])

  const hh = now.getHours().toString().padStart(2, '0')
  const mm = now.getMinutes().toString().padStart(2, '0')
  const ss = now.getSeconds().toString().padStart(2, '0')

  return (
    <div style={{ direction: 'rtl', borderBottom: '2px solid var(--ink)', width: '100%', overflow: 'hidden' }}>
      {/* grid: metals(1fr) | sidebar(200px) — in RTL: metals=right, sidebar=left */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 200px' }} className="max-md:!grid-cols-1">

        {/* metals tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)' }} className="max-lg:!grid-cols-3 max-sm:!grid-cols-2">
          {BASE_METALS.map((m, idx) => (
            <div key={m.id} style={{
              padding: '12px 14px',
              borderRight: idx < BASE_METALS.length - 1 ? '1px solid var(--rule-thin)' : 'none',
            }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-4)', marginBottom: 4 }}>{m.name}</div>
              <div style={{ fontSize: 16, fontWeight: 900, color: 'var(--ink)', lineHeight: 1, marginBottom: 3, fontVariantNumeric: 'tabular-nums' }}>
                {m.value.toLocaleString()}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ fontSize: 10, fontWeight: 700, color: m.trend === 'up' ? 'var(--green-ink)' : 'var(--red)' }}>
                  {m.trend === 'up' ? '↑' : '↓'} {Math.abs(m.change).toFixed(1)}٪
                </span>
                <span style={{ fontSize: 9, color: 'var(--ink-5)' }}>{m.unit}</span>
              </div>
            </div>
          ))}
        </div>

        {/* sidebar */}
        <div style={{
          background: 'var(--ink)', color: 'var(--paper)',
          padding: '14px 18px',
          display: 'flex', flexDirection: 'column', gap: 10,
          borderRight: '1px solid rgba(255,255,255,0.08)',
        }} className="max-md:hidden">

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ position: 'relative', display: 'inline-flex' }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#4ade80', display: 'block' }} />
                <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#4ade80', animation: 'ping 1.4s cubic-bezier(0,0,0.2,1) infinite' }} />
              </span>
              <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '2px', color: '#4ade80' }}>LIVE</span>
            </div>
            <span style={{ fontSize: 12, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'rgba(255,255,255,0.65)', fontFamily: 'monospace' }}>
              {hh}:{mm}:{ss}
            </span>
          </div>

          <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 8 }}>
            <div style={{ fontSize: 9, letterSpacing: '2px', color: 'rgba(255,255,255,0.3)', marginBottom: 7 }}>آخرین تغییرات</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5, overflow: 'hidden', height: 72 }}>
              {UPDATE_LOG.map((item, i) => {
                const dist = (i - logIdx + UPDATE_LOG.length) % UPDATE_LOG.length
                const opacity = dist === 0 ? 1 : dist === 1 ? 0.5 : dist === 2 ? 0.22 : 0
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', opacity, transition: 'opacity 0.5s', fontSize: 10.5 }}>
                    <span style={{ color: 'rgba(255,255,255,0.75)' }}>{item.label}</span>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <span style={{ fontWeight: 700, color: item.delta.startsWith('+') ? '#4ade80' : '#f87171' }}>{item.delta}</span>
                      <span style={{ color: 'rgba(255,255,255,0.25)', fontSize: 9 }}>{item.t}</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>

          <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 7 }}>
            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.25)', letterSpacing: '1px' }}>بازار فولاد ایران · تهران</div>
          </div>
        </div>

      </div>
      <style>{`@keyframes ping { 75%,100%{transform:scale(2);opacity:0} }`}</style>
    </div>
  )
}
