pounce/frontend/src/components/analyze/AnalyzePanel.tsx

'use client'

import { useCallback, useEffect, useMemo, useState } from 'react'
import clsx from 'clsx'
import { 
  X, 
  RefreshCw, 
  Copy, 
  ExternalLink, 
  Shield, 
  TrendingUp, 
  AlertTriangle, 
  DollarSign,
  Check,
  Zap,
  Globe,
  ChevronRight,
  CheckCircle2,
  XCircle,
  Sparkles,
  Clock,
} from 'lucide-react'
import { api } from '@/lib/api'
import { useAnalyzePanelStore } from '@/lib/analyze-store'
import { formatCountdown, parseIsoAsUtc } from '@/lib/time'
import type { AnalyzeResponse, AnalyzeSection, AnalyzeItem } from '@/components/analyze/types'
import { VisionSection } from '@/components/analyze/VisionSection'

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

function getStatusColor(status: string) {
  switch (status) {
    case 'pass':
      return { bg: 'bg-accent/10', text: 'text-accent', border: 'border-accent/30', icon: CheckCircle2 }
    case 'warn':
      return { bg: 'bg-amber-400/10', text: 'text-amber-400', border: 'border-amber-400/30', icon: AlertTriangle }
    case 'fail':
      return { bg: 'bg-rose-500/10', text: 'text-rose-400', border: 'border-rose-500/30', icon: XCircle }
    default:
      return { bg: 'bg-white/5', text: 'text-white/40', border: 'border-white/10', icon: null }
  }
}

function getSectionConfig(key: string) {
  // Minimalist monochrome style matching Hunt pages
  const base = { 
    bg: 'bg-white/[0.02]', 
    border: 'border-white/[0.08]',
    color: 'text-white/60'
  }
  
  switch (key) {
    case 'authority':
      return { 
        ...base,
        icon: Shield, 
        description: 'Age, backlinks, trust signals',
        tooltip: 'Authority measures how established and trusted the domain is.'
      }
    case 'market':
      return { 
        ...base,
        icon: TrendingUp, 
        description: 'Search demand, CPC, TLD availability',
        tooltip: 'Market data shows commercial potential.'
      }
    case 'risk':
      return { 
        ...base,
        icon: AlertTriangle, 
        description: 'Trademarks, blacklists, history',
        tooltip: 'Risk checks help avoid legal issues.'
      }
    case 'value':
      return { 
        ...base,
        icon: DollarSign, 
        description: 'Estimated worth, comparable sales',
        tooltip: 'Value estimation based on market data.'
      }
    case 'vision':
      return { 
        ...base,
        icon: Sparkles, 
        color: 'text-accent',
        description: 'AI business insights',
        tooltip: 'AI-powered analysis for this domain.'
      }
    default:
      return { 
        ...base,
        icon: Globe, 
        description: '',
        tooltip: ''
      }
  }
}

async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text)
    return true
  } catch {
    return false
  }
}

function formatValue(value: unknown, key?: string): string {
  if (value === null || value === undefined) return '—'
  if (typeof value === 'string') return value
  if (typeof value === 'number') {
    // Format USD values with currency symbol
    const usdKeys = ['cheapest_registration', 'cheapest_renewal', 'cheapest_transfer', 'renewal_burn', 'estimated_value', 'cpc']
    if (key && usdKeys.some(k => key.toLowerCase().includes(k.replace('_', '')))) {
      return `$${value.toFixed(2)}`
    }
    return String(value)
  }
  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
  if (Array.isArray(value)) return `${value.length} items`
  return 'Details'
}

function isMatrix(item: AnalyzeItem) {
  return item.key === 'tld_matrix' && Array.isArray(item.value)
}

