// Shared small components: Sidebar, TopBar, Avatar, ScoreRing, etc.

const STATUS_STYLES = {
  "New": "pill-sand",
  "AI screened": "pill-blue",
  "HR reviewed": "pill-purple",
  "Call scheduled": "pill-amber",
  "Called": "pill-amber",
  "Shortlisted": "pill-green",
  "Interview scheduled": "pill-amber",
  "Interviewed": "pill-purple",
  "Rejected": "pill-rose",
  "Offer": "pill-green",
  "Hired": "pill-green",
  "Talent pool": "pill-sand",
};

const REC_STYLES = {
  "Strong fit":     { cls: "pill-green",  ring: "var(--green-500)" },
  "Potential fit":  { cls: "pill-amber",  ring: "var(--amber-400)" },
  "Weak fit":       { cls: "pill-rose",   ring: "var(--rose-500)" },
  "Not recommended": { cls: "pill-rose",  ring: "var(--rose-600)" },
};

const StatusPill = ({ status }) => (
  <span className={"pill " + (STATUS_STYLES[status] || "pill-sand")}>
    <span className="dot"/>{status}
  </span>
);

const RecPill = ({ rec }) => (
  <span className={"pill " + (REC_STYLES[rec]?.cls || "pill-sand")}>{rec}</span>
);

const Avatar = ({ initials, color, size = "" }) => {
  const cls = "avatar" + (size ? " avatar-" + size : "");
  return <div className={cls} style={{ background: color || "var(--green-300)" }}>{initials}</div>;
};

const scoreColor = (score) => {
  if (score >= 80) return "var(--green-500)";
  if (score >= 65) return "var(--green-400)";
  if (score >= 50) return "var(--amber-400)";
  return "var(--rose-500)";
};

const ScoreRing = ({ score, size = 84, label = "Fit score" }) => (
  <div className="score-ring" style={{
    "--size": size + "px",
    "--pct": score,
    "--ring-color": scoreColor(score),
  }}>
    <div className="score-ring-text">
      <div className="score-ring-num" style={{ fontSize: Math.round(size * 0.30) + "px" }}>{score}</div>
      <div className="score-ring-label">{label}</div>
    </div>
  </div>
);

const ScoreBar = ({ value, label, weight }) => (
  <div className="col gap-6">
    <div className="row" style={{ justifyContent: "space-between" }}>
      <span style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{label}{weight != null && <span className="subtle" style={{ marginLeft: 6, fontSize: 11 }}>weight {weight}%</span>}</span>
      <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text)", fontVariantNumeric: "tabular-nums" }}>{value}</span>
    </div>
    <div className="bar">
      <div className="bar-fill" style={{ width: value + "%", background: scoreColor(value) }}/>
    </div>
  </div>
);

