Accounts Table

"use client";

import {
  useId,
  useMemo,
  useState,
  type ComponentType,
  type ReactNode,
} from "react";
import Image from "next/image";
import { AnimatePresence, motion, type Transition } from "motion/react";
import {
  CurrencyDollar,
  FunnelSimple,
  Globe,
  MagnifyingGlass,
  Plus,
  SlidersHorizontal,
  SquaresFour,
  X,
  CalendarBlank,
  FolderSimple,
} from "@phosphor-icons/react";

/* ═══════════════════════════════════════════════
   Utility
   ═══════════════════════════════════════════════ */

function cn(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(" ");
}

const EASE_OUT = [0.23, 1, 0.32, 1] as const;
const LAYOUT_TRANSITION: Transition = {
  type: "spring",
  stiffness: 420,
  damping: 36,
};

/* ═══════════════════════════════════════════════
   Domain Types
   ═══════════════════════════════════════════════ */

type MarketSegment =
  | "SaaS"
  | "AI"
  | "Security"
  | "Data Tech"
  | "Legal Tech"
  | "Financial Services"
  | "Hard + Software";

interface ContractValue {
  period: "Month" | "Year";
  amount: number;
}

interface Account {
  id: string;
  name: string;
  logo: string;
  domain: string;
  contractValue?: ContractValue;
  renewalDate?: string;
  lastInteraction: string;
  segments: MarketSegment[];
  contact?: string;
}

type SortKey = "name" | "domain" | "contractValue" | "renewalDate";
type SortDirection = "asc" | "desc";

interface SortConfig {
  key: SortKey;
  direction: SortDirection;
}

/* ═══════════════════════════════════════════════
   Seed Data
   ═══════════════════════════════════════════════ */

const LOGO = (slug: string) => `/logos/accounts-table/${slug}.svg`;

const ACCOUNTS: readonly Account[] = [
  {
    id: "adobe",
    name: "Adobe",
    logo: LOGO("adobe"),
    domain: "adobe.com",
    contractValue: { period: "Month", amount: 0 },
    lastInteraction: "Aug 22",
    segments: ["SaaS", "AI"],
    contact: "Marcus Chen",
  },
  {
    id: "brex",
    name: "Brex",
    logo: LOGO("brex"),
    domain: "brex.com",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Financial Services"],
    contact: "Sofia Rodriguez",
  },
  {
    id: "datadog",
    name: "Datadog",
    logo: LOGO("datadog"),
    domain: "datadog.com",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "AI", "Security", "Data Tech"],
    contact: "James Nakamura",
  },
  {
    id: "docusign",
    name: "DocuSign",
    logo: LOGO("docusign"),
    domain: "docusign.com",
    renewalDate: "2025-09-23",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Legal Tech"],
    contact: "Emma Zhu",
  },
  {
    id: "microsoft",
    name: "Microsoft",
    logo: LOGO("microsoft"),
    domain: "microsoft.com",
    contractValue: { period: "Year", amount: 25000 },
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Security", "Data Tech"],
    contact: "Raj Patel",
  },
  {
    id: "ramp",
    name: "Ramp",
    logo: LOGO("ramp"),
    domain: "ramp.com",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Financial Services"],
  },
  {
    id: "rippling",
    name: "Rippling",
    logo: LOGO("rippling"),
    domain: "rippling.com",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Financial Services"],
    contact: "Claire Dubois",
  },
  {
    id: "salesforce",
    name: "Salesforce",
    logo: LOGO("salesforce"),
    domain: "salesforce.com",
    renewalDate: "2025-09-23",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "AI"],
  },
  {
    id: "stripe",
    name: "Stripe",
    logo: LOGO("stripe"),
    domain: "stripe.com",
    renewalDate: "2025-09-23",
    lastInteraction: "Aug 22",
    segments: ["SaaS", "Financial Services"],
  },
  {
    id: "workday",
    name: "Workday",
    logo: LOGO("workday"),
    domain: "workday.com",
    contractValue: { period: "Year", amount: 1000000 },
    lastInteraction: "Aug 22",
    segments: ["SaaS", "AI"],
    contact: "Gino Emannuel",
  },
  {
    id: "zoom",
    name: "Zoom",
    logo: LOGO("zoom"),
    domain: "zoom.us",
    lastInteraction: "Aug 22",
    segments: ["SaaS"],
  },
  {
    id: "berryai",
    name: "Berryai",
    logo: LOGO("berryai"),
    domain: "berryai.com",
    lastInteraction: "Aug 22",
    segments: ["Hard + Software", "SaaS"],
  },
];

