/* global React */
const { useState } = React;

// ============================================================
// Vuexy Dashboard UI Kit — cosmetic React components
// ============================================================

// Inline SVG icon library — Tabler-style 2px stroke, 24×24 viewBox
const ICON_PATHS = {
  "smart-home": "M5 12l-2 0l9 -9l9 9l-2 0M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6",
  "chart-bar": "M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v11a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v15a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM4 20h14",
  "shopping-cart": "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M17 17h-11v-14h-2M6 5l14 1l-1 7h-13",
  "mail": "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2zM3 7l9 6l9 -6",
  "message-circle": "M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1M12 12l0 .01M8 12l0 .01M16 12l0 .01",
  "calendar": "M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2zM16 3v4M8 3v4M4 11h16M11 15h1M12 15v3",
  "file-invoice": "M14 3v4a1 1 0 0 0 1 1h4M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2M9 7l1 0M9 13l6 0M13 17l2 0",
  "users": "M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2M16 3.13a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0 -3 -3.85",
  "shield-lock": "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 12v2.5",
  "settings": "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
  "help-circle": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0M12 17l0 .01M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4",
  "search": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M21 21l-6 -6",
  "language": "M4 5h7M9 3v2c0 4.418 -2.239 8 -5 8M5 9c-.003 2.144 2.952 3.908 6.7 4M12 20l4 -9l4 9M19.1 18h-6.2",
  "moon-stars": "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454zM17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2M19 11h2M20 10v2",
  "sun": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7",
  "apps": "M4 4h6v6h-6zM14 4h6v6h-6zM4 14h6v6h-6zM14 14h6v6h-6z",
  "bell": "M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6M9 17v1a3 3 0 0 0 6 0v-1",
  "plus": "M12 5l0 14M5 12l14 0",
  "dots-vertical": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
  "download": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2M7 11l5 5l5 -5M12 4l0 12",
  "currency-dollar": "M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2M12 3v3m0 12v3",
  "trending-up": "M3 17l6 -6l4 4l8 -8M14 7l7 0l0 7",
  "device-mobile": "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2zM11 4h2M12 17v.01",
  "hanger": "M12 7a2 2 0 1 1 3 -1.7c0 .6 -.4 1.2 -1 1.5l-9.2 5.4a2 2 0 0 0 -1 1.7c0 1.1 .9 2.1 2 2.1h14a2 2 0 0 0 2 -2.1a2 2 0 0 0 -1 -1.7l-9.2 -5.4",
  "home": "M5 12l-2 0l9 -9l9 9l-2 0M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6",
  "armchair": "M5 11a2 2 0 0 1 2 2v2h10v-2a2 2 0 1 1 4 0v4a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2M5 11v-3a4 4 0 0 1 4 -4h6a4 4 0 0 1 4 4v3M6 19v2M18 19v2",
  "arrow-left": "M5 12l14 0M5 12l6 6M5 12l6 -6",
  "layout-dashboard": "M4 4h6v8h-6zM14 4h6v5h-6zM14 13h6v7h-6zM4 16h6v4h-6z",
  "corner-down-left": "M18 6v6a3 3 0 0 1 -3 3h-10l4 -4M9 19l-4 -4",
};

const TI = ({ n, size = 18, color, strokeWidth = 2 }) => {
  const d = ICON_PATHS[n];
  if (!d) return <span style={{ width: size, height: size, display: "inline-block" }} />;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color || "currentColor"} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, display: "inline-block", verticalAlign: "middle" }}>
      <path d={d} />
    </svg>
  );
};