function getItemTooltip(key: string): string {
  const tooltips: Record<string, string> = {
    // Authority
    domain_age: 'Registration age of the domain. Older domains typically have more authority and trust in search engines. 5+ years is excellent.',
    age: 'Registration age of the domain. Older domains typically have more authority and trust in search engines. 5+ years is excellent.',
    backlinks: 'Number of external websites linking to this domain. More backlinks = higher authority. Quality matters more than quantity.',
    trust_flow: 'Majestic Trust Flow score (0-100). Measures the quality of backlinks. Higher = more trusted by search engines.',
    citation_flow: 'Majestic Citation Flow score (0-100). Measures the quantity of backlinks regardless of quality.',
    radio_test: 'Pronounceability test. Can someone spell the domain correctly after hearing it once? Important for word-of-mouth.',
    syllables: 'Number of syllables. Fewer is better - 2-3 syllables is ideal for brandability.',
    
    // Market
    search_volume: 'Monthly Google searches for the main keyword. Higher = more organic traffic potential.',
    cpc: 'Google Ads Cost-Per-Click. Higher CPC = more commercial intent. $5+ indicates strong buyer intent.',
    tld_matrix: 'Availability across popular TLDs (.com, .net, .org etc). Green = available for registration.',
    competition: 'SEO competition level. Lower = easier to rank. "Low" is ideal for new sites.',
    
    // Risk
    trademark: 'USPTO trademark database check. "Clear" means no conflicts found. Always verify before buying.',
    blacklist: 'Spam and malware blacklist check. "Clean" means domain is not flagged by security services.',
    archive: 'Wayback Machine first capture date. Shows domain history and previous content.',
    spam_score: 'Moz Spam Score (0-100). Lower = cleaner history. Above 30% is concerning.',
    
    // Value
    estimated_value: 'AI-estimated market value based on comparable sales, length, keywords, and extension.',
    comps: 'Recently sold domains with similar characteristics. Used to determine market value.',
    price_range: 'Suggested listing price range based on market analysis.',
    
    // DNS
    dns_records: 'Active DNS records. Shows if domain is currently configured.',
    nameservers: 'Current nameservers. Indicates where domain is hosted.',
    mx_records: 'Mail exchange records. Shows if email is configured.',
    
    // General
    length: 'Character count. Shorter is generally more valuable. Under 8 characters is premium.',
    extension: 'Top-level domain (.com, .io, etc). .com is most valuable, followed by ccTLDs and new gTLDs.',
  }
  return tooltips[key] || ''
}

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

