/* eslint-disable */
// HireArt UI Kit — Core components
// Faithful recreations of @hireart/component-library primitives.
// Visuals match the design system: neutral-100 borders, hard drop shadows, 4px grid.

(function () {
const { useState, useRef, useEffect, forwardRef, createContext, useContext } = React;

const ICON_BASE = "../../assets/icons/";

// --- cn helper ---------------------------------------------------------
function cn(...args) { return args.filter(Boolean).join(" "); }

// --- Icon --------------------------------------------------------------
function Icon({ name, size = 20, className = "", style = {} }) {
  // CSS mask trick so icons inherit currentColor
  const s = {
    width: size, height: size,
    display: "inline-block",
    backgroundColor: "currentColor",
    WebkitMask: `url(${ICON_BASE}${name}.svg) center / contain no-repeat`,
    mask: `url(${ICON_BASE}${name}.svg) center / contain no-repeat`,
    flexShrink: 0,
    ...style,
  };
  return <span className={className} style={s} aria-hidden="true" />;
}

// --- Button ------------------------------------------------------------
const btnSizeStyles = {
  xl: { padding: "12px 32px", fontSize: 16, borderRadius: 8, borderWidth: 3, boxShadow: "var(--shadow-btn-xl)", pressY: 5, iconSize: 20 },
  lg: { padding: "12px 24px", fontSize: 14, borderRadius: 8, borderWidth: 3, boxShadow: "var(--shadow-btn-lg)", pressY: 4, iconSize: 20 },
  md: { padding: "8px 20px",  fontSize: 11, borderRadius: 6, borderWidth: 2, boxShadow: "var(--shadow-btn-md)", pressY: 3, iconSize: 16 },
  sm: { padding: "4px 12px",  fontSize: 11, borderRadius: 6, borderWidth: 2, boxShadow: "var(--shadow-btn-sm)", pressY: 2, iconSize: 16 },
};
const btnColorBg = {
  "primary-green":  "var(--green-60)",
  "primary-blue":   "var(--blue-60)",
  "primary-red":    "var(--red-60)",
  "primary-yellow": "var(--yellow-60)",
  "primary-purple": "var(--purple-60)",
  "secondary":      "var(--neutral-10)",
};
function Button({
  children, color = "primary-green", size = "lg",
  iconStart, iconEnd, isDisabled, isLoading, isFullWidth,
  onClick, type = "button", className = "", style = {},
}) {
  const [pressed, setPressed] = useState(false);
  const [hover, setHover] = useState(false);
  const isText = color.startsWith("text-");
  const s = btnSizeStyles[size];

  const baseStyle = {
    fontFamily: "var(--font-body)",
    fontWeight: 600,
    color: color === "primary-purple" ? "var(--neutral-10)"
         : isText ? (color === "text-red" ? "var(--red-80)" : color === "text-purple" ? "var(--purple-60)" : "var(--neutral-100)")
         : "var(--neutral-100)",
    background: isText ? (hover ? "color-mix(in srgb, var(--purple-60) 16%, transparent)" : "transparent") : btnColorBg[color],
    border: isText ? `${s.borderWidth}px solid transparent` : `${s.borderWidth}px solid var(--neutral-100)`,
    borderRadius: s.borderRadius,
    padding: s.padding,
    fontSize: s.fontSize,
    cursor: isDisabled ? "not-allowed" : "pointer",
    display: "inline-flex", alignItems: "center", justifyContent: isFullWidth ? "center" : "flex-start",
    width: isFullWidth ? "100%" : "auto",
    boxShadow: isText ? "none" : (pressed ? "none" : s.boxShadow),
    transform: pressed && !isText ? `translateY(${s.pressY}px)` : "none",
    opacity: isDisabled ? 0.48 : 1,
    transition: "all 0.1s ease-in-out",
    gap: 4,
    ...style,
  };
  return (
    <button type={type} className={className} style={baseStyle}
      disabled={isDisabled} onClick={onClick}
      onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => { setPressed(false); setHover(false); }}
      onMouseEnter={() => setHover(true)}>
      {iconStart && <Icon name={iconStart} size={s.iconSize} style={{ marginRight: 4 }} />}
      {isLoading ? "Loading…" : children}
      {iconEnd && <Icon name={iconEnd} size={s.iconSize} style={{ marginLeft: 4 }} />}
    </button>
  );
}

// --- Badge -------------------------------------------------------------
const badgeColorMap = {
  green: { bg: "var(--green-20)", fg: "var(--green-100)" },
  red: { bg: "var(--red-20)", fg: "var(--red-100)" },
  yellow: { bg: "var(--yellow-20)", fg: "var(--yellow-100)" },
  blue: { bg: "var(--blue-20)", fg: "var(--blue-100)" },
  purple: { bg: "var(--purple-20)", fg: "var(--purple-100)" },
  neutral: { bg: "var(--neutral-20)", fg: "var(--neutral-100)" },
};
function Badge({ color = "neutral", dot, children }) {
  const c = badgeColorMap[color];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 8px", border: "2px solid var(--neutral-100)",
      borderRadius: 100, fontSize: 11, fontWeight: 700, lineHeight: 1.5,
      textTransform: "uppercase", letterSpacing: "0.06em",
      background: c.bg, color: c.fg, fontFamily: "var(--font-body)",
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: "currentColor" }} />}
      {children}
    </span>
  );
}

