/* eslint-disable */
// HireArt UI Kit — Patterns: Card, Banner, Dialog, Table, TopNav, SideNav, Tabs

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

function Card({ children, padding = 20, shadow = "md", style = {}, onClick }) {
  const shadowMap = { sm: "var(--shadow-sm)", md: "var(--shadow-md)", lg: "var(--shadow-lg)", none: "none" };
  return (
    <div onClick={onClick} style={{
      background: "var(--neutral-10)",
      border: "2px solid var(--neutral-100)",
      borderRadius: 12,
      boxShadow: shadowMap[shadow],
      padding,
      ...style,
    }}>{children}</div>
  );
}

function Banner({ variant = "info", title, children, onDismiss }) {
  const bgMap = { info: "var(--blue-20)", success: "var(--green-20)", warning: "var(--yellow-20)", error: "var(--red-20)" };
  const iconMap = { info: "info", success: "check-circle", warning: "alert-triangle", error: "alert-circle" };
  return (
    <div style={{
      display: "flex", gap: 10, alignItems: "flex-start",
      padding: "10px 14px", border: "2px solid var(--neutral-100)",
      borderRadius: 8, background: bgMap[variant], fontFamily: "var(--font-body)",
    }}>
      <Icon name={iconMap[variant]} size={18} style={{ marginTop: 2, color: "var(--neutral-100)", flexShrink: 0 }} />
      <div style={{ flex: 1, fontSize: 14, color: "var(--neutral-100)", lineHeight: 1.5 }}>
        {title && <div style={{ fontWeight: 700, marginBottom: 2 }}>{title}</div>}
        {children}
      </div>
      {onDismiss && <button onClick={onDismiss} style={{ background: "none", border: 0, cursor: "pointer", padding: 0, color: "var(--neutral-100)" }}>
        <Icon name="x" size={16} />
      </button>}
    </div>
  );
}

function Dialog({ isOpen, onClose, title, children, actions }) {
  if (!isOpen) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(20,20,20,0.48)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "var(--neutral-10)", border: "2px solid var(--neutral-100)",
        borderRadius: 12, boxShadow: "var(--shadow-lg)",
        width: 480, maxWidth: "90%", fontFamily: "var(--font-body)",
      }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between",
          padding: "16px 20px", borderBottom: "2px solid var(--neutral-100)" }}>
          <div style={{ fontFamily: "var(--font-headline)", fontSize: 20, fontWeight: 700, color: "var(--neutral-100)" }}>{title}</div>
          <button onClick={onClose} style={{ background: "none", border: 0, cursor: "pointer", padding: 4 }}>
            <Icon name="x" size={18} />
          </button>
        </div>
        <div style={{ padding: 20, fontSize: 14, color: "var(--neutral-90)", lineHeight: 1.5 }}>{children}</div>
        {actions && <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", padding: "12px 20px", borderTop: "1px solid var(--neutral-20)" }}>{actions}</div>}
      </div>
    </div>
  );
}

