// ui.jsx — shared UI primitives for Nada's System
const { useState, useEffect, useRef } = React;

/* ---------- Icon set (simple line icons) ---------- */
const I = {
  leaf: <path d="M11 20C5 18 4 11 6 5c6 0 12 1 13 8 .6 5-3 8-8 7zm-5-1c4-4 7-6 11-7" />,
  pulse: <path d="M3 12h4l2-6 4 12 2-6h6" />,
  home: <path d="M4 11l8-7 8 7M6 9.5V20h12V9.5" />,
  calendar: <g><rect x="4" y="5" width="16" height="16" rx="3" /><path d="M4 9.5h16M8 3v4M16 3v4" /></g>,
  cases: <g><path d="M5 4h10l4 4v12H5z" /><path d="M14 4v4h4M8.5 13h7M8.5 16.5h7" /></g>,
  chat: <path d="M5 5h14v11H9l-4 4V5z" />,
  gear: <g><circle cx="12" cy="12" r="3.2" /><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8" /></g>,
  search: <g><circle cx="11" cy="11" r="6.5" /><path d="M16 16l4 4" /></g>,
  logout: <path d="M14 4h4a2 2 0 012 2v12a2 2 0 01-2 2h-4M9 16l-4-4 4-4M5 12h11" />,
  plus: <path d="M12 5v14M5 12h14" />,
  note: <g><path d="M5 4h10l4 4v12H5z" /><path d="M9 12h6M9 16h4" /></g>,
  gift: <g><rect x="4" y="9" width="16" height="11" rx="2" /><path d="M4 13h16M12 9v11M12 9c-1-3-5-4-5-1.5C7 9.5 12 9 12 9zm0 0c1-3 5-4 5-1.5C17 9.5 12 9 12 9z" /></g>,
  refresh: <path d="M20 11a8 8 0 10-1 5m1 4v-5h-5" />,
  pause: <g><rect x="7" y="5" width="3.5" height="14" rx="1.2" /><rect x="13.5" y="5" width="3.5" height="14" rx="1.2" /></g>,
  check: <path d="M5 12.5l4.5 4.5L19 7" />,
  checkCircle: <g><circle cx="12" cy="12" r="9" /><path d="M8 12.2l2.8 2.8L16 9.5" /></g>,
  close: <path d="M6 6l12 12M18 6L6 18" />,
  star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L4.5 9.7l5.9-.9z" />,
  whatsapp: <path d="M12 3a9 9 0 00-7.7 13.6L3 21l4.5-1.2A9 9 0 1012 3z" />,
  instagram: <g><rect x="4" y="4" width="16" height="16" rx="5" /><circle cx="12" cy="12" r="3.6" /><circle cx="17" cy="7" r="1" /></g>,
  menu: <path d="M4 7h16M4 12h16M4 17h16" />,
  arrow: <path d="M14 6l-6 6 6 6" />,
  scale: <g><path d="M5 8h14l-2 11H7z" /><path d="M9.5 8a2.5 2.5 0 015 0" /></g>,
  weight: <path d="M7 8h10l1.5 12H5.5zM9 8a3 3 0 016 0" />,
  bell: <path d="M6 16V11a6 6 0 1112 0v5l2 3H4zM10 21h4" />,
  user: <g><circle cx="12" cy="8" r="4" /><path d="M5 20c1.5-4 4-6 7-6s5.5 2 7 6" /></g>,
  phone: <path d="M5 4h4l2 5-3 2a11 11 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" />,
  droplet: <path d="M12 3c4 5 6.5 8.2 6.5 11.5a6.5 6.5 0 01-13 0C5.5 11.2 8 8 12 3z" />,
  heart: <path d="M12 20s-7-4.4-7-10a3.8 3.8 0 017-2.4A3.8 3.8 0 0119 10c0 5.6-7 10-7 10z" />,
  apple: <g><path d="M12 8.5c-1.6-2.2-7-2.2-7 3.2 0 4.2 3 8.3 5 8.3.9 0 1.3-.5 2-.5s1.1.5 2 .5c2 0 5-4.1 5-8.3 0-5.4-5.4-5.4-7-3.2z" /><path d="M12 8.5c0-2 1-3.5 3-3.8" /></g>,
  sprout: <g><path d="M12 20v-7" /><path d="M12 13c0-3-2-5-6-5 0 4 3 5 6 5zM12 13c0-2.5 1.6-4.5 5-4.5 0 3.4-2.5 4.5-5 4.5z" /></g>,
  dumbbell: <g><path d="M4 9v6M7 7v10M17 7v10M20 9v6M7 12h10" /></g>,
};
function Icon({ name, className, style }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"
      strokeLinecap="round" strokeLinejoin="round" className={className} style={style}>
      {I[name] || null}
    </svg>
  );
}

/* ---------- Real brand glyphs (filled) ---------- */
const BRAND = {
  whatsapp: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z",
  instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
  facebook: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
};
function BrandIcon({ name, className, style }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={style}>
      <path d={BRAND[name]} />
    </svg>
  );
}

/* ---------- Logo (Nutrition Vibes) ---------- */
function Logo({ onClick, sub = true }) {
  return (
    <div className="logo" onClick={onClick} style={{ cursor: onClick ? "pointer" : "default", gap: 12 }}>
      <img src="assets/emblem.png" alt="Nutrition Vibes" className="nv-emblem" />
      <span className="nv-word">
        <span className="nv-main">Nutrition Vibes</span>
        {sub && <span className="nv-sub">Eat Right &amp; Eat Smart</span>}
      </span>
    </div>
  );
}
function Lockup({ width = 220, style }) {
  return <img src="assets/logo-full.png" alt="Nutrition Vibes — Dt. Nada Hassan Tawfik" className="nv-lockup" style={{ width, ...style }} />;
}

