import { useState } from 'react'
import { MagicTextGroup } from '@/components/ui/magic-text'
import { Link, useParams, Navigate } from 'react-router-dom'
import { Lock, Download, FileText, ChevronRight, Tag, User } from 'lucide-react'
import { reports } from '@/data/reports'
import type { Report } from '@/data/reports'

/* ─── helpers ────────────────────────────────────────────── */
function formatPrice(price: number): string {
  return price.toLocaleString('fa-IR') + ' تومان'
}

const TYPE_LABELS: Record<string, string> = {
  quarterly: 'گزارش فصلی',
  flash: 'Flash Report',
  risk: 'گزارش ریسک',
  free: 'گزارش رایگان',
  special: 'گزارش ویژه',
}

/* ─── Persian lorem paragraphs ──────────────────────────── */
const LOREM_PARAGRAPHS = [
  'صنعت فولاد ایران در دوره‌ای از تحولات عمیق ساختاری قرار دارد. ظرفیت تولیدی کشور در سال‌های اخیر به رکوردهای تاریخی دست یافته، اما همزمان چالش‌های پیچیده‌ای در حوزه صادرات، تأمین مالی و دسترسی به بازارهای جهانی در برابر صنعت قرار گرفته است. این گزارش با بهره‌گیری از داده‌های اولیه و تحلیل‌های کمی، وضعیت کنونی را از زوایای مختلف بررسی می‌کند.',
  'در این مطالعه، رویکرد ترکیبی از تحلیل سری‌های زمانی قیمتی، مدل‌سازی اقتصادسنجی و تحلیل سناریو به‌کار رفته است. داده‌های مورد استفاده از منابع معتبر بین‌المللی از جمله World Steel Association، Platts و گزارش‌های رسمی وزارت صنعت، معدن و تجارت جمع‌آوری شده‌اند. دوره تحلیل پنج سال اخیر را در بر می‌گیرد.',
  'یافته‌های کلیدی این گزارش نشان می‌دهد که تقاضای داخلی فولاد در بخش ساختمان و زیرساخت در میان‌مدت روند کاهشی دارد، در حالی که تقاضای صنعتی و ماشین‌سازی رشد ملایمی را تجربه خواهد کرد. این تحول در ترکیب تقاضا مستلزم بازنگری در استراتژی محصول کارخانه‌های فولادی کشور است.',
  'توصیه‌های سیاست‌گذاری این گزارش در سه محور اصلی ارائه می‌شود: اول، اصلاح ساختار قیمت‌گذاری انرژی و مواد اولیه برای بهبود رقابت‌پذیری صادراتی؛ دوم، توسعه مسیرهای دسترسی به بازارهای هدف جایگزین در آفریقا و آسیای جنوب‌شرقی؛ سوم، تقویت ظرفیت مذاکراتی بخش خصوصی در قراردادهای بین‌المللی.',
]

const TOC_ITEMS = [
  'خلاصه مدیریتی',
  'بررسی وضعیت کنونی بازار',
  'تحلیل روندهای عرضه و تقاضا',
  'مدل‌سازی سناریوهای آینده',
  'تأثیرات ژئوپلیتیک و محیط کسب‌وکار',
  'تحلیل رقابت‌پذیری و موقعیت ایران',
  'توصیه‌های سیاست‌گذاری و اجرایی',
  'پیوست‌ها: داده‌ها و روش‌شناسی',
]

/* ─── related reports sidebar ────────────────────────────── */
function RelatedReports({ current }: { current: Report }) {
  const related = reports
    .filter((r) => r.id !== current.id && r.category === current.category)
    .slice(0, 3)

  if (related.length === 0) return null

  return (
    <div style={{ marginTop: 16 }}>
      <p
        style={{
          fontSize: 9,
          fontWeight: 700,
          textTransform: 'uppercase',
          letterSpacing: '2px',
          color: 'var(--ink-5)',
          marginBottom: 12,
        }}
      >
        گزارش‌های مرتبط
      </p>
      {related.map((r, i) => (
        <div
          key={r.id}
          style={{
            borderBottom: i < related.length - 1 ? '1px solid var(--rule-thin)' : 'none',
            padding: '12px 0',
          }}
        >
          <Link
            to={`/reports/${r.id}`}
            style={{
              fontSize: 12,
              fontWeight: 600,
              color: 'var(--ink)',
              textDecoration: 'none',
              lineHeight: 1.4,
              display: 'block',
              marginBottom: 6,
            }}
          >
            {r.title}
          </Link>
          <span
            style={{
              fontSize: 11,
              fontWeight: 900,
              color: r.isFree ? 'var(--green-ink)' : 'var(--ink)',
            }}
          >
            {r.isFree ? 'رایگان' : formatPrice(r.price)}
          </span>
        </div>
      ))}
    </div>
  )
}