function Table({ columns, rows, onRowClick }) {
  return (
    <div style={{ border: "2px solid var(--neutral-100)", borderRadius: 12, background: "var(--neutral-10)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-body)" }}>
        <thead>
          <tr style={{ background: "var(--neutral-20)", borderBottom: "2px solid var(--neutral-100)" }}>
            {columns.map((c, i) => (
              <th key={i} style={{ textAlign: "left", padding: "10px 14px", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--neutral-80)" }}>{c.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} onClick={() => onRowClick?.(r)} style={{ borderBottom: "1px solid var(--neutral-20)", cursor: onRowClick ? "pointer" : "default" }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--neutral-20)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
              {columns.map((c, j) => (
                <td key={j} style={{ padding: "12px 14px", fontSize: 14, color: "var(--neutral-100)" }}>{c.render ? c.render(r) : r[c.key]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function TopNav({ active = "candidates", onNav, user = { name: "Sam Chen" } }) {
  const tabs = [
    { key: "candidates", label: "Candidates" },
    { key: "offers",     label: "Offers" },
    { key: "onboarding", label: "Onboarding" },
    { key: "timecards",  label: "Timecards" },
    { key: "compliance", label: "Compliance" },
  ];
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 32,
      padding: "0 28px", height: 60,
      borderBottom: "2px solid var(--neutral-100)",
      background: "var(--neutral-10)",
      fontFamily: "var(--font-body)",
    }}>
      <img src="../../assets/logos/logo-primary.svg" alt="HireArt" style={{ height: 28 }} />
      <div style={{ display: "flex", gap: 4, flex: 1 }}>
        {tabs.map(t => (
          <button key={t.key} onClick={() => onNav?.(t.key)}
            style={{
              background: active === t.key ? "var(--green-60)" : "transparent",
              border: active === t.key ? "2px solid var(--neutral-100)" : "2px solid transparent",
              borderRadius: 6, padding: "4px 12px", fontWeight: 600, fontSize: 14,
              color: "var(--neutral-100)", cursor: "pointer",
              boxShadow: active === t.key ? "var(--shadow-btn-sm)" : "none",
              fontFamily: "var(--font-body)",
            }}>{t.label}</button>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button style={{ background: "transparent", border: 0, cursor: "pointer", padding: 4 }}><Icon name="bell" size={20} /></button>
        <Avatar name={user.name} size={32} />
      </div>
    </div>
  );
}

function SideNav({ active, onNav, sections }) {
  return (
    <aside style={{
      width: 220, background: "var(--neutral-10)",
      borderRight: "2px solid var(--neutral-100)",
      padding: 16, display: "flex", flexDirection: "column", gap: 20,
      fontFamily: "var(--font-body)", height: "100%",
    }}>
      {sections.map((s, i) => (
        <div key={i}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 8 }}>{s.label}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {s.items.map(it => {
              const isActive = active === it.key;
              return (
                <button key={it.key} onClick={() => onNav?.(it.key)} style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "8px 10px", borderRadius: 6,
                  border: isActive ? "2px solid var(--neutral-100)" : "2px solid transparent",
                  background: isActive ? "var(--yellow-40)" : "transparent",
                  boxShadow: isActive ? "var(--shadow-btn-sm)" : "none",
                  cursor: "pointer", fontSize: 14, fontWeight: isActive ? 600 : 400,
                  color: "var(--neutral-100)", textAlign: "left",
                  fontFamily: "var(--font-body)",
                }}>
                  <Icon name={it.icon} size={16} />
                  <span style={{ flex: 1 }}>{it.label}</span>
                  {it.count != null && <Badge color="neutral">{it.count}</Badge>}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </aside>
  );
}

function Tabs({ active, onChange, tabs }) {
  return (
    <div style={{ display: "flex", gap: 0, borderBottom: "2px solid var(--neutral-100)", fontFamily: "var(--font-body)" }}>
      {tabs.map(t => {
        const on = t.key === active;
        return (
          <button key={t.key} onClick={() => onChange?.(t.key)}
            style={{
              background: "transparent", border: 0,
              borderBottom: on ? "3px solid var(--neutral-100)" : "3px solid transparent",
              padding: "10px 16px", fontSize: 14, fontWeight: on ? 700 : 500,
              color: "var(--neutral-100)", cursor: "pointer",
              marginBottom: -2,
              fontFamily: "var(--font-body)",
            }}>{t.label}{t.count != null && <span style={{ marginLeft: 6, color: "var(--neutral-60)" }}>{t.count}</span>}</button>
        );
      })}
    </div>
  );
}

function EmptyState({ title, children, action }) {
  return (
    <div style={{
      border: "2px dashed var(--neutral-30)", borderRadius: 12, padding: 48,
      textAlign: "center", color: "var(--neutral-80)", fontFamily: "var(--font-body)",
      background: "var(--neutral-10)",
    }}>
      <div style={{ fontFamily: "var(--font-headline)", fontSize: 20, fontWeight: 700, color: "var(--neutral-100)", marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 14, marginBottom: 16 }}>{children}</div>
      {action}
    </div>
  );
}

Object.assign(window, { Card, Banner, Dialog, Table, TopNav, SideNav, Tabs, EmptyState });
})();