import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Check, X, ChevronDown, ChevronUp, Phone } from 'lucide-react'
import { plans } from '@/data/plans'
import type { Plan } from '@/data/plans'

/* ─── feature comparison data ────────────────────────────── */
const FEATURES: { label: string; basic: string; pro: string; gov: string }[] = [
  { label: 'دسترسی به گزارش‌های جدید', basic: 'check', pro: 'check', gov: 'check' },
  { label: 'Flash Reports فوری', basic: 'x', pro: 'check', gov: 'check' },
  { label: 'آرشیو کامل', basic: 'محدود (۱ سال)', pro: 'نامحدود', gov: 'نامحدود' },
  { label: 'داشبورد بازار', basic: 'check', pro: 'check', gov: 'check' },
  { label: 'جلسه با تیم تحریریه', basic: 'x', pro: 'ماهانه', gov: 'فصلی' },
  { label: 'گزارش‌های سفارشی', basic: 'x', pro: 'x', gov: 'check' },
  { label: 'ارائه حضوری', basic: 'x', pro: 'x', gov: 'check' },
  { label: 'تعداد کاربران', basic: '۱', pro: 'تا ۵', gov: 'نامحدود' },
  { label: 'فاکتور رسمی', basic: 'x', pro: 'check', gov: 'check' },
  { label: 'پشتیبانی اختصاصی', basic: 'x', pro: 'check', gov: 'check' },
]

/* ─── FAQ data ───────────────────────────────────────────── */
const FAQS = [
  {
    q: 'آیا می‌توانم گزارش را پیش از خرید ببینم؟',
    a: 'بله، برای تمام گزارش‌ها یک پیش‌نمایش رایگان شامل چکیده، فهرست مطالب و چند صفحه اول در دسترس است. همچنین برخی گزارش‌ها به‌طور کامل رایگان منتشر می‌شوند.',
  },
  {
    q: 'فاکتور رسمی چگونه صادر می‌شود؟',
    a: 'پس از تکمیل خرید، فاکتور رسمی با مشخصات سازمانی شما حداکثر ظرف ۲۴ ساعت کاری از طریق ایمیل ارسال می‌شود. برای اشتراک‌های سازمانی، قرارداد رسمی نیز منعقد می‌شود.',
  },
  {
    q: 'نحوه پرداخت چگونه است؟',
    a: 'پرداخت از طریق درگاه بانکی اینترنتی (شبکه شتاب) و انتقال بانکی مستقیم امکان‌پذیر است. برای اشتراک‌های سازمانی پرداخت به‌صورت حواله بانکی با صدور فاکتور رسمی انجام می‌شود.',
  },
  {
    q: 'آیا اشتراک سازمانی قابل لغو است؟',
    a: 'بله، اشتراک سازمانی با اطلاع ۳۰ روز پیشین قابل فسخ است. مبالغ پرداختی به‌صورت پرو-راتا بر اساس ماه‌های باقیمانده محاسبه و بازگشت داده می‌شود.',
  },
  {
    q: 'گزارش‌های سفارشی چه مدت طول می‌کشد؟',
    a: 'بسته به پیچیدگی موضوع، گزارش‌های سفارشی معمولاً ۴ تا ۸ هفته زمان نیاز دارند. پس از جلسه اولیه تعریف دامنه کار، برنامه زمانی دقیق ارائه می‌شود.',
  },
]