export function AnalyzePanel() {
  const { 
    isOpen, 
    domain, 
    close, 
    fastMode, 
    setFastMode, 
    sectionVisibility, 
    setSectionVisibility,
    dropStatus,
  } = useAnalyzePanelStore()

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<AnalyzeResponse | null>(null)
  const [copied, setCopied] = useState(false)
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
    authority: true,
    market: true,
    risk: true,
    value: true,
    vision: true,
  })

  const refresh = useCallback(async () => {
    if (!domain) return
    setLoading(true)
    setError(null)
    try {
      const res = await api.analyzeDomain(domain, { fast: fastMode, refresh: true })
      setData(res)
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e))
      setData(null)
    } finally {
      setLoading(false)
    }
  }, [domain, fastMode])

  useEffect(() => {
    if (!isOpen || !domain) return
    let cancelled = false
    const run = async () => {
      setLoading(true)
      setError(null)
      try {
        const res = await api.analyzeDomain(domain, { fast: fastMode, refresh: false })
        if (!cancelled) setData(res)
      } catch (e) {
        if (!cancelled) {
          setError(e instanceof Error ? e.message : String(e))
          setData(null)
        }
      } finally {
        if (!cancelled) setLoading(false)
      }
    }
    run()
    return () => { cancelled = true }
  }, [isOpen, domain, fastMode])

  // ESC to close
  useEffect(() => {
    if (!isOpen) return
    const onKey = (ev: KeyboardEvent) => {
      if (ev.key === 'Escape') close()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [isOpen, close])

  const toggleSection = useCallback((key: string) => {
    setExpandedSections(prev => ({ ...prev, [key]: !prev[key] }))
  }, [])

  const visibleSections = useMemo(() => {
    const sections = data?.sections || []
    const order = ['authority', 'market', 'risk', 'value']
    const sorted = [...sections]
      .sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key))
      .filter((s) => sectionVisibility[s.key] !== false)

    // Append VISION section
    if (sectionVisibility.vision !== false) {
      const visionSection: AnalyzeSection = { key: 'vision', title: 'VISION', items: [] }
      return [...sorted, visionSection]
    }
    return sorted
  }, [data, sectionVisibility])

  // Calculate overall score
  const overallScore = useMemo(() => {
    if (!data?.sections) return null
    let pass = 0, warn = 0, fail = 0
    data.sections.forEach(s => {
      s.items.forEach(item => {
        if (item.status === 'pass') pass++
        else if (item.status === 'warn') warn++
        else if (item.status === 'fail') fail++
      })
    })
    const total = pass + warn + fail
    if (total === 0) return null
    const score = Math.round((pass * 100 + warn * 50) / total)
    return { score, pass, warn, fail, total }
  }, [data])

  const headerDomain = data?.domain || domain || ''
  const dropCountdown = useMemo(() => formatCountdown(dropStatus?.deletion_date ?? null), [dropStatus])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-[200]">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/90 backdrop-blur-sm" 
        onClick={close} 
      />

      {/* Panel */}
      <div className="absolute right-0 top-0 bottom-0 w-full sm:w-[560px] lg:w-[640px] bg-[#030303] border-l border-white/[0.08] flex flex-col overflow-hidden">
        
        {/* Header */}
        <div className="shrink-0 border-b border-white/[0.08]">
          {/* Top Bar */}
          <div className="px-5 py-4 flex items-center justify-between gap-4">
            <div className="min-w-0">
              <div className="text-[10px] font-mono text-white/50 uppercase tracking-wider mb-1">Domain Analysis</div>
              <div className="text-xl font-bold text-white font-mono truncate">
                {headerDomain}
              </div>
            </div>
            
            <div className="flex items-center gap-1 shrink-0">
              <button
                onClick={async () => {
                  const ok = await copyToClipboard(headerDomain)
                  setCopied(ok)
                  setTimeout(() => setCopied(false), 1500)
                }}
                className={clsx(
                  "w-9 h-9 flex items-center justify-center transition-all border border-white/[0.08]",
                  copied ? "text-accent bg-accent/10" : "text-white/50 hover:text-white hover:bg-white/[0.05]"
                )}
                title="Copy domain"
              >
                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
              </button>
              <a
                href={`https://${encodeURIComponent(headerDomain)}`}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
                title="Visit domain"
              >
                <ExternalLink className="w-4 h-4" />
              </a>
              <button
                onClick={refresh}
                disabled={loading}
                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08] disabled:opacity-50"
                title="Refresh"
              >
                <RefreshCw className={clsx('w-4 h-4', loading && 'animate-spin')} />
              </button>
              <button 
                onClick={close} 
                className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
                title="Close (ESC)"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          </div>

          {/* Score Bar */}
          {overallScore && !loading && (
            <div className="px-5 pb-4">
              <div className="flex items-center gap-4 p-4 bg-white/[0.02] border border-white/[0.08]">
                <div 
                  className={clsx(
                    "w-16 h-16 flex items-center justify-center border-2",
                    overallScore.score >= 70 ? "border-accent bg-accent/10 text-accent" : 
                    overallScore.score >= 40 ? "border-amber-400 bg-amber-400/10 text-amber-400" : "border-rose-500 bg-rose-500/10 text-rose-400"
                  )}
                >
                  <span className="text-2xl font-bold font-mono">{overallScore.score}</span>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-bold text-white mb-2">Health Score</div>
                  <div className="h-2 bg-white/[0.05] overflow-hidden flex mb-2">
                    <div className="h-full bg-accent" style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }} />
                    <div className="h-full bg-amber-400" style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }} />
                    <div className="h-full bg-rose-500" style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }} />
                  </div>
                  <div className="flex items-center gap-4 text-xs font-mono">
                    <span className="text-accent">{overallScore.pass} passed</span>
                    <span className="text-amber-400">{overallScore.warn} warnings</span>
                    <span className="text-rose-400">{overallScore.fail} failed</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Drop Status Banner */}
          {dropStatus && (
            <div className="px-5 pb-3">
              <div className={clsx(
                "p-4 border flex items-center justify-between gap-4",
                dropStatus.status === 'available' ? "border-accent/30 bg-accent/5" :
                dropStatus.status === 'dropping_soon' ? "border-amber-400/30 bg-amber-400/5" :
                dropStatus.status === 'taken' ? "border-rose-400/20 bg-rose-400/5" :
                "border-white/10 bg-white/[0.02]"
              )}>
                <div className="flex items-center gap-3">
                  {dropStatus.status === 'available' ? (
                    <CheckCircle2 className="w-5 h-5 text-accent" />
                  ) : dropStatus.status === 'dropping_soon' ? (
                    <Clock className="w-5 h-5 text-amber-400" />
                  ) : dropStatus.status === 'taken' ? (
                    <XCircle className="w-5 h-5 text-rose-400" />
                  ) : (
                    <Globe className="w-5 h-5 text-white/40" />
                  )}
                  <div>
                    <div className={clsx(
                      "text-sm font-bold uppercase tracking-wider",
                      dropStatus.status === 'available' ? "text-accent" :
                      dropStatus.status === 'dropping_soon' ? "text-amber-400" :
                      dropStatus.status === 'taken' ? "text-rose-400" :
                      "text-white/50"
                    )}>
                      {dropStatus.status === 'available' ? 'Available Now' :
                       dropStatus.status === 'dropping_soon' ? 'In Transition' :
                       dropStatus.status === 'taken' ? 'Re-registered' :
                       'Status Unknown'}
                    </div>
                    {dropStatus.status === 'dropping_soon' && dropStatus.deletion_date && (
                      <div className="text-xs font-mono text-amber-400/70">
                        {dropCountdown
                          ? `Drops in ${dropCountdown} • ${parseIsoAsUtc(dropStatus.deletion_date).toLocaleDateString()}`
                          : `Drops: ${parseIsoAsUtc(dropStatus.deletion_date).toLocaleDateString()}`}
                      </div>
                    )}
                  </div>
                </div>
                {dropStatus.status === 'available' && domain && (
                  <a
                    href={`https://www.namecheap.com/domains/registration/results/?domain=${domain}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="h-9 px-4 bg-accent text-black text-[10px] font-black uppercase tracking-widest flex items-center gap-1.5 hover:bg-white transition-all"
                  >
                    <Zap className="w-3 h-3" />
                    Buy Now
                  </a>
                )}
              </div>
            </div>
          )}

          {/* Controls */}
          <div className="px-5 pb-3 flex items-center gap-3">
            <button
              onClick={() => setFastMode(!fastMode)}
              className={clsx(
                "flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider border transition-all",
                fastMode ? "text-accent border-accent/30 bg-accent/10" : "text-white/50 border-white/[0.08] hover:text-white hover:bg-white/[0.05]"
              )}
            >
              <Zap className="w-3.5 h-3.5" />
              Fast Mode
            </button>
            {data?.cached && (
              <span className="text-[10px] font-mono text-white/40 flex items-center gap-1.5">
                <Clock className="w-3 h-3" />
                Cached
              </span>
            )}
          </div>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto">
          {loading ? (
            <div className="flex items-center justify-center py-20">
              <div className="text-center">
                <RefreshCw className="w-8 h-8 text-accent animate-spin mx-auto mb-3" />
                <div className="text-sm font-mono text-white/40">Analyzing domain...</div>
              </div>
            </div>
          ) : error ? (
            <div className="p-4">
              <div className="border border-rose-500/30 bg-rose-500/10 p-4">
                <div className="text-sm font-bold text-rose-400 mb-1">Analysis Failed</div>
                <div className="text-xs font-mono text-white/50">{error}</div>
              </div>
            </div>
          ) : !data ? (
            <div className="flex items-center justify-center py-20">
              <div className="text-sm font-mono text-white/30">No data available</div>
            </div>
          ) : (
            <div className="p-4 space-y-3">
              {visibleSections.map((section) => {
                const config = getSectionConfig(section.key)
                const SectionIcon = config.icon
                const isExpanded = expandedSections[section.key] !== false

                return (
                  <div 
                    key={section.key} 
                    className="border border-white/[0.06] overflow-hidden bg-[#020202]"
                  >
                    {/* Section Header */}
                    <button
                      onClick={() => toggleSection(section.key)}
                      className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.03]"
                      title={(config as any).tooltip || ''}
                    >
                      <div className="flex items-center gap-3">
                        <SectionIcon className="w-4 h-4 text-white/60" />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider text-white">
                            {section.title}
                          </span>
                          <div className="text-[10px] font-mono text-white/50">
                            {config.description}
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {section.key !== 'vision' && section.items.length > 0 && (
                          <span className="text-[10px] font-mono text-white/40">
                            {section.items.length}
                          </span>
                        )}
                        {section.key === 'vision' && (
                          <span className="text-[10px] font-mono text-accent uppercase">AI</span>
                        )}
                        <ChevronRight className={clsx(
                          "w-4 h-4 text-white/40 transition-transform",
                          isExpanded && "rotate-90"
                        )} />
                      </div>
                    </button>

                    {/* Section Content */}
                    {isExpanded && (
                      <div className="border-t border-white/[0.06]">
                        {section.key === 'vision' ? (
                          <div className="p-4">
                            <VisionSection domain={headerDomain} />
                          </div>
                        ) : (
                          <div className="divide-y divide-white/[0.05]">
                            {section.items.map((item) => {
                              const statusStyle = getStatusColor(item.status)
                              const tooltip = getItemTooltip(item.key)

                              return (
                                <div 
                                  key={item.key} 
                                  className="px-4 py-3.5 hover:bg-white/[0.02] transition-colors group"
                                  title={tooltip || undefined}
                                >
                                  {isMatrix(item) ? (
                                    /* TLD Matrix - Full Width Layout */
                                    <div>
                                      <div className="flex items-center justify-between mb-3">
                                        <span className="text-sm font-medium text-white">
                                          {item.label}
                                        </span>
                                        {item.source && (
                                          <span className="text-[10px] font-mono text-white/40 uppercase">
                                            {item.source}
                                          </span>
                                        )}
                                      </div>
                                      <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
                                        {(item.value as any[]).slice(0, 12).map((row: any) => (
                                          <div
                                            key={String(row.domain)}
                                            className={clsx(
                                              "h-10 flex items-center justify-center text-sm font-mono font-medium border",
                                              row.status === 'available'
                                                ? "bg-accent/10 text-accent border-accent/30"
                                                : "bg-white/[0.02] text-white/30 border-white/[0.06]"
                                            )}
                                            title={`${String(row.domain).split('.').pop()}: ${row.status === 'available' ? 'Available' : 'Taken'}`}
                                          >
                                            .{String(row.domain).split('.').pop()}
                                          </div>
                                        ))}
                                      </div>
                                    </div>
                                  ) : (
                                    /* Regular Item - Row Layout */
                                    <div className="flex items-center justify-between gap-4">
                                      <div className="flex items-center gap-2 min-w-0">
                                        <span className="text-sm font-medium text-white">
                                          {item.label}
                                        </span>
                                        {item.source && (
                                          <span className="text-[10px] font-mono text-white/40 uppercase shrink-0">
                                            {item.source}
                                          </span>
                                        )}
                                      </div>
                                      <span className={clsx(
                                        "text-base font-mono font-bold",
                                        item.status === 'pass' ? "text-accent" : 
                                        item.status === 'warn' ? "text-amber-400" :
                                        item.status === 'fail' ? "text-rose-400" : "text-white/70"
                                      )}>
                                        {formatValue(item.value, item.key)}
                                      </span>
                                    </div>
                                  )}
                                </div>
                              )
                            })}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="shrink-0 border-t border-white/[0.08] px-5 py-3 bg-[#020202]">
          <div className="flex items-center justify-between text-[11px] font-mono">
            <span className="text-white/40">Press ESC to close</span>
            <div className="flex items-center gap-4">
              <a
                href={`https://who.is/whois/${encodeURIComponent(headerDomain)}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                WHOIS →
              </a>
              <a
                href={`https://web.archive.org/web/*/${encodeURIComponent(headerDomain)}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                Archive →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}