import { Link } from 'react-router-dom';
import { reports } from '@/data/reports';
import type { Report } from '@/data/reports';

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

function formatPrice(price: number): string {
  if (price === 0) return 'رایگان';
  return price.toLocaleString('fa-IR') + ' تومان';
}

function SpecialCard({ report }: { report: Report }) {
  return (
    <Link
      to={`/reports/${report.id}`}
      style={{
        display: 'block',
        textDecoration: 'none',
        color: 'inherit',
        border: '2px solid var(--ink)',
        padding: '28px',
        background: 'var(--paper)',
        transition: 'background 0.15s',
      }}
    >
      <div style={{ display: 'flex', gap: '10px', alignItems: 'center', marginBottom: '14px' }}>
        <span
          style={{
            fontSize: '11px',
            fontWeight: 700,
            letterSpacing: '0.08em',
            color: 'var(--paper)',
            background: 'var(--red)',
            padding: '2px 8px',
            textTransform: 'uppercase',
          }}
        >
          {typeLabel[report.type] ?? report.type}
        </span>
        <span
          style={{
            fontSize: '12px',
            color: 'var(--ink-4)',
            borderRight: '1px solid var(--rule-thin)',
            paddingRight: '10px',
          }}
        >
          {report.category}
        </span>
      </div>

      <h2
        style={{
          fontSize: '22px',
          fontWeight: 700,
          lineHeight: 1.5,
          color: 'var(--ink)',
          margin: '0 0 14px',
        }}
      >
        {report.title}
      </h2>

      <p
        style={{
          fontSize: '14px',
          lineHeight: 1.9,
          color: 'var(--ink-3)',
          margin: '0 0 20px',
          display: '-webkit-box',
          WebkitLineClamp: 3,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}
      >
        {report.summary}
      </p>

      <div
        style={{
          borderTop: '1px solid var(--rule-thin)',
          paddingTop: '16px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: '12px',
          flexWrap: 'wrap',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div
            style={{
              width: '34px',
              height: '34px',
              background: 'var(--ink)',
              color: 'var(--paper)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontWeight: 700,
              fontSize: '15px',
              flexShrink: 0,
            }}
          >
            {report.authorInitial}
          </div>
          <div>
            <div style={{ fontSize: '13px', fontWeight: 600, color: 'var(--ink)' }}>{report.author}</div>
            <div style={{ fontSize: '11px', color: 'var(--ink-5)' }}>{report.authorRole}</div>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <span style={{ fontSize: '13px', color: 'var(--ink-4)' }}>{report.pages} صفحه</span>
          <span style={{ fontSize: '13px', color: 'var(--ink-4)' }}>{report.publishDate}</span>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              borderRight: '1px solid var(--rule-thin)',
              paddingRight: '12px',
            }}
          >
            <span style={{ fontSize: '15px', fontWeight: 700, color: report.isFree ? 'var(--green-ink)' : 'var(--ink)' }}>
              {formatPrice(report.price)}
            </span>
            <span
              style={{
                fontSize: '13px',
                fontWeight: 600,
                padding: '4px 14px',
                background: 'var(--ink)',
                color: 'var(--paper)',
                cursor: 'pointer',
              }}
            >
              {report.isFree ? 'دریافت رایگان' : 'خرید گزارش'}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
}

function CompactCard({ report }: { report: Report }) {
  return (
    <Link
      to={`/reports/${report.id}`}
      style={{
        display: 'block',
        textDecoration: 'none',
        color: 'inherit',
        border: '1px solid var(--rule-thin)',
        borderTop: '3px solid var(--ink-3)',
        padding: '18px',
        background: 'var(--paper)',
      }}
    >
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '10px' }}>
        <span
          style={{
            fontSize: '10px',
            fontWeight: 700,
            color: 'var(--ink-4)',
            background: 'var(--paper-2)',
            padding: '2px 7px',
            letterSpacing: '0.06em',
          }}
        >
          {typeLabel[report.type] ?? report.type}
        </span>
        <span style={{ fontSize: '11px', color: 'var(--ink-5)' }}>{report.category}</span>
      </div>

      <h3
        style={{
          fontSize: '15px',
          fontWeight: 700,
          lineHeight: 1.6,
          color: 'var(--ink)',
          margin: '0 0 10px',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}
      >
        {report.title}
      </h3>

      <p
        style={{
          fontSize: '13px',
          lineHeight: 1.8,
          color: 'var(--ink-4)',
          margin: '0 0 14px',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}
      >
        {report.summary}
      </p>

      <div
        style={{
          borderTop: '1px solid var(--rule-thin)',
          paddingTop: '12px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span style={{ fontSize: '12px', color: 'var(--ink-5)' }}>{report.publishDate}</span>
        <span style={{ fontSize: '13px', fontWeight: 700, color: report.isFree ? 'var(--green-ink)' : 'var(--red)' }}>
          {formatPrice(report.price)}
        </span>
      </div>
    </Link>
  );
}

export default function Special() {
  const specialReports = reports.filter((r) => r.type === 'special');
  const otherReports = reports.filter((r) => r.type !== 'special');

  return (
    <div
      dir="rtl"
      style={{
        fontFamily: 'Vazir, sans-serif',
        background: 'var(--paper)',
        color: 'var(--ink)',
        minHeight: '100vh',
      }}
    >
      {/* Hero Banner */}
      <div
        style={{
          background: 'var(--ink)',
          padding: '60px 48px',
          borderBottom: '4px solid var(--red)',
        }}
      >
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <div
            style={{
              fontSize: '11px',
              letterSpacing: '0.12em',
              color: 'rgba(255,255,255,0.5)',
              marginBottom: '16px',
              fontWeight: 600,
            }}
          >
            اندیشکده فولاد ایران — پژوهش‌های تخصصی
          </div>
          <h1
            style={{
              fontSize: '48px',
              fontWeight: 900,
              color: 'var(--paper)',
              margin: '0 0 16px',
              lineHeight: 1.3,
            }}
          >
            گزارش‌های ویژه
          </h1>
          <p
            style={{
              fontSize: '17px',
              color: 'rgba(255,255,255,0.7)',
              margin: 0,
              maxWidth: '680px',
              lineHeight: 1.8,
            }}
          >
            تحلیل‌های عمیق و سناریوپردازی‌های راهبردی برای تصمیم‌گیرندگان صنعت فولاد
          </p>
          <div
            style={{
              marginTop: '28px',
              display: 'flex',
              gap: '32px',
              fontSize: '13px',
              color: 'rgba(255,255,255,0.5)',
            }}
          >
            <span>{specialReports.length} گزارش ویژه</span>
            <span style={{ borderRight: '1px solid rgba(255,255,255,0.2)', paddingRight: '32px' }}>
              {reports.length} گزارش در مجموع
            </span>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}>
        {/* Section A — Special Reports */}
        <div style={{ padding: '48px 0 40px' }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'baseline',
              gap: '16px',
              marginBottom: '32px',
            }}
          >
            <div style={{ width: '4px', height: '28px', background: 'var(--red)', flexShrink: 0 }} />
            <h2 style={{ fontSize: '24px', fontWeight: 800, margin: 0, color: 'var(--ink)' }}>
              گزارش‌های ویژه
            </h2>
            <span
              style={{
                fontSize: '13px',
                color: 'var(--ink-5)',
                borderRight: '1px solid var(--rule-thin)',
                paddingRight: '16px',
              }}
            >
              تحلیل‌های سناریومحور و راهبردی
            </span>
          </div>

          <div
            className="max-md:grid-cols-1"
            style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '24px' }}
          >
            {specialReports.map((report) => (
              <SpecialCard key={report.id} report={report} />
            ))}
          </div>
        </div>

        {/* Thick Rule Separator */}
        <div style={{ borderTop: '4px double var(--ink)', margin: '0 0 48px' }} />

        {/* Section B — Other Reports */}
        <div style={{ paddingBottom: '64px' }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'baseline',
              gap: '16px',
              marginBottom: '32px',
            }}
          >
            <div style={{ width: '4px', height: '28px', background: 'var(--ink-4)', flexShrink: 0 }} />
            <h2 style={{ fontSize: '22px', fontWeight: 800, margin: 0, color: 'var(--ink)' }}>
              سایر گزارش‌های تحلیلی
            </h2>
            <span
              style={{
                fontSize: '13px',
                color: 'var(--ink-5)',
                borderRight: '1px solid var(--rule-thin)',
                paddingRight: '16px',
              }}
            >
              گزارش‌های فصلی، فوری و تحلیل ریسک
            </span>
          </div>

          <div
            className="max-md:grid-cols-1"
            style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}
          >
            {otherReports.map((report) => (
              <CompactCard key={report.id} report={report} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}