import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import {
  ArrowRight, CheckCircle2, LayoutGrid, List, MapPin, MessageSquare, Sparkles, Star, Users, Wallet,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  Avatar, Badge, Button, Drawer, EmptyState, SearchInput, SegmentedToggle,
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, StatusBadge, toast,
} from '@/components/ds';
import {
  useApplications, useAssignments, useCourses, useJobPostings, useStaff, useWorkerProfiles,
} from '@/lib/krowHooks';
import { workforceStatusFor } from '@/lib/workforce';
import {
  customRequirementsText, englishLabel, hasRequirements, roleMetaLine,
} from '@/lib/positionModel';
import {
  PositionCustomRequirements, PositionOverview, PositionRequirements,
} from '@/components/krow/PositionDetails';
import { SkillSurface } from '@/components/skills/SkillSurface';
import { useAssistantPanel, usePublishPageContext } from '@/components/ai-assistant';
import { continueDraftRequest } from '@/lib/skills/draftFlow';
import { AdminPage, SectionTitle } from '@/pages/admin/_shell';
import { RoleGlyph } from '@/pages/admin/RoleGlyph';
import { buildPosition, payLabel } from '@/pages/admin/positionInsights';

/**
 * Admin Positions — a hiring workspace, one card per role.
 *
 * The table this replaces was good at exactly one thing: comparing a single column
 * down every row. But the question an operator brings to this page is "how is
 * *this* role doing", and answering it from a table meant reading nine cells and
 * assembling them yourself. A card can state the funnel, the health and the one
 * thing to do next as a single thought.
 *
 * What keeps it from becoming a wall of decoration:
 *
 * - **One insight per card, not every field.** The most actionable finding, chosen
 *   in positionInsights.js, and nothing else.
 * - **No cards inside cards.** Hierarchy comes from type, dividers and the
 *   progression strip.
 * - **The drawer holds the depth.** Clicking a card opens the full record over the
 *   grid instead of navigating away, so reviewing seven roles never costs you your
 *   scroll position or your filters.
 */

const SORTS = {
  attention: {
    label: 'Needs attention first',
    /* Health first, then the biggest backlog — so roles that need a person are
       the ones visible without scrolling. */
    compare: (a, b) => {
      const rank = { risk: 0, warning: 1, success: 2, neutral: 3 };
      return (rank[a.health.tone] - rank[b.health.tone]) || (b.stats.unscreened - a.stats.unscreened);
    },
  },
  applicants: { label: 'Most applicants', compare: (a, b) => b.stats.applied - a.stats.applied },
  starved: { label: 'Fewest applicants', compare: (a, b) => a.stats.applied - b.stats.applied },
  updated: {
    label: 'Recently updated',
    compare: (a, b) => new Date(b.updated_date || b.created_date).getTime() - new Date(a.updated_date || a.created_date).getTime(),
  },
  title: { label: 'Title A–Z', compare: (a, b) => a.title.localeCompare(b.title) },
};

const HEALTH_TONE = {
  success: 'bg-success-muted text-success',
  warning: 'bg-warning-muted text-warning',
  risk: 'bg-destructive-muted text-destructive',
  neutral: 'bg-surface-sunken text-ink-3',
};

/** Hiring health as a small filled chip — it is a state, so it reads as one. */
/** @param {any} props */
function HealthChip({ health, className = '' }) {
  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold',
        HEALTH_TONE[health.tone],
        className
      )}
    >
      <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true" />
      {health.label}
    </span>
  );
}

const STEP_ICONS = {
  applied: Users,
  screened: Sparkles,
  shortlisted: Star,
  interviewed: MessageSquare,
  hired: CheckCircle2,
};

/**
 * The hiring progression: Applied → Screened → Shortlisted → Interviewed → Hired.
 *
 * Rendered as an executive multi-segment funnel bar and 5 stage micro-cards with tailored icons.
 */
