import { Fragment, useMemo, useState } from 'react'
import { Building2, ChevronDown, ChevronRight, DollarSign, ExternalLink, RefreshCw, Radio, Search, Trophy } from 'lucide-react'
import { useGalapagosAwards, useIncumbents, useSamOpportunities, useWages } from '../lib/queries'
import type { FederalAward, OpportunityFilters, SamOpportunity } from '../lib/types'
import { Badge, Panel } from '../components/ui'
import { fmtDate, fmtUSD, GALAPAGOS, NAICS_LABELS, timeAgo } from '../lib/format'

type Agency = 'af_sf' | 'dod' | 'air_force' | 'space_force'
const agencyOptions: { key: Agency; label: string }[] = [
  { key: 'af_sf', label: 'Air Force + Space Force' },
  { key: 'dod', label: 'All DoD' },
  { key: 'air_force', label: 'Air Force' },
  { key: 'space_force', label: 'Space Force' },
]

const chip = (on: boolean) =>
  `rounded-full px-3 py-1 text-xs font-semibold transition ${
    on
      ? 'bg-blue/25 text-blue-soft shadow-[inset_0_0_0_1px_var(--color-blue)]'
      : 'bg-navy-900 text-faint hover:text-muted border border-line/60'
  }`

const selectCls =
  'rounded-lg border border-line/70 bg-navy-900 px-3 py-1.5 text-sm text-ink outline-none focus:border-blue'

// freshestSync returns the most recent synced_at across the rows, driving the "synced {relative}" badge.
function freshestSync(rows: SamOpportunity[]): string {
  let best = ''
  for (const r of rows) if (r.synced_at && r.synced_at > best) best = r.synced_at
  return best
}

