/* RA | AI | RO ecosystem directory — the real partner organisations, their web
   properties, and internships. Live search over org names, taglines, and
   property domains/labels. Exposes window.RAAIROProjects. */
const PDS = window.RAAIRODesignSystem_d9bba9;
const { SectionBand, CTABand, Badge, Button, Field, Icon } = PDS;

function StatPill({ value, label }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-bold)", fontSize: "var(--text-2xl)", lineHeight: 1, color: "var(--brand-primary)" }}>{value}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-subtle)" }}>{label}</span>
    </div>
  );
}

function OrgCard({ org }) {
  const themeColor = `var(--theme-${org.theme})`;
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-xs)", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "var(--space-5)", borderTop: `4px solid ${themeColor}` }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "var(--space-3)" }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-lg)", lineHeight: 1.15, margin: 0, color: "var(--text-body)" }}>{org.name}</h3>
          {org.praktika > 0
            ? <Badge tone="pilot" style={{ flexShrink: 0 }}>{org.praktika} {org.praktika === 1 ? "Praktikum" : "Praktika"}</Badge>
            : <Badge tone="planned" style={{ flexShrink: 0 }}>Projekt</Badge>}
        </div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--text-subtle)", margin: "var(--space-2) 0 0", lineHeight: 1.4 }}>{org.tagline}</p>
      </div>
      <ul style={{ listStyle: "none", padding: "0 var(--space-5) var(--space-5)", margin: 0, display: "flex", flexDirection: "column", gap: "var(--space-1)", flex: 1 }}>
        {org.sites.map((s) => (
          <li key={s.d}>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", padding: "var(--space-3) 0", borderTop: "1px solid var(--border-subtle)", textDecoration: "none", color: "var(--text-body)" }}>
              <span style={{ color: themeColor, flexShrink: 0, display: "inline-flex" }}><Icon name="globe" size={16} /></span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: "block", fontSize: "var(--text-sm)", fontWeight: "var(--fw-medium)", lineHeight: 1.3 }}>{s.l}</span>
                <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--brand-accent)", marginTop: 1 }}>{s.d}</span>
              </span>
              <span style={{ color: "var(--text-subtle)", flexShrink: 0, display: "inline-flex" }}><Icon name="arrow-right" size={15} /></span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function RAAIROProjects({ nav }) {
  const { useState, useMemo } = React;
  const data = window.RAAIRO_DATA;
  const { orgs, ecoStats } = data;
  const [q, setQ] = useState("");

  const filtered = useMemo(() => {
    const query = q.trim().toLowerCase();
    if (!query) return orgs;
    return orgs
      .map((o) => {
        const orgHit = (o.name + " " + o.tagline).toLowerCase().includes(query);
        const sites = o.sites.filter((s) => (s.d + " " + s.l).toLowerCase().includes(query));
        if (orgHit) return o;
        if (sites.length) return { ...o, sites };
        return null;
      })
      .filter(Boolean);
  }, [q, orgs]);

  return (
    <div>
      <SectionBand eyebrow="Ökosystem · Partnerunternehmen" heading="The RA | AI | RO ecosystem"
        intro="Independent partner organisations building applied-AI software for social challenges — each running real web properties and hosting internships (Praktika).">
        <div style={{ display: "flex", gap: "var(--space-8)", flexWrap: "wrap", marginTop: "var(--space-2)" }}>
          <StatPill value={ecoStats.npos} label="Partner orgs" />
          <StatPill value={ecoStats.projekte} label="Projekte" />
          <StatPill value={ecoStats.praktika} label="Praktika" />
        </div>
      </SectionBand>

      <div style={{ background: "var(--bg-band)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--space-6) var(--gutter)" }}>
          <div style={{ maxWidth: 520 }}>
            <Field label="Search the ecosystem" name="search" placeholder="Try 'legal', 'Kolumbien', 'myjobmy.life'…"
              value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", margin: "var(--space-4) 0 0" }}>
            Showing {filtered.length} of {orgs.length} organisations
          </p>
        </div>
      </div>

      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--space-8) var(--gutter)" }}>
        {filtered.length === 0 ? (
          <div style={{ textAlign: "center", padding: "var(--space-10) 0", maxWidth: 420, marginInline: "auto" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-2xl)", color: "var(--brand-primary)", marginBottom: "var(--space-3)" }}>Nothing here yet</div>
            <p style={{ color: "var(--text-muted)", marginBottom: "var(--space-5)" }}>No organisations or properties match your search. Try a broader term.</p>
            <Button variant="secondary" onClick={() => setQ("")}>Clear search</Button>
          </div>
        ) : (
          <div style={{ display: "grid", gap: "var(--space-5)", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))" }}>
            {filtered.map((o) => <OrgCard key={o.name} org={o} />)}
          </div>
        )}
      </div>

      <CTABand tone="forest" heading="Want to build in the ecosystem?"
        text="Join a partner organisation as a volunteer or intern, or propose a new applied-AI project."
        primaryCta={{ label: "Bootcamps & internships", href: "#bootcamps" }}
        secondaryCta={{ label: "Partner with us", href: "#partners" }} />
    </div>
  );
}

window.RAAIROProjects = RAAIROProjects;
