/* global React, K */

const { useEffect, useRef, useState } = React;

function Panel({ label, title, children, onOpen, span, className = "" }) {
  return (
    <section
      className={`panel ${span ? `span-${span}` : ""} ${onOpen ? "clickable" : ""} ${className}`}
      onClick={onOpen}
      tabIndex={onOpen ? 0 : -1}
      onKeyDown={onOpen ? (e) => (e.key === "Enter" || e.key === " ") && onOpen() : undefined}
      role={onOpen ? "button" : undefined}
    >
      <div className="panel-head">
        <span className="panel-label mono">// {label}</span>
        {title && <span className="panel-title mono">{title}</span>}
        {onOpen && <span className="panel-open mono">expand →</span>}
      </div>
      <div className="panel-body">{children}</div>
      <span className="brk-corner brk-tl" /><span className="brk-corner brk-tr" />
      <span className="brk-corner brk-bl" /><span className="brk-corner brk-br" />
    </section>
  );
}

const Tags = ({ items, cap }) => (
  <div className="tags-row">
    {(cap ? items.slice(0, cap) : items).map((t) => (
      <span key={t} className="pill">{t}</span>
    ))}
  </div>
);

const Pulse = () => <span className="pulse" />;
const Status = ({ children }) => <span className="status-pill"><Pulse />{children}</span>;

function HUDLanding({ open }) {
  return (
    <div className="hud-grid">
      <Panel label="IDENTITY · 01" span="2" onOpen={() => open("identity")}>
        <div className="hero-row">
          <div>
            <div className="kicker mono">// hello, i am</div>
            <h1 className="hero-name">{K.name}</h1>
            <div className="hero-role mono">{K.role}</div>
          </div>
          <Status>{K.status}</Status>
        </div>
        <p className="hero-tag">{K.tagline}</p>
        <div className="hero-stats">
          {K.stats.map((s) => (
            <div key={s.k} className="hero-stat">
              <div className="hero-stat-v mono">{s.v}</div>
              <div className="hero-stat-k mono">{s.k}</div>
            </div>
          ))}
        </div>
      </Panel>

      <Panel label="NOW · MAY 2026" onOpen={() => open("identity")}>
        <ul className="now-list">
          {K.now.map((n, i) => (
            <li key={i}><span className="accent mono">▸</span> {n}</li>
          ))}
        </ul>
      </Panel>

      <Panel label={`WORK · 0${K.work.length}`} onOpen={() => open("work")}>
        {K.work.slice(0, 2).map((w, i) => (
          <div key={i} className="mini-work">
            <div className="mini-work-who">{w.who}</div>
            <div className="mono small dim">{w.title}</div>
            <div className="mono small accent">{w.since}</div>
          </div>
        ))}
      </Panel>

      <Panel label={`VENTURES · 0${K.ventures.length}`} span="2" onOpen={() => open("ventures")}>
        <div className="ven-mini-grid">
          {K.ventures.slice(0, 6).map((v) => (
            <div key={v.name} className="ven-mini">
              <div className="ven-mini-name">{v.name}</div>
              <div className="mono small dim">{v.sector} · {v.loc}</div>
            </div>
          ))}
        </div>
      </Panel>

      <Panel label={`PORTFOLIO · ${K.portfolio.length} PROJECTS`} span="3" onOpen={() => open("portfolio")}>
        <div className="portfolio-mini-grid">
          {K.portfolio.slice(0, 4).map((p, i) => (
            <div key={p.id} className="portfolio-mini">
              <div className="mono small dim">{String(i + 1).padStart(2, "0")} · {p.year}</div>
              <div className="portfolio-mini-title">{p.title}</div>
              <div className="mono small accent">{p.client}</div>
            </div>
          ))}
        </div>
      </Panel>

      <Panel label="WRITING" span="3" onOpen={() => open("writing")}>
        <ul className="mini-writes wide">
          {K.writing.slice(0, 4).map((w, i) => (
            <li key={i}>
              <span className="mono small dim">{w.date}</span>
              <span className="mini-write-title">{w.title}</span>
              <span className="mono small dim">{w.read} · #{w.tag}</span>
            </li>
          ))}
        </ul>
      </Panel>

      <Panel label="STACK" span="3" onOpen={() => open("stack")}>
        <Tags items={[...K.stack["Power Platform"], ...K.stack["Microsoft Cloud"].slice(0, 3), ...K.stack["Code"].slice(0, 3)]} cap={14} />
        <div className="cert-row mono small">
          certs · {K.certs.map((c) => <span key={c.id} className="accent">{c.id} </span>)}
        </div>
      </Panel>

      <Panel label="CONTACT" span="3" onOpen={() => open("contact")}>
        <div className="contact-hud-row">
          <div className="contact-hud-l">
            <div className="mono small dim" style={{marginBottom: 4}}>// direct</div>
            <div className="mono contact-email accent">{K.email}</div>
          </div>
          <ul className="mono small contact-socials-row">
            {K.socials.map((s) => (
              <li key={s.label}><span className="accent">{s.label}</span> <span className="dim">{s.handle}</span></li>
            ))}
          </ul>
        </div>
      </Panel>
    </div>
  );
}

