'use client'

import { useEffect, useState, useMemo, useCallback } from 'react'
import { useStore } from '@/lib/store'
import { api, PortfolioDomain, PortfolioSummary } from '@/lib/api'
import { Sidebar } from '@/components/Sidebar'
import { Toast, useToast } from '@/components/Toast'
import {
  Plus,
  Trash2,
  RefreshCw,
  Loader2,
  Briefcase,
  X,
  Target,
  ExternalLink,
  Gavel,
  TrendingUp,
  Menu,
  Settings,
  ShieldCheck,
  LogOut,
  Crown,
  Tag,
  Zap,
  Eye,
  ChevronUp,
  ChevronDown,
  DollarSign,
  Calendar,
  Edit3,
  CheckCircle,
  AlertCircle,
  Copy,
  Check,
  ArrowUpRight,
  Navigation,
  Coins
} from 'lucide-react'
import clsx from 'clsx'
import Link from 'next/link'
import Image from 'next/image'

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

function getDaysUntilRenewal(renewalDate: string | null): number | null {
  if (!renewalDate) return null
  const renDate = new Date(renewalDate)
  const now = new Date()
  const diffTime = renDate.getTime() - now.getTime()
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
}

function formatDate(date: string | null): string {
  if (!date) return '—'
  return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}

function formatCurrency(value: number | null): string {
  if (value === null || value === undefined) return '—'
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value)
}

function formatROI(roi: number | null): string {
  if (roi === null || roi === undefined) return '—'
  const sign = roi >= 0 ? '+' : ''
  return `${sign}${roi.toFixed(0)}%`
}

// ============================================================================
// MAIN PAGE
// ============================================================================

