/* eslint-disable */
// Staffing Partner v2 — Soft / refined aesthetic
// Re-skinned primitives + shell. Same data + behavior, lighter visual key.
//   - 1px hairline borders (var(--border-2))
//   - soft elevation instead of hard offset shadows
//   - purple as primary action accent
//   - white surfaces on a #FAFAFA-ish page

(function () {
const { Icon, Avatar } = window;
const { useState } = React;

// ---------------------------------------------------------------------
// Tokens used across v2
// ---------------------------------------------------------------------
const V2 = {
  page:        "#FAFAFA",
  surface:     "var(--neutral-10)",
  surfaceAlt:  "#F4F3FB",        // very light purple wash
  hairline:    "#E6E6E6",
  hairlineSoft:"#EFEFEF",
  text:        "var(--neutral-100)",
  textMuted:   "var(--neutral-70)",
  textDim:     "var(--neutral-60)",
  primary:     "var(--purple-60)",
  primarySoft: "#EEEBFB",        // ~purple-20 lightened
  primaryRing: "rgba(73,62,216,0.16)",
  shadowCard:  "0 1px 2px rgba(20,20,20,0.04), 0 1px 3px rgba(20,20,20,0.05)",
  shadowLift:  "0 2px 4px rgba(20,20,20,0.04), 0 6px 16px rgba(20,20,20,0.06)",
  radius:      12,
  radiusSm:    8,
};

// ---------------------------------------------------------------------
// Soft Card
// ---------------------------------------------------------------------
function V2Card({ children, padding = 24, style = {}, onClick, hoverable }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: V2.surface,
        border: `1px solid ${V2.hairline}`,
        borderRadius: V2.radius,
        boxShadow: hoverable && hover ? V2.shadowLift : V2.shadowCard,
        padding,
        transition: "box-shadow 120ms ease, transform 120ms ease",
        cursor: onClick ? "pointer" : "default",
        fontFamily: "var(--font-body)",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// ---------------------------------------------------------------------
// Soft Button — rounded, low elevation, purple primary
// ---------------------------------------------------------------------
const V2_BTN_SIZE = {
  xl: { padding: "12px 22px", fontSize: 15, radius: 10, iconSize: 18 },
  lg: { padding: "10px 18px", fontSize: 14, radius: 10, iconSize: 16 },
  md: { padding: "8px 14px",  fontSize: 13, radius: 8,  iconSize: 14 },
  sm: { padding: "5px 10px",  fontSize: 12, radius: 8,  iconSize: 12 },
};
function V2Button({
  children, variant = "primary", size = "md",
  iconStart, iconEnd, isDisabled, onClick, fullWidth, style = {},
}) {
  const [hover, setHover] = useState(false);
  const s = V2_BTN_SIZE[size];

  const stylesByVariant = {
    primary: {
      background: hover ? "#3D31C8" : V2.primary,
      color: "#FFF",
      border: "1px solid transparent",
      boxShadow: hover ? `0 0 0 4px ${V2.primaryRing}` : "0 1px 0 rgba(20,20,20,0.04)",
    },
    secondary: {
      background: hover ? "#FAFAFA" : V2.surface,
      color: V2.text,
      border: `1px solid ${V2.hairline}`,
      boxShadow: V2.shadowCard,
    },
    ghost: {
      background: hover ? V2.primarySoft : "transparent",
      color: V2.text,
      border: "1px solid transparent",
      boxShadow: "none",
    },
    danger: {
      background: hover ? "#E73B1F" : "var(--red-60)",
      color: "#FFF",
      border: "1px solid transparent",
      boxShadow: "0 1px 0 rgba(20,20,20,0.04)",
    },
    "ghost-purple": {
      background: hover ? V2.primarySoft : "transparent",
      color: V2.primary,
      border: "1px solid transparent",
      boxShadow: "none",
    },
  };
  const v = stylesByVariant[variant] || stylesByVariant.primary;

  return (
    <button
      type="button"
      disabled={isDisabled}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        gap: 6,
        padding: s.padding,
        fontSize: s.fontSize,
        fontWeight: 600,
        fontFamily: "var(--font-body)",
        borderRadius: s.radius,
        cursor: isDisabled ? "not-allowed" : "pointer",
        opacity: isDisabled ? 0.5 : 1,
        width: fullWidth ? "100%" : undefined,
        transition: "background 120ms ease, box-shadow 120ms ease",
        whiteSpace: "nowrap",
        ...v,
        ...style,
      }}
    >
      {iconStart && <Icon name={iconStart} size={s.iconSize} />}
      {children}
      {iconEnd && <Icon name={iconEnd} size={s.iconSize} />}
    </button>
  );
}

// ---------------------------------------------------------------------
// Soft Badge / pill
// ---------------------------------------------------------------------
const V2_BADGE_TONES = {
  neutral: { bg: "#F1F1F1",  fg: "#3F3F3F" },
  green:   { bg: "var(--green-20)",  fg: "var(--green-100)"  },
  blue:    { bg: "var(--blue-20)",   fg: "var(--blue-100)"   },
  red:     { bg: "var(--red-20)",    fg: "var(--red-100)"    },
  yellow:  { bg: "var(--yellow-20)", fg: "var(--yellow-100)" },
  purple:  { bg: V2.primarySoft,     fg: "var(--purple-80)"  },
};
function V2Badge({ tone = "neutral", children, dot, icon, size = "sm" }) {
  const c = V2_BADGE_TONES[tone] || V2_BADGE_TONES.neutral;
  const isLg = size === "md";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      padding: isLg ? "3px 9px" : "2px 8px",
      borderRadius: 999,
      fontSize: isLg ? 12 : 11,
      fontWeight: 600,
      letterSpacing: "0.01em",
      lineHeight: 1.4,
      background: c.bg, color: c.fg,
      fontFamily: "var(--font-body)",
      whiteSpace: "nowrap",
    }}>
      {dot && <span style={{
        width: 6, height: 6, borderRadius: 999, background: "currentColor",
      }} />}
      {icon && <Icon name={icon} size={11} />}
      {children}
    </span>
  );
}

