'use client'

import { useCallback, useEffect, useMemo, useState } from 'react'
import clsx from 'clsx'
import { 
  ExternalLink, 
  Loader2, 
  Search, 
  Shield, 
  Sparkles, 
  Eye, 
  TrendingUp,
  RefreshCw,
  Filter,
  ChevronRight,
  Globe,
  Zap,
  X
} from 'lucide-react'
import { api } from '@/lib/api'
import { useAnalyzePanelStore } from '@/lib/analyze-store'
import { useStore } from '@/lib/store'

// ============================================================================
// HELPERS
// ============================================================================

function normalizeKeyword(s: string) {
  return s.trim().replace(/\s+/g, ' ')
}

// ============================================================================
// COMPONENT
// ============================================================================

export function TrendSurferTab({ showToast }: { showToast: (message: string, type?: any) => void }) {
  const openAnalyze = useAnalyzePanelStore((s) => s.open)
  const addDomain = useStore((s) => s.addDomain)
  
  // Trends State
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [geo, setGeo] = useState('US')
  const [trends, setTrends] = useState<Array<{ title: string; approx_traffic?: string | null; link?: string | null }>>([])
  const [selected, setSelected] = useState<string>('')
  const [refreshing, setRefreshing] = useState(false)

  // Keyword Check State
  const [keywordInput, setKeywordInput] = useState('')
  const [keywordFocused, setKeywordFocused] = useState(false)
  const [availability, setAvailability] = useState<Array<{ domain: string; status: string; is_available: boolean | null }>>([])
  const [checking, setChecking] = useState(false)

  // Typo Check State
  const [brand, setBrand] = useState('')
  const [brandFocused, setBrandFocused] = useState(false)
  const [typos, setTypos] = useState<Array<{ domain: string; status: string }>>([])
  const [typoLoading, setTypoLoading] = useState(false)
  
  // Tracking State
  const [tracking, setTracking] = useState<string | null>(null)

  const track = useCallback(
    async (domain: string) => {
      if (tracking) return
      setTracking(domain)
      try {
        await addDomain(domain)
        showToast(`Tracked ${domain}`, 'success')
      } catch (e) {
        showToast(e instanceof Error ? e.message : 'Failed to track domain', 'error')
      } finally {
        setTracking(null)
      }
    },
    [addDomain, showToast, tracking]
  )

  const loadTrends = useCallback(async (isRefresh = false) => {
    if (isRefresh) setRefreshing(true)
    setError(null)
    try {
      const res = await api.getHuntTrends(geo)
      setTrends(res.items || [])
      if (!selected && res.items?.[0]?.title) setSelected(res.items[0].title)
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e)
      setError(msg)
      showToast(msg, 'error')
      setTrends([])
    } finally {
      if (isRefresh) setRefreshing(false)
    }
  }, [geo, selected, showToast])

  useEffect(() => {
    let cancelled = false
    const run = async () => {
      setLoading(true)
      try {
        await loadTrends()
      } catch (e) {
        if (!cancelled) setError(e instanceof Error ? e.message : String(e))
      } finally {
        if (!cancelled) setLoading(false)
      }
    }
    run()
    return () => { cancelled = true }
  }, [loadTrends])

  const keyword = useMemo(() => normalizeKeyword(keywordInput || selected || ''), [keywordInput, selected])

  const runCheck = useCallback(async () => {
    if (!keyword) return
    setChecking(true)
    try {
      const kw = keyword.toLowerCase().replace(/\s+/g, '')
      const res = await api.huntKeywords({ keywords: [kw], tlds: ['com', 'io', 'ai', 'net', 'org'] })
      setAvailability(res.items.map((r) => ({ domain: r.domain, status: r.status, is_available: r.is_available })))
    } catch (e) {
      const msg = e instanceof Error ? e.message : 'Failed to check availability'
      showToast(msg, 'error')
      setAvailability([])
    } finally {
      setChecking(false)
    }
  }, [keyword, showToast])

  const runTypos = useCallback(async () => {
    const b = brand.trim()
    if (!b) return
    setTypoLoading(true)
    try {
      const res = await api.huntTypos({ brand: b, tlds: ['com'], limit: 50 })
      setTypos(res.items.map((i) => ({ domain: i.domain, status: i.status })))
    } catch (e) {
      const msg = e instanceof Error ? e.message : 'Failed to run typo check'
      showToast(msg, 'error')
      setTypos([])
    } finally {
      setTypoLoading(false)
    }
  }, [brand, showToast])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-6 h-6 text-accent animate-spin" />
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* Trends Header */}
      <div className="border border-white/[0.08] bg-[#020202]">
        <div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
              <TrendingUp className="w-4 h-4 text-accent" />
            </div>
            <div>
              <div className="text-sm font-bold text-white">Google Trends (24h)</div>
              <div className="text-[10px] font-mono text-white/40">Real-time trending topics</div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <select
              value={geo}
              onChange={(e) => setGeo(e.target.value)}
              className="bg-white/[0.02] border border-white/10 px-2 py-1.5 text-xs font-mono text-white/70 outline-none focus:border-accent/40"
            >
              <option value="US">🇺🇸 US</option>
              <option value="CH">🇨🇭 CH</option>
              <option value="DE">🇩🇪 DE</option>
              <option value="GB">🇬🇧 UK</option>
              <option value="FR">🇫🇷 FR</option>
            </select>
            <button
              onClick={() => loadTrends(true)}
              disabled={refreshing}
              className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
            >
              <RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
            </button>
          </div>
        </div>

        {error ? (
          <div className="p-4 text-xs font-mono text-red-400 bg-red-500/5">{error}</div>
        ) : (
          <div className="p-3 flex flex-wrap gap-2 max-h-[200px] overflow-y-auto">
            {trends.slice(0, 20).map((t) => {
              const active = selected === t.title
              return (
                <button
                  key={t.title}
                  onClick={() => {
                    setSelected(t.title)
                    setKeywordInput('')
                    setAvailability([])
                  }}
                  className={clsx(
                    'px-3 py-2 border text-xs font-mono transition-all',
                    active 
                      ? 'border-accent bg-accent/10 text-accent' 
                      : 'border-white/[0.08] text-white/60 hover:border-white/20 hover:text-white'
                  )}
                >
                  <span className="truncate max-w-[150px] block">{t.title}</span>
                  {t.approx_traffic && (
                    <span className="text-[9px] text-white/30 block mt-0.5">{t.approx_traffic}</span>
                  )}
                </button>
              )
            })}
          </div>
        )}
      </div>

      {/* Keyword Availability Check */}
      <div className="border border-white/[0.08] bg-[#020202]">
        <div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-white/[0.02] border border-white/[0.08] flex items-center justify-center">
              <Globe className="w-4 h-4 text-white/40" />
            </div>
            <div>
              <div className="text-sm font-bold text-white">Domain Availability</div>
              <div className="text-[10px] font-mono text-white/40">Check {keyword || 'keyword'} across TLDs</div>
            </div>
          </div>
        </div>

        <div className="p-4">
          <div className="flex gap-2 mb-4">
            <div className={clsx(
              "flex-1 relative border transition-all",
              keywordFocused ? "border-accent/50 bg-accent/[0.02]" : "border-white/[0.08] bg-white/[0.02]"
            )}>
              <div className="flex items-center">
                <Search className={clsx("w-4 h-4 ml-3 transition-colors", keywordFocused ? "text-accent" : "text-white/30")} />
                <input
                  value={keywordInput || selected}
                  onChange={(e) => setKeywordInput(e.target.value)}
                  onFocus={() => setKeywordFocused(true)}
                  onBlur={() => setKeywordFocused(false)}
                  placeholder="Type a keyword..."
                  className="flex-1 bg-transparent px-3 py-3 text-sm text-white placeholder:text-white/20 outline-none font-mono"
                />
                {(keywordInput || selected) && (
                  <button 
                    onClick={() => { setKeywordInput(''); setSelected(''); setAvailability([]) }} 
                    className="p-3 text-white/30 hover:text-white"
                  >
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>
            </div>
            <button
              onClick={runCheck}
              disabled={!keyword || checking}
              className={clsx(
                "px-4 py-3 text-xs font-bold uppercase tracking-wider transition-all",
                !keyword || checking
                  ? "bg-white/5 text-white/20"
                  : "bg-accent text-black hover:bg-white"
              )}
            >
              {checking ? <Loader2 className="w-4 h-4 animate-spin" /> : "Check"}
            </button>
          </div>

          {/* Results Grid */}
          {availability.length > 0 && (
            <div className="space-y-px bg-white/[0.04] border border-white/[0.08]">
              {availability.map((a) => (
                <div key={a.domain} className="bg-[#020202] hover:bg-white/[0.02] transition-colors p-3 flex items-center justify-between">
                  <div className="flex items-center gap-3 min-w-0 flex-1">
                    <div className={clsx(
                      "w-2 h-2 rounded-full shrink-0",
                      a.status === 'available' ? "bg-accent" : "bg-white/20"
                    )} />
                    <button
                      onClick={() => openAnalyze(a.domain)}
                      className="text-sm font-mono text-white/70 hover:text-accent truncate text-left"
                    >
                      {a.domain}
                    </button>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    <span className={clsx(
                      "text-[10px] font-mono font-bold px-2 py-0.5",
                      a.status === 'available' ? "text-accent bg-accent/10" : "text-white/30 bg-white/5"
                    )}>
                      {a.status.toUpperCase()}
                    </span>
                    <button
                      onClick={() => track(a.domain)}
                      disabled={tracking === a.domain}
                      className="w-7 h-7 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
                    >
                      {tracking === a.domain ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Eye className="w-3.5 h-3.5" />}
                    </button>
                    <button
                      onClick={() => openAnalyze(a.domain)}
                      className="w-7 h-7 flex items-center justify-center border border-white/10 text-white/30 hover:text-accent hover:border-accent/20 hover:bg-accent/10 transition-colors"
                    >
                      <Shield className="w-3.5 h-3.5" />
                    </button>
                    {a.status === 'available' && (
                      <a
                        href={`https://www.namecheap.com/domains/registration/results/?domain=${a.domain}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="h-7 px-2 bg-accent text-black text-[10px] font-bold uppercase flex items-center gap-1 hover:bg-white transition-colors"
                      >
                        Buy
                      </a>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}

          {availability.length === 0 && keyword && !checking && (
            <div className="text-center py-8 border border-dashed border-white/[0.08]">
              <Zap className="w-6 h-6 text-white/10 mx-auto mb-2" />
              <p className="text-white/30 text-xs font-mono">Click "Check" to find available domains</p>
            </div>
          )}
        </div>
      </div>

      {/* Typo Finder */}
      <div className="border border-white/[0.08] bg-[#020202]">
        <div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-white/[0.02] border border-white/[0.08] flex items-center justify-center">
              <Sparkles className="w-4 h-4 text-white/40" />
            </div>
            <div>
              <div className="text-sm font-bold text-white">Typo Finder</div>
              <div className="text-[10px] font-mono text-white/40">Find available typos of big brands</div>
            </div>
          </div>
        </div>

        <div className="p-4">
          <div className="flex gap-2 mb-4">
            <div className={clsx(
              "flex-1 relative border transition-all",
              brandFocused ? "border-accent/50 bg-accent/[0.02]" : "border-white/[0.08] bg-white/[0.02]"
            )}>
              <div className="flex items-center">
                <Sparkles className={clsx("w-4 h-4 ml-3 transition-colors", brandFocused ? "text-accent" : "text-white/30")} />
                <input
                  value={brand}
                  onChange={(e) => setBrand(e.target.value)}
                  onFocus={() => setBrandFocused(true)}
                  onBlur={() => setBrandFocused(false)}
                  placeholder="e.g. Shopify, Amazon, Google..."
                  className="flex-1 bg-transparent px-3 py-3 text-sm text-white placeholder:text-white/20 outline-none font-mono"
                />
                {brand && (
                  <button onClick={() => { setBrand(''); setTypos([]) }} className="p-3 text-white/30 hover:text-white">
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>
            </div>
            <button
              onClick={runTypos}
              disabled={!brand.trim() || typoLoading}
              className={clsx(
                "px-4 py-3 text-xs font-bold uppercase tracking-wider transition-all",
                !brand.trim() || typoLoading
                  ? "bg-white/5 text-white/20"
                  : "bg-white/10 text-white hover:bg-white/20"
              )}
            >
              {typoLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Find"}
            </button>
          </div>

          {/* Typo Results Grid */}
          {typos.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {typos.map((t) => (
                <div key={t.domain} className="border border-white/10 bg-white/[0.02] px-3 py-2 flex items-center justify-between group hover:border-accent/20 transition-colors">
                  <button
                    onClick={() => openAnalyze(t.domain)}
                    className="text-xs font-mono text-white/70 group-hover:text-accent truncate text-left transition-colors"
                  >
                    {t.domain}
                  </button>
                  <div className="flex items-center gap-2 shrink-0">
                    <span className="text-[9px] font-mono text-accent bg-accent/10 px-1.5 py-0.5">
                      {t.status.toUpperCase()}
                    </span>
                    <button
                      onClick={() => track(t.domain)}
                      disabled={tracking === t.domain}
                      className="w-6 h-6 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
                    >
                      {tracking === t.domain ? <Loader2 className="w-3 h-3 animate-spin" /> : <Eye className="w-3 h-3" />}
                    </button>
                    <a
                      href={`https://www.namecheap.com/domains/registration/results/?domain=${t.domain}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-6 h-6 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
                    >
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </div>
                </div>
              ))}
            </div>
          )}

          {typos.length === 0 && !typoLoading && (
            <div className="text-xs font-mono text-white/30 text-center py-4">
              Enter a brand name to find available typo domains
            </div>
          )}
        </div>
      </div>
    </div>
  )
}