/* eslint-disable */
/* =============================================================
   EmptyChartState — "no chart yet" state (cosmic, on-brand)
   -------------------------------------------------------------
   Shown on the main chart pages when there is no active/computed
   chart. Left: a faint ghost bodygraph (silhouette + dashed
   centers + faint channels, no data). Right: a focused CTA panel
   to create / enter birth data / import a saved chart.
   Reuses .state-* tokens from states.css.
   Props: lang, onRoute
   ============================================================= */

// faint, data-less bodygraph used as the empty-state illustration
function GhostBodygraph() {
  const VB = window.BG_VIEWBOX || "0 0 1000 1250";
  const centers = window.BG_CENTERS || [];
  const channels = window.BG_CHANNELS || [];
  const sil = window.BG_SILHOUETTE_PATH || "";
  const pts = (c) => {
    const { shape, x, y, w, h } = c;
    if (shape === "poly") return c.pts.map((p) => `${p[0]},${p[1]}`).join(" ");
    if (shape === "tri-up") return `${x + w / 2},${y} ${x + w},${y + h} ${x},${y + h}`;
    if (shape === "tri-down") return `${x},${y} ${x + w},${y} ${x + w / 2},${y + h}`;
    if (shape === "tri-right") return `${x},${y} ${x + w},${y + h * 0.5} ${x},${y + h}`;
    if (shape === "tri-left") return `${x + w},${y} ${x + w},${y + h} ${x},${y + h * 0.5}`;
    if (shape === "diamond") return `${x + w / 2},${y} ${x + w},${y + h / 2} ${x + w / 2},${y + h} ${x},${y + h / 2}`;
    return null;
  };
  return (
    <svg className="ghost-bg" viewBox={VB} preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {sil && <path d={sil} fill="rgba(138,92,255,0.05)" stroke="rgba(138,92,255,0.22)" strokeWidth="1.4" />}
      <g>
        {channels.map((ch, i) => (
          <path key={i} d={ch[2]} fill="none" stroke="rgba(150,165,235,0.10)" strokeWidth="2.4" strokeLinecap="round" />
        ))}
      </g>
      <g>
        {centers.map((c) => {
          const common = { fill: "rgba(20,26,48,0.35)", stroke: "rgba(165,180,230,0.34)", strokeWidth: 1.4, strokeDasharray: "6 4" };
          return c.shape === "square"
            ? <rect key={c.id} x={c.x} y={c.y} width={c.w} height={c.h} rx={10} {...common} />
            : <polygon key={c.id} points={pts(c)} {...common} />;
        })}
      </g>
    </svg>
  );
}

window.GhostBodygraph = GhostBodygraph;

window.EmptyChartState = function EmptyChartState({ lang = "ar", onRoute }) {
  const ar = lang === "ar";
  const go = (r) => onRoute && onRoute(r);
  const T = ar
    ? { title: "لا توجد خريطة جاهزة بعد",
        sub: "لم يتم إنشاء أي خريطة حتى الآن. ابدأ رحلتك في اكتشاف تصميمك الفريد من خلال إدخال بيانات ميلادك.",
        create: "إنشاء خريطتي", enter: "إدخال بيانات الميلاد", or: "أو",
        importc: "استيراد خريطة محفوظة", privacy: "بياناتك آمنة وخاصة ولن تتم مشاركتها مع أي طرف ثالث." }
    : { title: "No chart ready yet",
        sub: "No chart has been created yet. Begin your journey of discovering your unique design by entering your birth data.",
        create: "Create my chart", enter: "Enter birth data", or: "or",
        importc: "Import a saved chart", privacy: "Your data is private and secure — never shared with any third party." };

  return (
    <div className="empty-state" data-screen-label="state empty-chart">
      <div className="empty-ghost">
        <GhostBodygraph />
        <div className="empty-ghost-glow" />
      </div>

      <div className="empty-panel">
        <div className="empty-icon">{window.Icon && <Icon.guide size={26} />}</div>
        <h1 className="empty-title">{T.title}</h1>
        <p className="empty-sub">{T.sub}</p>

        <button className="empty-btn primary" onClick={() => go("create")}>
          <span>{T.create}</span><span className="empty-btn-ic">+</span>
        </button>
        <button className="empty-btn" onClick={() => go("create")}>
          <span>{T.enter}</span>{window.Icon && <Icon.calendar size={16} />}
        </button>

        <div className="empty-or"><span>{T.or}</span></div>

        <button className="empty-btn ghost" onClick={() => go("charts")}>
          <span>{T.importc}</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M7 18a4 4 0 0 1-.5-7.97A5.5 5.5 0 0 1 17 9.5a3.5 3.5 0 0 1 .5 6.97" />
            <path d="M12 12v8M9 15l3-3 3 3" />
          </svg>
        </button>

        <p className="empty-privacy">{window.Icon && <Icon.lock size={13} />}<span>{T.privacy}</span></p>
      </div>
    </div>
  );
};