import React, { useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ArrowRight, CheckCircle2, FileText } from 'lucide-react'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { SERVICES } from '../lib/constants'
import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'
import { usePageMeta } from '../hooks/usePageMeta'

export const ServiceDetail: React.FC = () => {
  const locale = getLocaleFromPathname(window.location.pathname)
  const { serviceId } = useParams<{ serviceId: string }>()

  const service = useMemo(() => SERVICES.find((s) => s.id === serviceId), [serviceId])

  usePageMeta({
    title: service ? (locale === 'en' ? 'Service' : service.title) : locale === 'en' ? 'Service' : '服务',
    description: service?.description,
    locale,
  })

  const backHref = useMemo(() => withLocalePath(locale, '/services'), [locale])

  if (!service) {
    return (
      <motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        <Header />
        <main className="pt-32 pb-16">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <a href={backHref} className="text-sm text-gray-500 hover:text-primary">
              {locale === 'en' ? 'Back to Services' : '返回服务范围'}
            </a>
            <h1 className="mt-4 text-3xl font-semibold text-primary-dark">{locale === 'en' ? 'Service not found' : '未找到该服务'}</h1>
            <p className="mt-3 text-gray-600">{locale === 'en' ? 'Please check the URL.' : '请检查访问路径是否正确。'}</p>
          </div>
        </main>
        <Footer />
      </motion.div>
    )
  }

  const isTechService = service.id === 'tech-service'
  const highTechHref = withLocalePath(locale, '/services/tech-service/high-tech-enterprise')

  return (
    <motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      <Header />

      <main>
        <section className="pt-32 pb-10 bg-white border-b border-gray-100">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <a href={backHref} className="text-sm text-gray-500 hover:text-primary">
              {locale === 'en' ? 'Back to Services' : '返回服务范围'}
            </a>
            <h1 className="mt-3 text-3xl md:text-4xl font-semibold text-primary-dark">{service.title}</h1>
            <p className="mt-4 text-gray-600 leading-relaxed">{service.description}</p>
          </div>
        </section>

        <section className="py-12">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-2xl border border-gray-100 p-6 md:p-8">
              <h2 className="text-xl font-semibold text-primary-dark">{locale === 'en' ? 'What we provide' : '我们提供'}</h2>
              <div className="mt-5 grid sm:grid-cols-2 gap-3">
                {service.features.map((f) => (
                  <div key={f} className="flex items-start gap-3 rounded-xl bg-background border border-gray-100 p-4">
                    <CheckCircle2 size={18} className="mt-0.5 text-accent-dark" />
                    <div className="text-sm text-gray-700">{f}</div>
                  </div>
                ))}
              </div>

              {isTechService && (
                <div className="mt-8 rounded-2xl border border-gray-100 bg-background p-5">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <div className="flex items-center gap-2 text-sm font-semibold text-primary-dark">
                        <FileText size={18} className="text-primary" />
                        高新技术企业认定
                      </div>
                      <p className="mt-2 text-sm text-gray-600 leading-relaxed">
                        查看认定要求，并下载 2026 年高新技术企业认定申请表（付费下载 1 元）。
                      </p>
                    </div>
                    <a
                      href={highTechHref}
                      className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium text-white bg-primary hover:bg-primary-light transition-colors"
                    >
                      进入页面
                      <ArrowRight size={18} />
                    </a>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </motion.div>
  )
}

export default ServiceDetail
