/* global React, IcoHome, IcoListChecks, IcoUsers, IcoActivity, IcoMessageCircle, IcoArrowRight, IcoChevronDown, IcoChevronUp, IcoExternalLink, IcoBookOpen, IcoMoreHorizontal, IcoThumbsUp, IcoThumbsDown, IcoSearch, IcoSun, IcoMoon, IcoBookmark, IcoEyeOff, NF_TYPES, NF_EVENTS, NF_FAVICON */

const { useState, useEffect, useRef } = React;

/* ============ Sidebar ============ */
function Sidebar() {
  return (
    <aside className="sidebar">
      <a href="#" className="sidebar-brand">
        <img src="assets/logo-mark.png" alt="" />
        <span className="word">trayo</span>
      </a>
      <div className="sidebar-accounts">
        <div className="account-pill">
          <span className="glyph">N</span>
          <span>Notion-V2</span>
        </div>
        <div className="account-pill ghost">
          <IcoUsers size={14} />
          <span>werwer</span>
        </div>
      </div>
      <div className="sidebar-section-label">Home</div>
      <nav className="sidebar-nav">
        <a className="nav-item active" href="#"><IcoHome size={16} /><span>Newsfeed</span><span className="badge">10</span></a>
        <a className="nav-item" href="#"><IcoListChecks size={16} /><span>Accounts</span></a>
        <a className="nav-item" href="#"><IcoUsers size={16} /><span>People</span></a>
        <a className="nav-item" href="#"><IcoActivity size={16} /><span>Signals</span></a>
        <a className="nav-item" href="#"><IcoMessageCircle size={16} /><span>Trayo Agent</span></a>
      </nav>
      <div className="sidebar-footer">
        <div className="avatar">we</div>
        <div>
          <div className="name">werwer</div>
          <div className="sub">Account Executive</div>
        </div>
      </div>
    </aside>
  );
}

/* ============ Top bar ============ */
function TopBar({ theme, onTheme }) {
  return (
    <div className="topbar">
      <div className="title">Newsfeed</div>
      <div className="grow" />
      <div className="theme-switch">
        <button className={theme === "dark" ? "on" : ""} onClick={() => onTheme("dark")}>
          <IcoMoon /> Dark
        </button>
        <button className={theme === "light" ? "on" : ""} onClick={() => onTheme("light")}>
          <IcoSun /> Light
        </button>
      </div>
    </div>
  );
}

/* ============ Filter bar ============ */
function FilterBar({ counts, active, onFilter }) {
  const tab = (key, label) => (
    <button
      className={"filter-pill" + (active === key ? " on" : "")}
      onClick={() => onFilter(key)}
    >
      {label} <span className="count">{counts[key] ?? 0}</span>
    </button>
  );
  return (
    <div className="filter-bar">
      {tab("all", "All")}
      {tab("news", "News")}
      {tab("job_listing", "Job listings")}
      {tab("career_change", "Career changes")}
      <div className="sep" />
      <button className="filter-pill">All accounts <IcoChevronDown size={12} /></button>
      <button className="filter-pill">All signals <IcoChevronDown size={12} /></button>
      <div className="filter-search">
        <IcoSearch />
        <input placeholder="Search" />
      </div>
    </div>
  );
}

/* ============ Account chip ============ */
function AccountChip({ account }) {
  const [broken, setBroken] = useState(false);
  return (
    <a href="#" className="account-chip">
      {!broken ? (
        <img className="logo" src={NF_FAVICON(account.host)} alt="" onError={() => setBroken(true)} />
      ) : (
        <span className="logo-fallback">{account.initials}</span>
      )}
      <span className="name">{account.name}</span>
    </a>
  );
}

/* ============ Overflow menu ============ */
function OverflowMenu({ event }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    if (open) document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  return (
    <div className="overflow-menu" ref={ref}>
      <button className="btn" onClick={() => setOpen(o => !o)} aria-label="More"><IcoMoreHorizontal /></button>
      {open && (
        <div className="pop">
          {event.case_studies && (
            <button onClick={() => setOpen(false)}><IcoBookOpen /> Related case studies</button>
          )}
          <a href={event.sourceUrl} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>
            <IcoExternalLink /> View source
          </a>
          <hr />
          <button onClick={() => setOpen(false)}><IcoThumbsUp /> Useful</button>
          <button onClick={() => setOpen(false)}><IcoThumbsDown /> Not useful</button>
          <hr />
          <button onClick={() => setOpen(false)}><IcoBookmark /> Save</button>
          <button onClick={() => setOpen(false)}><IcoEyeOff /> Hide</button>
        </div>
      )}
    </div>
  );
}

