'use client'

import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { ArrowRight } from 'lucide-react'
import { useApp } from '@/components/providers/AppProvider'

export function ConsultingSubmitSuccessClient() {
  const searchParams = useSearchParams()
  const { consultingRequests } = useApp()
  const request = consultingRequests.find((item) => item.id === searchParams.get('requestId'))

  return (
    <section className="relative grid min-h-[calc(100vh-70px)] place-items-center overflow-hidden bg-[linear-gradient(135deg,#f6f9ff_0%,#eef5ff_48%,#ffffff_48%,#ffffff_100%)] px-6 py-12 md:min-h-[calc(100vh-106px)]">
      <div className="absolute left-0 top-0 h-full w-[22vw] border-r border-white/70 bg-white/25" aria-hidden />
      <div className="absolute bottom-0 right-0 h-36 w-[44vw] border-t border-line bg-bg/70" aria-hidden />

      <div className="relative w-full max-w-[900px] bg-white/82 p-10 shadow-[0_28px_90px_rgba(15,23,42,0.14)] backdrop-blur-md md:p-14">
        <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
          <div>
            <h1 className="text-[38px] font-extrabold leading-tight text-ink md:text-[52px]">咨询意向已提交</h1>
          </div>

          {request && (
            <div className="min-w-[240px] border-l-4 border-brand bg-bg/80 p-5">
              <div className="text-xs font-bold text-muted">咨询编号</div>
              <div className="mt-1 break-all text-sm font-extrabold text-ink">{request.id}</div>
            </div>
          )}
        </div>

        <div className="mt-10 flex flex-wrap gap-3 border-t border-line pt-8">
          <Link href="/account/consulting" className="inline-flex h-12 items-center justify-center gap-2 rounded-[4px] bg-brand px-7 text-sm font-extrabold text-white hover:bg-brand-dark">
            进入个人中心
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link href="/" className="inline-flex h-12 items-center justify-center rounded-[4px] border border-line px-7 text-sm font-extrabold text-muted hover:border-brand hover:text-brand">返回首页</Link>
        </div>
      </div>
    </section>
  )
}