export function Requirements() {
  // Default the dashboard to the Galapagos profile so it opens on relevant federal opportunities.
  // Open on the relevant, non empty slice: Galapagos NAICS with their customers (Air Force and Space
  // Force). 8(a) and HI, NM are one click narrowers that surface their set aside and location stories.
  const [naics, setNaics] = useState<string[]>([...GALAPAGOS.naics])
  const [states, setStates] = useState<string[]>([])
  const [eightA, setEightA] = useState(false)
  const [agency, setAgency] = useState<Agency>('af_sf')
  const [q, setQ] = useState('')

  const filters: OpportunityFilters = useMemo(() => {
    const f: OpportunityFilters = { limit: 200, active_only: true }
    if (naics.length) f.naics = naics
    if (states.length) f.state = states
    if (eightA) f.set_aside = [...GALAPAGOS.setAside]
    if (agency === 'af_sf') f.sub_agency = ['AIR FORCE', 'SPACE FORCE']
    if (agency === 'dod') f.department = [...GALAPAGOS.departments]
    if (agency === 'air_force') f.sub_agency = ['AIR FORCE']
    if (agency === 'space_force') f.sub_agency = ['SPACE FORCE']
    if (q.trim()) f.q = q.trim()
    return f
  }, [naics, states, eightA, agency, q])

  const { data, isLoading, isError, error, isFetching, refetch } = useSamOpportunities(filters)
  const rows = data ?? []
  const synced = freshestSync(rows)
  const [openId, setOpenId] = useState<string | null>(null)

  const toggle = (list: string[], set: (v: string[]) => void, v: string) =>
    set(list.includes(v) ? list.filter((x) => x !== v) : [...list, v])

  return (
    <div className="space-y-4">
      {/* Live feed banner */}
      <Panel className="flex flex-wrap items-center justify-between gap-3 p-4">
        <div className="flex items-center gap-3">
          <span className="grid size-9 place-items-center rounded-lg bg-gold/15 text-gold">
            <Radio size={18} />
          </span>
          <div>
            <div className="text-sm font-bold">Federal Contract Opportunities</div>
            <div className="text-xs text-faint">
              Shaped for Galapagos Federal Systems, 8(a) DoD IT and cyber, Air Force and Space Force, HI and NM
            </div>
          </div>
        </div>
        <div className="flex items-center gap-3">
          {isError ? (
            <Badge color="var(--color-warn)" subtle>
              <span className="inline-flex items-center gap-1.5">
                <span className="size-1.5 rounded-full bg-[var(--color-warn)]" />
                SAM.gov cache unavailable
              </span>
            </Badge>
          ) : (
            <Badge color="var(--color-ok)" subtle>
              <span className="inline-flex items-center gap-1.5">
                <span className="size-1.5 rounded-full bg-[var(--color-ok)]" />
                Live from SAM.gov{synced ? ` · synced ${timeAgo(synced)}` : ' · not yet synced'}
              </span>
            </Badge>
          )}
          <button
            onClick={() => refetch()}
            className="grid size-8 place-items-center rounded-lg border border-line/70 text-muted hover:text-ink"
            title="Refresh from cache"
          >
            <RefreshCw size={14} className={isFetching ? 'animate-spin' : ''} />
          </button>
        </div>
      </Panel>

      {/* Filters */}
      <Panel className="space-y-3 p-4">
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Agency</span>
            <select className={selectCls} value={agency} onChange={(e) => setAgency(e.target.value as Agency)}>
              {agencyOptions.map((a) => (
                <option key={a.key} value={a.key}>
                  {a.label}
                </option>
              ))}
            </select>
          </div>
          <button className={chip(eightA)} onClick={() => setEightA((v) => !v)}>
            8(a) set aside
          </button>
          <div className="flex items-center gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">State</span>
            {['HI', 'NM'].map((s) => (
              <button key={s} className={chip(states.includes(s))} onClick={() => toggle(states, setStates, s)}>
                {s}
              </button>
            ))}
          </div>
          <label className="ml-auto flex items-center gap-2 rounded-lg border border-line/70 bg-navy-900 px-2.5 py-1.5">
            <Search size={14} className="text-faint" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search titles…"
              className="w-44 bg-transparent text-sm text-ink outline-none placeholder:text-faint"
            />
          </label>
        </div>
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="mr-1 text-[11px] font-bold uppercase tracking-wider text-muted">NAICS</span>
          {GALAPAGOS.naics.map((code) => (
            <button key={code} className={chip(naics.includes(code))} onClick={() => toggle(naics, setNaics, code)}>
              {code}
              <span className="ml-1 text-[10px] opacity-70">{NAICS_LABELS[code]}</span>
            </button>
          ))}
        </div>
      </Panel>

      {/* Galapagos own past performance (USASpending) */}
      <PastPerformance />

      {/* Regional wage baseline (BLS OEWS) */}
      <WageBaselinePanel />

      {/* Results */}
      <Panel title="Opportunities" hint={`${rows.length} matching, expand a row for incumbents`}>
        {isLoading ? (
          <p className="py-6 text-center text-muted">Loading opportunities…</p>
        ) : isError ? (
          <p className="py-6 text-center text-warn">
            {(error as Error)?.message ?? 'Failed to load opportunities.'}
          </p>
        ) : rows.length === 0 ? (
          <EmptyState />
        ) : (
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-[11px] uppercase tracking-wider text-faint">
                <th className="pb-2 font-semibold">Opportunity</th>
                <th className="pb-2 font-semibold">Agency</th>
                <th className="pb-2 font-semibold">NAICS</th>
                <th className="pb-2 font-semibold">Set Aside</th>
                <th className="pb-2 font-semibold">Response Due</th>
                <th className="pb-2" />
              </tr>
            </thead>
            <tbody className="divide-y divide-line/50">
              {rows.map((o) => {
                const open = openId === o.notice_id
                return (
                  <Fragment key={o.notice_id}>
                    <tr
                      className="cursor-pointer align-top hover:bg-navy-800/40"
                      onClick={() => setOpenId(open ? null : o.notice_id)}
                    >
                      <td className="py-3 pr-3">
                        <div className="flex items-start gap-1.5">
                          {open ? (
                            <ChevronDown size={14} className="mt-0.5 shrink-0 text-faint" />
                          ) : (
                            <ChevronRight size={14} className="mt-0.5 shrink-0 text-faint" />
                          )}
                          <div>
                            <div className="font-semibold leading-snug">{o.title || '(untitled notice)'}</div>
                            <div className="mt-0.5 text-xs text-faint">
                              {o.solicitation_number || 'No solicitation number'}
                              {o.place_of_performance.state ? ` · ${placeLabel(o)}` : ''}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td className="py-3 pr-3 text-muted">{o.sub_agency || o.department || 'n/a'}</td>
                      <td className="py-3 pr-3">
                        <span className="tabular-nums">{o.naics_code || 'n/a'}</span>
                        {NAICS_LABELS[o.naics_code] && (
                          <div className="text-[11px] text-faint">{NAICS_LABELS[o.naics_code]}</div>
                        )}
                      </td>
                      <td className="py-3 pr-3">
                        {o.set_aside_code ? (
                          <Badge color="var(--color-gold)" subtle>
                            {o.set_aside_code}
                          </Badge>
                        ) : (
                          <span className="text-faint">n/a</span>
                        )}
                      </td>
                      <td className="py-3 pr-3 tabular-nums text-muted">{fmtDate(o.response_deadline)}</td>
                      <td className="py-3 text-right">
                        {o.ui_link && (
                          <a
                            href={o.ui_link}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={(e) => e.stopPropagation()}
                            className="inline-flex items-center gap-1.5 rounded-md border border-line/70 px-2.5 py-1 text-xs font-semibold text-muted hover:border-blue/60 hover:text-blue-soft"
                          >
                            SAM.gov <ExternalLink size={12} />
                          </a>
                        )}
                      </td>
                    </tr>
                    {open && (
                      <tr>
                        <td colSpan={6} className="bg-navy-950/40 px-3 py-3">
                          <IncumbentsPanel naics={o.naics_code} />
                        </td>
                      </tr>
                    )}
                  </Fragment>
                )
              })}
            </tbody>
          </table>
        )}
      </Panel>
    </div>
  )
}

