import { getPublicSiteDictionary } from '@/lib/i18n'
import { getPublicSiteLanguage } from '@/lib/i18n.server'
import { DEFAULT_COMPANY_SLUG, siteFetchOrDefault } from '@/lib/api'
import type { PublicSitePageSections } from '@rentaldrivego/types'
import { resolvePageSectionsConfig } from '@/lib/pageSections'

const plans = [
  {
    name: 'Starter',
    price: 'MAD 499',
    cadence: '/month',
  },
  {
    name: 'Growth',
    price: 'MAD 999',
    cadence: '/month',
    highlighted: true,
  },
  {
    name: 'Pro',
    price: 'Custom',
    cadence: '',
  },
]

interface BrandResponse {
  brand: {
    menuConfig?: {
      pageSections?: Partial<PublicSitePageSections> | null
    } | null
  } | null
}

export default async function PricingPage() {
  const dict = getPublicSiteDictionary(getPublicSiteLanguage())
  const brand = await siteFetchOrDefault<BrandResponse | null>(`/site/${DEFAULT_COMPANY_SLUG}/brand`, null)
  const pageSections = resolvePageSectionsConfig(brand?.brand?.menuConfig)
  const localizedPlans = plans.map((plan) => ({
    ...plan,
    description:
      plan.name === 'Starter'
        ? dict.pricing.plans.starterDescription
        : plan.name === 'Growth'
        ? dict.pricing.plans.growthDescription
        : dict.pricing.plans.proDescription,
    features:
      plan.name === 'Starter'
        ? dict.pricing.plans.starterFeatures
        : plan.name === 'Growth'
        ? dict.pricing.plans.growthFeatures
        : dict.pricing.plans.proFeatures,
  }))
  const faqs = [
    {
      question: dict.pricing.faq.paymentMethodsQuestion,
      answer: dict.pricing.faq.paymentMethodsAnswer,
    },
    {
      question: dict.pricing.faq.connectPaymentsQuestion,
      answer: dict.pricing.faq.connectPaymentsAnswer,
    },
    {
      question: dict.pricing.faq.supportedCurrenciesQuestion,
      answer: dict.pricing.faq.supportedCurrenciesAnswer,
    },
  ]

  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#eff6ff,white_18%,#f8fafc)] py-16">
      <div className="shell space-y-12">
        {pageSections.pricing.hero ? <section className="mx-auto max-w-3xl text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">{dict.pricing.eyebrow}</p>
          <h1 className="mt-4 text-5xl font-black tracking-tight text-slate-900">{dict.pricing.title}</h1>
          <p className="mt-5 text-lg leading-8 text-slate-600">
            {dict.pricing.description}
          </p>
        </section> : null}

        {pageSections.pricing.plans ? <section className="grid gap-6 lg:grid-cols-3">
          {localizedPlans.map((plan) => (
            <article
              key={plan.name}
              className={`card p-8 ${plan.highlighted ? 'border-sky-300 shadow-lg shadow-sky-100' : ''}`}
            >
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-black text-slate-900">{plan.name}</h2>
                  <p className="mt-3 text-sm leading-6 text-slate-600">{plan.description}</p>
                </div>
                {plan.highlighted ? (
                  <span className="rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-sky-800">
                    {dict.pricing.popular}
                  </span>
                ) : null}
              </div>

              <div className="mt-8 flex items-end gap-2">
                <span className="text-4xl font-black tracking-tight text-slate-900">{plan.price}</span>
                {plan.cadence ? <span className="pb-1 text-sm text-slate-500">{plan.cadence}</span> : null}
              </div>

              <ul className="mt-8 space-y-3">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex gap-3 text-sm text-slate-700">
                    <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-100 text-xs font-bold text-sky-700">+</span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </section> : null}

        {pageSections.pricing.payments ? <section className="card p-8">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
              <h2 className="text-2xl font-black text-slate-900">{dict.pricing.acceptedPaymentMethods}</h2>
              <p className="mt-2 text-sm text-slate-600">{dict.pricing.paymentsDescription}</p>
            </div>
            <div className="flex flex-wrap gap-3">
              <span className="rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-700">AmanPay</span>
              <span className="rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-700">PayPal</span>
              <span className="rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-700">MAD · USD · EUR</span>
            </div>
          </div>
        </section> : null}

        {pageSections.pricing.faq ? <section className="grid gap-4">
          {faqs.map((faq) => (
            <article key={faq.question} className="card p-6">
              <h3 className="text-lg font-bold text-slate-900">{faq.question}</h3>
              <p className="mt-2 text-sm leading-7 text-slate-600">{faq.answer}</p>
            </article>
          ))}
        </section> : null}
      </div>
    </main>
  )
}