/* ═══════════════════════════════════════════════
   Visual Tokens
   ═══════════════════════════════════════════════ */

const SEGMENT_STYLES: Record<
  MarketSegment,
  { bg: string; text: string; border: string; dot: string }
> = {
  SaaS: {
    bg: "bg-violet-50",
    text: "text-violet-700",
    border: "border-violet-200/70",
    dot: "bg-violet-500",
  },
  AI: {
    bg: "bg-rose-50",
    text: "text-rose-700",
    border: "border-rose-200/70",
    dot: "bg-rose-500",
  },
  Security: {
    bg: "bg-emerald-50",
    text: "text-emerald-700",
    border: "border-emerald-200/70",
    dot: "bg-emerald-500",
  },
  "Data Tech": {
    bg: "bg-red-50",
    text: "text-red-700",
    border: "border-red-200/70",
    dot: "bg-red-500",
  },
  "Legal Tech": {
    bg: "bg-orange-50",
    text: "text-orange-700",
    border: "border-orange-200/70",
    dot: "bg-orange-500",
  },
  "Financial Services": {
    bg: "bg-pink-50",
    text: "text-pink-700",
    border: "border-pink-200/70",
    dot: "bg-pink-500",
  },
  "Hard + Software": {
    bg: "bg-amber-50",
    text: "text-amber-700",
    border: "border-amber-200/70",
    dot: "bg-amber-500",
  },
};

const ALL_SEGMENTS: readonly MarketSegment[] = [
  "SaaS",
  "AI",
  "Security",
  "Data Tech",
  "Legal Tech",
  "Financial Services",
  "Hard + Software",
];

/* ═══════════════════════════════════════════════
   Helpers
   ═══════════════════════════════════════════════ */

function formatCurrency({ period, amount }: ContractValue) {
  if (amount === 0) return `${period} | $0`;
  if (amount >= 1_000_000) return `${period} | $${amount / 1_000_000}M`;
  if (amount >= 1_000) return `${period} | $${amount / 1_000}k`;
  return `${period} | $${amount}`;
}

function sortAccounts(
  list: readonly Account[],
  config: SortConfig | null,
): Account[] {
  if (!config) return [...list];
  const sign = config.direction === "asc" ? 1 : -1;
  return [...list].sort((a, b) => {
    switch (config.key) {
      case "name":
        return a.name.localeCompare(b.name) * sign;
      case "domain":
        return a.domain.localeCompare(b.domain) * sign;
      case "contractValue": {
        const av = a.contractValue?.amount ?? -1;
        const bv = b.contractValue?.amount ?? -1;
        return (av - bv) * sign;
      }
      case "renewalDate": {
        const av = a.renewalDate ?? "";
        const bv = b.renewalDate ?? "";
        if (!av && bv) return 1;
        if (av && !bv) return -1;
        return av.localeCompare(bv) * sign;
      }
    }
  });
}

function filterAccounts(
  list: readonly Account[],
  query: string,
  segments: ReadonlySet<MarketSegment>,
): Account[] {
  const q = query.trim().toLowerCase();
  const required = [...segments];
  return list.filter((account) => {
    if (q && !account.name.toLowerCase().includes(q)) return false;
    if (required.length === 0) return true;
    return required.every((s) => account.segments.includes(s));
  });
}

/* ═══════════════════════════════════════════════
   Atoms
   ═══════════════════════════════════════════════ */