function Progression({ steps, className }) {
  const entered = steps[0]?.count || 0;

  return (
    <div className={cn('w-full space-y-2', className)} role="group" aria-label="Hiring progression">
      {/* Top Proportional Funnel Progress Bar */}
      <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-surface-sunken p-0.5 gap-0.5 border border-border/40">
        {steps.map((step) => {
          const share = entered ? (step.count / entered) * 100 : 0;
          if (!step.count) return null;

          const colorMap = {
            applied: 'bg-blue-600',
            screened: 'bg-indigo-500',
            shortlisted: 'bg-violet-500',
            interviewed: 'bg-cyan-500',
            hired: 'bg-emerald-500',
          };

          return (
            <div
              key={step.key}
              className={cn('h-full rounded-full transition-all duration-500', colorMap[step.key] || 'bg-blue-600')}
              style={{ width: `${Math.max(share, 10)}%` }}
            />
          );
        })}
      </div>

      {/* 5 Executive Stage Micro-Cards */}
      <div className="grid grid-cols-5 gap-1.5">
        {steps.map((step) => {
          const hasCount = step.count > 0;
          const isHired = step.key === 'hired' && hasCount;
          const Icon = STEP_ICONS[step.key] || Users;

          return (
            <div
              key={step.key}
              className={cn(
                'group/step relative flex flex-col items-center justify-between rounded-xl p-1.5 border transition-all duration-200 text-center min-w-0',
                hasCount
                  ? isHired
                    ? 'bg-gradient-to-b from-emerald-50/90 to-emerald-100/40 border-emerald-300/80 shadow-2xs dark:from-emerald-950/40 dark:to-emerald-900/20 dark:border-emerald-800'
                    : 'bg-gradient-to-b from-surface to-surface-subtle/80 border-border/70 shadow-2xs hover:border-blue-500/40 hover:shadow-xs'
                  : 'bg-surface-subtle/30 border-border/40 text-ink-4'
              )}
            >
              {/* Icon & Count Badge */}
              <div className="flex items-center gap-1">
                <Icon
                  className={cn(
                    'h-3 w-3 shrink-0',
                    hasCount
                      ? isHired
                        ? 'text-emerald-600 dark:text-emerald-400'
                        : 'text-blue-600 dark:text-blue-400'
                      : 'text-ink-4/40'
                  )}
                />
                <span
                  className={cn(
                    'font-heading text-body-sm font-extrabold tabular-nums leading-none',
                    hasCount
                      ? isHired
                        ? 'text-emerald-700 dark:text-emerald-400'
                        : 'text-ink-1'
                      : 'text-ink-4'
                  )}
                >
                  {step.count}
                </span>
              </div>

              {/* Stage Micro Label */}
              <span
                className={cn(
                  'mt-1.5 truncate text-[9.5px] font-semibold tracking-tight leading-none w-full text-center',
                  hasCount ? 'text-ink-2' : 'text-ink-4/60'
                )}
              >
                {step.label === 'Shortlisted' ? 'Shortlist' : step.label === 'Interviewed' ? 'Interview' : step.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/**
 * The workforce line — one compact row under the hiring pipeline.
 *
 * Deliberately a single line of text rather than a panel. The pipeline above it
 * is what this card has always been about; workforce demand is a second, quieter
 * fact, and giving it equal weight turned the card into a dashboard.
 *
 * Every clause appears only if the data behind it exists. A position that
 * declares no headcount has no coverage to report, and one with no strong
 * matches simply omits that clause instead of announcing an absence. If nothing
 * is known, the row does not render at all.
 */
function WorkforceRow({ workforce }) {
  if (!workforce) return null;
  const { demand, strong, newToday } = workforce;

  const parts = [
    demand.declared && (
      <span key="demand" className="tabular-nums">
        <span className="font-semibold text-ink-1">{demand.required}</span> required
        <span className="text-ink-4"> · </span>
        <span className="font-semibold text-ink-1">{demand.assigned}</span> assigned
        <span className="text-ink-4"> · </span>
        <span className={cn('font-semibold', demand.remaining ? 'text-warning' : 'text-success')}>
          {demand.remaining}
        </span> remaining
      </span>
    ),
    strong.length > 0 && (
      <span key="strong" className="tabular-nums">
        <span className="font-semibold text-ink-1">{strong.length}</span> strong
        {strong.length === 1 ? ' match' : ' matches'}
      </span>
    ),
    newToday.length > 0 && (
      <span key="new" className="tabular-nums font-semibold text-krow-blue">
        {newToday.length} new today
      </span>
    ),
  ].filter(Boolean);

  if (!parts.length) return null;

  return (
    <div className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 rounded-lg bg-surface-subtle px-2.5 py-1.5 text-caption text-ink-3">
      <Users className="h-3 w-3 shrink-0 text-ink-4" aria-hidden="true" />
      {parts.map((part, i) => (
        <React.Fragment key={part.key}>
          {i > 0 && <span className="text-ink-4/60">|</span>}
          {part}
        </React.Fragment>
      ))}
    </div>
  );
}

/**
 * The chosen presentation, remembered.
 *
 * localStorage rather than the account preferences the rest of the app uses:
 * this is how one person likes to look at one page on one machine, not a
 * setting worth a write to the user record.
 */
const VIEW_KEY = 'krow:positions:view';

function useViewMode() {
  const [view, setView] = useState(() => {
    try {
      return localStorage.getItem(VIEW_KEY) === 'list' ? 'list' : 'grid';
    } catch {
      return 'grid';
    }
  });

  return [view, (next) => {
    setView(next);
    try {
      localStorage.setItem(VIEW_KEY, next);
    } catch {
      /* Preference is not persisted; the page still works. */
    }
  }];
}

/* ── Just saved ────────────────────────────────────────────────────────────
 *
 * A position saved in the last two minutes is held a shade closer to the brand
 * on its own card, so an admin returning to a list of thirty roles can find the
 * one they were just working on without a toast telling them where to look.
 *
 * This is emphasis only, and it is the *only* part of the card that expires.
 * What the card says about the position — Draft, Hiring, Paused — is the
 * position's own status and is never on a timer: a draft stays a draft until
 * the publish action makes it something else.
 *
 * It is derived from `updated_date`, which the store stamps on every write, so
 * the mark follows the last save rather than the first. Because the source is
 * the record itself, it survives a refresh, a navigation away and back, and any
 * filter or sort the page is in. Each position expires on its own clock; there
 * is no page-level "something happened" flag.
 */
const RECENT_WINDOW_MS = 2 * 60 * 1000;

const savedAt = (posting) => Date.parse(posting.updated_date || posting.created_date);

/**
 * The ids currently inside their window, and a single timer that re-reads the
 * clock when the soonest of them expires. Nothing recent on screen means no
 * timer at all.
 */
function useRecentlySavedIds(postings) {
  const [now, setNow] = useState(() => Date.now());

  /* The creation times themselves, as a value rather than an array identity.
     The page re-reads `postings` from the query on every render, so depending
     on the array would re-run the effects below on renders where nothing about
     the data changed. */
  const stamps = useMemo(
    () => postings.map((p) => `${p.id}@${p.updated_date || p.created_date}`).join('|'),
    [postings]
  );

  /* The clock is re-read whenever a position is added or saved, not only when a
     timer fires. A position written while this page is already open arrives
     through a query invalidation, and against a clock last read at mount it
     would look like it had not happened yet. */
  useEffect(() => { setNow(Date.now()); }, [stamps]);

  const recentIds = useMemo(() => {
    const ids = new Set();
    for (const p of postings) {
      const age = now - savedAt(p);
      if (Number.isFinite(age) && age >= 0 && age < RECENT_WINDOW_MS) ids.add(p.id);
    }
    return ids;
    /* `stamps` stands in for `postings` here: the same information, as a value
       that only changes when the set of positions does. */
  }, [stamps, now]);

  useEffect(() => {
    if (!recentIds.size) return undefined;

    /* Wake once, at the first expiry rather than on an interval. Whatever is
       still recent after that wake re-arms the next one. */
    const soonest = Math.min(
      ...postings
        .filter((p) => recentIds.has(p.id))
        .map((p) => savedAt(p) + RECENT_WINDOW_MS)
    );
    const timer = setTimeout(() => setNow(Date.now()), Math.max(0, soonest - Date.now()) + 50);
    return () => clearTimeout(timer);
  }, [recentIds]);

  return recentIds;
}

/**
 * The same positions, as a table.
 *
 * Takes the rows the page already built, filtered and sorted — the same objects
 * the cards render, carrying both the pipeline and the workforce reading. It
 * derives nothing, so a number here cannot differ from the same number there.
 *
 * Columns follow the data: the workforce columns appear only if some position on
 * screen actually declares a headcount, rather than filling a column with dashes.
 */
function PositionsTable({ rows, onOpen }) {
  const showDemand = rows.some((p) => p.workforce.demand.declared);

  const columns = [
    { key: 'position', label: 'Position' },
    { key: 'applied', label: 'Applied', align: 'right' },
    { key: 'screened', label: 'Screened', align: 'right' },
    { key: 'shortlisted', label: 'Shortlist', align: 'right' },
    { key: 'interviews', label: 'Interview', align: 'right' },
    { key: 'hired', label: 'Hired', align: 'right' },
    showDemand && { key: 'required', label: 'Required', align: 'right' },
    showDemand && { key: 'assigned', label: 'Assigned', align: 'right' },
    showDemand && { key: 'remaining', label: 'Remaining', align: 'right' },
    { key: 'strong', label: 'Strong', align: 'right' },
    { key: 'health', label: 'Status' },
    { key: 'action', label: '' },
  ].filter(Boolean);

  return (
    <div className="overflow-hidden rounded-xl border border-border bg-surface shadow-xs">
      <table className="hidden w-full border-collapse text-body-sm lg:table">
        <caption className="sr-only">Open positions, their hiring pipeline and workforce demand</caption>
        <thead>
          <tr className="border-b border-border bg-surface-subtle">
            {columns.map((c) => (
              <th
                key={c.key}
                scope="col"
                className={cn(
                  'whitespace-nowrap px-3 py-2.5 text-[10px] font-bold uppercase tracking-wide text-ink-4',
                  c.align === 'right' ? 'text-right' : 'text-left'
                )}
              >
                {c.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((p) => {
            const { demand, strong } = p.workforce;
            return (
              <tr
                key={p.id}
                onClick={() => onOpen(p)}
                className="cursor-pointer border-b border-border last:border-0 transition-colors hover:bg-surface-subtle"
              >
                <td className="px-3 py-2.5">
                  {p.company && (
                    <p className="text-[10px] font-semibold uppercase tracking-wide text-krow-blue">{p.company}</p>
                  )}
                  <p className="font-medium text-ink-1">{p.title}</p>
                  <p className="text-caption text-ink-4">
                    {p.role_category}
                    {p.location ? ` · ${p.location}` : ''}
                  </p>
                </td>
                <td className="px-3 py-2.5 text-right font-semibold tabular-nums text-ink-1">{p.stats.applied}</td>
                <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">{p.stats.screened}</td>
                <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">{p.stats.shortlisted}</td>
                <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">{p.stats.interviews}</td>
                <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">{p.stats.hired}</td>
                {showDemand && (
                  <>
                    <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">
                      {demand.declared ? demand.required : <span className="text-ink-4">—</span>}
                    </td>
                    <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">
                      {demand.declared ? demand.assigned : <span className="text-ink-4">—</span>}
                    </td>
                    <td className={cn('px-3 py-2.5 text-right font-semibold tabular-nums', demand.declared && demand.remaining ? 'text-warning' : 'text-ink-2')}>
                      {demand.declared ? demand.remaining : <span className="font-normal text-ink-4">—</span>}
                    </td>
                  </>
                )}
                <td className="px-3 py-2.5 text-right tabular-nums text-ink-2">{strong.length}</td>
                <td className="px-3 py-2.5"><HealthChip health={p.health} /></td>
                <td className="px-3 py-2.5 text-right">
                  <span className="inline-flex items-center gap-1 text-caption font-semibold text-krow-blue">
                    View <ArrowRight className="h-3 w-3" aria-hidden="true" />
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {/* Below `lg` the same rows stack: twelve columns cannot be read on a
          phone, and a table that scrolls the page sideways is worse than one
          that changes shape. */}
      <ul className="divide-y divide-border lg:hidden">
        {rows.map((p) => (
          <li key={p.id}>
            <button
              type="button"
              onClick={() => onOpen(p)}
              className="flex w-full flex-col gap-2 px-4 py-3 text-left transition-colors hover:bg-surface-subtle
                         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-krow-blue/50"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  {p.company && (
                    <p className="truncate text-[10px] font-semibold uppercase tracking-wide text-krow-blue">{p.company}</p>
                  )}
                  <p className="truncate font-medium text-ink-1">{p.title}</p>
                  <p className="truncate text-caption text-ink-4">
                    {p.role_category}
                    {p.location ? ` · ${p.location}` : ''}
                  </p>
                </div>
                <HealthChip health={p.health} />
              </div>
              <p className="flex flex-wrap items-center gap-x-2 text-caption tabular-nums text-ink-3">
                <span><span className="font-semibold text-ink-1">{p.stats.applied}</span> applied</span>
                <span className="text-ink-4">·</span>
                <span><span className="font-semibold text-ink-1">{p.stats.interviews}</span> interview</span>
                <span className="text-ink-4">·</span>
                <span><span className="font-semibold text-ink-1">{p.stats.hired}</span> hired</span>
              </p>
              <p className="text-caption text-ink-2">{p.insight}</p>
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

/**
 * "4 yrs experience · Fluent English" — the two candidate criteria, or nothing.
 *
 * Abbreviated deliberately: this is a supporting line under the terms, not a
 * field list. A position that states neither returns null and the line is not
 * drawn, rather than a card carrying a label with no answer.
 */
function candidateCriteria(position) {
  const years = Number(position.min_experience_years);
  const english = englishLabel(position.english_required);

  return [
    Number.isFinite(years) && years > 0 ? `${years} yrs experience` : null,
    english ? `${english} English` : null,
  ].filter(Boolean).join(' · ') || null;
}

/**
 * One position. The whole card is the target, so there is no hunting for a link.
 *
 * A draft continues where the work now happens — in the panel beside the list —
 * while everything else opens the drawer it always did. That is the only
 * difference between the two states on this card: same layout, same figures,
 * and the status pill the card has always drawn now reads Draft.
 */
function PositionCard({ position, onOpen, isRecent = false }) {
  const p = position;
  const isDraft = p.status === 'draft';

  return (
    <article
      role="button"
      tabIndex={0}
      onClick={() => onOpen(p)}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onOpen(p);
        }
      }}
      aria-label={`${p.title}. ${p.health.label}. ${p.stats.applied} applicants. ${p.insight}${isDraft ? '. Draft — not published yet.' : ''}`}
      className={cn(
        `group flex cursor-pointer flex-col rounded-xl border border-border bg-surface p-4 text-left shadow-xs
         transition-[border-color,box-shadow] duration-base ease-out
         hover:border-krow-blue/40 hover:shadow-md
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50`,
        /* Just saved: the same card, held a shade closer to the brand for two
           minutes. Border, ring and surface only — the layout does not move,
           and the entrance settles once rather than pulsing. */
        isRecent && 'border-krow-blue/50 bg-krow-blue-tint/40 ring-1 ring-krow-blue/20 motion-safe:animate-scale-in'
      )}
    >
      {/* Identity */}
      <div className="flex items-start gap-3">
        <RoleGlyph category={p.role_category} title={p.title} aiGenerated={p.ai_generated} />

        {/* Client above title: on a staffing console the company a role is being
            filled for is part of its identity, and it is read from the position
            record — a position with no client stated simply leads with its
            title, as it always did. */}
        <div className="min-w-0 flex-1">
          {p.company && (
            <p className="truncate text-[11px] font-semibold uppercase tracking-wide text-krow-blue">
              {p.company}
            </p>
          )}
          <h3 className="truncate font-heading text-body font-semibold leading-snug text-ink-1">
            {p.title}
          </h3>
          <p className="truncate text-caption text-ink-3">{p.role_category || 'Uncategorized'}</p>
        </div>

        {/* The position's own status, in the pill this card has always drawn.
            A draft says Draft here — nothing else is added, and nothing about
            this is on a timer. */}
        <StatusBadge status={p.status} size="sm" />
      </div>

      {/* Terms */}
      <dl className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-ink-3">
        <div className="flex min-w-0 items-center gap-1">
          <dt className="sr-only">Location</dt>
          <MapPin className="h-3 w-3 shrink-0 text-ink-4" aria-hidden="true" />
          <dd className="truncate">{p.location || 'Location not set'}</dd>
        </div>
        <div className="flex min-w-0 items-center gap-1">
          <dt className="sr-only">Pay</dt>
          <Wallet className="h-3 w-3 shrink-0 text-ink-4" aria-hidden="true" />
          <dd className="truncate">{payLabel(p)}</dd>
        </div>
      </dl>

      {/* One quiet line of candidate criteria — the two that help decide whether
          a role is worth opening. Everything else the position states belongs in
          the detail view; a card that lists requirements stops being scannable,
          which is the only thing a card is for. */}
      {candidateCriteria(p) && (
        <p className="mt-1.5 truncate text-[11px] text-ink-4">{candidateCriteria(p)}</p>
      )}

      <div className="my-3 h-px bg-border" />

      <Progression steps={p.progression} />

      <WorkforceRow workforce={p.workforce} />

      {/* Health, and the one thing worth knowing. `mb-3.5` rather than a margin on
          the footer, so the footer is free to take `mt-auto`. */}
      <div className="mb-3.5 mt-3.5 flex items-start gap-2">
        <HealthChip health={p.health} className="mt-px" />
        <p className="min-w-0 flex-1 text-caption leading-relaxed text-ink-2">{p.insight}</p>
      </div>

      {/* Footer */}
      {/* `mt-auto` pins the footer to the bottom of the card, so a grid row of
          cards with different insight lengths still has its footers aligned. */}
      <div className="mt-auto flex items-center justify-between border-t border-border pt-2.5">
        <span className="inline-flex items-center gap-1 text-[11px] font-medium text-ink-4">
          {p.ai_generated
            ? <><Sparkles className="h-3 w-3" aria-hidden="true" /> AI Built</>
            : 'Manual'}
        </span>
        {/* A draft is unfinished work, so the card says what happens next on it:
            it is continued in Owliver, not opened in a hiring drawer for a role
            nobody can apply to yet. */}
        <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-krow-blue">
          {isDraft ? 'Continue' : 'View position'}
          <ArrowRight className="h-3 w-3 transition-transform duration-base group-hover:translate-x-0.5" aria-hidden="true" />
        </span>
      </div>

      {/* The card's own extension point. A definition can target the list and
          the drawer separately, or both — `after-position-card` renders per
          card, with that card's position as context. Clicks inside a section
          are its own; they do not open the drawer behind it. */}
      <div
        onClick={(e) => e.stopPropagation()}
        onKeyDown={(e) => e.stopPropagation()}
        role="presentation"
      >
        <SkillSurface
          page="positions"
          placement="after-position-card"
          context={{ position: p }}
          className="mt-3"
        />
      </div>
    </article>
  );
}

/** The full record, over the grid rather than instead of it. */
function PositionDrawer({ position, onClose, onViewCandidates, onOpenPosition }) {
  if (!position) return null;
  const p = position;
  const s = p.stats;

  const earliest = p.applications.reduce(
    (oldest, a) => (!oldest || new Date(a.created_date) < new Date(oldest) ? a.created_date : oldest),
    null
  );
  const lastScored = p.applications
    .filter((a) => a.ai_score > 0)
    .map((a) => a.updated_date)
    .sort()
    .pop();
  const lastHired = p.applications
    .filter((a) => a.status === 'hired')
    .map((a) => a.updated_date)
    .sort()
    .pop();

  const timeline = [
    { label: 'Position created', date: p.created_date },
    s.applied && { label: `First of ${s.applied} applications`, date: earliest },
    s.screened && { label: `${s.screened} screened`, date: lastScored },
    s.hired && { label: `${s.hired} hired`, date: lastHired },
  ].filter(Boolean);

  return (
    <Drawer
      open={Boolean(p)}
      onOpenChange={(open) => !open && onClose()}
      /* Client → job title → terms. The company leads because it is who the
         hire is for; it never replaces the stored job title. */
      title={p.company ? (
        <span className="block">
          <span className="block text-[11px] font-semibold uppercase tracking-wide text-krow-blue">{p.company}</span>
          {p.title}
        </span>
      ) : p.title}
      description={roleMetaLine(p) || 'No terms set on this position yet'}
      size="xl"
      footer={
        <>
          <Button variant="outline" size="sm" onClick={onClose}>Close</Button>
          {/* The drawer holds the record; the page holds the record plus every
              applicant on it. This is the way through to the second. */}
          <Button variant="outline" size="sm" onClick={() => onOpenPosition(p)}>Open position</Button>
          <Button size="sm" onClick={() => onViewCandidates(p)}>
            View {s.applied} candidate{s.applied === 1 ? '' : 's'}
          </Button>
        </>
      }
    >
      <div className="space-y-5">
        {/* Overview */}
        <div className="flex items-start gap-3.5">
          <RoleGlyph category={p.role_category} title={p.title} size="lg" aiGenerated={p.ai_generated} />
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-1.5">
              <StatusBadge status={p.status} size="sm" />
              <HealthChip health={p.health} />
              <Badge variant="neutral" size="sm">{p.ai_generated ? 'AI Built' : 'Manual'}</Badge>
            </div>
            <p className="mt-2 text-caption leading-relaxed text-ink-3">
              {p.health.note} {p.insight}
            </p>
          </div>
        </div>

        {/* Extension points. A skill definition naming `positions` and one of
            these placements renders here — this drawer is what "View position"
            opens, so it is where a positions skill has to appear. The page
            knows no skill; the definition names the slot. */}
        <SkillSurface page="positions" placement="after-header" context={{ position: p }} />

        {/* The position as it was specified. Every field Create Position asks
            for is read back here — the three sections below mirror the three
            groups of that form, in the same order. */}
        <section>
          <SectionTitle title="Position details" />
          <PositionOverview position={p} className="mt-2" />
        </section>

        <SkillSurface page="positions" placement="after-position-summary" context={{ position: p }} />

        {/* Only what this role actually asks for. A position that states no
            requirements has no Requirements section — an empty heading is a
            demand nobody made. */}
        {hasRequirements(p) && (
          <section>
            <SectionTitle title="Requirements" />
            <PositionRequirements position={p} className="mt-2" />
          </section>
        )}

        {customRequirementsText(p) && (
          <section>
            <SectionTitle title="Custom requirements" />
            <PositionCustomRequirements position={p} className="mt-2" />
          </section>
        )}

        {/* Hiring progression — the single source of truth for the pipeline.
            A separate "Hiring status" block used to sit above this one repeating
            Shortlisted, Interviews and Hired as figures, which is exactly what the
            progression already draws. Two readings of the same funnel invite the
            reader to check whether they agree, so the duplicated stage counts are
            gone and the three figures the progression does *not* carry — supply,
            quality and the screening average — lead it as one line. */}
        <section>
          <SectionTitle title="Hiring progression" />

          <dl className="mb-3 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-body-sm">
            <div className="flex items-baseline gap-1.5">
              <dt className="sr-only">Total applicants</dt>
              <dd className="font-semibold tabular-nums text-ink-1">{s.applied}</dd>
              <span className="text-ink-3">Applicant{s.applied === 1 ? '' : 's'}</span>
            </div>
            <span className="text-ink-4" aria-hidden="true">·</span>
            <div className="flex items-baseline gap-1.5">
              <dt className="sr-only">Qualified, scoring 70 or above</dt>
              <dd className="font-semibold tabular-nums text-ink-1">{s.qualified}</dd>
              <span className="text-ink-3">Qualified (70+)</span>
            </div>
            <span className="text-ink-4" aria-hidden="true">·</span>
            <div className="flex items-baseline gap-1.5">
              <dt className="text-ink-3">Avg Score</dt>
              <dd className="font-semibold tabular-nums text-ink-1">{s.avgScore || '—'}</dd>
            </div>
            {/* Screening coverage was the one figure in the old block that the
                progression cannot show — a stage count says how many reached
                Screened, not what share of the intake that is. */}
            {s.applied > 0 && (
              <>
                <span className="text-ink-4" aria-hidden="true">·</span>
                <div className="flex items-baseline gap-1.5">
                  <dt className="sr-only">Screening coverage</dt>
                  <dd className="font-semibold tabular-nums text-ink-1">{s.coverage}%</dd>
                  <span className="text-ink-3">screened</span>
                </div>
              </>
            )}
          </dl>

          <Progression steps={p.progression} />
        </section>

        <SkillSurface page="positions" placement="before-candidates" context={{ position: p }} />

        {/* Two short lists side by side. The extra drawer width is spent on
            information density rather than on longer lines of the same stack. */}
        <div className="grid gap-5 lg:grid-cols-2">
        {/* Top candidates */}
        <section>
          <SectionTitle
            title="Top candidates"
            meta={p.topCandidates.length ? `${p.topCandidates.length} scored` : 'None scored'}
          />
          {p.topCandidates.length ? (
            <ul className="divide-y divide-border rounded-lg border border-border">
              {p.topCandidates.map((c) => (
                <li key={c.id} className="flex items-center gap-2.5 px-3 py-2.5">
                  <Avatar name={c.applicant_name} src={c.selfie_url} size="sm" />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-body-sm font-medium text-ink-1">{c.applicant_name}</p>
                    <p className="truncate text-[10px] text-ink-4">
                      {String(c.status).replace(/_/g, ' ')}
                      {c.ai_recommendation ? ` · ${c.ai_recommendation}` : ''}
                    </p>
                  </div>
                  <div className="shrink-0 text-right">
                    <p className="font-heading text-body font-bold tabular-nums text-ink-1">{c.ai_score}</p>
                    <p className="text-[10px] text-ink-4">KROW Score</p>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            /* Two short lines, not a paragraph. The reason nobody is ranked is
               always the same — screening has not run — so it needs stating once,
               plainly, rather than explained. */
            <div className="rounded-lg border border-dashed border-border px-3 py-4">
              <p className="text-body-sm font-medium text-ink-2">No screened candidates yet</p>
              <p className="mt-0.5 text-caption leading-relaxed text-ink-3">
                Candidates will appear here once screening is completed.
              </p>
            </div>
          )}
        </section>

        {/* The timeline sits beside Top candidates, so it earns a rail and nodes:
            two plain label/date lists side by side read as one table split in
            half. The dots say "this one is chronological" without a heavier
            treatment. */}
        <section>
          <SectionTitle title="Hiring timeline" />
          <ol className="space-y-0">
            {timeline.map((e, i) => (
              <li key={i} className="flex gap-2.5 pb-3 last:pb-0">
                <span className="flex flex-col items-center" aria-hidden="true">
                  <span
                    className={cn(
                      'mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full',
                      i === timeline.length - 1 ? 'bg-krow-blue' : 'bg-ink-4'
                    )}
                  />
                  {i < timeline.length - 1 && <span className="mt-1 w-px flex-1 bg-border" />}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block text-body-sm leading-snug text-ink-2">{e.label}</span>
                  <span className="block text-caption text-ink-4">
                    {e.date
                      ? new Date(e.date).toLocaleDateString(undefined, {
                          month: 'short', day: 'numeric', year: 'numeric',
                        })
                      : '—'}
                  </span>
                </span>
              </li>
            ))}
          </ol>
        </section>
        </div>

        <SkillSurface page="positions" placement="after-candidates" context={{ position: p }} />

        <section>
          <SectionTitle title="Recent activity" />
          {p.applications.length ? (
            <ol className="space-y-2">
              {[...p.applications]
                .sort((a, b) => new Date(b.updated_date).getTime() - new Date(a.updated_date).getTime())
                .slice(0, 5)
                .map((a) => (
                  <li key={a.id} className="flex items-baseline justify-between gap-3 text-body-sm">
                    <span className="min-w-0 truncate text-ink-2">
                      <span className="font-medium text-ink-1">{a.applicant_name}</span>
                      {' — '}
                      {a.ai_score > 0 ? `scored ${a.ai_score}` : 'applied, not yet screened'}
                    </span>
                    <span className="shrink-0 text-caption text-ink-4">
                      {new Date(a.updated_date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
                    </span>
                  </li>
                ))}
            </ol>
          ) : (
            <p className="text-body-sm text-ink-3">No activity on this position yet.</p>
          )}
        </section>

        <SkillSurface page="positions" placement="before-footer" context={{ position: p }} />
      </div>
    </Drawer>
  );
}

export default function AdminPositions() {
  const navigate = useNavigate();
  /* How this page starts a turn in the panel beside it — see `openPosition`. */
  const { ask } = useAssistantPanel();

  /* No create form on this page, in any form — no drawer, no modal, no route.
     Creating a position is a conversation with Owliver beside the list (see
     lib/skills/positionFlow.js); it writes through `useCreateJobPosting`, which
     invalidates the query this page reads, so a position created in the panel
     appears in the grid without this component knowing it happened. */
  const [searchParams] = useSearchParams();
  const { data: postings = [], isLoading } = useJobPostings();
  const { data: applications = [] } = useApplications();
  /* The workforce side of the record. Read alongside the pipeline, never in
     place of it — the two describe different things about the same position. */
  const { data: assignments = [] } = useAssignments();
  const { data: profiles = [] } = useWorkerProfiles();
  const { data: courses = [] } = useCourses();
  const { data: staff = [] } = useStaff();

  const [search, setSearch] = useState(searchParams.get('search') || '');
  const [status, setStatus] = useState(searchParams.get('status') || 'all');
  const [department, setDepartment] = useState('all');
  const [location, setLocation] = useState('all');
  const [sort, setSort] = useState('attention');
  const [selected, setSelected] = useState(null);
  const [view, setView] = useViewMode();

  /* Read off the postings, not the filtered rows: which positions were saved
     recently does not depend on what is currently on screen, so searching or
     sorting cannot shift the window. */
  const recentIds = useRecentlySavedIds(postings);

  /**
   * Continuing a draft, in the panel beside the list.
   *
   * It used to open `/admin/positions/new?draft=<id>`, which answered the wrong
   * question: the reader had not asked for the form back, they had asked to
   * finish the position — and the form is only where finishing it used to have
   * to happen. Owliver can generate the description, read and set the vetting
   * weights, and publish, all through the mutations the form calls, so the work
   * no longer needs the page it was written on.
   *
   * So the card asks Owliver instead, naming the record by id, and the URL stays
   * `/admin/positions`. The form is untouched and still reachable — someone who
   * opens `?draft=<id>` deliberately gets exactly what they always did.
   */
  const openPosition = (p) => (p.status === 'draft'
    ? ask(continueDraftRequest(p))
    : setSelected(p));

  /**
   * The position the reader has open, published for Owliver.
   *
   * The panel beside this page can read every collection already; what it
   * cannot know is which record is in front of you. Publishing the raw posting
   * — not the derived row — means a skill's declared source resolves against
   * the same record the drawer is showing, and reading a different position
   * changes the answer without either side knowing about the other.
   *
   * A position that has just been published counts as "in front of you" too: the
   * form leaves `?published=<id>` behind it, which is how the panel knows which
   * role to offer candidates for without this page telling it anything about
   * candidates. The drawer still wins while one is open.
   */
  const publishedId = searchParams.get('published');
  usePublishPageContext(useMemo(() => {
    const current = selected?.id || publishedId;
    if (!current) return null;
    return { position: postings.find((p) => p.id === current) || null };
  }, [selected, publishedId, postings]));

  /**
   * Derived once per position rather than per cell, so the grid does not run the
   * same filter five times per card.
   *
   * `buildPosition` owns the hiring pipeline — applied, screened, shortlisted,
   * interviewed, hired — exactly as it always has. `workforce` is attached
   * beside it, not merged into it: a position can have four applicants moving
   * through screening and no strong workforce match at the same time, and both
   * of those are true. Collapsing them would make one of the two a lie.
   */
  const workforceContext = useMemo(
    () => ({ profiles, applications, assignments, courses, staff }),
    [profiles, applications, assignments, courses, staff]
  );

  const rows = useMemo(
    () => postings.map((p) => ({
      ...buildPosition(p, applications),
      workforce: workforceStatusFor(p, workforceContext),
    })),
    [postings, applications, workforceContext]
  );

  const departments = useMemo(
    () => [...new Set(postings.map((p) => p.role_category).filter(Boolean))].sort(),
    [postings]
  );
  const locations = useMemo(
    () => [...new Set(postings.map((p) => p.location).filter(Boolean))].sort(),
    [postings]
  );

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    const ordered = rows
      .filter((p) => {
        if (q && !`${p.title} ${p.company || ''} ${p.role_category} ${p.location}`.toLowerCase().includes(q)) return false;
        if (status !== 'all' && p.status !== status) return false;
        if (department !== 'all' && p.role_category !== department) return false;
        if (location !== 'all' && p.location !== location) return false;
        return true;
      })
      .sort(SORTS[sort].compare);

    /**
     * The most recently created position leads.
     *
     * A position saved from the panel is the thing the reader was just doing,
     * and under "needs attention" a draft sorts to the bottom — it has no
     * applicants, so it reads as the least urgent row on the board. It is not:
     * it is unfinished work they just put down.
     *
     * Only in the default ordering. Someone who has explicitly chosen "Title
     * A–Z" or "Most applicants" asked for that order and gets it, and no
     * preference is written either way — this is one hoist over the sorted
     * list, not a change to how anything is stored.
     */
    if (sort !== 'attention' || ordered.length < 2) return ordered;

    const newest = ordered.reduce(
      (best, p) => (new Date(p.created_date) > new Date(best.created_date) ? p : best),
      ordered[0]
    );
    return [newest, ...ordered.filter((p) => p.id !== newest.id)];
  }, [rows, search, status, department, location, sort]);

  const isFiltered = Boolean(search) || [status, department, location].some((v) => v !== 'all');
  const clearFilters = () => {
    setSearch(''); setStatus('all'); setDepartment('all'); setLocation('all');
  };

  /* The page summary as a sentence rather than a KPI row: these are counts you
     read once for orientation, and four cards would outweigh the grid they
     introduce. */
  const summary = useMemo(() => {
    const open = rows.filter((p) => p.status === 'active').length;
    const sum = (key) => rows.reduce((total, p) => total + p.stats[key], 0);
    const applied = sum('applied');

    /* The pipeline sentence the page has always shown, unchanged. */
    const parts = [
      `${open} open position${open === 1 ? '' : 's'}`,
      `${applied} active candidate${applied === 1 ? '' : 's'}`,
      `${sum('shortlisted')} shortlisted`,
      `${sum('hired')} hired`,
    ];

    /* Workforce demand joins it only where positions actually declare one.
       Summing a schema default across every row would produce a total nobody
       could reconcile against the cards. */
    const declared = rows.filter((p) => p.status === 'active' && p.workforce.demand.declared);
    if (declared.length) {
      const required = declared.reduce((n, p) => n + p.workforce.demand.required, 0);
      const assignedTotal = declared.reduce((n, p) => n + p.workforce.demand.assigned, 0);
      parts.push(
        `${required} required`,
        `${assignedTotal} assigned`,
        `${Math.max(0, required - assignedTotal)} remaining`
      );
    }

    const newToday = rows.reduce((n, p) => n + p.workforce.newToday.length, 0);
    if (newToday) parts.push(`${newToday} new today`);

    return parts.join(' · ');
  }, [rows]);

  return (
    <AdminPage
      title="Positions"
      subtitle="Manage open roles, hiring demand and position performance."
    >
      {/* Controls toolbar — unified flex row with clean alignment across viewports */}
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
          <div className="w-full sm:w-60 md:w-64 xl:w-72 shrink-0">
            <SearchInput
              value={search}
              onChange={setSearch}
              placeholder="Search positions"
              size="sm"
              shape="pill"
              className="bg-white border-border/80 hover:border-border transition-colors"
            />
          </div>

          <div className="flex flex-wrap items-center gap-2 min-w-0">
            <FilterSelect value={status} onChange={setStatus} label="Status" options={[
              { value: 'all', label: 'All' }, { value: 'active', label: 'Hiring' },
              { value: 'paused', label: 'Paused' }, { value: 'draft', label: 'Draft' },
              { value: 'closed', label: 'Closed' },
            ]} />
            <FilterSelect value={department} onChange={setDepartment} label="Department"
              options={[{ value: 'all', label: 'All departments' }, ...departments.map((d) => ({ value: d, label: d }))]} />
            <FilterSelect value={location} onChange={setLocation} label="Location"
              options={[{ value: 'all', label: 'All locations' }, ...locations.map((l) => ({ value: l, label: l }))]} />
            <FilterSelect value={sort} onChange={setSort} label="Sort"
              options={Object.entries(SORTS).map(([value, s]) => ({ value, label: s.label }))} />
          </div>
        </div>

        {/* View mode presentation toggle on far right */}
        <div className="shrink-0 self-end lg:self-center">
          <SegmentedToggle
            variant="surface"
            ariaLabel="View mode"
            value={view}
            onChange={setView}
            options={[
              { value: 'grid', icon: LayoutGrid, ariaLabel: 'Grid view' },
              { value: 'list', icon: List, ariaLabel: 'List view' },
            ]}
          />
        </div>
      </div>

      <p className="text-body-sm text-ink-3 font-normal mt-1 mb-4 flex items-center gap-1.5 flex-wrap">
        {isFiltered ? `${filtered.length} of ${rows.length} positions · filtered` : summary}
      </p>

      {/* The list's own extension points. These render once for the page — no
          position in context — which is what a definition reporting across
          every role needs. The per-card and per-drawer placements are separate
          slots, so one skill can address the board and another one role. */}
      <SkillSurface page="positions" placement="after-position-list-summary" className="mb-4" />

      {/* Three columns on desktop, two on tablet, one on mobile. */}
      {isLoading ? (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-64 rounded-xl" />
          ))}
        </div>
      ) : filtered.length ? (
        /* One filtered array, two drawings of it. */
        view === 'grid' ? (
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            {filtered.map((p) => (
              <PositionCard
                key={p.id}
                position={p}
                onOpen={openPosition}
                isRecent={recentIds.has(p.id)}
              />
            ))}
          </div>
        ) : (
          <PositionsTable rows={filtered} onOpen={openPosition} />
        )
      ) : (
        <EmptyState
          title={isFiltered ? 'No positions match these filters' : 'No positions yet'}
          description={
            isFiltered
              ? 'Try a broader search, or clear the filters to see every role.'
              : 'Ask Owliver to create a position and applications will start appearing here.'
          }
          action={
            isFiltered
              ? <Button variant="outline" size="sm" onClick={clearFilters}>Clear filters</Button>
              : undefined
          }
        />
      )}

      <SkillSurface page="positions" placement="after-position-list" className="mt-6" />

      <PositionDrawer
        position={selected}
        onClose={() => setSelected(null)}
        onOpenPosition={(p) => navigate(`/admin/positions/${p.id}`)}
        onViewCandidates={(p) => {
          setSelected(null);
          if (p.stats.applied) navigate(`/admin/candidates?search=${encodeURIComponent(p.title)}`);
          else toast.info(`${p.title} has no applicants yet`);
        }}
      />
    </AdminPage>
  );
}

/** A compact labelled select pill — consistent on every Admin management page. */
/** @param {any} props */
export function FilterSelect({ value, onChange, label, options, className = '' }) {
  return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger
        aria-label={label}
        className={cn(
          'h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20',
          className
        )}
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
      </SelectContent>
    </Select>
  );
}