// ui.jsx — Composants UI réutilisables (icônes inline lucide-style + primitives).

// Icônes (inline SVG, stroke 1.6, taille param)
const Icon = ({ name, size = 16, color = "currentColor", strokeWidth = 1.7 }) => {
  const paths = {
    sun: <g><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></g>,
    battery: <g><rect x="2" y="7" width="16" height="10" rx="2"/><path d="M22 11v2"/><path d="M6 10v4M10 10v4M14 10v4"/></g>,
    zap: <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>,
    plug: <g><path d="M12 22v-5M9 8V3M15 8V3M5 12V8h14v4a7 7 0 0 1-14 0z"/></g>,
    eye: <g><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></g>,
    "eye-off": <g><path d="M17.94 17.94A10.97 10.97 0 0 1 12 19c-7 0-11-7-11-7a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19M1 1l22 22M9.88 9.88a3 3 0 0 0 4.24 4.24"/></g>,
    save: <g><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></g>,
    download: <g><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></g>,
    "file-text": <g><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></g>,
    receipt: <g><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2l-1 2-3-2-3 2-3-2-3 2-3-2z"/><path d="M8 7h8M8 11h8M8 15h6"/></g>,
    sparkles: <g><path d="M12 3l1.9 5.6L19 10l-5.1 1.4L12 17l-1.9-5.6L5 10l5.1-1.4z"/><path d="M19 4l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7zM5 17l.6 1.6 1.6.6-1.6.6L5 21.4l-.6-1.6-1.6-.6 1.6-.6z"/></g>,
    "check-circle": <g><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></g>,
    "alert-circle": <g><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h0"/></g>,
    "alert-triangle": <g><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h0"/></g>,
    cpu: <g><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></g>,
    home: <g><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></g>,
    settings: <g><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></g>,
    folder: <g><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></g>,
    users: <g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></g>,
    package: <g><path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/></g>,
    lock: <g><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>,
    coins: <g><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18M7 6h1v4M16.71 13.88l.7.71-2.82 2.82"/></g>,
    leaf: <g><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 9.3-3.6 15.5-8.2 17.04zM2 21c0-3 1.85-5.36 5.08-6"/></g>,
    timer: <g><circle cx="12" cy="14" r="8"/><path d="M12 14V9M9 2h6M5 5l2 2"/></g>,
    bolt: <path d="M14 2L4 14h6l-1 8 10-12h-6l1-8z" />,
    plus: <g><path d="M12 5v14M5 12h14"/></g>,
    minus: <path d="M5 12h14"/>,
    x: <g><path d="M18 6L6 18M6 6l12 12"/></g>,
    info: <g><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h0"/></g>,
    car: <g><path d="M5 17h14M5 17a2 2 0 1 1 0 2 2 2 0 0 1 0-2zM19 17a2 2 0 1 1 0 2 2 2 0 0 1 0-2zM3 13l2-5h14l2 5M3 13h18v4H3z"/></g>,
    "trending-up": <g><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></g>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] || <circle cx="12" cy="12" r="4"/>}
    </svg>
  );
};

// Logo Raycom placeholder (mark générique éclair bleu)
const RaycomLogo = ({ size = 28 }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <div style={{
      width: size, height: size, borderRadius: 7,
      background: "linear-gradient(135deg, #1a6fc4 0%, #0d4a8a 100%)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 1px 3px rgba(11,27,43,0.15)"
    }}>
      <svg width={size * 0.55} height={size * 0.65} viewBox="0 0 14 20" fill="none">
        <path d="M9 0L0 11.5h5.5L4 20l9-12h-5.5L9 0z" fill="white"/>
      </svg>
    </div>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
      <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--raycom-ink)" }}>RAYCOM</span>
      <span style={{ fontSize: 8.5, letterSpacing: "0.14em", color: "var(--raycom-ink-dim)", fontWeight: 600, textTransform: "uppercase" }}>Électrique</span>
    </div>
  </div>
);

// SectionBlock
const SectionBlock = ({ num, title, sub, children, action }) => (
  <div className="section">
    <div className="section-head">
      <div className="section-num">{num}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="section-title">{title}</div>
        {sub && <div className="section-sub">{sub}</div>}
      </div>
      {action}
    </div>
    {children}
  </div>
);

// Slider
const RCSlider = ({ value, min, max, step = 1, onChange, suffix = "", label, hint, warn, ticks }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div className="slider-wrap">
      {label && <div className="slider-hint"><span>{label}</span></div>}
      <div className="slider-row">
        <input
          type="range"
          className="rc-slider"
          min={min} max={max} step={step}
          value={value}
          onChange={(e) => onChange(parseFloat(e.target.value))}
          style={{ "--p": `${pct}%` }}
        />
        <div className="slider-val">{typeof value === "number" && step < 1 ? value.toFixed(1).replace(".", ",") : value}{suffix}</div>
      </div>
      {ticks && (
        <div className="slider-ticks">
          {ticks.map((t, i) => <span key={i}>{t}</span>)}
        </div>
      )}
      {hint && <div className="slider-hint">{hint}</div>}
      {warn && (
        <div className="slider-warn">
          <Icon name="alert-triangle" size={12} />
          <span>{warn}</span>
        </div>
      )}
    </div>
  );
};

// Segmented Toggle
const SegmentedToggle = ({ value, options, onChange, accent = false }) => (
  <div className={`seg ${accent ? "accent" : ""}`}>
    {options.map(opt => (
      <button
        key={opt.value}
        className={value === opt.value ? "active" : ""}
        onClick={() => onChange(opt.value)}
      >
        {opt.icon && <Icon name={opt.icon} size={13} />}
        {opt.label}
      </button>
    ))}
  </div>
);

// Picker card (generic)
const PickerCard = ({ active, disabled, onClick, icon, title, sub, badge, extra, className = "" }) => (
  <button
    className={`pcard ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${className}`}
    onClick={disabled ? null : onClick}
    type="button"
  >
    {badge && <div style={{ position: "absolute", top: 8, right: 8 }}>{badge}</div>}
    {icon && <div className="pcard-icon"><Icon name={icon} size={16} /></div>}
    <div className="pcard-title">{title}</div>
    {sub && <div className="pcard-sub">{sub}</div>}
    {extra}
  </button>
);

// Donut for KPI
const Donut = ({ pct = 0, size = 36, color = "var(--raycom-accent)" }) => {
  const r = (size - 6) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - Math.min(1, pct / 100));
  return (
    <svg className="donut" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--raycom-surface-2)" strokeWidth="4" />
      <circle
        cx={size/2} cy={size/2} r={r}
        fill="none" stroke={color} strokeWidth="4"
        strokeDasharray={c}
        strokeDashoffset={offset}
        strokeLinecap="round"
        transform={`rotate(-90 ${size/2} ${size/2})`}
      />
    </svg>
  );
};

// Tabs/badges
const Badge = ({ kind = "blue", children, icon }) => (
  <span className={`badge ${kind}`}>
    {icon && <Icon name={icon} size={10} />}
    {children}
  </span>
);

// Export to window
Object.assign(window, { Icon, RaycomLogo, SectionBlock, RCSlider, SegmentedToggle, PickerCard, Donut, Badge });