/* ============ Typed anchor — three shapes ============ */
function NewsAnchor({ anchor }) {
  return (
    <div className="anchor anchor-news">
      <div className="anchor-text">
        <h2 className="anchor-title">{anchor.headline}</h2>
        {anchor.sub && <p className="anchor-sub">{anchor.sub}</p>}
      </div>
    </div>
  );
}

function PersonAnchor({ anchor }) {
  const initials = anchor.person.initials
    || anchor.person.name.split(" ").map(s => s[0]).slice(0, 2).join("");
  return (
    <div className="anchor anchor-person">
      <span className={"anchor-avatar " + (anchor.person.tone || "")}>{initials}</span>
      <div className="anchor-text">
        <h2 className="person-name">{anchor.person.name}</h2>
        <p className="person-transition">{anchor.transition}</p>
        {anchor.sub && <p className="person-sub">{anchor.sub}</p>}
      </div>
    </div>
  );
}

function RoleAnchor({ anchor }) {
  return (
    <div className="anchor anchor-role">
      <div className="anchor-text">
        <h2 className="anchor-title">{anchor.title}</h2>
        {anchor.sub && <p className="anchor-sub">{anchor.sub}</p>}
      </div>
    </div>
  );
}

function Anchor({ event }) {
  if (event.type === "career_change") return <PersonAnchor anchor={event.anchor} />;
  if (event.type === "job_listing")   return <RoleAnchor anchor={event.anchor} />;
  return <NewsAnchor anchor={event.anchor} />;
}

/* ============ Angle — Trayo's analysis prose ============ */
function Angle({ angle }) {
  if (!angle) return null;
  return (
    <div className="angle">
      <p dangerouslySetInnerHTML={{ __html: angle.why }} />
      {angle.fits && (
        <p className="fits">
          <strong>{angle.fits.name}</strong> {angle.fits.body}
        </p>
      )}
    </div>
  );
}

/* ============ Action footer ============ */
function Action({ event }) {
  const [showMore, setShowMore] = useState(false);
  const people = event.stakeholders || [];
  const lead = people[0];
  const rest = people.slice(1);

  // Career-change cards: CTA reads "Reach out to {first}" (the person themselves)
  // News / job listing with no stakeholders: just "Reach out"
  const firstName = lead ? lead.name.split(" ")[0] : null;

  return (
    <div className="action">
      <a className="cta" href="#">
        {lead && (
          <span className={"cta-avatar " + (lead.tone || "")}>
            {lead.name.split(" ").map(s => s[0]).slice(0, 2).join("")}
          </span>
        )}
        <span className="cta-text">
          {firstName ? <>Reach out to <strong>{firstName}</strong></> : "Reach out"}
        </span>
        <IcoArrowRight />
      </a>

      {lead && (
        <div className="action-meta">
          <span className="role">{lead.title}</span>
        </div>
      )}
      {!lead && <div className="action-meta" />}

      {rest.length > 0 && (
        <button className="more" onClick={() => setShowMore(s => !s)}>
          <span>{rest.length === 1 ? "1 other" : `${rest.length} others`}</span>
          {showMore ? <IcoChevronUp size={12} /> : <IcoChevronDown size={12} />}
        </button>
      )}

      {showMore && (
        <div className="others">
          {rest.map(p => (
            <a key={p.id} className="item" href="#">
              <span className={"avatar " + (p.tone || "")}>
                {p.name.split(" ").map(s => s[0]).slice(0, 2).join("")}
              </span>
              <div className="info">
                <div className="name">{p.name}</div>
                <div className="role">{p.title}</div>
              </div>
              <span className="reach"><IcoArrowRight size={14} /></span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

/* ============ EventCard — composes the four parts ============ */
function EventCard({ event }) {
  const meta = NF_TYPES[event.type];
  const typeColor =
    event.type === "career_change" ? "var(--type-career)"
    : event.type === "job_listing" ? "var(--type-job)"
    : "var(--type-news)";

  return (
    <article
      className="card"
      data-type={event.type}
      data-featured={event.featured ? "true" : undefined}
      style={{ "--type-color": typeColor }}
    >
      <header className="chrome">
        <AccountChip account={event.account} />
        <span className="eyebrow">
          {meta.short}
          {event.eyebrow_kind && <span className="kind">{event.eyebrow_kind}</span>}
        </span>
        <div className="chrome-meta">
          <span>{event.discovered}</span>
          <span className="dot">·</span>
          <a className="source" href={event.sourceUrl} target="_blank" rel="noopener noreferrer">
            {event.publication}
          </a>
          <OverflowMenu event={event} />
        </div>
      </header>

      <Anchor event={event} />

      <Angle angle={event.angle} />

      <Action event={event} />
    </article>
  );
}

Object.assign(window, { Sidebar, TopBar, FilterBar, EventCard });