import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { ArrowLeft, BookOpenText, Globe2, Loader2, Plus, Trash2 } from 'lucide-react'
import { screenApi } from './api'
import { useAliases } from './queries'
import { screenBrand } from './brand'
import { Badge, Panel } from '../../components/ui'
import { ToolHeader } from '../../components/ToolHeader'

// The acronym and term expansion manager: the global GovCon and DoD seed every tenant gets, plus
// this organization's own additions. Terms normalize requirement and resume skill names during
// matching, so JWICS matches Joint Worldwide Intelligence Communications System.
export function AliasSettings() {
  const aliases = useAliases()
  const qc = useQueryClient()
  const [alias, setAlias] = useState('')
  const [expansion, setExpansion] = useState('')

  const add = useMutation({
    mutationFn: () => screenApi.addAlias(alias, expansion),
    onSuccess: () => {
      setAlias('')
      setExpansion('')
      void qc.invalidateQueries({ queryKey: ['screenmatch', 'aliases'] })
    },
  })
  const remove = useMutation({
    mutationFn: (id: string) => screenApi.deleteAlias(id),
    onSuccess: () => void qc.invalidateQueries({ queryKey: ['screenmatch', 'aliases'] }),
  })

  const terms = aliases.data?.terms ?? []
  const globalTerms = terms.filter((t) => t.global)
  const orgTerms = terms.filter((t) => !t.global)

  return (
    <div className="space-y-4">
      <ToolHeader name={screenBrand.name} tagline="Acronyms and term expansions" accent={screenBrand.accent} />
      <Link to="/screen" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
        <ArrowLeft size={15} /> Back to Screening Queue
      </Link>

      <Panel title="Add a term" hint="applies to your organization only">
        <div className="flex flex-wrap items-end gap-2">
          <label className="flex flex-col gap-1">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Term or acronym</span>
            <input
              className="w-44 rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-blue"
              value={alias}
              onChange={(e) => setAlias(e.target.value)}
              placeholder="JWICS"
            />
          </label>
          <label className="flex flex-1 flex-col gap-1">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Expansion</span>
            <input
              className="min-w-64 rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-blue"
              value={expansion}
              onChange={(e) => setExpansion(e.target.value)}
              placeholder="Joint Worldwide Intelligence Communications System"
            />
          </label>
          <button
            disabled={!alias.trim() || expansion.trim().length < 2 || add.isPending}
            onClick={() => add.mutate()}
            className="flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-3.5 py-2 text-sm font-semibold text-white hover:brightness-110 disabled:opacity-50"
          >
            {add.isPending ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} Add term
          </button>
        </div>
        {add.isError && <p className="mt-2 text-xs text-risk">{(add.error as Error).message}</p>}
      </Panel>

      <Panel
        title="Your organization's terms"
        hint={`${orgTerms.length} term${orgTerms.length === 1 ? '' : 's'}`}
      >
        {aliases.isLoading ? (
          <p className="py-4 text-center text-sm text-muted">Loading…</p>
        ) : orgTerms.length === 0 ? (
          <p className="py-4 text-center text-sm text-faint">
            No custom terms yet. Terms you add apply on top of the platform seed below.
          </p>
        ) : (
          <ul className="divide-y divide-line/50">
            {orgTerms.map((t) => (
              <li key={t.id} className="flex items-center gap-3 py-2 text-sm">
                <BookOpenText size={14} className="shrink-0 text-blue-soft" />
                <span className="font-semibold">{t.alias}</span>
                <span className="text-faint">expands to</span>
                <span className="min-w-0 flex-1 truncate text-muted">{t.expansion}</span>
                <button
                  onClick={() => remove.mutate(t.id)}
                  className="rounded p-1 text-faint hover:text-risk"
                  aria-label={`Remove ${t.alias}`}
                >
                  <Trash2 size={14} />
                </button>
              </li>
            ))}
          </ul>
        )}
      </Panel>

      <Panel title="Platform seed" hint="GovCon and DoD terms, read only">
        <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
          {globalTerms.map((t) => (
            <div key={t.id} className="flex items-center gap-2 border-b border-line/40 py-1.5 text-sm">
              <Globe2 size={12} className="shrink-0 text-faint" />
              <span className="w-24 shrink-0 font-semibold">{t.alias}</span>
              <span className="min-w-0 flex-1 truncate text-muted">{t.expansion}</span>
              <Badge color="var(--color-blue)" subtle>
                seed
              </Badge>
            </div>
          ))}
        </div>
      </Panel>
    </div>
  )
}