// ---------------------------------------------------------------------
// Soft TextField / search input
// ---------------------------------------------------------------------
function V2TextField({ label, value, onChange, placeholder, helperText, errorText, isOptional, type = "text", iconStart, suffix, fullWidth = true }) {
  const [focus, setFocus] = useState(false);
  const hasError = !!errorText;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--font-body)", width: fullWidth ? "100%" : undefined }}>
      {label && (
        <label style={{ fontSize: 13, fontWeight: 600, color: V2.text }}>
          {label}{isOptional && <span style={{ color: V2.textDim, fontWeight: 400, marginLeft: 4 }}>(optional)</span>}
        </label>
      )}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        border: `1px solid ${hasError ? "var(--red-60)" : focus ? V2.primary : V2.hairline}`,
        borderRadius: 10,
        background: V2.surface,
        padding: "9px 12px",
        boxShadow: focus ? `0 0 0 3px ${V2.primaryRing}` : "none",
        transition: "box-shadow 120ms ease, border-color 120ms ease",
      }}>
        {iconStart && <Icon name={iconStart} size={16} style={{ color: V2.textDim, flexShrink: 0 }} />}
        <input type={type} value={value ?? ""} onChange={onChange} placeholder={placeholder}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            border: 0, outline: "none", width: "100%", background: "transparent",
            fontFamily: "var(--font-body)", fontSize: 14, color: V2.text,
          }}
        />
        {suffix}
      </div>
      {hasError ? <span style={{ fontSize: 12, color: "var(--red-80)" }}>{errorText}</span>
        : helperText ? <span style={{ fontSize: 12, color: V2.textDim }}>{helperText}</span> : null}
    </div>
  );
}