/* ---------- Stars ---------- */
function Stars({ value = 5, size }) {
  return (
    <span className="stars" style={size ? { } : null}>
      {[1, 2, 3, 4, 5].map((n) => (
        <svg key={n} viewBox="0 0 24 24" fill="currentColor"
          className={n <= value ? "star-on" : "star-off"}
          style={size ? { width: size, height: size } : null}>
          <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L4.5 9.7l5.9-.9z" />
        </svg>
      ))}
    </span>
  );
}
function StarInput({ value, onChange }) {
  const [hover, setHover] = useState(0);
  return (
    <span className="stars stars-input" onMouseLeave={() => setHover(0)}>
      {[1, 2, 3, 4, 5].map((n) => (
        <svg key={n} viewBox="0 0 24 24" fill="currentColor"
          className={n <= (hover || value) ? "star-on" : "star-off"}
          onMouseEnter={() => setHover(n)} onClick={() => onChange(n)}>
          <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L4.5 9.7l5.9-.9z" />
        </svg>
      ))}
    </span>
  );
}

/* ---------- Status pill ---------- */
function StatusPill({ status }) {
  const m = statusMeta(status);
  return <span className={`pill ${m.cls}`}><i className="dot" />{m.label}</span>;
}

/* ---------- Progress ring ---------- */
function Ring({ value, total, size = 132, stroke = 12 }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const pct = total ? value / total : 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: "scaleX(-1)" }}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--line)" strokeWidth={stroke} />
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--teal)" strokeWidth={stroke}
        strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - pct)}
        transform={`rotate(-90 ${size / 2} ${size / 2})`}
        style={{ transition: "stroke-dashoffset .7s cubic-bezier(.2,.8,.3,1)" }} />
    </svg>
  );
}

/* ---------- Weight sparkline / line chart ---------- */
function WeightChart({ weights, width = 460, height = 150 }) {
  if (!weights || weights.length < 2) {
    return <div className="muted" style={{ fontSize: 14 }}>مفيش بيانات وزن كفاية لرسم المنحنى.</div>;
  }
  const pad = { t: 22, r: 16, b: 28, l: 16 };
  const ws = weights.map((x) => x.w);
  const min = Math.min(...ws) - 1, max = Math.max(...ws) + 1;
  const iw = width - pad.l - pad.r, ih = height - pad.t - pad.b;
  // RTL: first reading on the right
  const pts = weights.map((x, i) => {
    const fx = pad.l + iw - (i / (weights.length - 1)) * iw;
    const fy = pad.t + ih - ((x.w - min) / (max - min)) * ih;
    return { x: fx, y: fy, ...x };
  });
  const line = pts.map((p, i) => `${i ? "L" : "M"}${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
  const area = `${line} L${pts[pts.length - 1].x} ${pad.t + ih} L${pts[0].x} ${pad.t + ih} Z`;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width="100%" style={{ display: "block", overflow: "visible" }}>
      <defs>
        <linearGradient id="wg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="rgba(47,158,143,.22)" />
          <stop offset="1" stopColor="rgba(47,158,143,0)" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#wg)" />
      <path d={line} fill="none" stroke="var(--teal)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="4.5" fill="#fff" stroke="var(--teal)" strokeWidth="2.4" />
          <text x={p.x} y={p.y - 12} textAnchor="middle" fontSize="12.5" fontWeight="700" fill="var(--ink)" className="num">{p.w}</text>
          <text x={p.x} y={pad.t + ih + 18} textAnchor="middle" fontSize="11" fill="var(--ink-3)">{p.d}</text>
        </g>
      ))}
    </svg>
  );
}

/* ---------- Placeholder image ---------- */
function Placeholder({ label, circle, style, className }) {
  return (
    <div className={`ph ${circle ? "ph-circle" : ""} ${className || ""}`} style={style}>
      <span>{label}</span>
    </div>
  );
}

/* ---------- Modal ---------- */
function Modal({ title, onClose, children, footer }) {
  useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3 style={{ fontSize: 20 }}>{title}</h3>
          <button className="icon-btn" onClick={onClose} aria-label="إغلاق"><Icon name="close" /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div style={{ padding: "0 24px 24px" }}>{footer}</div>}
      </div>
    </div>
  );
}

/* ---------- Toast ---------- */
function useToast() {
  const [toast, setToast] = useState(null);
  const show = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2600); };
  const node = toast ? (
    <div style={{
      position: "fixed", bottom: 28, insetInlineStart: "50%", transform: "translateX(50%)",
      background: "var(--ink)", color: "#fff", padding: "13px 22px", borderRadius: 14,
      boxShadow: "var(--shadow-lg)", fontWeight: 700, fontSize: 14.5, zIndex: 2000,
      display: "flex", alignItems: "center", gap: 10, animation: "pop .25s ease both",
    }}>
      <Icon name="checkCircle" style={{ width: 20, height: 20, color: "var(--mint)" }} />{toast}
    </div>
  ) : null;
  return [show, node];
}

Object.assign(window, {
  Icon, BrandIcon, Logo, Lockup, Stars, StarInput, StatusPill, Ring, WeightChart, Placeholder, Modal, useToast,
});