const TOOLBAR_LIGHT_BUTTON =
  "inline-flex h-7 items-center gap-1.5 rounded-md bg-gradient-to-b from-white to-zinc-100 px-2.5 text-[12px] font-semibold text-zinc-900 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.9),inset_0_-0.5px_0.6px_rgba(0,0,0,0.06),0_1.5px_3px_-0.5px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.08)] transition-[filter,transform] duration-150 hover:brightness-[0.97] active:scale-[0.97]";

function HeaderBar({ onAdd }: { onAdd: () => void }) {
  return (
    <div className={cn("flex items-center gap-2 p-2", SURFACE_GRAY)}>
      <div className="flex h-10 shrink-0 items-center gap-2 rounded-lg bg-zinc-950 pl-3 pr-1.5 ring-1 ring-black/5">
        <span className="text-[14px] font-semibold tracking-[-0.005em] text-white">
          Accounts
        </span>
        <button
          type="button"
          className="inline-flex h-7 items-center gap-1.5 rounded-md bg-stone-700 px-2 text-[12px] font-semibold text-zinc-300 shadow-[inset_0_0.5px_0.5px_rgba(255,255,255,0.14),inset_0_-0.5px_0.6px_rgba(0,0,0,0.35),0_1.5px_3px_-0.5px_rgba(0,0,0,0.4),0_0_0_1px_rgba(255,255,255,0.1)] transition-[background-color,transform] duration-150 hover:bg-stone-600 active:scale-[0.97]"
        >
          <FolderSimple size={12} weight="duotone" className="text-zinc-400" />
          B2B SaaS Accounts
        </button>
      </div>

      <div className="flex h-10 flex-1 items-center justify-end gap-1.5 rounded-lg bg-zinc-950 pl-3 pr-1.5 ring-1 ring-black/5">
        <button type="button" onClick={onAdd} className={TOOLBAR_LIGHT_BUTTON}>
          Add
          <Plus size={11} weight="bold" className="text-zinc-500" />
        </button>
        <button type="button" className={TOOLBAR_LIGHT_BUTTON}>
          View
          <SlidersHorizontal size={11} weight="bold" className="text-zinc-500" />
        </button>
      </div>
    </div>
  );
}

interface FilterChip {
  label: string;
  icon?: ComponentType<{ size?: number; weight?: "duotone" | "bold" | "regular" }>;
  active?: boolean;
  removable?: boolean;
  onToggle?: () => void;
  onRemove?: () => void;
}

function FilterChipButton({ chip }: { chip: FilterChip }) {
  const Icon = chip.icon;
  const colorClass = chip.active
    ? "border-violet-300/80 bg-violet-50 text-violet-700 hover:border-violet-400 hover:bg-violet-100"
    : "border-zinc-200 bg-white text-zinc-600 hover:border-zinc-300 hover:text-zinc-900";

  if (!chip.removable) {
    return (
      <button
        type="button"
        onClick={chip.onToggle}
        className={cn(
          "inline-flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-[13px] font-semibold transition-colors duration-150 active:scale-[0.97]",
          colorClass,
        )}
      >
        {Icon ? <Icon size={13} weight="duotone" /> : null}
        {chip.label}
      </button>
    );
  }

  return (
    <span
      className={cn(
        "inline-flex h-8 items-center rounded-lg border text-[13px] font-semibold transition-colors duration-150",
        colorClass,
      )}
    >
      <button
        type="button"
        onClick={chip.onToggle}
        className="inline-flex items-center gap-1.5 self-stretch pl-2.5 pr-1 active:scale-[0.97]"
      >
        {Icon ? <Icon size={13} weight="duotone" /> : null}
        {chip.label}
      </button>
      <button
        type="button"
        onClick={chip.onRemove}
        aria-label={`Remove ${chip.label} filter`}
        className="mr-1 inline-flex size-4 items-center justify-center rounded text-current/70 transition-colors hover:bg-violet-200/70 hover:text-violet-800"
      >
        <X size={10} weight="bold" />
      </button>
    </span>
  );
}

interface FilterBarProps {
  query: string;
  onQueryChange: (value: string) => void;
  activeSegments: ReadonlySet<MarketSegment>;
  onToggleSegment: (segment: MarketSegment) => void;
  onClearSegment: (segment: MarketSegment) => void;
}