// ---------------------------------------------------------------------
// Pill toggle (segmented)
// ---------------------------------------------------------------------
function V2PillToggle({ value, onChange, options }) {
  return (
    <div style={{
      display: "inline-flex",
      padding: 3,
      background: "#F1F1F1",
      borderRadius: 999,
      gap: 2,
      fontFamily: "var(--font-body)",
    }}>
      {options.map(o => {
        const on = value === o.value;
        return (
          <button key={o.value} onClick={() => onChange?.(o.value)} style={{
            padding: "5px 14px",
            border: 0,
            borderRadius: 999,
            background: on ? V2.primarySoft : "transparent",
            color: on ? V2.primary : V2.textMuted,
            fontWeight: on ? 600 : 500,
            fontSize: 13,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            display: "inline-flex", alignItems: "center", gap: 5,
            transition: "background 120ms ease, color 120ms ease",
          }}>
            {o.icon && <Icon name={o.icon} size={12} />}
            {o.label}
            {o.count != null && <span style={{
              fontSize: 11, fontWeight: 600, padding: "0 6px",
              borderRadius: 999, background: on ? "rgba(73,62,216,0.12)" : "#E5E5E5",
              fontVariantNumeric: "tabular-nums",
            }}>{o.count}</span>}
          </button>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------
// Numbered step badge — purple-filled circle with white digit
// ---------------------------------------------------------------------
function StepBadge({ n, state = "active", size = 32 }) {
  // states: complete | active | pending
  const styleByState = {
    complete: { bg: V2.primary,     fg: "#FFF", border: V2.primary },
    active:   { bg: V2.primary,     fg: "#FFF", border: V2.primary },
    pending:  { bg: V2.surface,     fg: V2.textMuted, border: V2.hairline },
    soft:     { bg: V2.primarySoft, fg: V2.primary, border: "transparent" },
  };
  const s = styleByState[state] || styleByState.active;
  return (
    <span style={{
      width: size, height: size, borderRadius: 999,
      background: s.bg, color: s.fg,
      border: `1.5px solid ${s.border}`,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-body)", fontWeight: 700,
      fontSize: size <= 22 ? 11 : 13,
      flexShrink: 0,
      fontVariantNumeric: "tabular-nums",
    }}>
      {state === "complete"
        ? <Icon name="check" size={size <= 22 ? 12 : 16} />
        : n}
    </span>
  );
}

// ---------------------------------------------------------------------
// Page section header (eyebrow + headline + sub)
// ---------------------------------------------------------------------
function V2SectionHeader({ eyebrow, title, sub, actions }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "flex-end",
      gap: 24, marginBottom: 24,
    }}>
      <div>
        {eyebrow && <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase",
          color: V2.textMuted, marginBottom: 6,
        }}>{eyebrow}</div>}
        <h1 style={{
          fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700,
          color: V2.text, margin: 0, letterSpacing: "-0.005em", lineHeight: 1.1,
        }}>{title}</h1>
        {sub && <div style={{
          fontSize: 14, color: V2.textMuted, marginTop: 6, maxWidth: 720,
          lineHeight: 1.5,
        }}>{sub}</div>}
      </div>
      {actions && <div style={{ display: "flex", gap: 8 }}>{actions}</div>}
    </div>
  );
}

// ---------------------------------------------------------------------
// Top nav — softer, no hard borders
// ---------------------------------------------------------------------
const AGENCY = {
  name: "Meridian Talent Partners",
  short: "Meridian",
  initials: "MT",
};