/* ─── plan extra features ────────────────────────────────── */
const PLAN_EXTRA_FEATURES: Record<string, string[]> = {
  basic: [
    'دسترسی به گزارش‌های فصلی بازار',
    'خلاصه گزارش‌های تخصصی',
    'خبرنامه هفتگی',
    'پایگاه داده قیمت‌های بازار',
    'آرشیو ۱ ساله گزارش‌ها',
    'داشبورد بازار پایه',
    'دانلود PDF گزارش‌ها',
    'پشتیبانی ایمیلی',
  ],
  professional: [
    'تمام گزارش‌های تخصصی و ریسک',
    'گزارش‌های فوری (Flash)',
    'مدل‌های کمی و داده‌های خام',
    'آرشیو کامل ۵ ساله',
    'API دسترسی به داده قیمت',
    'پشتیبانی اولویت‌دار',
    'تا ۵ کاربر سازمانی',
    'فاکتور رسمی خودکار',
    'داشبورد پیشرفته بازار',
    'خبرنامه اختصاصی پیش از انتشار',
  ],
  government: [
    'دسترسی نامحدود تیمی',
    'گزارش‌های سفارشی اختصاصی',
    'جلسات مشاوره ماهانه',
    'ارائه حضوری نتایج تحقیقات',
    'آموزش و کارگاه تخصصی',
    'پشتیبانی ۲۴ ساعته اختصاصی',
    'دسترسی پیش از انتشار',
    'مدیر حساب اختصاصی',
    'قرارداد و فاکتور سازمانی',
    'گزارش وضعیت اعضاء',
    'لایسنس چندکاربره نامحدود',
    'پنل مدیریت تیم',
  ],
}

/* ─── cell renderer for feature table ───────────────────── */
function FeatureCell({ value }: { value: string }) {
  if (value === 'check') {
    return (
      <td
        style={{
          padding: '13px 24px',
          borderBottom: '1px solid var(--rule-thin)',
          borderRight: '1px solid var(--rule-thin)',
          textAlign: 'center',
        }}
      >
        <Check size={15} strokeWidth={2.5} style={{ color: 'var(--green-ink)' }} />
      </td>
    )
  }
  if (value === 'x') {
    return (
      <td
        style={{
          padding: '13px 24px',
          borderBottom: '1px solid var(--rule-thin)',
          borderRight: '1px solid var(--rule-thin)',
          textAlign: 'center',
          opacity: 0.35,
        }}
      >
        <X size={13} strokeWidth={2} style={{ color: 'var(--ink-4)' }} />
      </td>
    )
  }
  return (
    <td
      style={{
        padding: '13px 24px',
        borderBottom: '1px solid var(--rule-thin)',
        borderRight: '1px solid var(--rule-thin)',
        textAlign: 'center',
        fontSize: 11,
        fontWeight: 600,
        color: 'var(--ink-3)',
      }}
    >
      {value}
    </td>
  )
}