const Sidebar = ({ route, setRoute, counts, mobileOpen, onMobileClose, perms = {} }) => {
  const { t } = window.I18N.useI18n();
  const wrappedSetRoute = (id) => {
    setRoute(id);
    if (onMobileClose) onMobileClose();
  };
  const canEdit = !!perms.canEdit;
  const canManageUsers = !!perms.canManageUsers;
  const canAccessSettings = !!perms.canAccessSettings;

  const itemsTop = [
    { id: "today", label: t.nav.today, icon: "sparkles" },
    { id: "dashboard", label: t.nav.dashboard, icon: "dashboard" },
    { id: "positions", label: t.nav.positions, icon: "briefcase", count: counts.positions },
    { id: "candidates", label: t.nav.candidates, icon: "users", count: counts.candidates },
    canEdit && { id: "upload", label: t.nav.upload, icon: "upload" },
  ].filter(Boolean);

  const itemsBottom = [
    { id: "pipeline", label: t.nav.pipeline, icon: "kanban" },
    canEdit && { id: "audit", label: t.nav.audit, icon: "history" },
    canManageUsers && { id: "users", label: t.nav.users || "Users", icon: "users" },
    canAccessSettings && { id: "settings", label: t.nav.settings, icon: "settings" },
  ].filter(Boolean);
  const NavItem = ({ item }) => (
    <button
      className={"nav-item " + (route === item.id ? "active" : "")}
      onClick={() => !item.disabled && wrappedSetRoute(item.id)}
      disabled={item.disabled}
      style={item.disabled ? { opacity: 0.4, cursor: "not-allowed" } : {}}
    >
      <Icon name={item.icon} size={16} className="nav-icon"/>
      <span>{item.label}</span>
      {item.count != null && <span className="nav-count">{item.count}</span>}
      {item.disabled && <Icon name="lock" size={11} style={{ marginLeft: "auto", opacity: 0.5 }}/>}
    </button>
  );
  return (
    <React.Fragment>
      <div
        className={"sidebar-scrim " + (mobileOpen ? "is-open" : "")}
        onClick={onMobileClose}
        aria-hidden="true"
      />
      <aside className={"sidebar " + (mobileOpen ? "is-open" : "")}>
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">IE</div>
        <div className="col">
          <div className="sidebar-brand-name">{t.brand}</div>
          <div className="sidebar-brand-sub">{t.brandSub}</div>
        </div>
      </div>
      <div className="nav-section">{t.nav.workspace}</div>
      {itemsTop.map(i => <NavItem key={i.id} item={i}/>)}
      <div className="nav-section">{t.nav.more}</div>
      {itemsBottom.map(i => <NavItem key={i.id} item={i}/>)}
      <div className="sidebar-footer">
        <div className="sidebar-avatar">{t.user.name.split(" ").map(s => s[0]).slice(0, 2).join("")}</div>
        <div className="col">
          <div className="sidebar-user-name">{t.user.name}</div>
          <div className="sidebar-user-role">{t.user.role}</div>
        </div>
      </div>
    </aside>
    </React.Fragment>
  );
};