function IdentityView() {
  return (
    <div className="detail two-col">
      <Panel label="PORTRAIT" className="portrait-panel">
        <div className="portrait">
          <div className="portrait-frame">
            {K.photo ? (
              <img src={K.photo} alt={K.name} style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0, zIndex: 1 }} />
            ) : (
              <div className="portrait-glyph">K</div>
            )}
            <div className="portrait-label mono small" style={{ zIndex: 2 }}>[ photo · k.dadzie.jpg ]</div>
          </div>
          <div className="portrait-meta mono small">
            <div>name · {K.name}</div>
            <div>loc  · {K.location}</div>
            <div className="accent"><Pulse />{K.status}</div>
          </div>
        </div>
      </Panel>

      <div className="stack-col">
        <Panel label="BIO">
          {K.bio.map((p, i) => <p key={i} className="bio-p">{p}</p>)}
        </Panel>

        <Panel label="STATS">
          <div className="stat-grid">
            {K.stats.map((s) => (
              <div key={s.k} className="stat-cell">
                <div className="stat-v mono">{s.v}</div>
                <div className="stat-k mono small">{s.k}</div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel label="NOW · CURRENT FOCUS">
          <ul className="now-list">
            {K.now.map((n, i) => <li key={i}><span className="accent mono">▸</span> {n}</li>)}
          </ul>
        </Panel>
      </div>
    </div>
  );
}


function WorkView() {
  return (
    <div className="detail">
      <Panel label={`WORK · ${K.work.length} ROLES`}>
        <div className="timeline">
          {K.work.map((w, i) => (
            <div key={i} className="tl-item">
              <div className="tl-marker">
                <div className="tl-dot" />
                <div className="tl-line" />
              </div>
              <div>
                <div className="tl-head">
                  <span className="tl-who">{w.who}</span>
                  <span className="tl-since mono">{w.since}</span>
                </div>
                <div className="mono small dim">{w.via}</div>
                <p className="tl-sum">{w.summary}</p>
                <div className="tags-row">
                  {w.tags.map((t) => <span key={t} className="pill mono">{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Panel>
      <Panel label="RESUME">
        <div className="resume-row">
          <span className="mono small dim">Available on request · kobinadadzie16@gmail.com</span>
          <a href={`mailto:${K.email}`} className="btn mono">request CV →</a>
        </div>
      </Panel>
    </div>
  );
}

function VenturesView() {
  return (
    <div className="detail">
      <Panel label={`PORTFOLIO · ${K.ventures.length} VENTURES`}>
        <div className="ven-grid-full">
          {K.ventures.map((v, i) => (
            <article key={v.name} className="ven-card">
              <div className="ven-card-num mono small">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="ven-card-name">{v.name}</h3>
              <div className="ven-card-meta mono small">
                <span className="dim">{v.sector}</span>
                <span className="dim">·</span>
                <span className="dim">{v.loc}</span>
                <span className="dim">·</span>
                <span className="accent">{v.year}</span>
              </div>
              <p className="ven-card-note">{v.note}</p>
              <div className="ven-card-foot mono small">
                <Status>{v.status}</Status>
              </div>
            </article>
          ))}
        </div>
      </Panel>
    </div>
  );
}

function stripHtml(htmlStr) {
  return htmlStr.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
}

function formatRssDate(pubDateStr) {
  const d = new Date(pubDateStr);
  if (isNaN(d)) return "";
  return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
}

function estimateReadTime(htmlStr) {
  const text = stripHtml(htmlStr);
  const words = text ? text.split(" ").length : 0;
  return `${Math.max(1, Math.round(words / 200))} min`;
}

function parseRssFeed(xmlText) {
  const doc = new DOMParser().parseFromString(xmlText, "text/xml");
  if (doc.querySelector("parsererror")) throw new Error("parse error");
  return [...doc.querySelectorAll("channel > item")].map((item) => ({
    title:       item.querySelector("title")?.textContent?.trim() ?? "",
    url:         item.querySelector("link")?.textContent?.trim()
              || item.querySelector("guid")?.textContent?.trim()
              || "",
    pubDate:     item.querySelector("pubDate")?.textContent ?? "",
    description: item.querySelector("description")?.textContent ?? "",
    categories:  [...item.querySelectorAll("category")].map((c) => c.textContent.trim()),
  }));
}

function mapRssItems(items) {
  return items.map((item) => {
    const raw = item.description;
    const stripped = stripHtml(raw);
    const excerpt = stripped.length > 200 ? stripped.slice(0, 200) + "…" : stripped;
    return {
      title:   item.title,
      url:     item.url || K.substackUrl,
      date:    formatRssDate(item.pubDate),
      read:    estimateReadTime(raw),
      tag:     item.categories[0] ?? "general",
      excerpt,
    };
  });
}

function WritingView() {
  const [filter, setFilter] = useState("all");
  const [posts, setPosts]   = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 6000);

    fetch(`${K.substackUrl}/feed`, { signal: controller.signal })
      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.text(); })
      .then((xml) => {
        const mapped = mapRssItems(parseRssFeed(xml));
        if (mapped.length === 0) throw new Error("empty feed");
        if (mounted.current) setPosts(mapped);
      })
      .catch(() => {
        if (mounted.current) setPosts(K.writing);
      })
      .finally(() => clearTimeout(timer));

    return () => { mounted.current = false; controller.abort(); clearTimeout(timer); };
  }, []);

  const data = posts ?? [];
  const tags = ["all", ...Array.from(new Set(data.map((w) => w.tag)))];
  const list = filter === "all" ? data : data.filter((w) => w.tag === filter);

  const isLive = posts !== null && posts !== K.writing;
  const panelLabel = posts === null
    ? "WRITING · loading…"
    : isLive
      ? `WRITING · ${posts.length} POSTS · live`
      : `WRITING · ${posts.length} POSTS`;

  return (
    <div className="detail">
      <Panel label={panelLabel}>
        <div className="write-filter mono small">
          <span className="dim">filter:</span>
          {tags.map((t) => (
            <button key={t} className={`chip ${filter === t ? "on" : ""}`} onClick={() => setFilter(t)}>{t}</button>
          ))}
          <a className="chip rss" href={`${K.substackUrl}/feed`} target="_blank" rel="noopener noreferrer">↘ rss</a>
        </div>
        <div className="write-list-full">
          {posts === null ? (
            <div className="mono small dim" style={{ padding: "24px 0" }}>⟳ fetching feed…</div>
          ) : list.map((w, i) => (
            <a
              key={i}
              href={w.url || K.substackUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="write-card-link"
            >
              <article className="write-card">
                <div className="write-meta mono small">
                  <span className="accent">{w.date}</span>
                  <span className="dim">·</span>
                  <span className="dim">{w.read}</span>
                  <span className="dim">·</span>
                  <span className="dim">#{w.tag}</span>
                </div>
                <h3 className="write-card-title">{w.title}</h3>
                <p className="write-card-excerpt">{w.excerpt}</p>
                <div className="write-card-foot mono small accent">read ↗</div>
              </article>
            </a>
          ))}
        </div>
      </Panel>
    </div>
  );
}

function StackView() {
  return (
    <div className="detail two-col">
      <Panel label="STACK · by domain" className="stack-main">
        <div className="stack-groups">
          {Object.entries(K.stack).map(([group, items]) => (
            <div key={group} className="stack-group">
              <div className="stack-group-h mono small accent">{group}</div>
              <Tags items={items} />
            </div>
          ))}
        </div>
      </Panel>
      <div className="stack-col">
        <Panel label="CERTIFICATIONS">
          <div className="cert-grid">
            {K.certs.map((c) => (
              <div key={c.id} className="cert">
                <div className="cert-id mono accent">{c.id}</div>
                <div className="cert-name">{c.name}</div>
                <div className="mono small dim">earned · {c.year}</div>
              </div>
            ))}
          </div>
        </Panel>
        <Panel label="SPECIALTIES">
          <ul className="spec-list">
            <li>Federal / regulated environment Power Platform delivery</li>
            <li>0 → 1 internal tools for mid-market ops teams</li>
            <li>Solution architecture & discovery workshops</li>
            <li>ALM, governance &amp; CoE setup</li>
          </ul>
        </Panel>
      </div>
    </div>
  );
}

function ContactView() {
  return (
    <div className="detail two-col">
      <Panel label="DIRECT" className="contact-main">
        <a className="contact-email-big mono" href={`mailto:${K.email}`}>{K.email}</a>
        <div className="contact-actions">
          <a className="btn" href={`mailto:${K.email}`}>[ send email ]</a>
          <a className="btn ghost" href="#" onClick={(e) => e.preventDefault()}>[ book a call ]</a>
        </div>
        <div className="contact-loc mono">
          <Pulse /><span>{K.location}</span>
        </div>
      </Panel>
      <div className="stack-col">
        <Panel label="ELSEWHERE">
          <ul className="social-list">
            {K.socials.map((s) => (
              <li key={s.label}>
                <span className="social-label mono accent">{s.label}</span>
                <a className="social-handle mono" href={s.url}>{s.handle}</a>
                <span className="social-arrow mono">↗</span>
              </li>
            ))}
          </ul>
        </Panel>
        <Panel label="HOW TO REACH ME">
          <ul className="guide-list">
            {K.contactGuide.map((g, i) => (
              <li key={i}><span className="accent mono">▸</span> {g}</li>
            ))}
          </ul>
        </Panel>
      </div>
    </div>
  );
}

function PortfolioView() {
  const [filter, setFilter] = useState("all");
  const filters = ["all", "client", "venture", "personal"];
  const bucket = (p) => {
    if (/personal|kadgallery|sesa|untitled|homelab|lab/i.test(p.client)) {
      if (/client/i.test(p.client)) return "client";
      if (/personal|lab|untitled/i.test(p.client)) return "personal";
      return "venture";
    }
    return "client";
  };
  const list = filter === "all" ? K.portfolio : K.portfolio.filter((p) => bucket(p) === filter);
  return (
    <div className="detail">
      <Panel label={`PORTFOLIO · ${K.portfolio.length} PROJECTS · CASE STUDIES`}>
        <div className="write-filter mono small">
          <span className="dim">filter:</span>
          {filters.map((f) => (
            <button key={f} className={`chip ${filter === f ? "on" : ""}`} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="portfolio-grid">
          {list.map((p, i) => (
            <article key={p.id} className="port-card">
              <header className="port-head">
                <div className="port-num mono small">{String(i + 1).padStart(2, "0")}</div>
                <div className="port-year mono small accent">{p.year}</div>
              </header>
              <h3 className="port-title">{p.title}</h3>
              <div className="port-client mono small">
                <span className="accent">{p.client}</span>
                <span className="dim">·</span>
                <span className="dim">{p.role}</span>
              </div>
              <p className="port-sum">{p.summary}</p>
              <div className="port-impact mono small">
                <span className="dim">impact</span>
                <span className="accent">{p.impact}</span>
              </div>
              <div className="port-tech"><Tags items={p.tech} /></div>
              <footer className="port-foot mono small">
                <Status>{p.status}</Status>
                <span className="dim">{p.access}</span>
              </footer>
            </article>
          ))}
        </div>
      </Panel>
    </div>
  );
}

window.HUDViews = { HUDLanding, IdentityView, WorkView, PortfolioView, VenturesView, WritingView, StackView, ContactView };