// -------- Button --------
function Button({ children, variant = "primary", size = "md", icon, style, ...rest }) {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 6,
    border: "1px solid transparent", borderRadius: 6, cursor: "pointer",
    fontFamily: "var(--font-sans)", fontWeight: 500, letterSpacing: "0.25px",
    transition: "all .15s ease", whiteSpace: "nowrap",
  };
  const sizes = {
    sm: { padding: "4px 14px", fontSize: 13, lineHeight: "18px" },
    md: { padding: "8px 22px", fontSize: 15, lineHeight: "22px" },
    lg: { padding: "11px 24px", fontSize: 17, lineHeight: "26px" },
  };
  const variants = {
    primary: { background: "#7367F0", color: "#fff", boxShadow: "0 2px 4px 0 rgba(115,103,240,.3)" },
    tonal:   { background: "rgba(115,103,240,.16)", color: "#7367F0" },
    outline: { background: "transparent", color: "#7367F0", borderColor: "rgba(115,103,240,.5)" },
    text:    { background: "transparent", color: "#7367F0" },
    success: { background: "#28C76F", color: "#fff", boxShadow: "0 2px 4px 0 rgba(40,199,111,.3)" },
    error:   { background: "#FF4C51", color: "#fff", boxShadow: "0 2px 4px 0 rgba(255,76,81,.3)" },
  };
  const hoverBg = {
    primary: "#685DE0",
    tonal:   "rgba(115,103,240,.24)",
    outline: "rgba(115,103,240,.08)",
    text:    "rgba(115,103,240,.08)",
    success: "#24B163",
    error:   "#E54248",
  };
  const restEnter = rest.onMouseEnter, restLeave = rest.onMouseLeave;
  return (
    <button {...rest} style={{ ...base, ...sizes[size], ...variants[variant], ...style }}
      onMouseEnter={(e) => { if (!rest.disabled) e.currentTarget.style.background = hoverBg[variant]; if (restEnter) restEnter(e); }}
      onMouseLeave={(e) => { e.currentTarget.style.background = variants[variant].background; if (restLeave) restLeave(e); }}
    >
      {icon && <TI n={icon} size={16} />}
      {children}
    </button>
  );
}

function IconButton({ icon, size = 38, onClick, style, badge }) {
  return (
    <button onClick={onClick} style={{
      width: size, height: size, borderRadius: 6, border: "none",
      background: "transparent", cursor: "pointer", position: "relative",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      color: "rgba(47,43,61,0.7)", transition: "background .15s ease",
      ...style,
    }}
    onMouseEnter={e => e.currentTarget.style.background = "rgba(47,43,61,0.06)"}
    onMouseLeave={e => e.currentTarget.style.background = "transparent"}
    >
      <TI n={icon} size={22} />
      {badge && <span style={{
        position: "absolute", top: 8, right: 8, width: 8, height: 8,
        borderRadius: "50%", background: "#FF4C51", border: "1.5px solid #fff",
      }} />}
    </button>
  );
}

// -------- Avatar --------
function Avatar({ initials = "JD", size = 38, color = "#7367F0", tonal = false, status, square, style }) {
  const bg = tonal ? `${color}29` : color;
  const fg = tonal ? color : "#fff";
  return (
    <span style={{
      width: size, height: size, borderRadius: square ? 6 : "50%",
      background: bg, color: fg, display: "inline-flex",
      alignItems: "center", justifyContent: "center", position: "relative",
      fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: size * 0.36,
      flexShrink: 0, ...style,
    }}>
      {initials}
      {status && <span style={{
        position: "absolute", bottom: 0, right: 0, width: 10, height: 10,
        borderRadius: "50%", background: status, border: "2px solid #fff",
      }} />}
    </span>
  );
}

// -------- Chip --------
function Chip({ children, color = "#7367F0", variant = "tonal" }) {
  const styles = variant === "tonal"
    ? { background: `${color}29`, color }
    : { background: color, color: "#fff" };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 10px", borderRadius: 4,
      fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: "20px",
      ...styles,
    }}>{children}</span>
  );
}

