'use client'

import { useState, useEffect, Fragment } from 'react'
import Link from 'next/link'
import {
  UtensilsCrossed,
  ArrowRight,
  CheckCircle2,
  X,
  ChevronDown,
  ChevronUp,
  Loader2,
} from 'lucide-react'
import { PLAN_FEATURES } from '@/lib/constants'

// ─── Types ───────────────────────────────────────────────────────────────────

interface Plan {
  id: string
  name: string
  slug: string
  description: string
  price: number
  yearlyPrice: number
  maxStores: number
  maxStaff: number
  maxMenuItems: number
  maxOrders: number
  features: string[]
  isPopular: boolean
}

// ─── Constants ───────────────────────────────────────────────────────────────

const FEATURE_CATEGORIES = [
  {
    name: 'Fitur Operasional',
    features: ['pos', 'kitchen_display', 'qr_menu'],
  },
  {
    name: 'Fitur Manajemen',
    features: ['multi_branch', 'inventory', 'expenses', 'attendance'],
  },
  {
    name: 'Fitur Pelanggan',
    features: ['customers', 'reservations', 'feedback', 'loyalty', 'promos'],
  },
  {
    name: 'Analitik & Integrasi',
    features: ['reports', 'advanced_analytics', 'online_payment', 'api_access'],
  },
]

const LIMIT_ROWS = [
  { key: 'maxStores', label: 'Jumlah Cabang' },
  { key: 'maxStaff', label: 'Jumlah Staff' },
  { key: 'maxMenuItems', label: 'Menu Items' },
  { key: 'maxOrders', label: 'Pesanan / bulan' },
]

const FAQ_ITEMS = [
  {
    question: 'Bisa upgrade kapan saja?',
    answer: 'Ya, upgrade langsung aktif.',
  },
  {
    question: 'Ada masa percobaan?',
    answer:
      'Paket Gratis bisa digunakan selamanya. Untuk paket berbayar, hubungi kami untuk trial.',
  },
  {
    question: 'Bagaimana cara pembayaran?',
    answer: 'QRIS, transfer bank, e-wallet, dan kartu kredit.',
  },
]

// ─── Helpers ─────────────────────────────────────────────────────────────────

function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    minimumFractionDigits: 0,
  }).format(amount)
}

function formatPrice(amount: number): string {
  if (amount === 0) return 'Gratis'
  return formatCurrency(amount)
}

function formatLimit(value: number): string {
  return value === 0 ? 'Unlimited' : value.toLocaleString('id-ID')
}

function getYearlySavingsPercent(monthly: number, yearly: number): number {
  if (monthly === 0) return 0
  const totalMonthly = monthly * 12
  if (totalMonthly === 0) return 0
  return Math.round(((totalMonthly - yearly) / totalMonthly) * 100)
}

// ─── Component ───────────────────────────────────────────────────────────────