/* ─── plan card ──────────────────────────────────────────── */
function PlanCard({ plan }: { plan: Plan }) {
  const [hovered, setHovered] = useState(false)
  const features = PLAN_EXTRA_FEATURES[plan.id] || plan.features

  return (
    <div
      style={{
        background: plan.featured ? 'var(--ink)' : 'var(--paper)',
        padding: 40,
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        position: 'relative',
      }}
    >
      {/* Badge */}
      {plan.badge && (
        <div
          style={{
            position: 'absolute',
            top: -1,
            right: 32,
            background: 'var(--red)',
            color: 'var(--paper)',
            fontSize: 9,
            fontWeight: 700,
            letterSpacing: '1.5px',
            textTransform: 'uppercase',
            padding: '4px 12px',
          }}
        >
          {plan.badge}
        </div>
      )}

      {/* Plan name */}
      <p
        style={{
          fontSize: 9,
          fontWeight: 700,
          textTransform: 'uppercase',
          letterSpacing: '2.5px',
          color: plan.featured ? 'rgba(244,239,231,0.5)' : 'var(--ink-5)',
          marginBottom: 8,
        }}
      >
        طرح
      </p>
      <h3
        style={{
          fontSize: 24,
          fontWeight: 900,
          color: plan.featured ? 'var(--paper)' : 'var(--ink)',
          letterSpacing: '-0.5px',
          marginBottom: 20,
        }}
      >
        {plan.name}
      </h3>

      {/* Price */}
      <div style={{ marginBottom: 24 }}>
        {typeof plan.price === 'number' ? (
          <>
            <span
              style={{
                fontSize: 32,
                fontWeight: 900,
                color: plan.featured ? 'var(--paper)' : 'var(--ink)',
                letterSpacing: '-1px',
                lineHeight: 1,
              }}
            >
              {plan.price.toLocaleString('fa-IR')}
            </span>
            <span
              style={{
                fontSize: 12,
                color: plan.featured ? 'rgba(244,239,231,0.6)' : 'var(--ink-4)',
                marginRight: 4,
              }}
            >
              {plan.period}
            </span>
          </>
        ) : (
          <span
            style={{
              fontSize: 28,
              fontWeight: 900,
              color: plan.featured ? 'var(--paper)' : 'var(--ink)',
            }}
          >
            تماس بگیرید
          </span>
        )}
        <p
          style={{
            fontSize: 11,
            color: plan.featured ? 'rgba(244,239,231,0.55)' : 'var(--ink-5)',
            marginTop: 6,
          }}
        >
          {plan.period}
        </p>
      </div>

      {/* Divider */}
      <div
        style={{
          height: 1,
          background: plan.featured ? 'rgba(244,239,231,0.15)' : 'var(--rule-thin)',
          marginBottom: 24,
        }}
      />

      {/* Features */}
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', flex: 1 }}>
        {features.map((feat, i) => (
          <li
            key={i}
            style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: 10,
              padding: '7px 0',
              borderBottom:
                i < features.length - 1
                  ? `1px solid ${plan.featured ? 'rgba(244,239,231,0.08)' : 'var(--rule-thin)'}`
                  : 'none',
              fontSize: 12,
              color: plan.featured ? 'rgba(244,239,231,0.85)' : 'var(--ink-3)',
            }}
          >
            <Check
              size={12}
              style={{
                marginTop: 2,
                flexShrink: 0,
                color: plan.featured ? 'rgba(244,239,231,0.6)' : 'var(--green-ink)',
              }}
            />
            {feat}
          </li>
        ))}
      </ul>

      {/* CTA */}
      <button
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{
          width: '100%',
          padding: '14px 0',
          fontSize: 13,
          fontWeight: 700,
          cursor: 'pointer',
          fontFamily: 'inherit',
          borderRadius: 0,
          letterSpacing: '0.3px',
          transition: 'all 150ms',
          border: plan.featured
            ? hovered
              ? '1px solid var(--paper-2)'
              : '1px solid var(--paper)'
            : hovered
            ? '1px solid var(--ink)'
            : '1px solid var(--rule-thin)',
          background: plan.featured
            ? hovered
              ? 'var(--paper-2)'
              : 'var(--paper)'
            : hovered
            ? 'var(--ink)'
            : 'transparent',
          color: plan.featured ? 'var(--ink)' : hovered ? 'var(--paper)' : 'var(--ink)',
        }}
      >
        {plan.ctaLabel}
      </button>
    </div>
  )
}

/* ─── FAQ item ───────────────────────────────────────────── */
function FaqItem({ q, a, index }: { q: string; a: string; index: number }) {
  const [open, setOpen] = useState(false)

  return (
    <div style={{ borderBottom: '1px solid var(--rule-thin)' }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '20px 0',
          background: 'transparent',
          border: 'none',
          cursor: 'pointer',
          fontFamily: 'inherit',
          textAlign: 'right',
          gap: 16,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-5)', minWidth: 20 }}>
            {(index + 1).toLocaleString('fa-IR')}
          </span>
          <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{q}</span>
        </div>
        <span style={{ color: 'var(--ink-4)', flexShrink: 0 }}>
          {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
        </span>
      </button>
      {open && (
        <div
          style={{
            padding: '0 0 20px 36px',
            fontSize: 14,
            fontWeight: 300,
            lineHeight: 1.8,
            color: 'var(--ink-3)',
          }}
        >
          {a}
        </div>
      )}
    </div>
  )
}

/* ─── CTA button with hover state ───────────────────────── */
function CtaButton({ label }: { label: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <button
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: '14px 32px',
        fontSize: 13,
        fontWeight: 700,
        cursor: 'pointer',
        fontFamily: 'inherit',
        borderRadius: 0,
        letterSpacing: '0.3px',
        transition: 'all 150ms',
        background: hovered ? 'var(--paper-2)' : 'var(--paper)',
        color: 'var(--ink)',
        border: hovered ? '1px solid var(--paper-2)' : '1px solid var(--paper)',
      }}
    >
      {label}
    </button>
  )
}