// -------- Stat Card --------
function StatCard({ icon, iconColor = "#7367F0", label, value, delta, deltaPositive = true }) {
  return (
    <div style={{
      background: "#fff", borderRadius: 6, padding: 20,
      boxShadow: "0 2px 4px rgba(165,163,174,.3)",
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 8, marginBottom: 14,
        background: `${iconColor}29`, color: iconColor,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <TI n={icon} size={22} />
      </div>
      <div style={{ fontSize: 13, lineHeight: "18px", color: "rgba(47,43,61,0.7)" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 4 }}>
        <div style={{ fontSize: 24, fontWeight: 500, color: "var(--text-primary)", lineHeight: "38px" }}>{value}</div>
        <span style={{ fontSize: 13, fontWeight: 500, color: deltaPositive ? "#28C76F" : "#FF4C51" }}>
          {deltaPositive ? "↑" : "↓"} {delta}
        </span>
      </div>
    </div>
  );
}

// -------- Section Card --------
function SectionCard({ title, subtitle, action, children, style }) {
  return (
    <div style={{
      background: "#fff", borderRadius: 6,
      boxShadow: "0 2px 4px rgba(165,163,174,.3)",
      display: "flex", flexDirection: "column", ...style,
    }}>
      <div style={{
        display: "flex", alignItems: "flex-start", justifyContent: "space-between",
        gap: 16, padding: "20px 24px", borderBottom: "1px solid var(--divider)",
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 18, lineHeight: "28px", fontWeight: 500, color: "var(--text-primary)" }}>{title}</div>
          {subtitle && <div style={{ fontSize: 13, lineHeight: "20px", color: "var(--text-secondary)", marginTop: 2 }}>{subtitle}</div>}
        </div>
        <div style={{ flexShrink: 0 }}>{action}</div>
      </div>
      <div style={{ padding: 24, flex: 1 }}>{children}</div>
    </div>
  );
}

// -------- Sidebar --------
function Sidebar({ active, onNavigate }) {
  const items = [
    { g: "DASHBOARDS", items: [
      { id: "crm", icon: "smart-home", label: "CRM" },
      { id: "analytics", icon: "chart-bar", label: "Analytics", badge: "Hot" },
      { id: "ecommerce", icon: "shopping-cart", label: "eCommerce" },
    ]},
    { g: "APPS & PAGES", items: [
      { id: "email", icon: "mail", label: "Email" },
      { id: "chat", icon: "message-circle", label: "Chat" },
      { id: "calendar", icon: "calendar", label: "Calendar" },
      { id: "invoice", icon: "file-invoice", label: "Invoice" },
      { id: "users", icon: "users", label: "Users" },
      { id: "roles", icon: "shield-lock", label: "Roles & Permissions" },
    ]},
    { g: "OTHERS", items: [
      { id: "settings", icon: "settings", label: "Account Settings" },
      { id: "help", icon: "help-circle", label: "FAQ" },
    ]},
  ];

  return (
    <aside style={{
      width: 260, background: "#fff", borderRight: "1px solid var(--divider)",
      display: "flex", flexDirection: "column", flexShrink: 0, height: "100vh",
      position: "sticky", top: 0,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "20px 20px 16px" }}>
        <img src="/static/design-v2/assets/vuexy-logo.svg" width="30" height="22" alt="" />
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.5px", color: "var(--text-primary)" }}>Vuexy</span>
      </div>
      <nav style={{ flex: 1, overflowY: "auto", padding: "8px 14px 20px" }}>
        {items.map((section, si) => (
          <div key={si} style={{ marginBottom: 14 }}>
            <div style={{
              padding: "8px 14px", fontSize: 12, fontWeight: 400, letterSpacing: "0.8px",
              color: "rgba(47,43,61,0.5)",
            }}>{section.g}</div>
            {section.items.map(it => {
              const isActive = active === it.id;
              return (
                <a key={it.id} onClick={() => onNavigate(it.id)} style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "9px 14px", borderRadius: 6, cursor: "pointer",
                  color: isActive ? "#fff" : "var(--text-primary)",
                  background: isActive ? "linear-gradient(270deg,#7367F0 0%,#9E95F5 100%)" : "transparent",
                  boxShadow: isActive ? "0 2px 4px rgba(115,103,240,.3)" : "none",
                  marginBottom: 2, transition: "background .15s",
                  fontSize: 15, lineHeight: "22px", fontWeight: isActive ? 500 : 400,
                }}
                onMouseEnter={e => !isActive && (e.currentTarget.style.background = "rgba(47,43,61,0.06)")}
                onMouseLeave={e => !isActive && (e.currentTarget.style.background = "transparent")}
                >
                  <TI n={it.icon} size={20} />
                  <span style={{ flex: 1 }}>{it.label}</span>
                  {it.badge && <span style={{
                    background: "#FF4C51", color: "#fff", fontSize: 11, fontWeight: 500,
                    padding: "0 6px", borderRadius: 10, lineHeight: "18px",
                  }}>{it.badge}</span>}
                </a>
              );
            })}
          </div>
        ))}
      </nav>
    </aside>
  );
}