// IncumbentsPanel shows who currently holds comparable work in this NAICS, largest awards first, so
// the team can spot recompetes and teaming targets. Reads the USASpending cache only.
function IncumbentsPanel({ naics }: { naics: string }) {
  const { data, isLoading } = useIncumbents(naics || null)
  if (!naics) return <p className="text-xs text-faint">No NAICS on this notice.</p>
  if (isLoading) return <p className="text-xs text-muted">Loading incumbents and similar awards…</p>
  const awards = data ?? []
  return (
    <div>
      <div className="mb-2 flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-gold">
        <Building2 size={13} /> Incumbents and similar awards, NAICS {naics}
      </div>
      {awards.length === 0 ? (
        <p className="text-xs text-faint">No cached awards for this NAICS yet. Run make sync-awards.</p>
      ) : (
        <div className="space-y-1.5">
          {awards.map((a) => (
            <AwardRow key={a.award_uid} a={a} />
          ))}
        </div>
      )}
    </div>
  )
}

// PastPerformance shows Galapagos own award history (their proof they have done this work).
function PastPerformance() {
  const { data, isLoading } = useGalapagosAwards()
  const awards = data ?? []
  if (!isLoading && awards.length === 0) return null
  return (
    <Panel
      title="Galapagos past performance"
      hint={isLoading ? 'loading' : `${awards.length} awards from USASpending`}
    >
      <div className="flex items-center gap-1.5 pb-2 text-[11px] text-faint">
        <Trophy size={13} className="text-gold" /> Their own federal award history, evidence of relevant experience.
      </div>
      <div className="grid gap-1.5 md:grid-cols-2">
        {awards.slice(0, 6).map((a) => (
          <AwardRow key={a.award_uid} a={a} />
        ))}
      </div>
    </Panel>
  )
}

// WageBaselinePanel shows the BLS OEWS regional wage baseline for the Galapagos roles in Hawaii and
// New Mexico. It is a regional wage baseline, current year, useful for pricing a proposal.
function WageBaselinePanel() {
  const { data, isLoading } = useWages()
  const rows = data ?? []
  if (!isLoading && rows.length === 0) return null
  const year = rows[0]?.year ?? ''
  return (
    <Panel title="Regional wage baseline" hint={isLoading ? 'loading' : `BLS OEWS ${year}, Hawaii and New Mexico`}>
      <div className="flex items-center gap-1.5 pb-2 text-[11px] text-faint">
        <DollarSign size={13} className="text-gold" /> Annual mean wage by role and state, a baseline for proposal pricing.
      </div>
      <table className="w-full text-sm">
        <thead>
          <tr className="text-left text-[11px] uppercase tracking-wider text-faint">
            <th className="pb-2 font-semibold">Role</th>
            <th className="pb-2 font-semibold">Occupation (SOC)</th>
            <th className="pb-2 text-right font-semibold">Hawaii</th>
            <th className="pb-2 text-right font-semibold">New Mexico</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-line/50">
          {rows.map((w) => {
            const hi = w.areas.find((a) => a.area === 'HI')
            const nm = w.areas.find((a) => a.area === 'NM')
            return (
              <tr key={w.occupation_code} className="hover:bg-navy-800/40">
                <td className="py-2.5 font-semibold">{w.role}</td>
                <td className="py-2.5 text-xs text-muted">{w.occupation_title}</td>
                <td className="py-2.5 text-right font-bold tabular-nums text-blue-soft">{fmtUSD(hi?.annual_mean ?? '')}</td>
                <td className="py-2.5 text-right font-bold tabular-nums text-blue-soft">{fmtUSD(nm?.annual_mean ?? '')}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </Panel>
  )
}

function AwardRow({ a }: { a: FederalAward }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-lg bg-surface/70 px-3 py-2">
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold">{a.recipient_name || 'Unknown recipient'}</div>
        <div className="truncate text-[11px] text-faint">
          {a.awarding_sub_agency || a.awarding_agency || 'Federal'}
          {a.pop_end_date ? ` · ends ${a.pop_end_date}` : ''}
        </div>
      </div>
      <span className="shrink-0 text-sm font-bold tabular-nums text-blue-soft">{fmtUSD(a.award_amount)}</span>
    </div>
  )
}

function placeLabel(o: SamOpportunity): string {
  const { city, state } = o.place_of_performance
  return [city, state].filter(Boolean).join(', ')
}

function EmptyState() {
  return (
    <div className="py-10 text-center">
      <p className="text-sm text-muted">No cached opportunities match these filters yet.</p>
      <p className="mt-1 text-xs text-faint">
        Populate the cache with a real pull:{' '}
        <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">make sync-sam</code> (or{' '}
        <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">npm run sync:sam</code>) with{' '}
        <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">SAM_API_KEY</code> set, then refresh.
      </p>
    </div>
  )
}