const TopBar = ({ breadcrumb, onNew, onMobileMenu, user, role, onSignOut }) => {
  const { locale, setLocale, t } = window.I18N.useI18n();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDocClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    };
    document.addEventListener("mousedown", onDocClick);
    return () => document.removeEventListener("mousedown", onDocClick);
  }, [menuOpen]);

  const email = user?.email || "";
  const name = user?.user_metadata?.full_name || user?.user_metadata?.name || email.split("@")[0] || "User";
  const initials = name.split(" ").map((s) => s[0]).slice(0, 2).join("").toUpperCase() || "U";
  const avatarUrl = user?.user_metadata?.avatar_url || user?.user_metadata?.picture || null;
  const localeNow = (window.I18N?.useI18n?.() || {}).locale || "en";
  const ROLE_LABELS_TH = { admin: "ผู้ดูแล", hr_manager: "หัวหน้างาน", recruiter: "ผู้สรรหา", viewer: "ผู้ดู", user: "ผู้ดู", guest: "ผู้เยี่ยมชม" };
  const ROLE_LABELS_EN = { admin: "Admin", hr_manager: "HR Manager", recruiter: "Recruiter", viewer: "Viewer", user: "Viewer", guest: "Guest" };
  const ROLE_LABELS = locale === "th" ? ROLE_LABELS_TH : ROLE_LABELS_EN;
  const roleLabel = ROLE_LABELS[role] || role;
  const SIGN_OUT_LABEL = locale === "th" ? "ออกจากระบบ" : "Sign out";
  const canEdit = role === "admin" || role === "hr_manager" || role === "recruiter";

  return (
  <div className="topbar">
    <button className="topbar-menu" onClick={onMobileMenu} aria-label="Open menu">
      <Icon name="menu" size={18}/>
    </button>
    <div className="row gap-8 topbar-crumbs" style={{ fontSize: 13, color: "var(--text-muted)" }}>
      {breadcrumb.map((b, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevron-right" size={12} style={{ opacity: 0.5 }}/>}
          <span style={{ color: i === breadcrumb.length - 1 ? "var(--text)" : "var(--text-muted)", fontWeight: i === breadcrumb.length - 1 ? 500 : 400 }}>
            {b}
          </span>
        </React.Fragment>
      ))}
    </div>
    <div className="topbar-search">
      <Icon name="search" size={14}/>
      <input placeholder={t.topbar.search} />
    </div>
    <div className="topbar-actions">
      <div className="row gap-4" style={{ background: "var(--sand-100)", padding: 3, borderRadius: 8 }}>
        <button onClick={() => setLocale("en")} className="btn btn-sm" style={{
          background: locale === "en" ? "#fff" : "transparent",
          color: locale === "en" ? "var(--green-700)" : "var(--text-muted)",
          fontWeight: locale === "en" ? 600 : 500,
          padding: "4px 10px", boxShadow: locale === "en" ? "var(--shadow-sm)" : "none",
        }}>EN</button>
        <button onClick={() => setLocale("th")} className="btn btn-sm" style={{
          background: locale === "th" ? "#fff" : "transparent",
          color: locale === "th" ? "var(--green-700)" : "var(--text-muted)",
          fontWeight: locale === "th" ? 600 : 500,
          padding: "4px 10px", boxShadow: locale === "th" ? "var(--shadow-sm)" : "none",
        }}>ไทย</button>
      </div>
      <button className="icon-btn" title="Notifications"><Icon name="bell" size={16}/></button>
      {onNew && canEdit && (
        <button className="btn btn-primary" onClick={onNew}>
          <Icon name="plus" size={14}/>
          <span>{t.topbar.new}</span>
        </button>
      )}
      {user && (
        <div className="user-menu" ref={menuRef}>
          <button
            className="user-menu-trigger"
            onClick={() => setMenuOpen((v) => !v)}
            aria-label="User menu"
          >
            {avatarUrl
              ? <img src={avatarUrl} alt={name} className="user-menu-avatar-img"/>
              : <span className="user-menu-avatar-fallback">{initials}</span>}
            <span className={"user-role-badge user-role-" + role}>{roleLabel}</span>
          </button>
          {menuOpen && (
            <div className="user-menu-pop">
              <div className="user-menu-head">
                <div className="user-menu-name">{name}</div>
                <div className="user-menu-email">{email}</div>
                <div className={"user-role-badge user-role-" + role} style={{ marginTop: 6 }}>{roleLabel}</div>
              </div>
              <button className="user-menu-item user-menu-item-danger" onClick={() => { setMenuOpen(false); onSignOut && onSignOut(); }}>
                <Icon name="logout" size={14}/>
                <span>{SIGN_OUT_LABEL}</span>
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  </div>
  );
};

const FairnessBanner = ({ show = true }) => {
  const { t } = window.I18N.useI18n();
  if (!show) return null;
  return (
    <div className="banner banner-info" style={{ marginBottom: 18 }}>
      <Icon name="shield" size={18} className="banner-icon"/>
      <div className="flex-1">
        <div className="banner-title">{t.fairness.title}</div>
        <div className="banner-body">
          {t.fairness.body} <span style={{ textDecoration: "underline", cursor: "pointer" }}>{t.fairness.learn}</span>
        </div>
      </div>
    </div>
  );
};

const StatusPillI18n = ({ status }) => {
  const { t } = window.I18N.useI18n();
  return (
    <span className={"pill " + (STATUS_STYLES[status] || "pill-sand")}>
      <span className="dot"/>{t.status[status] || status}
    </span>
  );
};

const RecPillI18n = ({ rec }) => {
  const { t } = window.I18N.useI18n();
  return <span className={"pill " + (REC_STYLES[rec]?.cls || "pill-sand")}>{t.rec[rec] || rec}</span>;
};

window.UI = { StatusPill: StatusPillI18n, RecPill: RecPillI18n, Avatar, ScoreRing, ScoreBar, Sidebar, TopBar, FairnessBanner, scoreColor, REC_STYLES };