// -------- Navbar --------
function Navbar({ onOpenSearch, onToggleTheme, theme }) {
  return (
    <div style={{
      position: "sticky", top: 0, zIndex: 10,
      background: "rgba(248,247,250,0.85)", backdropFilter: "blur(20px)",
      borderBottom: "1px solid var(--divider)", padding: "10px 24px",
      display: "flex", alignItems: "center", gap: 12,
      boxShadow: "0 4px 10px -4px rgba(47,43,61,.06)",
    }}>
      <button onClick={onOpenSearch} style={{
        display: "flex", alignItems: "center", gap: 8, padding: "0 14px",
        height: 38, background: "transparent", border: "none", cursor: "pointer",
        color: "rgba(47,43,61,0.7)", fontFamily: "var(--font-sans)", fontSize: 15,
      }}>
        <TI n="search" size={20} />
        <span style={{ color: "rgba(47,43,61,0.4)" }}>Search</span>
        <kbd style={{
          padding: "1px 6px", background: "rgba(47,43,61,0.08)", borderRadius: 4,
          fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-secondary)",
        }}>⌘K</kbd>
      </button>
      <div style={{ flex: 1 }} />
      <IconButton icon="language" />
      <IconButton icon={theme === "dark" ? "sun" : "moon-stars"} onClick={onToggleTheme} />
      <IconButton icon="apps" />
      <IconButton icon="bell" badge />
      <Avatar initials="JD" status="#28C76F" size={38} />
    </div>
  );
}

// -------- Data Table --------
function DataTable({ columns, rows }) {
  return (
    <div style={{ overflow: "hidden", borderRadius: 6, border: "1px solid var(--divider)" }}>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead>
          <tr style={{ background: "rgba(47,43,61,0.04)" }}>
            {columns.map(c => (
              <th key={c.key} style={{
                textAlign: "left", padding: "12px 20px",
                fontSize: 11, fontWeight: 500, letterSpacing: "0.5px", textTransform: "uppercase",
                color: "var(--text-secondary)", borderBottom: "1px solid var(--divider)",
              }}>{c.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} style={{ borderBottom: i < rows.length - 1 ? "1px solid var(--divider)" : "none" }}>
              {columns.map(c => (
                <td key={c.key} style={{ padding: "14px 20px", fontSize: 15, lineHeight: "22px", color: "var(--text-primary)" }}>
                  {c.render ? c.render(r) : r[c.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// -------- Search Palette --------
function SearchPalette({ onClose }) {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(47,43,61,0.5)",
      zIndex: 50, display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: 100,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 560, background: "#fff", borderRadius: 10,
        boxShadow: "0 10px 24px -4px rgba(58,53,65,.3)", overflow: "hidden",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--divider)" }}>
          <TI n="search" size={20} color="rgba(47,43,61,0.5)" />
          <input autoFocus placeholder="Search or type a command…" style={{
            flex: 1, border: "none", outline: "none", fontFamily: "var(--font-sans)",
            fontSize: 15, color: "var(--text-primary)", background: "transparent",
          }} />
          <kbd style={{ padding: "1px 6px", background: "rgba(47,43,61,0.08)", borderRadius: 4, fontSize: 11, fontFamily: "var(--font-mono)" }}>ESC</kbd>
        </div>
        <div style={{ padding: 8 }}>
          <div style={{ padding: "6px 12px", fontSize: 12, fontWeight: 400, letterSpacing: "0.8px", color: "var(--text-secondary)" }}>RECENT</div>
          {[
            { i: "user", l: "John Doe", s: "Customer · Premium" },
            { i: "file-invoice", l: "Invoice #INV-2845", s: "$1,284.00 · Paid" },
            { i: "settings", l: "Account settings", s: "Page" },
          ].map((r, idx) => (
            <div key={idx} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: 6, cursor: "pointer" }}
              onMouseEnter={e => e.currentTarget.style.background = "rgba(47,43,61,0.06)"}
              onMouseLeave={e => e.currentTarget.style.background = "transparent"}
            >
              <TI n={r.i} size={20} color="rgba(47,43,61,0.6)" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, color: "var(--text-primary)" }}>{r.l}</div>
                <div style={{ fontSize: 13, color: "var(--text-secondary)" }}>{r.s}</div>
              </div>
              <TI n="corner-down-left" size={16} color="rgba(47,43,61,0.5)" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Sparkline placeholder
function Sparkline({ color = "#7367F0", data = [20, 30, 25, 40, 28, 55, 42, 60], height = 40 }) {
  const w = 120;
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((d, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = height - ((d - min) / (max - min || 1)) * height;
    return `${x},${y}`;
  }).join(" ");
  return (
    <svg width={w} height={height}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, {
  Button, IconButton, Avatar, Chip, StatCard, SectionCard,
  Sidebar, Navbar, DataTable, SearchPalette, Sparkline, TI,
});
