/* Directory / CRM - filterable master list across entity types.
   Click a row → opens the record (global side panel). Exports: Directory. */

function Directory({ onOpen, query, selectedId }) {
  const D = window.DATA;
  const [tab, setTab] = React.useState("org");
  const [q, setQ] = React.useState("");
  React.useEffect(() => { if (query != null) setQ(query); }, [query]);

  const tabs = [
    { id: "org", label: "Organisations", icon: "building", n: D.orgs.length },
    { id: "person", label: "People", icon: "user", n: D.people.length },
    { id: "project", label: "Projects", icon: "folder", n: D.projects.length },
    { id: "event", label: "Events", icon: "calendar", n: D.events.length },
  ];
  const match = (s) => !q || (s || "").toLowerCase().includes(q.toLowerCase());

  const rows = {
    org: D.orgs.filter((o) => match(o.name)),
    person: D.people.filter((p) => match(p.name) || match(p.title)),
    project: D.projects.filter((p) => match(p.name)),
    event: D.events.filter((e) => match(e.name)),
  }[tab];

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "auto", background: "var(--bg)" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "30px 30px 60px" }}>
        <div style={{ marginBottom: 20 }}>
          <div className="display" style={{ fontSize: 28 }}>Directory</div>
          <div style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 3 }}>Every record in the ecosystem - organisations, people, projects and events.</div>
        </div>

        {/* tabs + search */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 4, padding: 4, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--radius)" }}>
            {tabs.map((t) => {
              const on = tab === t.id;
              return (
                <button key={t.id + (on ? "-on" : "-off")} className="focusable" onClick={() => setTab(t.id)}
                  style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "inherit", fontSize: 13, fontWeight: 550, cursor: "pointer", padding: "7px 12px", borderRadius: 7, border: "1px solid " + (on ? "var(--border)" : "transparent"), background: on ? "var(--surface)" : "transparent", color: on ? "var(--text)" : "var(--text-muted)", boxShadow: on ? "var(--shadow-sm)" : "none" }}>
                  <Icon name={t.icon} size={15} /> {t.label}
                  <span className="mono" style={{ fontSize: 11.5, color: "var(--text-faint)" }}>{t.n}</span>
                </button>
              );
            })}
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ position: "relative", width: 260, maxWidth: "100%" }}>
            <Icon name="search" size={16} style={{ position: "absolute", left: 11, top: 11, color: "var(--text-faint)" }} />
            <input className="input focusable" placeholder={`Search ${tab === "org" ? "organisations" : tab + "s"}…`} value={q} onChange={(e) => setQ(e.target.value)} style={{ paddingLeft: 34 }} />
          </div>
        </div>

        {/* table */}
        <div className="card" style={{ overflow: "hidden" }}>
          <table className="tbl">
            <thead>
              {tab === "org" && <tr><th>Name</th><th>Domain</th><th>Relationship</th><th>Reach</th><th>Funding</th></tr>}
              {tab === "person" && <tr><th>Name</th><th>Role</th><th>Affiliation</th><th>Events</th></tr>}
              {tab === "project" && <tr><th>Project</th><th>Type</th><th>Year</th><th>Parent org</th><th>Status</th></tr>}
              {tab === "event" && <tr><th>Event</th><th>Date</th><th>Orgs</th><th>Attendees</th></tr>}
            </thead>
            <tbody>
              {rows.map((r) => {
                const sel = selectedId === r.id;
                const rowStyle = { cursor: "pointer", background: sel ? "var(--accent-soft)" : undefined };
                if (tab === "org") return (
                  <tr key={r.id} onClick={() => onOpen(r.id)} style={rowStyle}>
                    <td><div style={{ display: "flex", alignItems: "center", gap: 9, fontWeight: 600 }}><span style={{ width: 8, height: 8, borderRadius: 999, background: domainColor(r.domain) }} />{r.name}{r.priority === "key" && <Icon name="spark" size={13} style={{ color: "var(--accent)" }} />}</div></td>
                    <td style={{ color: "var(--text-muted)" }}>{(D.domains.find((d) => d.id === r.domain) || {}).label}</td>
                    <td><RelBadge value={r.relationship} /></td>
                    <td style={{ color: "var(--text-muted)" }}>{r.reach}</td>
                    <td><FundingBadge funded={r.funded} /></td>
                  </tr>
                );
                if (tab === "person") return (
                  <tr key={r.id} onClick={() => onOpen(r.id)} style={rowStyle}>
                    <td><div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600 }}><Avatar name={r.name} size={28} />{r.name}</div></td>
                    <td style={{ color: "var(--text-muted)" }}>{r.title}</td>
                    <td style={{ color: "var(--text-muted)" }}>{r.org ? D.byId[r.org].name : (r.team ? "The Wellspring Fund" : "-")}</td>
                    <td className="mono" style={{ color: "var(--text-muted)" }}>{(r.events || []).length}</td>
                  </tr>
                );
                if (tab === "project") return (
                  <tr key={r.id} onClick={() => onOpen(r.id)} style={rowStyle}>
                    <td style={{ fontWeight: 600 }}>{r.name}</td>
                    <td style={{ color: "var(--text-muted)" }}>{r.type}</td>
                    <td className="mono" style={{ color: "var(--text-muted)" }}>{r.year}</td>
                    <td style={{ color: "var(--text-muted)" }}>{D.byId[r.org].name}</td>
                    <td><span className="badge" style={{ background: "var(--info-bg)", color: "var(--info)", borderColor: "transparent" }}>{r.status}</span></td>
                  </tr>
                );
                return (
                  <tr key={r.id} onClick={() => onOpen(r.id)} style={rowStyle}>
                    <td style={{ fontWeight: 600 }}>{r.name}</td>
                    <td className="mono" style={{ color: "var(--text-muted)" }}>{new Date(r.date).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}</td>
                    <td className="mono" style={{ color: "var(--text-muted)" }}>{(r.orgs || []).length}</td>
                    <td className="mono" style={{ color: "var(--text-muted)" }}>{(r.attendees || []).length}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {rows.length === 0 && (
            <div style={{ padding: 40 }}><EmptyState title="No matches" body={`Nothing matches "${q}". Try a different search.`} icon="search" /></div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Directory = Directory;