function MarketSegmentFilter({
  activeSegments,
  onToggleSegment,
  onClearSegment,
}: {
  activeSegments: ReadonlySet<MarketSegment>;
  onToggleSegment: (segment: MarketSegment) => void;
  onClearSegment: (segment: MarketSegment) => void;
}) {
  const [open, setOpen] = useState(false);
  const hasSelections = activeSegments.size > 0;

  return (
    <div className="relative">
      <div
        className={cn(
          "inline-flex h-8 items-stretch overflow-hidden rounded-lg border bg-white transition-colors",
          hasSelections ? "border-zinc-300" : "border-zinc-200",
        )}
      >
        <button
          type="button"
          onClick={() => setOpen((prev) => !prev)}
          className="inline-flex items-center gap-1.5 px-2.5 text-[13px] font-semibold text-zinc-600 transition-colors hover:text-zinc-900 active:scale-[0.97]"
        >
          <SquaresFour size={13} weight="duotone" />
          Market Segments
        </button>

        {hasSelections ? (
          <>
            <span aria-hidden className="my-1.5 w-px bg-zinc-200" />
            <div className="flex items-center gap-1 pl-1.5 pr-1">
              <AnimatePresence mode="popLayout">
                {[...activeSegments].map((segment) => (
                  <motion.span
                    key={segment}
                    layout
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    transition={{ duration: 0.18, ease: EASE_OUT }}
                    className="inline-flex items-center gap-0.5 rounded border border-violet-200/80 bg-violet-50 py-0.5 pl-1.5 pr-0.5 text-[12px] font-semibold text-violet-700"
                  >
                    {segment}
                    <button
                      type="button"
                      onClick={(event) => {
                        event.stopPropagation();
                        onClearSegment(segment);
                      }}
                      aria-label={`Remove ${segment} filter`}
                      className="ml-0.5 inline-flex size-4 items-center justify-center rounded text-violet-500/80 transition-colors hover:bg-violet-100 hover:text-violet-800"
                    >
                      <X size={10} weight="bold" />
                    </button>
                  </motion.span>
                ))}
              </AnimatePresence>
            </div>
          </>
        ) : null}
      </div>

      <AnimatePresence>
        {open ? (
          <motion.div
            key="segment-menu"
            initial={{ opacity: 0, y: -4, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -4, scale: 0.98 }}
            transition={{ duration: 0.18, ease: EASE_OUT }}
            className="absolute left-0 top-[calc(100%+6px)] z-20 w-[220px] origin-top-left rounded-lg border border-zinc-200 bg-white p-1 shadow-lg shadow-zinc-900/5"
          >
            {ALL_SEGMENTS.map((segment) => {
              const active = activeSegments.has(segment);
              const style = SEGMENT_STYLES[segment];
              return (
                <button
                  key={segment}
                  type="button"
                  onClick={() => onToggleSegment(segment)}
                  className={cn(
                    "flex w-full items-center justify-between rounded px-2 py-1.5 text-left text-[13px] transition-colors",
                    active
                      ? "bg-zinc-50 text-zinc-900"
                      : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
                  )}
                >
                  <span className="flex items-center gap-2">
                    <span className={cn("size-1.5 rounded-full", style.dot)} />
                    {segment}
                  </span>
                  {active ? (
                    <span className="text-[11px] font-semibold text-violet-600">
                      ON
                    </span>
                  ) : null}
                </button>
              );
            })}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

function FilterBar({
  query,
  onQueryChange,
  activeSegments,
  onToggleSegment,
  onClearSegment,
}: FilterBarProps) {
  const searchId = useId();

  return (
    <div
      className={cn(
        "flex flex-wrap items-center justify-between gap-2.5 border-b border-zinc-200/70 px-2 py-2.5",
        SURFACE_GRAY,
      )}
    >
      <label
        htmlFor={searchId}
        className="group relative inline-flex h-8 min-w-0 flex-1 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-2.5 transition-colors focus-within:border-zinc-400 sm:max-w-[320px]"
      >
        <MagnifyingGlass
          size={14}
          weight="duotone"
          className="shrink-0 text-zinc-400"
        />
        <input
          id={searchId}
          type="text"
          value={query}
          onChange={(event) => onQueryChange(event.target.value)}
          placeholder="Filter Accounts By Name..."
          className="w-full min-w-0 bg-transparent text-[13px] font-medium text-zinc-800 placeholder:font-medium placeholder:text-zinc-400 focus:outline-none"
        />
      </label>

      <div className="flex flex-wrap items-center gap-2">
        <MarketSegmentFilter
          activeSegments={activeSegments}
          onToggleSegment={onToggleSegment}
          onClearSegment={onClearSegment}
        />

        {(["Stage", "Tier", "Health Pulse", "Account Owner"] as const).map(
          (label) => (
            <FilterChipButton key={label} chip={{ label }} />
          ),
        )}
        <FilterChipButton chip={{ label: "Filter", icon: FunnelSimple }} />
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Column Config + Header Row
   ═══════════════════════════════════════════════ */

interface ColumnConfig {
  key?: SortKey;
  label: string;
  width: string;
  align?: "left" | "right";
}

const COLUMNS: readonly ColumnConfig[] = [
  { key: "name", label: "Account", width: "200px" },
  { key: "domain", label: "Domain", width: "170px" },
  { key: "contractValue", label: "Contract Value", width: "160px" },
  { key: "renewalDate", label: "Renewal Date", width: "150px" },
  { label: "Last Interaction", width: "150px" },
  { label: "Market Segments", width: "240px" },
  { label: "Contact", width: "170px" },
];

// Static class for Tailwind JIT — must stay in sync with COLUMNS widths.
const ROW_CLASS =
  "grid min-w-[1240px] grid-cols-[200px_170px_160px_150px_150px_240px_170px]";

const STICKY_FIRST_CLASS = "sticky left-0";
const SURFACE_GRAY = "bg-[#f4f5f7]";

// Must match the first slot of ROW_CLASS — unified shadow strip uses this.
const ACCOUNT_COL_WIDTH = 200;

const FONT_STACK =
  '"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';

function TableHeaderRow({
  sort,
  onSort,
}: {
  sort: SortConfig | null;
  onSort: (key: SortKey) => void;
}) {
  return (
    <div
      role="row"
      className={cn(
        ROW_CLASS,
        "sticky top-0 z-10 border-b border-zinc-200/70",
        SURFACE_GRAY,
      )}
    >
      {COLUMNS.map((column, index) => {
        const sortKey = column.key;
        const isActive = sortKey !== undefined && sort?.key === sortKey;
        const arrow = isActive ? (sort!.direction === "asc" ? "↑" : "↓") : null;
        const isFirst = index === 0;
        return (
          <button
            key={column.label}
            type="button"
            disabled={sortKey === undefined}
            onClick={sortKey ? () => onSort(sortKey) : undefined}
            role="columnheader"
            aria-sort={
              isActive
                ? sort!.direction === "asc"
                  ? "ascending"
                  : "descending"
                : "none"
            }
            className={cn(
              "flex h-10 items-center gap-1 border-r border-zinc-200/60 px-3 text-left text-[13px] font-medium text-zinc-500 transition-colors",
              sortKey
                ? "cursor-pointer hover:text-zinc-900"
                : "cursor-default",
              isActive && "text-zinc-900",
              isFirst && cn(STICKY_FIRST_CLASS, "z-[2] bg-white"),
            )}
          >
            {column.label}
            {sortKey ? (
              <span className="text-[11px] text-zinc-400">{arrow ?? "⇅"}</span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Cells
   ═══════════════════════════════════════════════ */

function Cell({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      role="cell"
      className={cn(
        "flex items-center border-r border-zinc-200/60 px-3 py-3 text-[14px]",
        className,
      )}
    >
      {children}
    </div>
  );
}

function AccountCell({
  account,
  selected,
}: {
  account: Account;
  selected: boolean;
}) {
  return (
    <div
      role="cell"
      className={cn(
        "relative flex items-center gap-2.5 border-r border-zinc-200/60 px-3 py-3 text-[14px] transition-colors",
        STICKY_FIRST_CLASS,
        "z-[1]",
        // Opaque white — sticky cell must never be translucent
        "bg-white group-hover:bg-[#fafbfc]",
      )}
    >
      {selected ? (
        <motion.span
          layoutId="selected-indicator"
          className="absolute inset-y-0 left-0 w-[3px] rounded-r-sm bg-blue-500"
          transition={LAYOUT_TRANSITION}
        />
      ) : null}
      <span className="relative inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white ring-1 ring-zinc-200/80">
        <Image
          src={account.logo}
          alt={`${account.name} logo`}
          width={20}
          height={20}
          className="size-5 object-contain"
        />
      </span>
      <span className="truncate font-semibold text-zinc-900">
        {account.name}
      </span>
    </div>
  );
}

function DomainCell({ domain }: { domain: string }) {
  return (
    <Cell className="gap-1.5 font-medium text-sky-600">
      <Globe size={14} weight="duotone" className="shrink-0" />
      <span className="truncate">{domain}</span>
    </Cell>
  );
}

function ContractValueCell({ value }: { value?: ContractValue }) {
  if (!value) return <Cell>{null}</Cell>;
  return (
    <Cell>
      <span className="inline-flex items-center gap-1 rounded-md border border-orange-200/70 bg-orange-50 px-2 py-1 text-[12px] font-semibold text-orange-700">
        <CurrencyDollar size={11} weight="bold" />
        {formatCurrency(value)}
      </span>
    </Cell>
  );
}

function DateCell({ value }: { value?: string }) {
  if (!value) return <Cell>{null}</Cell>;
  return (
    <Cell>
      <span className="inline-flex items-center gap-1.5 rounded-md bg-zinc-50 px-2 py-1 text-[12px] font-medium text-zinc-600 ring-1 ring-zinc-200/70">
        <CalendarBlank size={12} weight="duotone" className="text-zinc-400" />
        {value}
      </span>
    </Cell>
  );
}

function SegmentsCell({ segments }: { segments: MarketSegment[] }) {
  return (
    <Cell className="min-w-0 gap-1 overflow-hidden">
      <div className="flex min-w-0 gap-1">
        {segments.map((segment) => {
          const style = SEGMENT_STYLES[segment];
          return (
            <span
              key={segment}
              className={cn(
                "inline-flex shrink-0 items-center rounded-md border px-1.5 py-0.5 text-[12px] font-semibold",
                style.bg,
                style.text,
                style.border,
              )}
            >
              {segment}
            </span>
          );
        })}
      </div>
    </Cell>
  );
}

function ContactCell({ name }: { name?: string }) {
  if (!name) return <Cell>{null}</Cell>;
  return (
    <Cell className="gap-2 font-medium text-zinc-600">
      <span
        aria-hidden
        className="inline-flex size-5 shrink-0 rounded-full bg-zinc-100 ring-1 ring-zinc-200/80"
      />
      <span className="truncate">{name}</span>
    </Cell>
  );
}

/* ═══════════════════════════════════════════════
   Row
   ═══════════════════════════════════════════════ */

interface AccountRowProps {
  account: Account;
  selected: boolean;
  onSelect: (id: string) => void;
}

function AccountRow({ account, selected, onSelect }: AccountRowProps) {
  // Row background drives the non-sticky (gray) cells. Sticky cell keeps its
  // own white bg so it never reveals scrolled cells through transparency.
  // Static Tailwind literals required for JIT scanning.
  const rowBgClass = selected
    ? "bg-[#e6edfa] group-hover:bg-[#dde6f6]"
    : "bg-[#f4f5f7] group-hover:bg-[#edeef2]";

  return (
    <motion.div
      layout="position"
      transition={LAYOUT_TRANSITION}
      initial={{ opacity: 0, y: -6 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 6 }}
      role="row"
      aria-selected={selected}
      onClick={() => onSelect(account.id)}
      className={cn(
        ROW_CLASS,
        "group relative cursor-pointer border-b border-zinc-200/50 text-zinc-700 transition-colors",
        rowBgClass,
      )}
    >
      <AccountCell account={account} selected={selected} />
      <DomainCell domain={account.domain} />
      <ContractValueCell value={account.contractValue} />
      <DateCell value={account.renewalDate} />
      <DateCell value={account.lastInteraction} />
      <SegmentsCell segments={account.segments} />
      <ContactCell name={account.contact} />
    </motion.div>
  );
}

/* ═══════════════════════════════════════════════
   Main Demo
   ═══════════════════════════════════════════════ */

/**
 * B2B SaaS accounts data grid with filter chips, sortable columns,
 * row selection, live search, and motion layout transitions.
 */
export default function AccountsTable() {
  const [query, setQuery] = useState("");
  const [activeSegments, setActiveSegments] = useState<Set<MarketSegment>>(
    () => new Set(["SaaS"]),
  );
  const [sort, setSort] = useState<SortConfig | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>("microsoft");

  const visibleAccounts = useMemo(() => {
    const filtered = filterAccounts(ACCOUNTS, query, activeSegments);
    return sortAccounts(filtered, sort);
  }, [query, activeSegments, sort]);

  const handleSort = (key: SortKey) => {
    setSort((current) => {
      if (!current || current.key !== key) return { key, direction: "asc" };
      if (current.direction === "asc") return { key, direction: "desc" };
      return null;
    });
  };

  const handleToggleSegment = (segment: MarketSegment) => {
    setActiveSegments((prev) => {
      const next = new Set(prev);
      if (next.has(segment)) next.delete(segment);
      else next.add(segment);
      return next;
    });
  };

  const handleClearSegment = (segment: MarketSegment) => {
    setActiveSegments((prev) => {
      const next = new Set(prev);
      next.delete(segment);
      return next;
    });
  };

  return (
    <div
      className="flex min-h-dvh w-full items-center justify-center p-6"
      style={{
        background:
          "linear-gradient(135deg, #eef1f6 0%, #e6ebf3 50%, #dfe5ef 100%)",
        fontFamily: FONT_STACK,
      }}
    >
      <link
        rel="preconnect"
        href="https://fonts.googleapis.com"
      />
      <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossOrigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
      />
      <div
        className={cn(
          "w-full max-w-[1240px] overflow-hidden rounded-2xl shadow-[0_24px_64px_-24px_rgba(15,23,42,0.22),0_4px_16px_-4px_rgba(15,23,42,0.08)] ring-1 ring-zinc-300/60",
          SURFACE_GRAY,
        )}
      >
        <HeaderBar onAdd={() => undefined} />
        <FilterBar
          query={query}
          onQueryChange={setQuery}
          activeSegments={activeSegments}
          onToggleSegment={handleToggleSegment}
          onClearSegment={handleClearSegment}
        />

        <div className="relative">
          {/* Shadow strip sits OUTSIDE the scroll container so it stays still
              during horizontal scroll and never breaks between rows like a
              per-cell shadow would. */}
          <div
            aria-hidden
            className="pointer-events-none absolute top-0 bottom-0 z-[3] w-3 bg-gradient-to-r from-zinc-950/[0.08] via-zinc-950/[0.025] to-transparent"
            style={{ left: `${ACCOUNT_COL_WIDTH}px` }}
          />

          <div
            role="table"
            aria-label="B2B SaaS accounts"
            className="overflow-x-auto"
          >
            <TableHeaderRow sort={sort} onSort={handleSort} />
            <div role="rowgroup">
              <AnimatePresence initial={false}>
                {visibleAccounts.map((account) => (
                  <AccountRow
                    key={account.id}
                    account={account}
                    selected={selectedId === account.id}
                    onSelect={(id) =>
                      setSelectedId((prev) => (prev === id ? null : id))
                    }
                  />
                ))}
              </AnimatePresence>
              {visibleAccounts.length === 0 ? (
                <div
                  className={cn(
                    "flex min-w-[1150px] items-center justify-center px-6 py-12 text-[13px] text-zinc-400",
                    SURFACE_GRAY,
                  )}
                >
                  No accounts match the current filters.
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}