import { useState } from 'react'
import { ArrowLeft, Briefcase, Mail, Phone, Plus, Star, UserCheck, UserMinus, UserPlus } from 'lucide-react'
import { Link, useParams } 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 {
  useAddContact,
  useClaimClient,
  useClient,
  useReleaseClient,
  useUpdateClient,
  useUpdateContact,
} from './clientQueries'

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 ClientDetail() {
  const { clientId } = useParams()
  const { principal } = useAuth()
  const q = useClient(clientId ?? null)
  const update = useUpdateClient()
  const claim = useClaimClient()
  const release = useReleaseClient()
  const addContact = useAddContact()
  const updateContact = useUpdateContact()

  const [editing, setEditing] = useState(false)
  const [industry, setIndustry] = useState('')
  const [notes, setNotes] = useState('')
  const [addOpen, setAddOpen] = useState(false)
  const [cName, setCName] = useState('')
  const [cTitle, setCTitle] = useState('')
  const [cEmail, setCEmail] = useState('')
  const [cHM, setCHM] = useState(false)

  if (q.isLoading) return <Panel className="grid place-items-center py-24 text-muted">Loading client…</Panel>
  if (q.isError || !q.data) {
    return (
      <Panel className="grid place-items-center py-24 text-warn">
        Could not load this client. {(q.error as Error)?.message}
      </Panel>
    )
  }

  const c = q.data
  const mine = !!c.owner_user_id && c.owner_user_id === principal?.user_id
  const unowned = !c.owner_user_id
  // The lock, stated plainly. Anyone may read; only the holder writes, and an unowned account is
  // claimable. An admin can still act, and the server is the authority on that, so this only shapes
  // what is offered rather than what is enforced.
  const canEdit = mine || unowned

  const saveEdits = () => {
    update.mutate(
      { id: c.id, patch: { expected_updated_at: c.updated_at, industry, notes } },
      { onSuccess: () => setEditing(false) },
    )
  }

  const submitContact = () => {
    addContact.mutate(
      {
        clientId: c.id,
        patch: { full_name: cName, title: cTitle, email: cEmail, is_hiring_manager: cHM },
      },
      {
        onSuccess: () => {
          setCName('')
          setCTitle('')
          setCEmail('')
          setCHM(false)
          setAddOpen(false)
        },
      },
    )
  }

  return (
    <div className="space-y-4">
      <ToolHeader name={recruitBrand.name} tagline="Client" accent={recruitBrand.accent}>
        <Link
          to="/recruit/clients"
          className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"
        >
          <ArrowLeft size={14} />
          All clients
        </Link>
      </ToolHeader>

      <Panel>
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0">
            <h2 className="text-xl font-extrabold tracking-tight">{c.name}</h2>
            <p className="mt-0.5 text-[11px] text-faint">
              {c.industry || 'No industry set'} · {c.status}
              {c.uei ? ` · UEI ${c.uei}` : ''}
            </p>
          </div>

          <div className="flex shrink-0 items-center gap-2">
            {c.owner_user_id ? (
              <>
                <span
                  className="flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold"
                  style={{
                    color: mine ? 'var(--color-ok)' : 'var(--color-warn)',
                    background: `color-mix(in srgb, ${mine ? 'var(--color-ok)' : 'var(--color-warn)'} 14%, transparent)`,
                  }}
                >
                  <UserCheck size={13} />
                  {mine ? 'You hold this account' : `Held by ${c.owner_name}`}
                </span>
                {mine && (
                  <button
                    onClick={() => release.mutate(c.id)}
                    disabled={release.isPending}
                    className="flex items-center gap-1.5 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50"
                  >
                    <UserMinus size={13} />
                    Release
                  </button>
                )}
              </>
            ) : (
              <button
                onClick={() => claim.mutate(c.id)}
                disabled={claim.isPending}
                className="flex items-center gap-1.5 rounded-lg border border-recruit/50 px-3 py-1.5 text-xs font-semibold text-recruit hover:bg-recruit/10 disabled:opacity-50"
              >
                <UserPlus size={13} />
                Claim this account
              </button>
            )}
          </div>
        </div>

        {/* Someone else holds it. Say who, and say what to do about it, rather than only disabling the
            buttons and leaving the reason to be guessed. */}
        {!canEdit && (
          <p className="mt-3 rounded-lg border border-warn/40 bg-navy-950/40 p-3 text-[11px] text-muted">
            {c.owner_name} is working this account. Talk to them before making changes, or ask an admin to
            reassign it.
          </p>
        )}

        {canEdit && !editing && (
          <button
            onClick={() => {
              setIndustry(c.industry ?? '')
              setNotes(c.notes ?? '')
              setEditing(true)
            }}
            className="mt-3 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink"
          >
            Edit details
          </button>
        )}

        {editing && (
          <div className="mt-3 space-y-3">
            <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>
            <label className="flex flex-col gap-1.5">
              <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Notes</span>
              <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                rows={3}
                className={inputCls}
              />
            </label>
            {update.isError && (
              // A 409 here means the row moved after it was read, which is a reload rather than a retry.
              <p className="text-xs text-risk">{(update.error as Error).message}</p>
            )}
            <div className="flex gap-2">
              <button
                onClick={saveEdits}
                disabled={update.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"
              >
                Save
              </button>
              <button
                onClick={() => setEditing(false)}
                className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"
              >
                Cancel
              </button>
            </div>
          </div>
        )}

        {c.notes && !editing && <p className="mt-3 text-sm text-muted">{c.notes}</p>}
      </Panel>

      <Panel title="Job orders" hint="roles open at this client">
        {/* The client screen is where a recruiter decides what to work next, so the way to its open
            roles belongs here rather than only in the global list. */}
        <Link
          to={`/recruit/requisitions?client=${c.id}`}
          className="flex items-center justify-between rounded-lg border border-line/60 bg-navy-950/40 px-3 py-2.5 text-sm hover:border-recruit/50"
        >
          <span className="flex items-center gap-2 font-semibold">
            <Briefcase size={14} style={{ color: "var(--color-recruit)" }} />
            View job orders for {c.name}
          </span>
          <ArrowLeft size={14} className="rotate-180 text-faint" />
        </Link>
      </Panel>

      <Panel
        title="Contacts"
        hint={`${c.contacts.length} on file`}
      >
        <div className="mb-3 flex justify-end">
          {canEdit && (
            <button
              onClick={() => setAddOpen(true)}
              className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink"
            >
              <Plus size={13} />
              Add contact
            </button>
          )}
        </div>
        {c.contacts.length === 0 ? (
          <p className="py-6 text-center text-sm text-faint">
            No contacts yet. Add the hiring manager so job orders have somewhere to go.
          </p>
        ) : (
          <ul className="divide-y divide-line/50">
            {c.contacts.map((k) => (
              <li key={k.id} className="flex items-center justify-between gap-4 py-2.5">
                <div className="min-w-0">
                  <p className="flex items-center gap-2 truncate text-sm font-semibold">
                    {k.is_primary && <Star size={12} style={{ color: 'var(--color-gold)' }} />}
                    {k.full_name}
                    {k.is_hiring_manager && (
                      <span className="rounded-full bg-blue/20 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-blue-soft">
                        Hiring manager
                      </span>
                    )}
                  </p>
                  <p className="truncate text-[11px] text-faint">
                    {k.title || 'No title'}
                    {k.email ? ` · ${k.email}` : ''}
                    {k.phone ? ` · ${k.phone}` : ''}
                  </p>
                </div>
                <div className="flex shrink-0 items-center gap-2">
                  {k.email && (
                    <a href={`mailto:${k.email}`} className="text-faint hover:text-ink" title="Email">
                      <Mail size={14} />
                    </a>
                  )}
                  {k.phone && (
                    <a href={`tel:${k.phone}`} className="text-faint hover:text-ink" title="Call">
                      <Phone size={14} />
                    </a>
                  )}
                  {canEdit && !k.is_primary && (
                    <button
                      onClick={() =>
                        updateContact.mutate({
                          id: k.id,
                          clientId: c.id,
                          patch: { expected_updated_at: k.updated_at, is_primary: true },
                        })
                      }
                      className="rounded-lg border border-line/70 px-2 py-1 text-[10px] font-semibold text-muted hover:text-ink"
                    >
                      Make primary
                    </button>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </Panel>

      <Modal open={addOpen} onClose={() => setAddOpen(false)} title="Add contact">
        <div className="space-y-3">
          <label className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Full name</span>
            <input value={cName} onChange={(e) => setCName(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">Title</span>
            <input value={cTitle} onChange={(e) => setCTitle(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">Email</span>
            <input value={cEmail} onChange={(e) => setCEmail(e.target.value)} className={inputCls} />
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" checked={cHM} onChange={(e) => setCHM(e.target.checked)} />
            <span className="text-muted">This person is a hiring manager</span>
          </label>
          {addContact.isError && <p className="text-xs text-risk">{(addContact.error as Error).message}</p>}
          <div className="flex justify-end gap-2 pt-1">
            <button
              onClick={() => setAddOpen(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={submitContact}
              disabled={!cName.trim() || addContact.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"
            >
              Add
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}