/* ─── main component ─────────────────────────────────────── */
export default function ReportDetail() {
  const { id } = useParams<{ id: string }>()
  const [buyHovered, setBuyHovered] = useState(false)
  const [dlHovered, setDlHovered] = useState(false)

  const report = reports.find((r) => r.id === id)

  if (!report) return <Navigate to="/archive" replace />

  return (
    <div
      style={{
        maxWidth: 1280,
        margin: '0 auto',
        padding: '48px 48px 80px',
        direction: 'rtl',
      }}
    >
      {/* ─── Breadcrumb ────────────────────────────────── */}
      <nav
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          marginBottom: 40,
          flexWrap: 'wrap',
        }}
      >
        <Link
          to="/archive"
          style={{ fontSize: 11, color: 'var(--ink-5)', textDecoration: 'none' }}
        >
          گزارش‌ها
        </Link>
        <ChevronRight size={10} style={{ color: 'var(--ink-5)', transform: 'scaleX(-1)' }} />
        <Link
          to={`/archive?category=${report.category}`}
          style={{ fontSize: 11, color: 'var(--ink-5)', textDecoration: 'none' }}
        >
          {report.category}
        </Link>
        <ChevronRight size={10} style={{ color: 'var(--ink-5)', transform: 'scaleX(-1)' }} />
        <span
          style={{
            fontSize: 11,
            color: 'var(--ink)',
            fontWeight: 600,
            maxWidth: 300,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {report.title}
        </span>
      </nav>

      {/* ─── Two-column layout ─────────────────────────── */}
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr',
          gap: 48,
          alignItems: 'start',
        }}
        className="report-detail-grid"
      >
        {/* ═══ LEFT: Main content ══════════════════════════ */}
        <div>
          {/* Kicker */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <span
              style={{
                fontSize: 9,
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '2px',
                color: 'var(--red)',
              }}
            >
              {TYPE_LABELS[report.type] || report.type} · {report.category}
            </span>
            <div
              style={{
                flex: 1,
                height: 1,
                background: 'var(--red)',
                opacity: 0.3,
              }}
            />
          </div>

          {/* Headline */}
          <h1
            style={{
              fontSize: 'clamp(28px, 3vw, 40px)',
              fontWeight: 900,
              lineHeight: 1.2,
              letterSpacing: '-1px',
              color: 'var(--ink)',
              marginBottom: 20,
            }}
          >
            {report.title}
          </h1>

          {/* Meta row */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 16,
              marginBottom: 24,
              flexWrap: 'wrap',
            }}
          >
            {/* Author initial */}
            <div
              style={{
                width: 30,
                height: 30,
                background: 'var(--ink)',
                color: 'var(--paper)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 13,
                fontWeight: 700,
                flexShrink: 0,
              }}
            >
              {report.authorInitial}
            </div>
            <div>
              <p style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.3 }}>
                {report.author}
              </p>
              <p style={{ fontSize: 11, color: 'var(--ink-5)', lineHeight: 1.3 }}>
                {report.authorRole}
              </p>
            </div>
            <div
              style={{
                width: 1,
                height: 28,
                background: 'var(--rule-thin)',
              }}
            />
            <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>{report.publishDate}</span>
            <div
              style={{
                width: 1,
                height: 28,
                background: 'var(--rule-thin)',
              }}
            />
            <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>
              <FileText size={11} style={{ display: 'inline', marginLeft: 4 }} />
              {report.pages} صفحه
            </span>
          </div>

          {/* Thick rule */}
          <div style={{ height: 2, background: 'var(--ink)', marginBottom: 32 }} />

          {/* Abstract */}
          <section style={{ marginBottom: 40 }}>
            <p
              style={{
                fontSize: 9,
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '2.5px',
                color: 'var(--ink-5)',
                marginBottom: 12,
              }}
            >
              چکیده
            </p>
            <MagicTextGroup
              paragraphs={LOREM_PARAGRAPHS.map((para, i) => (i === 0 ? report.summary : para))}
              dir="rtl"
              style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.85, color: 'var(--ink-2)', marginBottom: 18 }}
            />
          </section>

          {/* Table of Contents */}
          <section style={{ marginBottom: 40 }}>
            <div
              style={{
                borderTop: '2px solid var(--ink)',
                borderBottom: '1px solid var(--rule-thin)',
                padding: '14px 0',
                marginBottom: 16,
              }}
            >
              <p
                style={{
                  fontSize: 9,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '2.5px',
                  color: 'var(--ink-5)',
                }}
              >
                فهرست مطالب
              </p>
            </div>
            <ol
              style={{
                listStyle: 'none',
                padding: 0,
                margin: 0,
              }}
            >
              {TOC_ITEMS.map((item, i) => (
                <li
                  key={i}
                  style={{
                    display: 'flex',
                    alignItems: 'baseline',
                    gap: 12,
                    padding: '10px 0',
                    borderBottom: '1px solid var(--rule-thin)',
                    fontSize: 13,
                    color: 'var(--ink-2)',
                  }}
                >
                  <span
                    style={{
                      fontSize: 10,
                      fontWeight: 700,
                      color: 'var(--ink-5)',
                      minWidth: 20,
                      textAlign: 'center',
                    }}
                  >
                    {(i + 1).toLocaleString('fa-IR')}
                  </span>
                  <span>{item}</span>
                  <span style={{ flex: 1, borderBottom: '1px dotted var(--rule-thin)', marginBottom: 3 }} />
                  <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>
                    {((i + 1) * 8 + 3).toLocaleString('fa-IR')}
                  </span>
                </li>
              ))}
            </ol>
          </section>

          {/* Free preview + paywall */}
          {!report.isFree && (
            <section style={{ marginBottom: 40 }}>
              <div
                style={{
                  borderTop: '2px solid var(--ink)',
                  borderBottom: '1px solid var(--rule-thin)',
                  padding: '14px 0',
                  marginBottom: 16,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
              >
                <p
                  style={{
                    fontSize: 9,
                    fontWeight: 700,
                    textTransform: 'uppercase',
                    letterSpacing: '2.5px',
                    color: 'var(--ink-5)',
                  }}
                >
                  پیش‌نمایش رایگان
                </p>
                <span
                  style={{
                    fontSize: 9,
                    fontWeight: 700,
                    letterSpacing: '1px',
                    color: 'var(--red)',
                    border: '1px solid var(--red)',
                    padding: '2px 8px',
                  }}
                >
                  ۳ صفحه اول
                </span>
              </div>
              <div style={{ position: 'relative', overflow: 'hidden' }}>
                {/* Fake preview content */}
                <div style={{ padding: '20px 0' }}>
                  {[90, 100, 75, 100, 60, 100, 85, 40].map((width, i) => (
                    <div
                      key={i}
                      style={{
                        height: 12,
                        background: 'var(--rule-thin)',
                        marginBottom: 10,
                        width: `${width}%`,
                        borderRadius: 0,
                      }}
                    />
                  ))}
                </div>
                {/* Gradient overlay */}
                <div
                  style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    height: '70%',
                    background:
                      'linear-gradient(to bottom, transparent 0%, var(--paper) 80%)',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                    paddingBottom: 20,
                    gap: 8,
                  }}
                >
                  <Lock size={18} style={{ color: 'var(--ink-4)' }} />
                  <p
                    style={{
                      fontSize: 14,
                      fontWeight: 700,
                      color: 'var(--ink)',
                      textAlign: 'center',
                    }}
                  >
                    برای دسترسی کامل اشتراک بگیرید
                  </p>
                  <Link
                    to="/subscribe"
                    style={{
                      padding: '10px 28px',
                      background: 'var(--ink)',
                      color: 'var(--paper)',
                      fontSize: 12,
                      fontWeight: 700,
                      textDecoration: 'none',
                      letterSpacing: '0.5px',
                      border: '1px solid var(--ink)',
                    }}
                  >
                    مشاهده طرح‌های اشتراک
                  </Link>
                </div>
              </div>
            </section>
          )}

          {/* Tags */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
            <Tag size={12} style={{ color: 'var(--ink-5)', marginTop: 2, flexShrink: 0 }} />
            {report.tags.map((tag) => (
              <span
                key={tag}
                style={{
                  fontSize: 11,
                  fontWeight: 500,
                  color: 'var(--ink-3)',
                  border: '1px solid var(--rule-thin)',
                  padding: '3px 10px',
                }}
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

        {/* ═══ RIGHT: Sidebar ══════════════════════════════ */}
        <div
          style={{ position: 'sticky', top: 76 }}
          className="report-sidebar"
        >
          {/* Price card */}
          <div
            style={{
              border: '2px solid var(--ink)',
              padding: 32,
              background: 'var(--paper)',
            }}
          >
            <p
              style={{
                fontSize: 9,
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '2px',
                color: 'var(--ink-5)',
                marginBottom: 12,
              }}
            >
              قیمت گزارش
            </p>

            {/* Price */}
            <p
              style={{
                fontSize: 36,
                fontWeight: 900,
                letterSpacing: '-1px',
                color: report.isFree ? 'var(--green-ink)' : 'var(--ink)',
                lineHeight: 1,
                marginBottom: 16,
              }}
            >
              {report.isFree ? 'رایگان' : formatPrice(report.price)}
            </p>

            {/* Meta */}
            <div
              style={{
                borderTop: '1px solid var(--rule-thin)',
                paddingTop: 12,
                marginBottom: 20,
                display: 'flex',
                flexDirection: 'column',
                gap: 6,
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>تعداد صفحات</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>
                  {report.pages} صفحه
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>تاریخ انتشار</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>
                  {report.publishDate}
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 11, color: 'var(--ink-5)' }}>فرمت</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>PDF</span>
              </div>
            </div>

            {/* Buy button */}
            <button
              onMouseEnter={() => setBuyHovered(true)}
              onMouseLeave={() => setBuyHovered(false)}
              style={{
                width: '100%',
                padding: '14px 0',
                background: buyHovered ? 'var(--red)' : 'var(--ink)',
                color: 'var(--paper)',
                border: buyHovered ? '1px solid var(--red)' : '1px solid var(--ink)',
                fontSize: 13,
                fontWeight: 700,
                cursor: 'pointer',
                fontFamily: 'inherit',
                borderRadius: 0,
                transition: 'background 150ms, border-color 150ms',
                letterSpacing: '0.3px',
                marginBottom: 8,
              }}
            >
              {report.isFree ? 'دانلود رایگان' : 'خرید و دانلود'}
            </button>

            {/* Download summary button */}
            <button
              onMouseEnter={() => setDlHovered(true)}
              onMouseLeave={() => setDlHovered(false)}
              style={{
                width: '100%',
                padding: '12px 0',
                background: dlHovered ? 'var(--paper-2)' : 'transparent',
                color: 'var(--ink)',
                border: '1px solid var(--ink)',
                fontSize: 12,
                fontWeight: 600,
                cursor: 'pointer',
                fontFamily: 'inherit',
                borderRadius: 0,
                transition: 'background 150ms',
                letterSpacing: '0.3px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
              }}
            >
              <Download size={13} />
              دانلود خلاصه
            </button>

            {/* Note */}
            <p
              style={{
                fontSize: 10,
                color: 'var(--ink-5)',
                textAlign: 'center',
                marginTop: 12,
              }}
            >
              فاکتور رسمی صادر می‌شود
            </p>
          </div>

          {/* Author card */}
          <div
            style={{
              border: '1px solid var(--rule-thin)',
              padding: 24,
              marginTop: 16,
            }}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: 14,
                marginBottom: 12,
              }}
            >
              <div
                style={{
                  width: 48,
                  height: 48,
                  background: 'var(--ink)',
                  color: 'var(--paper)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 20,
                  fontWeight: 700,
                  flexShrink: 0,
                }}
              >
                {report.authorInitial}
              </div>
              <div>
                <p style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>
                  {report.author}
                </p>
                <p style={{ fontSize: 11, color: 'var(--ink-5)', marginTop: 2 }}>
                  {report.authorRole}
                </p>
              </div>
            </div>
            <p
              style={{
                fontSize: 12,
                fontWeight: 300,
                lineHeight: 1.7,
                color: 'var(--ink-3)',
                marginBottom: 12,
              }}
            >
              متخصص در تحلیل بازارهای فولاد با بیش از یک دهه تجربه در پژوهش و سیاست‌گذاری صنعتی.
            </p>
            <Link
              to="/team"
              style={{
                fontSize: 10,
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '1px',
                color: 'var(--red)',
                textDecoration: 'none',
                display: 'flex',
                alignItems: 'center',
                gap: 4,
              }}
            >
              <User size={10} />
              مشاهده پروفایل کامل
            </Link>
          </div>

          {/* Related reports */}
          <div
            style={{
              border: '1px solid var(--rule-thin)',
              padding: 24,
              marginTop: 16,
            }}
          >
            <RelatedReports current={report} />
          </div>
        </div>
      </div>

      {/* ─── Responsive styles ─────────────────────────── */}
      <style>{`
        @media (max-width: 767px) {
          .report-detail-grid {
            grid-template-columns: 1fr !important;
          }
          .report-sidebar {
            position: static !important;
          }
        }
        @media (max-width: 767px) {
          .report-sticky-buy {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 20;
            padding: 16px 20px;
            background: var(--paper);
            border-top: 2px solid var(--ink);
          }
        }
      `}</style>
    </div>
  )
}