// --- TextField / Input ------------------------------------------------
function TextField({ label, value, onChange, placeholder, helperText, errorText, isOptional, type = "text", iconStart }) {
  const [focus, setFocus] = useState(false);
  const hasError = !!errorText;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--font-body)" }}>
      {label && (
        <label style={{ fontSize: 14, fontWeight: 600, color: "var(--neutral-100)" }}>
          {label}{!isOptional && <span style={{ color: "var(--red-60)", marginLeft: 2 }}>*</span>}
        </label>
      )}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        border: `2px solid ${hasError ? "var(--red-60)" : "var(--neutral-100)"}`,
        borderRadius: 6,
        background: "var(--neutral-10)",
        padding: "8px 12px",
        boxShadow: focus ? "var(--shadow-btn-md)" : "var(--shadow-btn-sm)",
        transition: "box-shadow 0.1s",
      }}>
        {iconStart && <Icon name={iconStart} size={16} style={{ color: "var(--neutral-60)" }} />}
        <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: "var(--neutral-100)" }} />
      </div>
      {hasError ? <span style={{ fontSize: 12, color: "var(--red-80)" }}>{errorText}</span>
        : helperText ? <span style={{ fontSize: 12, color: "var(--neutral-60)" }}>{helperText}</span> : null}
    </div>
  );
}

// --- Checkbox ----------------------------------------------------------
function Checkbox({ checked, onChange, label }) {
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--neutral-100)" }}>
      <span style={{
        width: 18, height: 18, border: "2px solid var(--neutral-100)", borderRadius: 4,
        background: checked ? "var(--green-60)" : "var(--neutral-10)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        boxShadow: "var(--shadow-btn-sm)",
      }}>
        {checked && <Icon name="check" size={12} style={{ color: "var(--neutral-100)" }} />}
      </span>
      <input type="checkbox" checked={!!checked} onChange={e => onChange?.(e.target.checked)} style={{ position: "absolute", opacity: 0, pointerEvents: "none" }} />
      {label}
    </label>
  );
}

// --- Radio -------------------------------------------------------------
function Radio({ checked, onChange, label, name }) {
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--neutral-100)" }}>
      <span style={{
        width: 18, height: 18, border: "2px solid var(--neutral-100)", borderRadius: 999,
        background: "var(--neutral-10)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        boxShadow: "var(--shadow-btn-sm)",
      }}>
        {checked && <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--neutral-100)" }} />}
      </span>
      <input type="radio" name={name} checked={!!checked} onChange={onChange} style={{ position: "absolute", opacity: 0, pointerEvents: "none" }} />
      {label}
    </label>
  );
}

// --- Avatar ------------------------------------------------------------
function Avatar({ name, src, size = 40, bg = "var(--purple-20)" }) {
  const initials = (name || "").split(" ").map(w => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
  return (
    <span style={{
      width: size, height: size, borderRadius: 999,
      border: "2px solid var(--neutral-100)",
      background: src ? `url(${src}) center/cover` : bg,
      color: "var(--neutral-100)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-body)", fontWeight: 700, fontSize: size * 0.38,
      flexShrink: 0,
    }}>
      {!src && initials}
    </span>
  );
}

Object.assign(window, { Icon, Button, Badge, TextField, Checkbox, Radio, Avatar, cn });
})();