function V2SideNav({ active, onNav, agencyName = AGENCY.name }) {
  const tabs = [
    { key: "jobs",       label: "Jobs",       icon: "briefcase" },
    { key: "candidates", label: "Candidates", icon: "users"     },
    { key: "workers",    label: "Workers",    icon: "user-check"},
  ];
  return (
    <aside style={{
      position: "fixed", top: 0, left: 0, bottom: 0,
      width: 240,
      background: V2.surface,
      borderRight: `1px solid ${V2.hairline}`,
      fontFamily: "var(--font-body)",
      display: "flex", flexDirection: "column",
      zIndex: 10,
    }}>
      {/* Brand */}
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "20px 20px 18px",
        borderBottom: `1px solid ${V2.hairlineSoft}`,
      }}>
        <img src="../../assets/logos/logo-primary.svg" alt="HireArt" style={{ height: 22 }} />
        <span style={{
          fontSize: 12, fontWeight: 500, color: V2.textMuted,
          paddingLeft: 12, marginLeft: -2,
          borderLeft: `1px solid ${V2.hairline}`,
        }}>Staffing Partner</span>
      </div>

      {/* Nav section */}
      <div style={{ padding: "16px 12px", flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: "0.08em",
          textTransform: "uppercase", color: V2.textDim,
          padding: "0 10px 6px",
        }}>Workspace</div>
        {tabs.map(t => {
          const on = active === t.key;
          return (
            <button key={t.key} onClick={() => onNav?.(t.key)} style={{
              display: "flex", alignItems: "center", gap: 10,
              background: on ? V2.primarySoft : "transparent",
              border: 0,
              borderRadius: 8,
              padding: "9px 12px",
              fontWeight: on ? 600 : 500, fontSize: 14,
              color: on ? V2.primary : V2.text,
              cursor: "pointer",
              fontFamily: "var(--font-body)",
              transition: "background 120ms ease, color 120ms ease",
              textAlign: "left",
              width: "100%",
            }}
            onMouseEnter={e => { if (!on) e.currentTarget.style.background = "#F4F4F4"; }}
            onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}>
              <Icon name={t.icon} size={16} />
              <span style={{ flex: 1 }}>{t.label}</span>
            </button>
          );
        })}

        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: "0.08em",
          textTransform: "uppercase", color: V2.textDim,
          padding: "20px 10px 6px",
        }}>Activity</div>
        <button style={{
          display: "flex", alignItems: "center", gap: 10,
          background: "transparent", border: 0, borderRadius: 8,
          padding: "9px 12px", fontWeight: 500, fontSize: 14,
          color: V2.text, cursor: "pointer", fontFamily: "var(--font-body)",
          textAlign: "left", width: "100%",
        }}>
          <Icon name="bell" size={16} />
          <span style={{ flex: 1 }}>Updates</span>
          <span style={{
            fontSize: 11, fontWeight: 600, padding: "1px 6px",
            borderRadius: 999, background: V2.primarySoft, color: V2.primary,
            fontVariantNumeric: "tabular-nums",
          }}>3</span>
        </button>
      </div>

      {/* Agency footer */}
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "14px 16px",
        borderTop: `1px solid ${V2.hairlineSoft}`,
      }}>
        <Avatar name={agencyName} size={34} bg={V2.primarySoft} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{
            fontSize: 13, fontWeight: 600, color: V2.text,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>{agencyName}</div>
          <div style={{ fontSize: 11, color: V2.textDim }}>Agency portal</div>
        </div>
      </div>
    </aside>
  );
}

// ---------------------------------------------------------------------
// Stat tile — soft, no offset shadow, with optional trend
// ---------------------------------------------------------------------
function V2StatTile({ label, value, sub, tone = "neutral", icon }) {
  const toneFg = {
    neutral: V2.text,
    green:   "var(--green-80)",
    blue:    "var(--blue-80)",
    red:     "var(--red-80)",
    yellow:  "var(--yellow-80)",
    purple:  V2.primary,
  }[tone];
  const toneBg = {
    neutral: "#F4F4F4",
    green:   "var(--green-20)",
    blue:    "var(--blue-20)",
    red:     "var(--red-20)",
    yellow:  "var(--yellow-20)",
    purple:  V2.primarySoft,
  }[tone];

  return (
    <V2Card padding={20}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: 10,
      }}>
        <div style={{
          fontSize: 12, fontWeight: 500, color: V2.textMuted,
          letterSpacing: "0.01em",
        }}>{label}</div>
        {icon && (
          <span style={{
            width: 28, height: 28, borderRadius: 8,
            background: toneBg, color: toneFg,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon name={icon} size={14} />
          </span>
        )}
      </div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700,
        color: V2.text, lineHeight: 1, fontVariantNumeric: "tabular-nums",
        letterSpacing: "-0.01em",
      }}>{value}</div>
      {sub && <div style={{
        fontSize: 12, color: V2.textMuted, marginTop: 8, lineHeight: 1.4,
      }}>{sub}</div>}
    </V2Card>
  );
}

