'use client'

import { useEffect, useState, memo } from 'react'
import { useParams } from 'next/navigation'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import {
  Shield,
  Clock,
  Send,
  Loader2,
  AlertCircle,
  Sparkles,
  TrendingUp,
  ShieldCheck,
  Lock,
  ArrowRight,
  Check,
} from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'
import type { Listing } from './types'

// Tooltip Component
const Tooltip = memo(({ children, content }: { children: React.ReactNode; content: string }) => (
  <div className="relative flex items-center group/tooltip w-fit">
    {children}
    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
      {content}
      <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
    </div>
  </div>
))
Tooltip.displayName = 'Tooltip'

export default function BuyDomainClient({ initialListing }: { initialListing: Listing }) {
  const params = useParams()
  const slug = params.slug as string
  const { isAuthenticated, checkAuth, user, isLoading: authLoading } = useStore()

  const [listing, setListing] = useState<Listing | null>(initialListing)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // Inquiry form state
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    message: '',
    offer_amount: '',
  })

  useEffect(() => {
    checkAuth()
  }, [checkAuth])

  useEffect(() => {
    // If the route changes client-side, refetch
    if (!initialListing || initialListing.slug !== slug) {
      void loadListing()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [slug])

  // Prefill inquiry identity from authenticated user (no overrides once typed)
  useEffect(() => {
    if (!isAuthenticated || !user) return
    setFormData(prev => ({
      ...prev,
      name: prev.name || (user.name || ''),
      email: prev.email || user.email || '',
    }))
  }, [isAuthenticated, user])

  const loadListing = async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await api.request<Listing>(`/listings/${slug}`)
      setListing(data)
    } catch (err: any) {
      setError(err.message || 'Listing not found')
      setListing(null)
    } finally {
      setLoading(false)
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)

    try {
      await api.request(`/listings/${slug}/inquire`, {
        method: 'POST',
        body: JSON.stringify({
          ...formData,
          offer_amount: formData.offer_amount ? parseFloat(formData.offer_amount) : null,
        }),
      })
      setSubmitted(true)
    } catch (err: any) {
      setError(err.message || 'Failed to submit inquiry')
    } finally {
      setSubmitting(false)
    }
  }

  const formatPrice = (price: number, currency: string) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency,
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(price)
  }

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-emerald-400'
    if (score >= 60) return 'text-amber-400'
    return 'text-zinc-500'
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-zinc-900/50 via-black to-black" />
        <Loader2 className="w-8 h-8 text-emerald-500 animate-spin relative z-10" />
      </div>
    )
  }

  if (error || !listing) {
    return (
      <div className="min-h-screen bg-black text-white font-sans selection:bg-emerald-500/30">
        <Header />
        <main className="min-h-[70vh] flex items-center justify-center relative px-4">
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />

          <div className="max-w-md w-full text-center relative z-10">
            <div className="w-20 h-20 bg-zinc-900 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-zinc-800 shadow-2xl rotate-3">
              <AlertCircle className="w-10 h-10 text-zinc-500" />
            </div>
            <h1 className="text-3xl font-bold text-white mb-3 tracking-tight">Domain Unavailable</h1>
            <p className="text-zinc-500 mb-8 leading-relaxed">
              The domain you are looking for has been sold, removed, or is temporarily unavailable.
            </p>
            <Link
              href="/buy"
              className="inline-flex items-center gap-2 px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-zinc-200 transition-all hover:scale-105"
            >
              Browse Marketplace
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-emerald-500/30">
      <Header />

      <main className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8">
        <div className="fixed inset-0 pointer-events-none">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[1000px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-zinc-900/50 via-black to-black" />
          <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent" />
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:48px_48px] mask-image-gradient-to-b" />
        </div>

        <div className="max-w-7xl mx-auto relative z-10">
          <div className="flex justify-center mb-8 sm:mb-10">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-emerald-500/20 bg-emerald-500/5 text-emerald-400 text-sm font-bold uppercase tracking-widest shadow-[0_0_20px_rgba(16,185,129,0.2)]">
              <ShieldCheck className="w-4 h-4" />
              Verified Listing
            </div>
          </div>

          <div className="text-center mb-16 sm:mb-24 relative max-w-5xl mx-auto">
            <h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[7rem] leading-[0.9] tracking-[-0.03em] text-white drop-shadow-2xl break-words">
              {listing.domain}
            </h1>
            {listing.title && (
              <p className="mt-6 sm:mt-8 text-xl sm:text-2xl md:text-3xl text-zinc-400 max-w-3xl mx-auto font-light leading-relaxed">
                {listing.title}
              </p>
            )}
          </div>

          <div className="grid lg:grid-cols-12 gap-12 lg:gap-24 items-start">
            <div className="lg:col-span-7 space-y-12">
              {listing.description && (
                <div className="prose prose-invert prose-lg max-w-none">
                  <h3 className="text-2xl font-bold text-white mb-4">About this Asset</h3>
                  <p className="text-zinc-400 leading-relaxed text-lg whitespace-pre-line">{listing.description}</p>
                </div>
              )}

              <div className="grid sm:grid-cols-2 gap-4">
                <div className="p-6 rounded-2xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                  <div className="relative z-10">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-400">
                        <Sparkles className="w-5 h-5" />
                      </div>
                      <span className="text-sm font-bold text-zinc-500 uppercase tracking-wider">Pounce Score</span>
                    </div>
                    <div className="flex items-baseline gap-2">
                      <span className={clsx('text-4xl font-bold', getScoreColor(listing.pounce_score || 0))}>
                        {listing.pounce_score || 'N/A'}
                      </span>
                      <span className="text-lg text-zinc-600">/100</span>
                    </div>
                    <p className="mt-2 text-xs text-zinc-500">Based on length, TLD, and market demand.</p>
                  </div>
                </div>

                <div className="p-6 rounded-2xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm flex flex-col justify-center relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                  <div className="relative z-10">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400">
                        <TrendingUp className="w-5 h-5" />
                      </div>
                      <span className="text-sm font-bold text-zinc-500 uppercase tracking-wider">Est. Value</span>
                    </div>
                    <div className="flex items-baseline gap-2">
                      <span className="text-4xl font-bold text-white">
                        {listing.estimated_value ? formatPrice(listing.estimated_value, listing.currency) : '—'}
                      </span>
                    </div>
                    <p className="mt-2 text-xs text-zinc-500">Automated valuation estimate.</p>
                  </div>
                </div>
              </div>

              <div className="pt-8 border-t border-white/5">
                <h3 className="text-lg font-bold text-white mb-6">Secure Transfer Guarantee</h3>
                <div className="grid sm:grid-cols-3 gap-6">
                  <div className="flex flex-col gap-3">
                    <div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-400 border border-white/5">
                      <Lock className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-bold text-white text-sm">Escrow Service</h4>
                      <p className="text-xs text-zinc-500 mt-1">Funds held until transfer is complete.</p>
                    </div>
                  </div>
                  <div className="flex flex-col gap-3">
                    <div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-400 border border-white/5">
                      <Shield className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-bold text-white text-sm">Verified Owner</h4>
                      <p className="text-xs text-zinc-500 mt-1">Ownership verified via DNS validation.</p>
                    </div>
                  </div>
                  <div className="flex flex-col gap-3">
                    <div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-400 border border-white/5">
                      <Clock className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-bold text-white text-sm">Fast Transfer</h4>
                      <p className="text-xs text-zinc-500 mt-1">Most transfers complete within 24 hours.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="lg:col-span-5 relative">
              <div className="sticky top-32">
                <div className="absolute -inset-1 bg-gradient-to-b from-emerald-500/20 to-blue-500/20 rounded-3xl blur-2xl opacity-50" />

                <div className="relative bg-black border border-white/10 rounded-2xl p-8 shadow-2xl overflow-hidden">
                  <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />

                  {!submitted ? (
                    <>
                      <div className="mb-8">
                        <p className="text-sm font-medium text-zinc-400 uppercase tracking-widest mb-2">
                          {listing.price_type === 'fixed' ? 'Buy Now Price' : 'Asking Price'}
                        </p>
                        <div className="flex items-baseline gap-2">
                          {listing.asking_price ? (
                            <span className="text-5xl font-bold text-white tracking-tight">
                              {formatPrice(listing.asking_price, listing.currency)}
                            </span>
                          ) : (
                            <span className="text-4xl font-bold text-white tracking-tight">Make Offer</span>
                          )}
                          {listing.price_type === 'negotiable' && listing.asking_price && (
                            <span className="px-2 py-1 bg-white/10 rounded text-[10px] font-bold uppercase tracking-wider text-white">
                              Negotiable
                            </span>
                          )}
                        </div>
                      </div>

                      {authLoading ? (
                        <div className="flex items-center justify-center py-10">
                          <Loader2 className="w-5 h-5 text-emerald-500 animate-spin" />
                        </div>
                      ) : !isAuthenticated ? (
                        <div className="space-y-4 animate-fade-in">
                          <div className="p-4 rounded-xl border border-white/10 bg-zinc-900/30">
                            <div className="flex items-start gap-3">
                              <div className="w-10 h-10 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-400 border border-white/5 shrink-0">
                                <Lock className="w-5 h-5" />
                              </div>
                              <div className="flex-1">
                                <h3 className="font-bold text-white text-lg">Contact requires login</h3>
                                <p className="text-sm text-zinc-400 mt-1">
                                  To protect sellers from spam, inquiries are only available for logged-in accounts.
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="grid grid-cols-2 gap-3">
                            <Link
                              href={`/login?redirect=${encodeURIComponent(`/buy/${slug}`)}`}
                              className="w-full py-3 bg-white text-black font-bold rounded-xl hover:bg-zinc-200 transition-all flex items-center justify-center gap-2"
                            >
                              Login
                              <ArrowRight className="w-4 h-4" />
                            </Link>
                            <Link
                              href={`/register?redirect=${encodeURIComponent(`/buy/${slug}`)}`}
                              className="w-full py-3 bg-zinc-900/50 border border-white/10 text-white font-bold rounded-xl hover:border-emerald-500/40 transition-all flex items-center justify-center gap-2"
                            >
                              Create Account
                              <ArrowRight className="w-4 h-4" />
                            </Link>
                          </div>
                        </div>
                      ) : (
                        <form onSubmit={handleSubmit} className="space-y-4 animate-fade-in">
                          <div className="flex items-center justify-between mb-4">
                            <h3 className="font-bold text-white text-lg">
                              {listing.asking_price ? 'Purchase Inquiry' : 'Contact Seller'}
                            </h3>
                          </div>

                          <div className="space-y-3">
                            <div className="grid grid-cols-2 gap-3">
                              <input
                                type="text"
                                placeholder="Name"
                                required
                                value={formData.name}
                                onChange={e => setFormData({ ...formData, name: e.target.value })}
                                className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
                              />
                              <input
                                type="email"
                                placeholder="Email"
                                required
                                value={formData.email}
                                onChange={e => setFormData({ ...formData, email: e.target.value })}
                                readOnly={isAuthenticated}
                                title={isAuthenticated ? 'Uses your account email' : undefined}
                                className={clsx(
                                  'w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all',
                                  isAuthenticated && 'opacity-70 cursor-not-allowed'
                                )}
                              />
                            </div>
                            {isAuthenticated && (
                              <p className="text-[10px] text-zinc-600 font-mono">Inquiries are sent from your account email.</p>
                            )}
                            <input
                              type="text"
                              placeholder="Phone (Optional)"
                              value={formData.phone}
                              onChange={e => setFormData({ ...formData, phone: e.target.value })}
                              className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
                            />
                            {listing.allow_offers && (
                              <div className="relative">
                                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">$</span>
                                <input
                                  type="number"
                                  placeholder="Your Offer Amount"
                                  value={formData.offer_amount}
                                  onChange={e => setFormData({ ...formData, offer_amount: e.target.value })}
                                  className="w-full bg-zinc-900/50 border border-white/10 rounded-lg pl-8 pr-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
                                />
                              </div>
                            )}
                            <textarea
                              placeholder="I'm interested in this domain..."
                              rows={3}
                              required
                              value={formData.message}
                              onChange={e => setFormData({ ...formData, message: e.target.value })}
                              className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all resize-none"
                            />
                          </div>

                          <button
                            type="submit"
                            disabled={submitting}
                            className="w-full py-4 bg-white text-black font-bold text-lg rounded-xl hover:bg-zinc-200 transition-all disabled:opacity-50 flex items-center justify-center gap-2 mt-6 shadow-lg shadow-white/10"
                          >
                            {submitting ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-5 h-5" />}
                            {listing.asking_price ? 'Send Purchase Request' : 'Send Offer'}
                          </button>

                          <p className="text-center text-xs text-zinc-600 mt-3">Secure escrow transfer available via Escrow.com</p>
                        </form>
                      )}

                      {/* Powered by Pounce (viral loop) */}
                      {listing.seller_invite_code ? (
                        <div className="mt-6 pt-6 border-t border-white/10">
                          <p className="text-xs text-zinc-600 text-center">
                            Powered by Pounce —{' '}
                            <Link
                              href={`/register?ref=${encodeURIComponent(listing.seller_invite_code)}`}
                              className="text-emerald-400 hover:text-emerald-300 underline-offset-4 hover:underline"
                            >
                              create your own verified listing
                            </Link>
                          </p>
                        </div>
                      ) : null}
                    </>
                  ) : (
                    <div className="text-center py-12 animate-fade-in">
                      <div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-4 text-emerald-400">
                        <Check className="w-8 h-8" />
                      </div>
                      <h3 className="text-2xl font-bold text-white mb-2">Inquiry Sent</h3>
                      <p className="text-zinc-400">
                        The seller has been notified. You can continue the conversation in your inbox.
                      </p>
                      <div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
                        <Link
                          href="/terminal/inbox"
                          className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-black font-bold rounded-xl hover:bg-zinc-200 transition-all"
                        >
                          Open Inbox
                          <ArrowRight className="w-4 h-4" />
                        </Link>
                        <button
                          onClick={() => setSubmitted(false)}
                          className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-zinc-900/50 border border-white/10 text-white font-bold rounded-xl hover:border-emerald-500/40 transition-all"
                        >
                          Send another message
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}