export default function ComparePage() {
  const [plans, setPlans] = useState<Plan[]>([])
  const [loading, setLoading] = useState(true)
  const [isYearly, setIsYearly] = useState(false)
  const [activePlanIndex, setActivePlanIndex] = useState(0)
  const [openFaq, setOpenFaq] = useState<number | null>(null)

  useEffect(() => {
    async function fetchPlans() {
      try {
        const res = await fetch('/api/plans')
        const data = await res.json()
        setPlans(data.plans || [])
      } catch {
        setPlans([])
      } finally {
        setLoading(false)
      }
    }
    fetchPlans()
  }, [])

  const maxSavings = plans.reduce((max, plan) => {
    const s = getYearlySavingsPercent(plan.price, plan.yearlyPrice)
    return s > max ? s : max
  }, 0)

  // ─── Render ──────────────────────────────────────────────────────────────

  return (
    <div className="min-h-screen bg-white">
      {/* ── Navbar ────────────────────────────────────────────────────────── */}
      <nav className="border-b border-gray-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <Link href="/" className="flex items-center gap-2">
              <UtensilsCrossed className="w-8 h-8 text-primary-600" />
              <span className="text-xl font-bold text-gray-900">RestoMenu</span>
            </Link>
            <div className="hidden md:flex items-center gap-8">
              <Link
                href="/#features"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                Fitur
              </Link>
              <Link
                href="/#pricing"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                Harga
              </Link>
              <Link
                href="/compare"
                className="text-primary-600 font-medium transition-colors"
              >
                Bandingkan Fitur
              </Link>
            </div>
            <div className="flex items-center gap-3">
              <Link
                href="/login"
                className="text-gray-600 hover:text-gray-900 font-medium px-4 py-2"
              >
                Masuk
              </Link>
              <Link
                href="/register"
                className="btn-primary flex items-center gap-2"
              >
                Daftar Gratis <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* ── Hero Header ───────────────────────────────────────────────────── */}
      <section className="pt-16 pb-12 bg-gradient-to-br from-primary-50 via-white to-orange-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Bandingkan Paket
          </h1>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
            Temukan paket yang tepat untuk kebutuhan restoran Anda.
          </p>

          {/* Monthly / Yearly Toggle */}
          <div className="inline-flex items-center gap-3 bg-gray-100 rounded-full p-1">
            <button
              onClick={() => setIsYearly(false)}
              className={`px-5 py-2 rounded-full text-sm font-medium transition-colors ${
                !isYearly
                  ? 'bg-white text-gray-900 shadow-sm'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              Bulanan
            </button>
            <button
              onClick={() => setIsYearly(true)}
              className={`px-5 py-2 rounded-full text-sm font-medium transition-colors ${
                isYearly
                  ? 'bg-white text-gray-900 shadow-sm'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              Tahunan
              {maxSavings > 0 && (
                <span className="ml-2 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">
                  Hemat {maxSavings}%
                </span>
              )}
            </button>
          </div>
        </div>
      </section>

      {/* ── Loading State ─────────────────────────────────────────────────── */}
      {loading && (
        <div className="py-32 flex flex-col items-center justify-center gap-3">
          <Loader2 className="w-8 h-8 text-primary-600 animate-spin" />
          <p className="text-gray-500">Memuat data paket...</p>
        </div>
      )}

      {/* ── Comparison Table (Desktop) ────────────────────────────────────── */}
      {!loading && plans.length > 0 && (
        <section className="py-12">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {/* Desktop Table */}
            <div className="hidden md:block overflow-x-auto">
              <table className="w-full border-collapse">
                {/* Sticky Header */}
                <thead>
                  <tr className="sticky top-16 z-40 bg-white shadow-sm">
                    <th className="text-left py-4 px-4 w-[240px] border-b-2 border-gray-200">
                      <span className="text-sm font-semibold text-gray-500 uppercase tracking-wider">
                        Fitur
                      </span>
                    </th>
                    {plans.map((plan) => (
                      <th
                        key={plan.id}
                        className={`py-4 px-4 text-center border-b-2 border-gray-200 ${
                          plan.isPopular ? 'bg-primary-50' : ''
                        }`}
                      >
                        {plan.isPopular && (
                          <span className="inline-block text-xs font-semibold text-primary-600 bg-primary-100 px-3 py-0.5 rounded-full mb-1">
                            Populer
                          </span>
                        )}
                        <div className="text-lg font-bold text-gray-900">
                          {plan.name}
                        </div>
                        <div className="text-sm text-gray-500 mt-1">
                          {formatPrice(
                            isYearly ? plan.yearlyPrice : plan.price
                          )}
                          {(isYearly ? plan.yearlyPrice : plan.price) > 0 && (
                            <span className="text-gray-400">
                              /{isYearly ? 'tahun' : 'bulan'}
                            </span>
                          )}
                        </div>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {/* ── Batas Penggunaan ──────────────────────────────── */}
                  <tr>
                    <td
                      colSpan={plans.length + 1}
                      className="py-3 px-4 bg-gray-50 font-semibold text-gray-700 text-sm border-b border-gray-200"
                    >
                      Batas Penggunaan
                    </td>
                  </tr>
                  {LIMIT_ROWS.map((row) => (
                    <tr
                      key={row.key}
                      className="border-b border-gray-100 hover:bg-gray-50/50 transition-colors"
                    >
                      <td className="py-3 px-4 text-sm text-gray-700">
                        {row.label}
                      </td>
                      {plans.map((plan) => (
                        <td
                          key={plan.id}
                          className={`py-3 px-4 text-center text-sm font-medium ${
                            plan.isPopular ? 'bg-primary-50/50' : ''
                          }`}
                        >
                          {formatLimit(
                            plan[row.key as keyof Plan] as number
                          )}
                        </td>
                      ))}
                    </tr>
                  ))}

                  {/* ── Feature Categories ────────────────────────────── */}
                  {FEATURE_CATEGORIES.map((category) => (
                    <Fragment key={category.name}>
                      <tr>
                        <td
                          colSpan={plans.length + 1}
                          className="py-3 px-4 bg-gray-50 font-semibold text-gray-700 text-sm border-b border-gray-200"
                        >
                          {category.name}
                        </td>
                      </tr>
                      {category.features.map((featureKey) => (
                        <tr
                          key={featureKey}
                          className="border-b border-gray-100 hover:bg-gray-50/50 transition-colors"
                        >
                          <td className="py-3 px-4 text-sm text-gray-700">
                            {PLAN_FEATURES[featureKey]?.label ?? featureKey}
                          </td>
                          {plans.map((plan) => {
                            const hasFeature =
                              plan.features.includes(featureKey)
                            return (
                              <td
                                key={plan.id}
                                className={`py-3 px-4 text-center ${
                                  plan.isPopular ? 'bg-primary-50/50' : ''
                                }`}
                              >
                                {hasFeature ? (
                                  <CheckCircle2 className="w-5 h-5 text-green-500 mx-auto" />
                                ) : (
                                  <X className="w-5 h-5 text-gray-300 mx-auto" />
                                )}
                              </td>
                            )
                          })}
                        </tr>
                      ))}
                    </Fragment>
                  ))}

                  {/* ── CTA Row ───────────────────────────────────────── */}
                  <tr>
                    <td className="py-6 px-4" />
                    {plans.map((plan) => (
                      <td
                        key={plan.id}
                        className={`py-6 px-4 text-center ${
                          plan.isPopular ? 'bg-primary-50/50' : ''
                        }`}
                      >
                        <Link
                          href="/register"
                          className={`inline-flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-sm transition-colors ${
                            plan.isPopular
                              ? 'bg-primary-600 text-white hover:bg-primary-700'
                              : 'bg-gray-900 text-white hover:bg-gray-800'
                          }`}
                        >
                          Pilih Paket <ArrowRight className="w-4 h-4" />
                        </Link>
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>

            {/* ── Mobile Card View ─────────────────────────────────────── */}
            <div className="md:hidden">
              {/* Plan Selector Tabs */}
              <div className="flex gap-1 bg-gray-100 rounded-xl p-1 mb-6 overflow-x-auto">
                {plans.map((plan, idx) => (
                  <button
                    key={plan.id}
                    onClick={() => setActivePlanIndex(idx)}
                    className={`flex-1 min-w-0 py-2.5 px-3 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${
                      activePlanIndex === idx
                        ? 'bg-white text-gray-900 shadow-sm'
                        : 'text-gray-600'
                    }`}
                  >
                    {plan.name}
                  </button>
                ))}
              </div>

              {/* Active Plan Card */}
              {plans[activePlanIndex] && (
                <MobilePlanCard
                  plan={plans[activePlanIndex]}
                  isYearly={isYearly}
                />
              )}
            </div>
          </div>
        </section>
      )}

      {/* ── FAQ Section ───────────────────────────────────────────────────── */}
      {!loading && (
        <section className="py-16 bg-gray-50">
          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-900 text-center mb-10">
              Pertanyaan yang Sering Ditanyakan
            </h2>
            <div className="space-y-3">
              {FAQ_ITEMS.map((item, idx) => (
                <div
                  key={idx}
                  className="bg-white rounded-xl border border-gray-200 overflow-hidden"
                >
                  <button
                    onClick={() =>
                      setOpenFaq(openFaq === idx ? null : idx)
                    }
                    className="w-full flex items-center justify-between px-6 py-4 text-left"
                  >
                    <span className="font-medium text-gray-900">
                      {item.question}
                    </span>
                    {openFaq === idx ? (
                      <ChevronUp className="w-5 h-5 text-gray-400 flex-shrink-0" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-gray-400 flex-shrink-0" />
                    )}
                  </button>
                  {openFaq === idx && (
                    <div className="px-6 pb-4 text-gray-600">
                      {item.answer}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── CTA Section ───────────────────────────────────────────────────── */}
      {!loading && (
        <section className="py-20 bg-primary-600">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Masih ragu? Mulai gratis dulu!
            </h2>
            <p className="text-lg text-primary-100 mb-8">
              Coba semua fitur dasar tanpa biaya. Upgrade kapan saja sesuai
              kebutuhan Anda.
            </p>
            <Link
              href="/register"
              className="inline-flex items-center gap-2 bg-white text-primary-600 hover:bg-primary-50 font-semibold text-lg px-8 py-4 rounded-lg transition-colors"
            >
              Daftar Gratis <ArrowRight className="w-5 h-5" />
            </Link>
          </div>
        </section>
      )}

      {/* ── Footer ────────────────────────────────────────────────────────── */}
      <footer className="bg-gray-900 text-gray-400 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12">
            {/* Brand */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <UtensilsCrossed className="w-7 h-7 text-primary-500" />
                <span className="text-white text-lg font-bold">RestoMenu</span>
              </div>
              <p className="text-sm leading-relaxed">
                Platform SaaS lengkap untuk manajemen restoran modern. QR menu,
                POS, multi-cabang, dan laporan keuangan dalam satu aplikasi.
              </p>
            </div>

            {/* Produk */}
            <div>
              <h4 className="text-white font-semibold mb-4">Produk</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="/#features"
                    className="hover:text-white transition-colors"
                  >
                    Fitur
                  </Link>
                </li>
                <li>
                  <Link
                    href="/#pricing"
                    className="hover:text-white transition-colors"
                  >
                    Harga
                  </Link>
                </li>
                <li>
                  <Link
                    href="/compare"
                    className="hover:text-white transition-colors"
                  >
                    Bandingkan Fitur
                  </Link>
                </li>
              </ul>
            </div>

            {/* Informasi */}
            <div>
              <h4 className="text-white font-semibold mb-4">Informasi</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="/p/contact"
                    className="hover:text-white transition-colors"
                  >
                    Kontak Kami
                  </Link>
                </li>
                <li>
                  <Link
                    href="/p/privacy-policy"
                    className="hover:text-white transition-colors"
                  >
                    Kebijakan Privasi
                  </Link>
                </li>
                <li>
                  <Link
                    href="/p/terms-and-conditions"
                    className="hover:text-white transition-colors"
                  >
                    Syarat & Ketentuan
                  </Link>
                </li>
                <li>
                  <Link
                    href="/p/refund-policy"
                    className="hover:text-white transition-colors"
                  >
                    Kebijakan Refund
                  </Link>
                </li>
              </ul>
            </div>

            {/* Akun */}
            <div>
              <h4 className="text-white font-semibold mb-4">Akun</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="/login"
                    className="hover:text-white transition-colors"
                  >
                    Masuk
                  </Link>
                </li>
                <li>
                  <Link
                    href="/register"
                    className="hover:text-white transition-colors"
                  >
                    Daftar Gratis
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
            <p>&copy; {new Date().getFullYear()} RestoMenu. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

// ─── Mobile Plan Card ────────────────────────────────────────────────────────

function MobilePlanCard({
  plan,
  isYearly,
}: {
  plan: Plan
  isYearly: boolean
}) {
  const displayPrice = isYearly ? plan.yearlyPrice : plan.price

  return (
    <div
      className={`rounded-2xl border-2 overflow-hidden ${
        plan.isPopular
          ? 'border-primary-500 bg-white'
          : 'border-gray-200 bg-white'
      }`}
    >
      {/* Card Header */}
      <div
        className={`px-6 py-5 ${
          plan.isPopular ? 'bg-primary-50' : 'bg-gray-50'
        }`}
      >
        {plan.isPopular && (
          <span className="inline-block text-xs font-semibold text-primary-600 bg-primary-100 px-3 py-0.5 rounded-full mb-2">
            Populer
          </span>
        )}
        <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>
        <div className="mt-1">
          <span className="text-2xl font-bold text-gray-900">
            {formatPrice(displayPrice)}
          </span>
          {displayPrice > 0 && (
            <span className="text-gray-500 text-sm">
              /{isYearly ? 'tahun' : 'bulan'}
            </span>
          )}
        </div>
      </div>

      {/* Limits */}
      <div className="px-6 py-4 border-b border-gray-100">
        <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
          Batas Penggunaan
        </h4>
        <div className="grid grid-cols-2 gap-3">
          {LIMIT_ROWS.map((row) => (
            <div key={row.key}>
              <div className="text-sm text-gray-500">{row.label}</div>
              <div className="text-sm font-semibold text-gray-900">
                {formatLimit(plan[row.key as keyof Plan] as number)}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Features by Category */}
      <div className="px-6 py-4 space-y-4">
        {FEATURE_CATEGORIES.map((category) => (
          <div key={category.name}>
            <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
              {category.name}
            </h4>
            <ul className="space-y-2">
              {category.features.map((featureKey) => {
                const hasFeature = plan.features.includes(featureKey)
                return (
                  <li key={featureKey} className="flex items-center gap-2">
                    {hasFeature ? (
                      <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
                    ) : (
                      <X className="w-4 h-4 text-gray-300 flex-shrink-0" />
                    )}
                    <span
                      className={`text-sm ${
                        hasFeature ? 'text-gray-700' : 'text-gray-400'
                      }`}
                    >
                      {PLAN_FEATURES[featureKey]?.label ?? featureKey}
                    </span>
                  </li>
                )
              })}
            </ul>
          </div>
        ))}
      </div>

      {/* CTA */}
      <div className="px-6 py-5 border-t border-gray-100">
        <Link
          href="/register"
          className={`flex items-center justify-center gap-2 w-full py-3 rounded-lg font-medium text-sm transition-colors ${
            plan.isPopular
              ? 'bg-primary-600 text-white hover:bg-primary-700'
              : 'bg-gray-900 text-white hover:bg-gray-800'
          }`}
        >
          Pilih Paket <ArrowRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  )
}