export default function PortfolioPage() {
  const { subscription, user, logout, checkAuth } = useStore()
  const { toast, showToast, hideToast } = useToast()
  
  const [domains, setDomains] = useState<PortfolioDomain[]>([])
  const [summary, setSummary] = useState<PortfolioSummary | null>(null)
  const [loading, setLoading] = useState(true)
  const [refreshingId, setRefreshingId] = useState<number | null>(null)
  const [deletingId, setDeletingId] = useState<number | null>(null)
  const [showAddModal, setShowAddModal] = useState(false)
  const [verifyingDomain, setVerifyingDomain] = useState<PortfolioDomain | null>(null)
  const [filter, setFilter] = useState<'all' | 'active' | 'sold'>('all')
  
  // Sorting
  const [sortField, setSortField] = useState<'domain' | 'value' | 'roi' | 'renewal'>('domain')
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
  
  // Mobile Menu & Navigation Drawer
  const [menuOpen, setMenuOpen] = useState(false)
  const [navDrawerOpen, setNavDrawerOpen] = useState(false)

  const tier = subscription?.tier || 'scout'
  const isScout = tier === 'scout'

  useEffect(() => { checkAuth() }, [checkAuth])
  
  const loadData = useCallback(async () => {
    setLoading(true)
    try {
      const [domainsData, summaryData] = await Promise.all([
        api.getPortfolio(),
        api.getPortfolioSummary()
      ])
      setDomains(domainsData)
      setSummary(summaryData)
    } catch (err) {
      console.error('Failed to load portfolio:', err)
    } finally {
      setLoading(false)
    }
  }, [])

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

  // Stats
  const stats = useMemo(() => {
    const active = domains.filter(d => !d.is_sold).length
    const sold = domains.filter(d => d.is_sold).length
    const verified = domains.filter(d => d.is_dns_verified && !d.is_sold).length
    const renewingSoon = domains.filter(d => {
      if (d.is_sold || !d.renewal_date) return false
      const days = getDaysUntilRenewal(d.renewal_date)
      return days !== null && days <= 30 && days > 0
    }).length
    return { total: domains.length, active, sold, verified, renewingSoon }
  }, [domains])

  // Filtered & Sorted
  const filteredDomains = useMemo(() => {
    let filtered = domains.filter(d => {
      if (filter === 'active') return !d.is_sold
      if (filter === 'sold') return d.is_sold
      return true
    })
    
    const mult = sortDirection === 'asc' ? 1 : -1
    filtered.sort((a, b) => {
      switch (sortField) {
        case 'domain': return mult * a.domain.localeCompare(b.domain)
        case 'value': return mult * ((a.estimated_value || 0) - (b.estimated_value || 0))
        case 'roi': return mult * ((a.roi || 0) - (b.roi || 0))
        case 'renewal':
          const aDate = a.renewal_date ? new Date(a.renewal_date).getTime() : Infinity
          const bDate = b.renewal_date ? new Date(b.renewal_date).getTime() : Infinity
          return mult * (aDate - bDate)
        default: return 0
      }
    })
    
    return filtered
  }, [domains, filter, sortField, sortDirection])
  
  const handleSort = useCallback((field: typeof sortField) => {
    if (sortField === field) {
      setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
    } else {
      setSortField(field)
      setSortDirection('asc')
    }
  }, [sortField])

  const handleRefreshValue = useCallback(async (id: number) => {
    setRefreshingId(id)
    try {
      const updated = await api.refreshDomainValue(id)
      setDomains(prev => prev.map(d => d.id === id ? updated : d))
      showToast('Value updated', 'success')
    } catch { showToast('Update failed', 'error') }
    finally { setRefreshingId(null) }
  }, [showToast])

  const handleDelete = useCallback(async (id: number, name: string) => {
    if (!confirm(`Remove ${name} from portfolio?`)) return
    setDeletingId(id)
    try {
      await api.deletePortfolioDomain(id)
      setDomains(prev => prev.filter(d => d.id !== id))
      showToast('Domain removed', 'success')
      loadData()
    } catch { showToast('Failed', 'error') }
    finally { setDeletingId(null) }
  }, [showToast, loadData])

  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap

  const mobileNavItems = [
    { href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
    { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
    { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
    { href: '/terminal/portfolio', label: 'Portfolio', icon: Briefcase, active: true },
  ]
  
  const drawerNavSections = [
    { title: 'Discover', items: [
      { href: '/terminal/radar', label: 'Radar', icon: Target },
      { href: '/terminal/market', label: 'Market', icon: Gavel },
      { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
    ]},
    { title: 'Manage', items: [
      { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
      { href: '/terminal/portfolio', label: 'Portfolio', icon: Briefcase, active: true },
      { href: '/terminal/sniper', label: 'Sniper', icon: Target },
    ]},
    { title: 'Monetize', items: [
      { href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
      { href: '/terminal/listing', label: 'For Sale', icon: Tag },
    ]}
  ]

  return (
    <div className="min-h-screen bg-[#020202]">
      <div className="hidden lg:block"><Sidebar /></div>
      
      <main className="lg:pl-[240px]">
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        {/* MOBILE HEADER */}
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        <header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
          <div className="px-4 py-3">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Portfolio</span>
              </div>
              <div className="flex items-center gap-2 text-[10px] font-mono text-white/40">
                <span>{stats.total} domains</span>
              </div>
            </div>

            {/* Stats Grid */}
            <div className="grid grid-cols-4 gap-1.5">
              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
                <div className="text-base font-bold text-white tabular-nums">{stats.active}</div>
                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">Active</div>
              </div>
              <div className="bg-accent/[0.05] border border-accent/20 p-2">
                <div className="text-base font-bold text-accent tabular-nums">{formatCurrency(summary?.total_value || 0).replace('$', '').slice(0, 6)}</div>
                <div className="text-[8px] font-mono text-accent/60 uppercase tracking-wider">Value</div>
              </div>
              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
                <div className={clsx("text-base font-bold tabular-nums", (summary?.overall_roi || 0) >= 0 ? "text-accent" : "text-rose-400")}>
                  {formatROI(summary?.overall_roi || 0)}
                </div>
                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">ROI</div>
              </div>
              <div className="bg-accent/[0.05] border border-accent/20 p-2">
                <div className="text-base font-bold text-accent tabular-nums">{stats.verified}</div>
                <div className="text-[8px] font-mono text-accent/60 uppercase tracking-wider">Verified</div>
              </div>
            </div>
          </div>
        </header>

        {/* ═══════════════════════════════════════════════════════════════════════ */}
        {/* DESKTOP HEADER */}
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        <section className="hidden lg:block px-10 pt-10 pb-6">
          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Domain Assets</span>
              </div>
              <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
                <span className="text-white">Portfolio</span>
                <span className="text-white/30 ml-3 font-mono text-[2rem]">{stats.total}</span>
              </h1>
              <p className="text-sm text-white/40 font-mono mt-2 max-w-md">
                Manage your domain assets. Track value, verify ownership, and list for sale.
              </p>
            </div>
            
            <div className="flex gap-8">
              <div className="text-right">
                <div className="text-2xl font-bold text-white font-mono">{formatCurrency(summary?.total_invested || 0)}</div>
                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Invested</div>
              </div>
              <div className="text-right">
                <div className="text-2xl font-bold text-accent font-mono">{formatCurrency(summary?.total_value || 0)}</div>
                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Value</div>
              </div>
              <div className="text-right">
                <div className={clsx("text-2xl font-bold font-mono", (summary?.overall_roi || 0) >= 0 ? "text-accent" : "text-rose-400")}>
                  {formatROI(summary?.overall_roi || 0)}
                </div>
                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">ROI</div>
              </div>
              <div className="text-right border-l border-white/[0.08] pl-8">
                <div className="text-2xl font-bold text-accent font-mono">{stats.verified}</div>
                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Verified</div>
              </div>
            </div>
          </div>
        </section>

        {/* ═══════════════════════════════════════════════════════════════════════ */}
        {/* FILTERS + ADD BUTTON */}
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        <section className="px-4 lg:px-10 py-4 border-b border-white/[0.08]">
          <div className="flex items-center justify-between gap-4">
            {/* Filters */}
            <div className="flex items-center gap-1">
              {[
                { value: 'all', label: 'All', count: stats.total },
                { value: 'active', label: 'Active', count: stats.active },
                { value: 'sold', label: 'Sold', count: stats.sold },
              ].map((item) => (
                <button
                  key={item.value}
                  onClick={() => setFilter(item.value as typeof filter)}
                  className={clsx(
                    "px-3 py-2 text-[10px] font-mono uppercase tracking-wider border transition-colors",
                    filter === item.value 
                      ? "bg-white/10 text-white border-white/20" 
                      : "text-white/40 border-transparent hover:text-white/60"
                  )}
                >
                  {item.label} ({item.count})
                </button>
              ))}
            </div>
            
            {/* Add Domain Button */}
            <button
              onClick={() => setShowAddModal(true)}
              className="flex items-center gap-2 px-4 py-2.5 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors"
            >
              <Plus className="w-4 h-4" />
              <span className="hidden sm:inline">Add Domain</span>
            </button>
          </div>
        </section>

        {/* ═══════════════════════════════════════════════════════════════════════ */}
        {/* DOMAIN LIST */}
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        <section className="px-4 lg:px-10 py-4 pb-28 lg:pb-10">
          {loading ? (
            <div className="flex items-center justify-center py-20">
              <Loader2 className="w-6 h-6 text-accent animate-spin" />
            </div>
          ) : !filteredDomains.length ? (
            <div className="text-center py-16 border border-dashed border-white/[0.08]">
              <Briefcase className="w-8 h-8 text-white/10 mx-auto mb-3" />
              <p className="text-white/40 text-sm font-mono">No domains in your portfolio</p>
              <p className="text-white/25 text-xs font-mono mt-1">Add your first domain to start tracking</p>
              <button
                onClick={() => setShowAddModal(true)}
                className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase"
              >
                <Plus className="w-4 h-4" />Add Domain
              </button>
            </div>
          ) : (
            <div className="space-y-px bg-white/[0.02] border border-white/[0.08]">
              {/* Desktop Table Header */}
              <div className="hidden lg:grid grid-cols-[1fr_100px_100px_100px_80px_120px] gap-4 px-4 py-2.5 text-[10px] font-mono text-white/40 uppercase tracking-wider border-b border-white/[0.08] bg-white/[0.02]">
                <button onClick={() => handleSort('domain')} className="flex items-center gap-1 hover:text-white/60 text-left">
                  Domain
                  {sortField === 'domain' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
                </button>
                <button onClick={() => handleSort('value')} className="flex items-center gap-1 justify-end hover:text-white/60">
                  Value
                  {sortField === 'value' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
                </button>
                <button onClick={() => handleSort('roi')} className="flex items-center gap-1 justify-end hover:text-white/60">
                  ROI
                  {sortField === 'roi' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
                </button>
                <button onClick={() => handleSort('renewal')} className="flex items-center gap-1 justify-center hover:text-white/60">
                  Expires
                  {sortField === 'renewal' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
                </button>
                <div className="text-center">Status</div>
                <div className="text-right">Actions</div>
              </div>
              
              {filteredDomains.map((domain) => {
                const daysUntilRenewal = getDaysUntilRenewal(domain.renewal_date)
                const isRenewingSoon = daysUntilRenewal !== null && daysUntilRenewal <= 30 && daysUntilRenewal > 0
                const roiPositive = (domain.roi || 0) >= 0
                
                return (
                  <div key={domain.id} className="bg-[#020202] hover:bg-white/[0.02] transition-all group">
                    {/* Mobile Row */}
                    <div className="lg:hidden p-3">
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex items-center gap-3 min-w-0 flex-1">
                          <div className={clsx(
                            "w-9 h-9 flex items-center justify-center border shrink-0",
                            domain.is_sold ? "bg-white/[0.02] border-white/[0.06]" : "bg-accent/10 border-accent/20"
                          )}>
                            {domain.is_sold ? <CheckCircle className="w-4 h-4 text-white/30" /> : <Briefcase className="w-4 h-4 text-accent" />}
                          </div>
                          <div className="min-w-0 flex-1">
                            <div className="text-sm font-bold text-white font-mono truncate">{domain.domain}</div>
                            <div className="flex items-center gap-2 mt-0.5 flex-wrap">
                              {domain.registrar && (
                                <span className="text-[10px] font-mono text-white/30">{domain.registrar}</span>
                              )}
                              {domain.is_dns_verified && (
                                <span className="flex items-center gap-0.5 text-[9px] font-mono text-accent bg-accent/10 px-1 py-0.5 border border-accent/20">
                                  <ShieldCheck className="w-2.5 h-2.5" /> Verified
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                        
                        <div className="text-right shrink-0">
                          <div className="text-sm font-bold text-accent font-mono">{formatCurrency(domain.estimated_value)}</div>
                          <div className={clsx("text-[10px] font-mono", roiPositive ? "text-accent" : "text-rose-400")}>
                            {formatROI(domain.roi)}
                          </div>
                        </div>
                      </div>
                      
                      {/* Mobile Actions */}
                      {!domain.is_sold && (
                        <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/[0.05]">
                          <div className="flex items-center gap-1 text-[10px] font-mono text-white/40">
                            <Calendar className="w-3 h-3" />
                            {daysUntilRenewal !== null ? (
                              <span className={isRenewingSoon ? "text-orange-400" : ""}>
                                {daysUntilRenewal}d
                              </span>
                            ) : '—'}
                          </div>
                          <div className="flex items-center gap-2">
                            {!domain.is_dns_verified && (
                              <button
                                onClick={() => setVerifyingDomain(domain)}
                                className="px-2 py-1.5 text-[9px] font-mono uppercase border border-amber-400/30 text-amber-400 bg-amber-400/5"
                              >
                                Verify
                              </button>
                            )}
                            <button
                              onClick={() => handleRefreshValue(domain.id)}
                              disabled={refreshingId === domain.id}
                              className="p-1.5 text-white/30 hover:text-white disabled:animate-spin"
                            >
                              <RefreshCw className="w-4 h-4" />
                            </button>
                            <button
                              onClick={() => handleDelete(domain.id, domain.domain)}
                              disabled={deletingId === domain.id}
                              className="p-1.5 text-white/30 hover:text-rose-400"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                    
                    {/* Desktop Row */}
                    <div className="hidden lg:grid grid-cols-[1fr_100px_100px_100px_80px_120px] gap-4 px-4 py-3 items-center border-b border-white/[0.04]">
                      {/* Domain */}
                      <div className="flex items-center gap-3 min-w-0">
                        <div className={clsx(
                          "w-8 h-8 flex items-center justify-center border shrink-0",
                          domain.is_sold ? "bg-white/[0.02] border-white/[0.06]" : "bg-accent/10 border-accent/20"
                        )}>
                          {domain.is_sold ? <CheckCircle className="w-4 h-4 text-white/30" /> : <Briefcase className="w-4 h-4 text-accent" />}
                        </div>
                        <div className="min-w-0">
                          <div className="text-sm font-bold text-white font-mono truncate">{domain.domain}</div>
                          <div className="text-[10px] font-mono text-white/30">{domain.registrar || 'Unknown'}</div>
                        </div>
                      </div>
                      
                      {/* Value */}
                      <div className="text-right">
                        <div className="text-sm font-bold text-accent font-mono">{formatCurrency(domain.estimated_value)}</div>
                        {domain.purchase_price && (
                          <div className="text-[10px] font-mono text-white/30">Cost: {formatCurrency(domain.purchase_price)}</div>
                        )}
                      </div>
                      
                      {/* ROI */}
                      <div className="text-right">
                        <div className={clsx("text-sm font-bold font-mono", roiPositive ? "text-accent" : "text-rose-400")}>
                          {formatROI(domain.roi)}
                        </div>
                      </div>
                      
                      {/* Expires */}
                      <div className="text-center">
                        {daysUntilRenewal !== null ? (
                          <span className={clsx(
                            "text-xs font-mono",
                            isRenewingSoon ? "text-orange-400" : "text-white/40"
                          )}>
                            {daysUntilRenewal}d
                          </span>
                        ) : (
                          <span className="text-xs font-mono text-white/20">—</span>
                        )}
                      </div>
                      
                      {/* Status */}
                      <div className="flex justify-center">
                        {domain.is_sold ? (
                          <span className="px-2 py-1 text-[9px] font-mono uppercase bg-white/[0.02] text-white/30 border border-white/[0.06]">Sold</span>
                        ) : domain.is_dns_verified ? (
                          <span className="flex items-center gap-1 px-2 py-1 text-[9px] font-mono uppercase bg-accent/10 text-accent border border-accent/20">
                            <ShieldCheck className="w-3 h-3" /> Verified
                          </span>
                        ) : (
                          <button
                            onClick={() => setVerifyingDomain(domain)}
                            className="px-2 py-1 text-[9px] font-mono uppercase border border-amber-400/30 text-amber-400 bg-amber-400/5 hover:bg-amber-400/10 transition-colors"
                          >
                            Verify
                          </button>
                        )}
                      </div>
                      
                      {/* Actions */}
                      <div className="flex items-center justify-end gap-2">
                        {!domain.is_sold && domain.is_dns_verified && (
                          <Link
                            href="/terminal/listing"
                            className="px-2 py-1.5 text-[9px] font-mono uppercase bg-white/[0.05] text-white/60 hover:text-white border border-white/[0.08] transition-colors"
                          >
                            Sell
                          </Link>
                        )}
                        <button
                          onClick={() => handleRefreshValue(domain.id)}
                          disabled={refreshingId === domain.id}
                          className={clsx(
                            "p-1.5 text-white/30 hover:text-white transition-colors",
                            refreshingId === domain.id && "animate-spin"
                          )}
                        >
                          <RefreshCw className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => handleDelete(domain.id, domain.domain)}
                          disabled={deletingId === domain.id}
                          className="p-1.5 text-white/30 hover:text-rose-400 transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </section>

        {/* ═══════════════════════════════════════════════════════════════════════ */}
        {/* MOBILE BOTTOM NAVIGATION */}
        {/* ═══════════════════════════════════════════════════════════════════════ */}
        <nav className="lg:hidden fixed bottom-0 inset-x-0 z-50 bg-[#020202]/95 backdrop-blur-md border-t border-white/[0.08] pb-safe">
          <div className="grid grid-cols-5 gap-1 px-2 py-2">
            {mobileNavItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={clsx(
                  "flex flex-col items-center gap-0.5 py-2 transition-colors",
                  item.active ? "text-accent" : "text-white/40"
                )}
              >
                <item.icon className="w-5 h-5" />
                <span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
              </Link>
            ))}
            <button
              onClick={() => setNavDrawerOpen(true)}
              className="flex flex-col items-center gap-0.5 py-2 text-white/40"
            >
              <Navigation className="w-5 h-5" />
              <span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
            </button>
          </div>
        </nav>

        {/* Navigation Drawer */}
        {navDrawerOpen && (
          <div className="lg:hidden fixed inset-0 z-50">
            <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setNavDrawerOpen(false)} />
            <div className="absolute right-0 top-0 bottom-0 w-72 bg-[#0a0a0a] border-l border-white/[0.08] overflow-y-auto animate-in slide-in-from-right duration-200">
              <div className="p-4 border-b border-white/[0.08]">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Image src="/pounce-icon.png" alt="Pounce" width={24} height={24} />
                    <span className="font-display text-sm text-white">Terminal</span>
                  </div>
                  <button onClick={() => setNavDrawerOpen(false)} className="p-1 text-white/40 hover:text-white">
                    <X className="w-5 h-5" />
                  </button>
                </div>
              </div>
              
              <div className="p-4 space-y-6">
                {drawerNavSections.map((section) => (
                  <div key={section.title}>
                    <div className="text-[10px] font-mono text-white/30 uppercase tracking-wider mb-2">{section.title}</div>
                    <div className="space-y-1">
                      {section.items.map((item) => (
                        <Link
                          key={item.href}
                          href={item.href}
                          onClick={() => setNavDrawerOpen(false)}
                          className={clsx(
                            "flex items-center gap-3 px-3 py-2.5 transition-colors",
                            item.active ? "bg-accent/10 text-accent" : "text-white/60 hover:text-white hover:bg-white/[0.02]"
                          )}
                        >
                          <item.icon className="w-4 h-4" />
                          <span className="text-sm font-medium">{item.label}</span>
                          {item.isNew && (
                            <span className="ml-auto text-[8px] font-mono bg-accent text-black px-1.5 py-0.5 uppercase">New</span>
                          )}
                        </Link>
                      ))}
                    </div>
                  </div>
                ))}
                
                <div className="pt-4 border-t border-white/[0.08]">
                  <Link
                    href="/terminal/settings"
                    onClick={() => setNavDrawerOpen(false)}
                    className="flex items-center gap-3 px-3 py-2.5 text-white/60 hover:text-white transition-colors"
                  >
                    <Settings className="w-4 h-4" />
                    <span className="text-sm font-medium">Settings</span>
                  </Link>
                  <button
                    onClick={() => { logout(); setNavDrawerOpen(false) }}
                    className="w-full flex items-center gap-3 px-3 py-2.5 text-rose-400/60 hover:text-rose-400 transition-colors"
                  >
                    <LogOut className="w-4 h-4" />
                    <span className="text-sm font-medium">Logout</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
      
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* ADD DOMAIN MODAL */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {showAddModal && (
        <AddDomainModal 
          onClose={() => setShowAddModal(false)} 
          onSuccess={() => { setShowAddModal(false); loadData() }}
          showToast={showToast}
        />
      )}
      
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* DNS VERIFICATION MODAL */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {verifyingDomain && (
        <DNSVerificationModal
          domain={verifyingDomain}
          onClose={() => setVerifyingDomain(null)}
          onVerified={() => { setVerifyingDomain(null); loadData() }}
          showToast={showToast}
        />
      )}
      
      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
    </div>
  )
}

// ============================================================================
// ADD DOMAIN MODAL
// ============================================================================

function AddDomainModal({ onClose, onSuccess, showToast }: { 
  onClose: () => void
  onSuccess: () => void 
  showToast: (msg: string, type: 'success' | 'error') => void
}) {
  const [domain, setDomain] = useState('')
  const [purchasePrice, setPurchasePrice] = useState('')
  const [registrar, setRegistrar] = useState('')
  const [loading, setLoading] = useState(false)
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!domain.trim()) return
    
    setLoading(true)
    try {
      await api.addPortfolioDomain({
        domain: domain.trim().toLowerCase(),
        purchase_price: purchasePrice ? parseFloat(purchasePrice) : undefined,
        registrar: registrar || undefined,
      })
      showToast('Domain added successfully', 'success')
      onSuccess()
    } catch (err: any) {
      showToast(err.message || 'Failed to add domain', 'error')
    } finally {
      setLoading(false)
    }
  }
  
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-md bg-[#0a0a0a] border border-white/[0.08] overflow-hidden">
        <div className="p-4 border-b border-white/[0.08]">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-display text-white">Add Domain</h2>
            <button onClick={onClose} className="p-1 text-white/40 hover:text-white">
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>
        
        <form onSubmit={handleSubmit} className="p-4 space-y-4">
          <div>
            <label className="block text-[10px] font-mono text-white/40 uppercase mb-2">Domain Name *</label>
            <input
              type="text"
              value={domain}
              onChange={(e) => setDomain(e.target.value)}
              placeholder="example.com"
              className="w-full px-4 py-3 bg-white/[0.02] border border-white/[0.08] text-white text-sm font-mono placeholder:text-white/20 focus:border-accent focus:outline-none"
              autoFocus
            />
          </div>
          
          <div>
            <label className="block text-[10px] font-mono text-white/40 uppercase mb-2">Purchase Price (USD)</label>
            <input
              type="number"
              step="0.01"
              value={purchasePrice}
              onChange={(e) => setPurchasePrice(e.target.value)}
              placeholder="100"
              className="w-full px-4 py-3 bg-white/[0.02] border border-white/[0.08] text-white text-sm font-mono placeholder:text-white/20 focus:border-accent focus:outline-none"
            />
          </div>
          
          <div>
            <label className="block text-[10px] font-mono text-white/40 uppercase mb-2">Registrar</label>
            <input
              type="text"
              value={registrar}
              onChange={(e) => setRegistrar(e.target.value)}
              placeholder="Namecheap, GoDaddy, etc."
              className="w-full px-4 py-3 bg-white/[0.02] border border-white/[0.08] text-white text-sm font-mono placeholder:text-white/20 focus:border-accent focus:outline-none"
            />
          </div>
          
          <button
            type="submit"
            disabled={loading || !domain.trim()}
            className="w-full py-3 bg-accent text-black text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 disabled:opacity-50 hover:bg-white transition-colors"
          >
            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
            Add to Portfolio
          </button>
        </form>
      </div>
    </div>
  )
}

// ============================================================================
// DNS VERIFICATION MODAL
// ============================================================================

function DNSVerificationModal({ domain, onClose, onVerified, showToast }: {
  domain: PortfolioDomain
  onClose: () => void
  onVerified: () => void
  showToast: (msg: string, type: 'success' | 'error') => void
}) {
  const [loading, setLoading] = useState(true)
  const [checking, setChecking] = useState(false)
  const [verificationData, setVerificationData] = useState<{
    verification_code: string
    dns_record_name: string
    dns_record_value: string
    instructions: string
  } | null>(null)
  const [copied, setCopied] = useState<string | null>(null)
  
  useEffect(() => {
    loadVerificationData()
  }, [domain.id])
  
  const loadVerificationData = async () => {
    try {
      const data = await api.startPortfolioDnsVerification(domain.id)
      setVerificationData(data)
    } catch (err: any) {
      showToast(err.message || 'Failed to start verification', 'error')
      onClose()
    } finally {
      setLoading(false)
    }
  }
  
  const handleCheck = async () => {
    setChecking(true)
    try {
      const result = await api.checkPortfolioDnsVerification(domain.id)
      if (result.verified) {
        showToast('Domain verified successfully!', 'success')
        onVerified()
      } else {
        showToast(result.message || 'Verification pending', 'error')
      }
    } catch (err: any) {
      showToast(err.message || 'Verification failed', 'error')
    } finally {
      setChecking(false)
    }
  }
  
  const copyToClipboard = async (text: string, field: string) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopied(field)
      setTimeout(() => setCopied(null), 2000)
    } catch {}
  }
  
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-lg bg-[#0a0a0a] border border-white/[0.08] overflow-hidden">
        <div className="p-4 border-b border-white/[0.08]">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-display text-white">Verify Ownership</h2>
            <button onClick={onClose} className="p-1 text-white/40 hover:text-white">
              <X className="w-5 h-5" />
            </button>
          </div>
          <p className="text-xs font-mono text-white/40 mt-1">Add a DNS TXT record to prove you own {domain.domain}</p>
        </div>
        
        {loading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 className="w-6 h-6 text-accent animate-spin" />
          </div>
        ) : verificationData ? (
          <div className="p-4 space-y-4">
            <div>
              <label className="block text-[10px] font-mono text-white/40 uppercase mb-2">Host / Name</label>
              <div className="flex items-center gap-2">
                <div className="flex-1 px-4 py-3 bg-white/[0.02] border border-white/[0.08] text-white text-sm font-mono overflow-x-auto">
                  {verificationData.dns_record_name}
                </div>
                <button 
                  onClick={() => copyToClipboard(verificationData.dns_record_name, 'name')}
                  className="p-3 border border-white/[0.08] text-white/40 hover:text-white"
                >
                  {copied === 'name' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
                </button>
              </div>
            </div>
            
            <div>
              <label className="block text-[10px] font-mono text-white/40 uppercase mb-2">TXT Value</label>
              <div className="flex items-center gap-2">
                <div className="flex-1 px-4 py-3 bg-white/[0.02] border border-white/[0.08] text-accent text-sm font-mono overflow-x-auto">
                  {verificationData.verification_code}
                </div>
                <button 
                  onClick={() => copyToClipboard(verificationData.verification_code, 'value')}
                  className="p-3 border border-white/[0.08] text-white/40 hover:text-white"
                >
                  {copied === 'value' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
                </button>
              </div>
            </div>
            
            <div className="p-3 bg-white/[0.02] border border-white/[0.08] text-[11px] font-mono text-white/40 leading-relaxed">
              💡 DNS changes can take 1-5 minutes to propagate. If verification fails, wait a moment and try again.
            </div>
            
            <button
              onClick={handleCheck}
              disabled={checking}
              className="w-full py-3 bg-accent text-black text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 disabled:opacity-50 hover:bg-white transition-colors"
            >
              {checking ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
              Check Verification
            </button>
          </div>
        ) : (
          <div className="py-16 text-center text-white/40 text-sm font-mono">
            Failed to load verification data
          </div>
        )}
      </div>
    </div>
  )
}