/* ─── main component ─────────────────────────────────────── */
export default function Subscribe() {
  return (
    <div style={{ direction: 'rtl' }}>
      {/* ─── Page Header ───────────────────────────────── */}
      <div
        style={{
          maxWidth: 1280,
          margin: '0 auto',
          padding: '64px 48px 48px',
          borderBottom: '3px solid var(--ink)',
          textAlign: 'center',
        }}
      >
        <h1
          style={{
            fontSize: 36,
            fontWeight: 900,
            letterSpacing: '-1px',
            color: 'var(--ink)',
            marginBottom: 12,
          }}
        >
          اشتراک و دسترسی
        </h1>
        <p
          style={{
            fontSize: 15,
            fontWeight: 300,
            color: 'var(--ink-3)',
            maxWidth: 560,
            margin: '0 auto',
            lineHeight: 1.7,
          }}
        >
          دسترسی به جامع‌ترین تحلیل‌های بازار فولاد ایران — از گزارش‌های فصلی تا مشاوره سازمانی
        </p>
      </div>

      {/* ─── Section 1: Plans ──────────────────────────── */}
      <div style={{ padding: '64px 0', borderBottom: '2px solid var(--ink)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px' }}>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              border: '1px solid var(--rule-thin)',
              borderLeft: 'none',
            }}
            className="plans-grid"
          >
            {plans.map((plan) => (
              <div
                key={plan.id}
                style={{ borderLeft: '1px solid var(--rule-thin)' }}
              >
                <PlanCard plan={plan} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ─── Section 2: Feature Comparison Table ─────────── */}
      <div style={{ padding: '64px 0', borderBottom: '2px solid var(--ink)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px' }}>
          <div style={{ marginBottom: 40 }}>
            <h2
              style={{
                fontSize: 24,
                fontWeight: 900,
                color: 'var(--ink)',
                letterSpacing: '-0.5px',
                marginBottom: 6,
              }}
            >
              مقایسه کامل امکانات
            </h2>
            <p style={{ fontSize: 13, color: 'var(--ink-5)' }}>
              مقایسه تفصیلی امکانات هر سه طرح اشتراک
            </p>
          </div>

          <div style={{ overflowX: 'auto' }}>
            <table style={{ borderCollapse: 'collapse', width: '100%', minWidth: 600 }}>
              <thead>
                <tr>
                  <th
                    style={{
                      padding: '16px 20px',
                      textAlign: 'right',
                      background: 'var(--paper-3)',
                      borderBottom: '2px solid var(--ink)',
                      fontSize: 11,
                      fontWeight: 700,
                      letterSpacing: '0.5px',
                      color: 'var(--ink-4)',
                      textTransform: 'uppercase',
                    }}
                  >
                    امکانات
                  </th>
                  {plans.map((plan) => (
                    <th
                      key={plan.id}
                      style={{
                        padding: '16px 24px',
                        textAlign: 'center',
                        background: plan.featured ? 'var(--ink)' : 'var(--paper-3)',
                        borderBottom: '2px solid var(--ink)',
                        borderRight: '1px solid var(--rule-thin)',
                        fontSize: 13,
                        fontWeight: 900,
                        color: plan.featured ? 'var(--paper)' : 'var(--ink)',
                        letterSpacing: '-0.3px',
                      }}
                    >
                      {plan.name}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {FEATURES.map((feat, i) => (
                  <tr
                    key={feat.label}
                    style={{
                      background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-2)',
                    }}
                  >
                    <td
                      style={{
                        padding: '13px 20px',
                        fontSize: 13,
                        color: 'var(--ink-2)',
                        borderBottom: '1px solid var(--rule-thin)',
                      }}
                    >
                      {feat.label}
                    </td>
                    <FeatureCell value={feat.basic} />
                    <FeatureCell value={feat.pro} />
                    <FeatureCell value={feat.gov} />
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* ─── Section 3: FAQ ──────────────────────────────── */}
      <div style={{ padding: '64px 0', borderBottom: '2px solid var(--ink)' }}>
        <div style={{ maxWidth: 860, margin: '0 auto', padding: '0 48px' }}>
          <div style={{ marginBottom: 40 }}>
            <h2
              style={{
                fontSize: 24,
                fontWeight: 900,
                color: 'var(--ink)',
                letterSpacing: '-0.5px',
                marginBottom: 6,
              }}
            >
              پرسش‌های متداول
            </h2>
            <p style={{ fontSize: 13, color: 'var(--ink-5)' }}>
              پاسخ به سوال‌های رایج درباره اشتراک و گزارش‌ها
            </p>
          </div>
          <div style={{ borderTop: '2px solid var(--ink)' }}>
            {FAQS.map((faq, i) => (
              <FaqItem key={i} q={faq.q} a={faq.a} index={i} />
            ))}
          </div>
        </div>
      </div>

      {/* ─── Section 4: CTA Band ─────────────────────────── */}
      <div
        style={{
          background: 'var(--ink)',
          padding: '80px 48px',
          textAlign: 'center',
        }}
      >
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <p
            style={{
              fontSize: 9,
              fontWeight: 700,
              textTransform: 'uppercase',
              letterSpacing: '3px',
              color: 'rgba(244,239,231,0.4)',
              marginBottom: 16,
            }}
          >
            اندیشکده فولاد آینده
          </p>
          <h2
            style={{
              fontSize: 32,
              fontWeight: 900,
              color: 'var(--paper)',
              letterSpacing: '-1px',
              lineHeight: 1.2,
              marginBottom: 16,
            }}
          >
            آماده شروع هستید؟
          </h2>
          <p
            style={{
              fontSize: 15,
              color: 'rgba(244,239,231,0.65)',
              fontWeight: 300,
              lineHeight: 1.7,
              marginBottom: 40,
              maxWidth: 500,
              margin: '0 auto 40px',
            }}
          >
            به بیش از ۲۸۰۰ متخصص و مدیر صنعت فولاد بپیوندید که تصمیمات خود را با تحلیل‌های
            اندیشکده می‌گیرند.
          </p>

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 16,
              flexWrap: 'wrap',
            }}
          >
            <CtaButton label="اشتراک سازمانی" />
            <OutlineCtaLink label="تماس با ما" />
          </div>
        </div>
      </div>

      {/* ─── Responsive styles ─────────────────────────── */}
      <style>{`
        @media (max-width: 767px) {
          .plans-grid {
            grid-template-columns: 1fr !important;
          }
        }
        @media (max-width: 1024px) and (min-width: 768px) {
          .plans-grid {
            grid-template-columns: 1fr 1fr !important;
          }
        }
      `}</style>
    </div>
  )
}

/* ─── outline CTA link ───────────────────────────────────── */
function OutlineCtaLink({ label }: { label: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <Link
      to="/contact"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: '14px 32px',
        fontSize: 13,
        fontWeight: 700,
        color: 'var(--paper)',
        background: 'transparent',
        border: hovered
          ? '1px solid rgba(244,239,231,0.6)'
          : '1px solid rgba(244,239,231,0.35)',
        textDecoration: 'none',
        letterSpacing: '0.3px',
        transition: 'border-color 150ms',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
      }}
    >
      <Phone size={14} />
      {label}
    </Link>
  )
}
