import { SupportHero } from '@/components/support/Hero'
import { SupportQuickActions } from '@/components/support/QuickActions'
import { SupportContactInfo } from '@/components/support/ContactInfo'
import { SupportResources } from '@/components/support/Resources'
import { FaqComponent } from '@/components/faqs/FaqFinal'
import { getServerOrgCode } from '@/lib/org'
import { resolveTenantBranding, resolveTenantSupport } from '@/lib/tenantPresentation.server'
import { buildSupportViewModel } from '@/components/support/supportViewModel'
import { unstable_cache } from 'next/cache'
import { getFaq } from '@/sanity/cms'
import { resolveSanityOrgCode } from '@/sanity/faqOrg'
import Link from 'next/link'

export const dynamic = 'force-dynamic'

type FaqItem = {
  _id?: unknown
  question?: unknown
  answer?: unknown
}

type PortableTextBlock = {
  children?: Array<{ text?: unknown }>
}

export default async function SupportPage() {
  const [branding, support] = await Promise.all([
    resolveTenantBranding(),
    resolveTenantSupport(),
  ])
  const supportViewModel = buildSupportViewModel(
    support,
    branding.displayName || support.name || 'Tiar',
    branding.primaryColor,
  )
  const serverOrgCode = await getServerOrgCode()
  const orgCode = resolveSanityOrgCode(serverOrgCode, process.env.SANITY_ORG_CODE)


  const fetchFaq = unstable_cache(
    async () => getFaq(orgCode, 'web.' + orgCode),
    ['faq', orgCode],
    { tags: [`faq:${orgCode}`] }
  )

  const faqItems = await fetchFaq()

  

  const faqs = (faqItems || []).map((f: FaqItem) => {
    const toPlainText = (val: unknown): string => {
      if (typeof val === 'string') return val
      if (Array.isArray(val)) {
        return val
          .map((block: PortableTextBlock) => (block?.children || [])
            .map((c) => typeof c?.text === 'string' ? c.text : '')
            .join(''))
          .join('\n\n')
      }
      return ''
    }
    return {
      id: f._id as string,
      title: f.question as string,
      content: toPlainText(f.answer),
    }
  })

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      <SupportHero support={supportViewModel} />
      <SupportQuickActions support={supportViewModel} />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">Frequently Asked Questions</h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Find quick answers to the most common questions about our platform.</p>
        </div>
        <FaqComponent faqs={faqs} />
      </div>
      <SupportContactInfo support={supportViewModel} />
      <SupportResources support={supportViewModel} />
      <footer className="border-t border-gray-200 dark:border-gray-800 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
        <div className="text-sm text-gray-600 dark:text-gray-300">
          © {new Date().getFullYear()} {supportViewModel.displayName}. All rights reserved.
        </div>
          <div className="flex items-center gap-4">
            <Link href={`/terms-and-conditions`} className="text-sm font-medium text-brand-600 hover:text-brand-700 underline">
              Terms & Conditions
            </Link>
            <Link href={`/refund-policies`} className="text-sm font-medium text-brand-600 hover:text-brand-700 underline">
              Withdraw Policy
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}