// Projects grid + Project Detail Overlay
function NetworkCover({ small = false }) {
  // Generates an SVG network graph cover suggesting the project's content
  const nodes = React.useMemo(() => {
    const seed = 7;
    let s = seed;
    const rnd = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    const arr = [];
    const clusters = [
      { cx: 220, cy: 140, n: 9, r: 80 },
      { cx: 540, cy: 100, n: 7, r: 60 },
      { cx: 720, cy: 220, n: 8, r: 70 },
      { cx: 360, cy: 230, n: 6, r: 50 },
    ];
    clusters.forEach((c, ci) => {
      for (let i = 0; i < c.n; i++) {
        const a = rnd() * Math.PI * 2;
        const r = rnd() * c.r;
        arr.push({
          x: c.cx + Math.cos(a) * r,
          y: c.cy + Math.sin(a) * r,
          cluster: ci,
          r: 2 + rnd() * 4,
        });
      }
    });
    return arr;
  }, []);

  const edges = React.useMemo(() => {
    const e = [];
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        if (nodes[i].cluster === nodes[j].cluster && Math.random() > 0.55) {
          e.push([i, j]);
        }
      }
    }
    // inter-cluster
    for (let k = 0; k < 4; k++) {
      const a = Math.floor(Math.random() * nodes.length);
      const b = Math.floor(Math.random() * nodes.length);
      e.push([a, b]);
    }
    return e;
  }, [nodes]);

  return (
    <svg viewBox="0 0 900 320" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="oklch(0.38 0.14 18)" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="oklch(0.38 0.14 18)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      {edges.map(([a, b], i) => (
        <line
          key={i}
          x1={nodes[a].x} y1={nodes[a].y}
          x2={nodes[b].x} y2={nodes[b].y}
          stroke="oklch(0.38 0.14 18)"
          strokeOpacity={0.25}
          strokeWidth="1"
        />
      ))}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r={n.r + 6} fill="url(#halo)" opacity="0.5"/>
          <circle cx={n.x} cy={n.y} r={n.r} fill="oklch(0.38 0.14 18)" />
        </g>
      ))}
    </svg>
  );
}

function ProjectCard({ p, lang, t, onOpen }) {
  return (
    <article className="project-card" onClick={() => onOpen(p)}>
      <div className="pc-head">
        <span>{p.year}</span>
        <span className="pc-status">
          <span className="pulse"></span>
          {p.status[lang]}
        </span>
      </div>
      <div className="pc-cover">
        <div className="grid-fx"></div>
        <NetworkCover />
      </div>
      <h3 className="pc-title">{p.title[lang]}</h3>
      <p className="pc-sub">{p.subtitle[lang]}</p>
      <div className="pc-tags">
        {p.stack.slice(0, 6).map((s, i) => (
          <span key={i} className="tag">{s}</span>
        ))}
        {p.stack.length > 6 && (
          <span className="tag">+{p.stack.length - 6}</span>
        )}
      </div>
      <div className="pc-foot">
        <span className="open-label">{t.projects.open} →</span>
        <span className="pc-arrow">→</span>
      </div>
    </article>
  );
}

function Projects({ t, lang, onOpen }) {
  return (
    <section id="projects">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">{t.projects.kicker}</span>
          <Reveal as="h2">{t.projects.title}</Reveal>
          <Reveal as="p" delay={80}>{t.projects.sub}</Reveal>
        </div>

        <div className="projects-grid">
          {window.PROJECTS_DATA.map((p, i) => (
            <Reveal key={p.id} delay={i * 80}>
              <ProjectCard p={p} lang={lang} t={t} onOpen={onOpen} />
            </Reveal>
          ))}
          <Reveal delay={(window.PROJECTS_DATA.length) * 80}>
            <div className="project-card soon">
              <div className="plus">+</div>
              <div className="label">{t.projects.soon}</div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ProjectDetail({ p, lang, t, onClose }) {
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.scrollTo({ top: 0, behavior: "auto" });
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [onClose]);

  const sec = p.sections;
  const closeLabel = lang === "pt" ? "Voltar" : "Back";

  return (
    <div className="proj-overlay">
      <div className="proj-bar">
        <div className="breadcrumb">
          <span>{lang === "pt" ? "Projetos" : "Projects"}</span>
          <span> / </span>
          <span className="acc">{p.title[lang]}</span>
        </div>
        <button className="close" onClick={onClose}>
          <span>← ESC</span>
          <span style={{ color: "var(--text-3)" }}>{closeLabel}</span>
        </button>
      </div>

      <div className="proj-hero">
        <div className="meta">
          <span className="status">● {p.status[lang]}</span>
          <span>{p.year}</span>
          <span>{p.role[lang]}</span>
          <span>{p.timeline[lang]}</span>
        </div>
        <h1>{p.title[lang]}</h1>
        <p className="subtitle">{p.subtitle[lang]}</p>
        {p.demo && (
          <div className="proj-cta">
            {p.demo.url ? (
              <a className="demo-btn" href={p.demo.url} target="_blank" rel="noopener">
                <span className="demo-pulse"></span>
                {p.demo.label[lang]}
                <span className="demo-arr">↗</span>
              </a>
            ) : (
              <span className="demo-btn disabled">{p.demo.soon[lang]}</span>
            )}
            <span className="demo-note mono">{p.demo.note[lang]}</span>
          </div>
        )}
      </div>

      <div className="proj-cover">
        <div className="grid-fx"></div>
        <NetworkCover />
      </div>

      <div className="proj-body">
        <aside className="proj-side">
          <div>
            <h4>{lang === "pt" ? "Resumo" : "Summary"}</h4>
            <p style={{ color: "var(--text-2)", fontSize: 15, lineHeight: 1.55 }}>{p.summary[lang]}</p>
          </div>
          <div>
            <h4>Stack</h4>
            <div className="stack">
              {p.stack.map((s, i) => <span key={i} className="tag">{s}</span>)}
            </div>
          </div>
          <div>
            <h4>Links</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {p.demo && p.demo.url && (
                <a className="mono" style={{ color: "var(--acc)", fontSize: 13 }}
                   href={p.demo.url} target="_blank" rel="noopener">
                  ↗ {lang === "pt" ? "dashboard ao vivo" : "live dashboard"}
                </a>
              )}
              {p.repo && (
                <a className="mono" style={{ color: "var(--acc)", fontSize: 13 }}
                   href={p.repo} target="_blank" rel="noopener">
                  ↗ github
                </a>
              )}
            </div>
          </div>
        </aside>

        <div className="proj-content">
          <div className="proj-metrics">
            {p.metrics.map((m, i) => (
              <div key={i} className="m">
                <div className="mn">{m[lang][1]}</div>
                <div className="ml">{m[lang][0]}</div>
              </div>
            ))}
          </div>

          {Object.values(sec).map((s, i) => (
            <div key={i} className="proj-sec">
              <h3>{s.title[lang]}</h3>
              <p>{s.body[lang]}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Projects, ProjectDetail, NetworkCover });