'use client'

import { useCallback, useState } from 'react'
import clsx from 'clsx'
import { Loader2, Shield, Trash2 } from 'lucide-react'
import { api } from '@/lib/api'
import { useAnalyzePanelStore } from '@/lib/analyze-store'

export function KillList({
  rows,
  onChanged,
}: {
  rows: Array<{
    domain_id: number
    domain: string
    renewal_date: string | null
    renewal_cost_usd: number | null
    cost_source: string
    auto_renew: boolean
    is_dns_verified: boolean
    yield_net_60d: number
    yield_clicks_60d: number
    reason: string
  }>
  onChanged: () => Promise<void>
}) {
  const openAnalyze = useAnalyzePanelStore((s) => s.open)
  const [busyId, setBusyId] = useState<number | null>(null)

  const setToDrop = useCallback(
    async (id: number) => {
      setBusyId(id)
      try {
        await api.cfoSetToDrop(id)
        await onChanged()
      } finally {
        setBusyId(null)
      }
    },
    [onChanged]
  )

  return (
    <div className="border border-white/[0.08] bg-[#020202]">
      <div className="px-4 py-3 border-b border-white/[0.08]">
        <div className="text-[10px] font-mono uppercase tracking-widest text-white/40">Kill List</div>
        <div className="text-sm font-bold text-white">Drop advisor (30d)</div>
        <div className="text-[10px] font-mono text-white/30 mt-1">
          Criteria: renewal due in &lt; 30 days + no tracked yield signals in last 60 days.
        </div>
      </div>

      {rows.length === 0 ? (
        <div className="p-6 text-white/40 font-mono text-sm">No drop candidates right now.</div>
      ) : (
        <div className="divide-y divide-white/[0.06]">
          {rows.map((r) => {
            const busy = busyId === r.domain_id
            const cost = r.renewal_cost_usd != null ? `$${Math.round(r.renewal_cost_usd)}` : '—'
            return (
              <div key={r.domain_id} className="px-4 py-3 hover:bg-white/[0.02] transition-colors">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <button
                      onClick={() => openAnalyze(r.domain)}
                      className="text-white font-mono font-bold truncate text-left hover:text-accent transition-colors"
                      title="Analyze"
                    >
                      {r.domain}
                    </button>
                    <div className="text-[10px] font-mono text-white/30 mt-1 break-words">{r.reason}</div>
                    <div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] font-mono text-white/40">
                      <span className="border border-white/10 bg-white/[0.02] px-2 py-1">Renewal: {r.renewal_date ? r.renewal_date.slice(0, 10) : '—'}</span>
                      <span className="border border-white/10 bg-white/[0.02] px-2 py-1">Cost: {cost} ({r.cost_source})</span>
                      <span className="border border-white/10 bg-white/[0.02] px-2 py-1">
                        Yield 60d: ${Math.round(r.yield_net_60d)} · {r.yield_clicks_60d} clicks
                      </span>
                      {!r.auto_renew ? (
                        <span className="border border-orange-500/30 bg-orange-500/10 text-orange-300 px-2 py-1">SET TO DROP</span>
                      ) : null}
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <button
                      onClick={() => openAnalyze(r.domain)}
                      className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40 hover:text-accent hover:border-accent/20 hover:bg-accent/10"
                      title="Analyze"
                    >
                      <Shield className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => setToDrop(r.domain_id)}
                      disabled={busy || !r.auto_renew}
                      className={clsx(
                        'h-8 px-3 border text-[10px] font-bold uppercase tracking-wider font-mono transition-colors flex items-center gap-2',
                        !r.auto_renew
                          ? 'border-orange-500/20 text-orange-300/50 bg-orange-500/5 cursor-not-allowed'
                          : 'border-white/10 text-white/60 hover:text-white hover:bg-white/5'
                      )}
                      title="Set to drop (local reminder)"
                    >
                      {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
                      Set to Drop
                    </button>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}

