import { useState } from 'react'
import { Building2, Plus, UserCheck, UserPlus } from 'lucide-react'
import { Link } from 'react-router-dom'

import { ToolHeader } from '../../components/ToolHeader'
import { Modal, Panel } from '../../components/ui'
import { useAuth } from '../../lib/useAuth'
import { recruitBrand } from './brand'
import { useClaimClient, useClients, useCreateClient } from './clientQueries'

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

const inputCls =
  'w-full rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-recruit'

export function Clients() {
  const { principal } = useAuth()
  const [owner, setOwner] = useState('')
  const [q, setQ] = useState('')
  const [open, setOpen] = useState(false)

  const list = useClients({ owner, q })
  const create = useCreateClient()
  const claim = useClaimClient()

  const [name, setName] = useState('')
  const [industry, setIndustry] = useState('')

  const submit = () => {
    create.mutate(
      { name, industry },
      {
        onSuccess: () => {
          setName('')
          setIndustry('')
          setOpen(false)
        },
      },
    )
  }

  const rows = list.data?.clients ?? []

  return (
    <div className="space-y-4">
      <ToolHeader name={recruitBrand.name} tagline="Clients" accent={recruitBrand.accent}>
        <button
          onClick={() => setOpen(true)}
          className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2.5 text-sm font-bold text-white hover:brightness-110"
        >
          <Plus size={14} />
          New client
        </button>
      </ToolHeader>

      <div className="flex flex-wrap items-center gap-2">
        <button className={chip(owner === '')} onClick={() => setOwner('')}>
          All
        </button>
        <button className={chip(owner === 'me')} onClick={() => setOwner('me')}>
          Mine
        </button>
        <button className={chip(owner === 'unassigned')} onClick={() => setOwner('unassigned')}>
          Unassigned
        </button>
        <input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Search name or UEI"
          className={`${inputCls} ml-auto max-w-xs`}
        />
      </div>

      <Panel
        title="Client accounts"
        hint={list.isLoading ? 'loading' : `${list.data?.total ?? 0} total`}
      >
        {list.isError ? (
          <p className="py-6 text-center text-sm text-warn">
            Could not load clients. {(list.error as Error)?.message}
          </p>
        ) : list.isLoading ? (
          <p className="py-6 text-center text-muted">Loading clients…</p>
        ) : rows.length === 0 ? (
          <p className="py-8 text-center text-sm text-faint">
            {owner === 'me'
              ? 'You do not hold any client accounts yet. Claim one from Unassigned or create a new client.'
              : owner === 'unassigned'
                ? 'Every client is assigned. Nothing is sitting unclaimed.'
                : 'No clients yet. Create the first one to start placing job orders against it.'}
          </p>
        ) : (
          <ul className="divide-y divide-line/50">
            {rows.map((c) => {
              const mine = !!c.owner_user_id && c.owner_user_id === principal?.user_id
              return (
                <li key={c.id} className="flex items-center justify-between gap-4 py-3">
                  <div className="min-w-0">
                    <Link
                      to={`/recruit/clients/${c.id}`}
                      className="truncate text-sm font-semibold hover:text-recruit"
                    >
                      {c.name}
                    </Link>
                    <p className="truncate text-[11px] text-faint">
                      {c.industry || 'No industry set'} · {c.contact_count} contact
                      {c.contact_count === 1 ? '' : 's'} · {c.status}
                    </p>
                  </div>

                  {/* Ownership is the point of this column. A recruiter must be able to see who holds an
                      account before touching it, and claim one that nobody holds. */}
                  <div className="flex shrink-0 items-center gap-2">
                    {c.owner_user_id ? (
                      <span
                        className="flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold"
                        style={{
                          color: mine ? 'var(--color-ok)' : 'var(--color-muted)',
                          background: `color-mix(in srgb, ${mine ? 'var(--color-ok)' : 'var(--color-muted)'} 14%, transparent)`,
                        }}
                        title={c.owner_since ? `Held since ${c.owner_since.slice(0, 10)}` : undefined}
                      >
                        <UserCheck size={12} />
                        {mine ? 'You' : c.owner_name}
                      </span>
                    ) : (
                      <button
                        onClick={() => claim.mutate(c.id)}
                        disabled={claim.isPending}
                        className="flex items-center gap-1.5 rounded-full border border-recruit/50 px-2.5 py-1 text-[11px] font-semibold text-recruit hover:bg-recruit/10 disabled:opacity-50"
                      >
                        <UserPlus size={12} />
                        Claim
                      </button>
                    )}
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </Panel>

      <Modal open={open} onClose={() => setOpen(false)} title="New client">
        <div className="space-y-3">
          <label className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Name</span>
            <input value={name} onChange={(e) => setName(e.target.value)} className={inputCls} />
          </label>
          <label className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Industry</span>
            <input value={industry} onChange={(e) => setIndustry(e.target.value)} className={inputCls} />
          </label>
          <p className="text-[11px] text-faint">
            <Building2 size={11} className="mr-1 inline" />
            You will hold this account. Anyone can see that you hold it, and an admin can reassign it.
          </p>
          {create.isError && (
            <p className="text-xs text-risk">{(create.error as Error).message}</p>
          )}
          <div className="flex justify-end gap-2 pt-1">
            <button
              onClick={() => setOpen(false)}
              className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"
            >
              Cancel
            </button>
            <button
              onClick={submit}
              disabled={!name.trim() || create.isPending}
              className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50"
            >
              Create
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}