import { motion } from 'framer-motion'
import { FileText, ArrowLeft } from 'lucide-react'
import { useLang } from '@/context/LangContext'

const MSC_URL = 'https://www.msc.ir/fa-IR/Portal/8029/page/%D9%85%D8%A7%D9%87%D9%86%D8%A7%D9%85%D9%87-%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C-%D8%B1%D8%A7%D9%87%D8%A8%D8%B1%D8%AF%DB%8C-%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87'

const NAVY = '#032340'
const GOLD = '#CD9E53'
const EASE = [0.22, 1, 0.36, 1] as const

type ScrollDir = 'left' | 'right' | 'up'

/* 5 monthly-magazine covers exported from the Figma design */
const COVERS: { img: string; num: string; dir: ScrollDir }[] = [
  { img: '/factory/cover-1.png', num: '۵۵', dir: 'right' },
  { img: '/factory/cover-2.png', num: '۵۴', dir: 'up' },
  { img: '/factory/cover-3.png', num: '۵۳', dir: 'left' },
  { img: '/factory/cover-4.png', num: '۵۲', dir: 'up' },
  { img: '/factory/cover-5.png', num: '۵۱', dir: 'left' },
]

function ScrollAnimation({ children, direction = 'up' }: { children: React.ReactNode; direction?: ScrollDir }) {
  const offset =
    direction === 'left' ? { x: -50, y: 0 } :
    direction === 'right' ? { x: 50, y: 0 } :
    { x: 0, y: 50 }
  return (
    <motion.div
      initial={{ opacity: 0, ...offset }}
      whileInView={{ opacity: 1, x: 0, y: 0 }}
      viewport={{ once: true, amount: 0.35 }}
      transition={{ duration: 0.6, ease: EASE }}
      style={{ height: '100%' }}
    >
      {children}
    </motion.div>
  )
}

/* compact card — cover + navy download bar + issue-number badge */
function ReportCard({ img, num, lang }: { img: string; num: string; lang: 'fa' | 'en' }) {
  return (
    <article
      style={{
        background: '#e9e9e9', borderRadius: 12, overflow: 'hidden', cursor: 'pointer',
        boxShadow: '0 8px 24px -16px rgba(7,29,73,0.35)', display: 'flex', flexDirection: 'column', height: '100%',
        transition: 'transform 180ms, box-shadow 180ms',
      }}
      onMouseEnter={(e) => { const d = e.currentTarget; d.style.transform = 'translateY(-4px)'; d.style.boxShadow = '0 16px 34px -18px rgba(7,29,73,0.42)' }}
      onMouseLeave={(e) => { const d = e.currentTarget; d.style.transform = 'translateY(0)'; d.style.boxShadow = '0 8px 24px -16px rgba(7,29,73,0.35)' }}
    >
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '14px 14px 8px', flexGrow: 1 }}>
        <img src={img} alt="" style={{ width: '100%', height: 184, objectFit: 'contain', display: 'block' }} />
      </div>
      <a
        href={MSC_URL} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}
        style={{ background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 12px', textDecoration: 'none', gap: 8, direction: 'ltr' }}
      >
        <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#fff', fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap' }}>
          <FileText size={14} color={GOLD} />
          {lang === 'fa' ? 'دانلود ماهنامه' : 'Download'}
        </span>
        <span style={{ width: 26, height: 26, borderRadius: '50%', background: GOLD, color: NAVY, fontSize: 10.5, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{num}</span>
      </a>
    </article>
  )
}

export default function FactoryReportsScroll() {
  const { lang } = useLang()

  return (
    <section style={{ background: '#faf7f4', padding: '40px 0' }} dir={lang === 'fa' ? 'rtl' : 'ltr'}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">

        {/* compact heading — gold accent on the leading (right) edge */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
          <span style={{ width: 3, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
          <h2 style={{ fontSize: 'clamp(19px, 2vw, 26px)', fontWeight: 900, color: NAVY, margin: 0 }}>ماهنامه تحلیلی کارخانه</h2>
        </div>

        {/* 5 cards + «view all» on the left */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }} className="max-lg:!flex-col max-lg:!items-stretch max-lg:!gap-5">
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }} className="max-lg:!grid-cols-3 max-sm:!grid-cols-2">
            {COVERS.map((c, i) => (
              // 5th+ cover is hidden on phones so the 2-col grid stays a clean 2×2 (no orphan)
              <div key={c.img} className={i >= 4 ? 'max-sm:!hidden' : undefined}>
                <ScrollAnimation direction={c.dir}>
                  <ReportCard img={c.img} num={c.num} lang={lang} />
                </ScrollAnimation>
              </div>
            ))}
          </div>
          <a
            href={MSC_URL} target="_blank" rel="noopener noreferrer"
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, textDecoration: 'none', flexShrink: 0, width: 84 }}
            className="max-lg:!flex-row max-lg:!w-auto max-lg:!justify-center"
          >
            <span style={{ width: 40, height: 40, borderRadius: '50%', border: `1.5px solid ${GOLD}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <ArrowLeft size={18} color={GOLD} className="no-rtl-flip" />
            </span>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: NAVY, whiteSpace: 'nowrap' }}>مشاهده همه</span>
          </a>
        </div>

      </div>
    </section>
  )
}