// ---------------------------------------------------------------------
// Soft progress bar
// ---------------------------------------------------------------------
function V2Progress({ filled, total, height = 6, tone }) {
  const pct = total === 0 ? 0 : Math.min(100, (filled / total) * 100);
  const full = filled >= total;
  const fillColor = tone || (full ? "var(--green-60)" : V2.primary);
  return (
    <div style={{
      width: "100%", height, borderRadius: 999,
      background: "#EFEFEF",
      overflow: "hidden",
    }}>
      <div style={{
        height: "100%", width: `${pct}%`,
        background: fillColor,
        borderRadius: 999,
        transition: "width 240ms ease",
      }} />
    </div>
  );
}

// ---------------------------------------------------------------------
// Soft table chrome — used by view files
// ---------------------------------------------------------------------
function V2TableShell({ children }) {
  return (
    <div style={{
      background: V2.surface,
      border: `1px solid ${V2.hairline}`,
      borderRadius: V2.radius,
      boxShadow: V2.shadowCard,
      overflow: "hidden",
    }}>
      {children}
    </div>
  );
}

function V2TH({ children, right, w }) {
  return (
    <th style={{
      textAlign: right ? "right" : "left",
      padding: "12px 18px",
      fontSize: 11, fontWeight: 600, letterSpacing: "0.04em",
      textTransform: "uppercase", color: V2.textMuted,
      borderBottom: `1px solid ${V2.hairline}`,
      background: "#FAFAFA",
      whiteSpace: "nowrap",
      width: w,
    }}>{children}</th>
  );
}

// ---------------------------------------------------------------------
// Days-left chip (soft)
// ---------------------------------------------------------------------
function urgencyOf(d) {
  if (d <= 3) return "critical";
  if (d <= 7) return "high";
  if (d <= 14) return "med";
  return "low";
}
function V2DaysLeft({ days }) {
  const u = urgencyOf(days);
  const tone = { critical: "red", high: "yellow", med: "blue", low: "neutral" }[u];
  return (
    <V2Badge tone={tone} icon="clock">
      {days === 1 ? "1 day" : days < 0 ? `${Math.abs(days)}d overdue` : `${days} days`}
    </V2Badge>
  );
}

// ---------------------------------------------------------------------
// Status pill
// ---------------------------------------------------------------------
function V2StatusPill({ status }) {
  const map = {
    "Accepting": { tone: "green",   label: "Accepting" },
    "Paused":    { tone: "yellow",  label: "Paused"    },
    "Closed":    { tone: "neutral", label: "Closed"    },
    "Active":    { tone: "green",   label: "Active"    },
    "On leave":  { tone: "yellow",  label: "On leave"  },
    "Ended":     { tone: "neutral", label: "Ended"     },
  };
  const m = map[status] || { tone: "neutral", label: status };
  return <V2Badge tone={m.tone} dot>{m.label}</V2Badge>;
}

// ---------------------------------------------------------------------
// Recurring chip
// ---------------------------------------------------------------------
function V2RecurringChip({ recurring, expanded }) {
  if (!recurring) return null;
  return (
    <V2Badge tone="purple" icon="refresh">
      Recurring{expanded ? ` · ${recurring.rate}/${recurring.period}` : ""}
    </V2Badge>
  );
}

// Expose
Object.assign(window, {
  V2, AGENCY,
  V2Card, V2Button, V2Badge, V2TextField, V2PillToggle,
  StepBadge, V2SectionHeader, V2SideNav, V2StatTile,
  V2Progress, V2TableShell, V2TH,
  V2DaysLeft, V2StatusPill, V2RecurringChip, urgencyOf,
});
})();