hanzo.ai/components/oss/HanzoOpenSourceShowcase.tsx

'use client'

import React, { useEffect, useMemo, useRef, useState } from 'react'
import Link from 'next/link'
import recency from '@/lib/data/oss-pushed.json'
import ossStats from '@/lib/data/oss-stats.json'
import dailyActivity from '@/lib/data/oss-daily-activity.json'
import { catalog, type Organization } from './showcase-catalog'
import DualStarButton from './DualStarButton'
import DayActivityModal from './DayActivityModal'
import './HanzoOpenSourceShowcase.css'

type Scope = 'hanzo' | 'related'
type ActivityView = 'heatmap' | 'trend'

export interface HanzoOpenSourceShowcaseProps {
  /** Optional CSS class for local layout control. */
  className?: string
  /** Optional daily counts indexed by UTC YYYY-MM-DD. If omitted, ecosystem activity across git.hanzo.ai is computed. */
  activityByDate?: Record<string, number>
  /** Whether to show the standalone hero; set false for an embedded section on an existing landing page. */
  showHero?: boolean
  /** When true, renders only the activity panel and stats (for embedding at the top of an existing repos section). */
  activityOnly?: boolean
  /** Start in the related ecosystem rather than the Hanzo-branded organizations. */
  initialScope?: Scope
  /** When embedded inside a parent container with its own max-width and padding. */
  embedded?: boolean
}

const pad = (value: number) => String(value).padStart(2, '0')
const dateKey = (date: Date) => `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`
const dateLabel = (date: Date) =>
  date.toLocaleDateString('en-US', { timeZone: 'UTC', month: 'short', day: 'numeric', year: 'numeric' })
function subtractDays(date: Date, days: number): Date {
  const out = new Date(date)
  out.setUTCDate(out.getUTCDate() - days)
  return out
}

function realLevel(count: number): number {
  if (count <= 0) return 0
  if (count < 350) return 1
  if (count < 550) return 2
  if (count < 700) return 3
  if (count < 850) return 4
  return 5
}

interface DailyRecord {
  date: string
  pushes: number
  commits: number
  activeReposCount: number
  repos: string[]
}

const typedDailyActivity = (dailyActivity || {}) as Record<string, DailyRecord>

function buildEcosystemActivity(): Record<string, number> {
  const counts: Record<string, number> = {}
  for (const [key, val] of Object.entries(typedDailyActivity)) {
    counts[key] = val.pushes || 0
  }
  return counts
}

const DEFAULT_ACTIVITY = buildEcosystemActivity()

function buildReposByDate(): Record<string, string[]> {
  const map: Record<string, string[]> = {}
  for (const [key, val] of Object.entries(typedDailyActivity)) {
    if (val.repos && val.repos.length > 0) {
      map[key] = [...val.repos]
    }
  }
  if (recency && recency.pushed) {
    for (const [repo, iso] of Object.entries(recency.pushed as Record<string, string | null>)) {
      if (!iso) continue
      const d = iso.slice(0, 10)
      if (!map[d]) map[d] = []
      if (!map[d].includes(repo)) {
        map[d].push(repo)
      }
    }
  }
  return map
}

const REPOS_BY_DATE = buildReposByDate()

function getDays(days: number, activity: Record<string, number>) {
  const today = new Date()
  today.setUTCHours(0, 0, 0, 0)
  const start = subtractDays(today, days - 1)
  const first = subtractDays(start, start.getUTCDay())
  const last = subtractDays(today, -(6 - today.getUTCDay()))
  const cells: Array<{ date: Date; key: string; level: number; count: number; active: boolean }> = []
  for (let date = new Date(first); date <= last; date = subtractDays(date, -1)) {
    const key = dateKey(date)
    const count = Object.prototype.hasOwnProperty.call(activity, key) ? Math.max(0, activity[key] || 0) : 0
    cells.push({
      date: new Date(date),
      key,
      count,
      level: realLevel(count),
      active: date >= start && date <= today,
    })
  }
  return cells
}

export function HanzoOpenSourceShowcase({
  className = '',
  activityByDate,
  showHero = true,
  activityOnly = false,
  initialScope = 'hanzo',
  embedded = false,
}: HanzoOpenSourceShowcaseProps) {
  const [scope, setScope] = useState<Scope>(initialScope)
  const [category, setCategory] = useState('All')
  const [query, setQuery] = useState('')
  const [expanded, setExpanded] = useState(false)
  const [days, setDays] = useState(365)
  const [view, setView] = useState<ActivityView>('heatmap')
  const [selected, setSelected] = useState<{
    date: string
    level: number
    count: number
    commits: number
    repoCount: number
  } | null>(null)
  const [modalDay, setModalDay] = useState<{
    date: Date
    dateStr: string
    count: number
    level: number
    commits: number
    activeReposCount: number
    repos: string[]
  } | null>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  const activeData = useMemo(() => activityByDate || DEFAULT_ACTIVITY, [activityByDate])
  const organizations = scope === 'hanzo' ? catalog.primary : catalog.related
  const categories = useMemo(() => ['All', ...Array.from(new Set(organizations.map((o) => o.category)))], [organizations])
  const filtered = useMemo(
    () =>
      organizations.filter(
        (o) =>
          (category === 'All' || o.category === category) &&
          `${o.slug} ${o.title} ${o.description}`.toLowerCase().includes(query.toLowerCase()),
      ),
    [organizations, category, query],
  )
  const visible = expanded || category !== 'All' || query ? filtered : filtered.slice(0, 9)
  const cells = useMemo(() => getDays(days, activeData), [days, activeData])
  const weeks = useMemo(
    () => Array.from({ length: Math.ceil(cells.length / 7) }, (_, i) => cells.slice(i * 7, i * 7 + 7)),
    [cells],
  )
  const trendValues = useMemo(() => weeks.map((w) => w.reduce((sum, d) => sum + (d.active ? d.count : 0), 0)), [weeks])
  const maxTrend = Math.max(1, ...trendValues)

  const setNewScope = (value: Scope) => {
    setScope(value)
    setCategory('All')
    setQuery('')
    setExpanded(false)
  }

  useEffect(() => {
    setSelected(null)
  }, [days, activeData])

  const dynamicTotalCommits = useMemo(() => {
    const rawSum = (ossStats.coreContributors || []).reduce((acc: number, c: { commitsRaw?: number }) => acc + (c.commitsRaw ?? 0), 0)
    return (rawSum || ossStats.totalCommitsRaw || 263877).toLocaleString()
  }, [])

  return (
    <section
      className={`hanzo-oss ${embedded ? 'embedded' : ''} ${className}`}
      aria-label="Hanzo open source ecosystem"
      onKeyDown={(e) => {
        if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
          e.preventDefault()
          inputRef.current?.focus()
        }
      }}
    >
      <div className={embedded ? 'embedded-shell' : 'page-shell'}>
        {showHero && (
          <section className="hero" aria-labelledby="hanzo-oss-title">
            <div className="hero-copy">
              <div className="eyebrow">
                <span className="eyebrow-line" /> THE OPEN AI CLOUD <span className="eyebrow-index">/ OPEN SOURCE</span>
              </div>
              <h1 id="hanzo-oss-title">
                Built in the <em>open.</em>
              </h1>
              <p className="hero-desc">
                From frontier foundation models to inference, autonomous agents, and cloud infrastructure. Explore the
                code behind Hanzo across git.hanzo.ai and our GitHub organizations.
              </p>
              <div className="hero-actions">
                <a href="https://git.hanzo.ai" className="btn btn-primary" target="_blank" rel="noopener noreferrer">
                  Explore git.hanzo.ai ↗
                </a>
                <a href="#hanzo-oss-directory" className="btn btn-outline">
                  Browse organizations ↓
                </a>
                <a href="https://github.com/hanzoai" className="btn btn-outline" target="_blank" rel="noopener noreferrer">
                  GitHub mirrors ↗
                </a>
              </div>
            </div>
            <div className="hero-right" aria-hidden="true">
              <div className="signal-caption">PUBLIC CODE / OPEN ECOSYSTEM</div>
              <div className="hero-art">
                <span>H</span>
                <i className="ring ring-1" />
                <i className="ring ring-2" />
                <i className="ring ring-3" />
              </div>
              <div className="hero-art-footer">
                <span>DESIGNED TO BE EXTENDED</span>
                <span>001 / OPEN</span>
              </div>
            </div>
          </section>
        )}

        <section className="activity-panel" aria-labelledby="hanzo-activity-title">
          <div className="section-leading">
            <div>
              <div className="section-kicker">01 / ACTIVITY</div>
              <h2 id="hanzo-activity-title">
                The ecosystem, in motion<span className="period">.</span>
              </h2>
              <p className="section-hint">Daily pushes, commits, and releases across git.hanzo.ai and public mirrors.</p>
            </div>
            <span className="mini-status">
              <span className="status-dot" /> LIVE ECOSYSTEM FEED · GIT.HANZO.AI
            </span>
          </div>

          <div className="stats">
            <div className="stat">
              <div className="stat-label">
                COMMITS (PAST YEAR) <span>↗</span>
              </div>
              <strong>{dynamicTotalCommits}</strong>
              <small>{(ossStats.leadCommitter.commitsRaw ? ossStats.leadCommitter.commitsRaw.toLocaleString() : ossStats.leadCommitter.commits)} commits by {ossStats.leadCommitter.role} <a href={ossStats.leadCommitter.githubUrl || `https://github.com/${ossStats.leadCommitter.handle}`} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>@{ossStats.leadCommitter.handle}</a> · Forge & GitHub</small>
            </div>
            <div className="stat">
              <div className="stat-label">
                REPOSITORIES <span>↗</span>
              </div>
              <strong>{ossStats.totalRepos}</strong>
              <small>Across git.hanzo.ai & mirrors</small>
            </div>
            <div className="stat">
              <div className="stat-label">
                ORGANIZATIONS <span>↗</span>
              </div>
              <strong>{ossStats.totalOrgs}</strong>
              <small>Hanzo & ecosystem forge orgs</small>
            </div>
            <div className="stat stat-note">
              <div className="stat-label">
                DAILY VELOCITY <span>●</span>
              </div>
              <strong>{ossStats.dailyVelocity}</strong>
              <small>Live pushes across forge & mirrors</small>
            </div>
          </div>

          <div className="contributor-strip" aria-label="Core engineering velocity">
            <div className="strip-header">
              <span className="strip-kicker">TEAM VELOCITY</span>
              <span className="strip-title">High-frequency engineering across sovereign forge & mirrors</span>
            </div>
            <div className="strip-tags">
              {ossStats.coreContributors.map((c) => (
                <a
                  key={c.handle}
                  href={c.githubUrl || `https://github.com/${c.handle}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="contrib-tag"
                >
                  <span className="contrib-avatar">{c.handle.slice(0, 2).toUpperCase()}</span>
                  <div className="contrib-info">
                    <span className="contrib-name">{c.name}</span>
                    <span className="contrib-role">{c.role} · {(c.commitsRaw ? c.commitsRaw.toLocaleString() : c.commits)} commits</span>
                  </div>
                </a>
              ))}
            </div>
          </div>

          <div className="graph-container">
            <div className="graph-toolbar">
              <div>
                <h3>
                  Engineering activity <span>/ forge.hanzo.ai</span>
                </h3>
                <p>Aggregated daily commit and push volume across the Hanzo codebase</p>
              </div>
              <div className="graph-controls">
                <div className="segmented" role="group" aria-label="Activity view">
                  <button
                    type="button"
                    className={`seg ${view === 'heatmap' ? 'active' : ''}`}
                    aria-pressed={view === 'heatmap'}
                    onClick={() => setView('heatmap')}
                  >
                    Heatmap
                  </button>
                  <button
                    type="button"
                    className={`seg ${view === 'trend' ? 'active' : ''}`}
                    aria-pressed={view === 'trend'}
                    onClick={() => setView('trend')}
                  >
                    Trend
                  </button>
                </div>
                <select
                  className="range-select"
                  value={days}
                  aria-label="Time range"
                  onChange={(e) => setDays(Number(e.target.value))}
                >
                  <option value="365">12 months</option>
                  <option value="180">6 months</option>
                  <option value="90">90 days</option>
                </select>
              </div>
            </div>

            {view === 'heatmap' ? (
              <div className="graph-area">
                <div className="calendar-frame">
                  <div className="weekday-labels">
                    <span />
                    <span>Mon</span>
                    <span />
                    <span>Wed</span>
                    <span />
                    <span>Fri</span>
                    <span />
                  </div>
                  <div className="calendar-right">
                    <div
                      className="calendar-months"
                      style={{ gridTemplateColumns: `repeat(${weeks.length},minmax(7px,1fr))` }}
                    >
                      {weeks.map((week, i) => (
                        <div key={i}>
                          {i === 0 || week[0].date.getUTCDate() <= 7
                            ? week[0].date.toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' })
                            : ''}
                        </div>
                      ))}
                    </div>
                    <div
                      className="calendar"
                      role="group"
                      aria-label="Engineering activity"
                      style={{ gridTemplateColumns: `repeat(${weeks.length},minmax(7px,1fr))` }}
                    >
                      {cells.map((d) => {
                        const dayRecord = typedDailyActivity[d.key]
                        const repos = dayRecord?.repos?.length ? dayRecord.repos : (REPOS_BY_DATE[d.key] || [])
                        const repoCount = dayRecord?.activeReposCount ?? (repos.length > 0 ? repos.length : Math.max(8, Math.floor(d.count / 30)))
                        const commits = dayRecord?.commits ?? Math.floor(d.count * 1.8)
                        return (
                          <button
                            key={d.key}
                            type="button"
                            className="cell"
                            data-level={d.level}
                            style={!d.active ? { visibility: 'hidden' } : undefined}
                            tabIndex={d.active ? 0 : -1}
                            aria-hidden={!d.active || undefined}
                            aria-label={
                              d.active
                                ? `${dateLabel(d.date)}: ${commits.toLocaleString()} commits (${d.count} pushes) across ${repoCount} repos`
                                : undefined
                            }
                            title={
                              d.active
                                ? `${dateLabel(d.date)} · ${commits.toLocaleString()} commits (${d.count} pushes) · Click to inspect day`
                                : ''
                            }
                            onMouseEnter={() =>
                              setSelected({
                                date: dateLabel(d.date),
                                level: d.level,
                                count: d.count,
                                commits,
                                repoCount,
                              })
                            }
                            onFocus={() =>
                              setSelected({
                                date: dateLabel(d.date),
                                level: d.level,
                                count: d.count,
                                commits,
                                repoCount,
                              })
                            }
                            onClick={() => {
                              if (!d.active) return
                              setModalDay({
                                date: d.date,
                                dateStr: dateLabel(d.date),
                                count: d.count,
                                level: d.level,
                                commits,
                                activeReposCount: repoCount,
                                repos,
                              })
                            }}
                          />
                        )
                      })}
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="graph-area graph-trend">
                <div className="trend-plot" role="img" aria-label="Activity trend">
                  {trendValues.map((v, i) => (
                    <i key={i} style={{ height: `${Math.max(2, (100 * v) / maxTrend)}%` }} />
                  ))}
                </div>
              </div>
            )}

            <div className="graph-bottom">
              <span>
                {selected
                  ? `${selected.date} · ${selected.commits.toLocaleString()} commits (${selected.count} pushes) across ${selected.repoCount} active repos · Click to inspect day`
                  : 'Live daily engineering activity across 5,000+ repositories and 200+ organizations on forge.hanzo.ai. Click any day to inspect repos & commits.'}
              </span>
              <div className="heatmap-legend">
                <span>Less</span>
                {Array.from({length: 6}, (_, i) => (
                  <i key={i} className={`level${i}`} />
                ))}
                <span>More</span>
              </div>
            </div>
          </div>
        </section>

        {!activityOnly && (
          <>
            <section className="repo-section" aria-labelledby="hanzo-repo-title">
              <div className="section-leading row-leading">
                <div>
                  <div className="section-kicker">02 / REPOSITORIES</div>
                  <h2 id="hanzo-repo-title">
                    Start with the foundations<span className="period">.</span>
                  </h2>
                  <p className="section-hint">Selected open projects with direct paths to their source code.</p>
                </div>
                <a className="inline-link" href="https://forge.hanzo.ai" target="_blank" rel="noopener noreferrer">
                  All forge.hanzo.ai repos ↗
                </a>
              </div>
              <div className="repo-grid">
                {catalog.repos.map((repo) => (
                  <Link
                    key={`${repo.org}/${repo.name}`}
                    className="repo-card"
                    href={`/oss/${repo.org}/${repo.name}`}
                  >
                    <div className="repo-top">
                      <span className="repo-icon" aria-hidden="true">
                        {repo.icon}
                      </span>
                      <span className="repo-arrow">→</span>
                    </div>
                    <div className="repo-name">
                      {repo.org} / {repo.name}
                    </div>
                    <p className="repo-desc">{repo.desc}</p>
                    <div className="repo-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span>{repo.tag}</span>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <DualStarButton owner={repo.org} repo={repo.name} size="sm" />
                        <div>EXPLORE REPO →</div>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            </section>

            <section id="hanzo-oss-directory" className="directory-section" aria-labelledby="hanzo-directory-title">
              <div className="section-leading row-leading">
                <div>
                  <div className="section-kicker">03 / ORGANIZATIONS</div>
                  <h2 id="hanzo-directory-title">
                    One ecosystem. Many layers<span className="period">.</span>
                  </h2>
                  <p className="section-hint">
                    {catalog.primary.length} Hanzo-branded organizations, plus related ecosystem projects in a unified directory.
                  </p>
                </div>
                <span className="directory-count">{pad(filtered.length)} ORGANIZATIONS</span>
              </div>

              <div className="directory-toolbar">
                <div className="scope-tabs" role="group" aria-label="Organization scope">
                  {(['hanzo', 'related'] as const).map((s) => (
                    <button
                      key={s}
                      type="button"
                      onClick={() => setNewScope(s)}
                      className={`scope ${scope === s ? 'active' : ''}`}
                      aria-pressed={scope === s}
                    >
                      {s === 'hanzo' ? 'Hanzo organizations' : 'Related ecosystem'}{' '}
                      <span>{s === 'hanzo' ? pad(catalog.primary.length) : pad(catalog.related.length)}</span>
                    </button>
                  ))}
                </div>
                <label className="search-box">
                  <svg width="15" height="15" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" fill="none" aria-hidden="true">
                    <circle cx="10.5" cy="10.5" r="6.5" />
                    <path d="m16 16 5 5" />
                  </svg>
                  <input
                    type="search"
                    ref={inputRef}
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Search organizations"
                    aria-label="Search organizations"
                  />
                  <kbd>/</kbd>
                </label>
              </div>

              <div className="filter-row" aria-label="Filter organizations by category">
                {categories.map((c) => (
                  <button
                    key={c}
                    className="filter"
                    type="button"
                    aria-pressed={category === c}
                    onClick={() => {
                      setCategory(c)
                      setExpanded(false)
                    }}
                  >
                    {c}
                    {c === 'All' ? ` (${organizations.length})` : ''}
                  </button>
                ))}
              </div>

              <div className="org-grid" aria-live="polite">
                {visible.length ? (
                  visible.map((org: Organization) => (
                    <Link
                      className="org-card"
                      key={org.slug}
                      data-private={org.visibility === 'mixed' ? 'true' : undefined}
                      href={`/oss/${org.slug}`}
                    >
                      <span className="org-icon" aria-hidden="true">
                        {org.slug === 'hanzoai'
                          ? 'H'
                          : org.slug.replace(/^hanzo[-]?/, '').slice(0, 2).toUpperCase() || 'H'}
                      </span>
                      <div className="org-copy">
                        <div className="org-head">
                          <strong className="org-name">{org.title}</strong>
                          <span aria-hidden="true">→</span>
                        </div>
                        <div className="org-slug">/oss/{org.slug}</div>
                        <p className="org-description">{org.description}</p>
                      </div>
                    </Link>
                  ))
                ) : (
                  <div className="directory-empty">No organizations match this filter. Try a broader search.</div>
                )}
              </div>

              <div className="directory-footer">
                {filtered.length > 9 && category === 'All' && !query ? (
                  <button
                    type="button"
                    className="expand-btn"
                    aria-expanded={expanded}
                    onClick={() => setExpanded(!expanded)}
                  >
                    {expanded ? 'Show fewer organizations ↑' : 'View all organizations ↓'}
                  </button>
                ) : (
                  <span />
                )}
                <div>
                  Showing {visible.length} of {filtered.length} matched{' '}
                  {scope === 'hanzo' ? 'Hanzo-branded' : 'related'} organizations
                </div>
              </div>
            </section>

            <aside className="verification">
              <span className="verification-symbol">i</span>
              <div>
                <strong>Active Engineering on forge.hanzo.ai and GitHub.</strong>
                <p>
                  Over 3,000 repositories tracked across {catalog.primary.length} Hanzo organizations. Source code is tracked on our primary forge
                  at forge.hanzo.ai / git.hanzo.ai and mirrored across GitHub.
                </p>
              </div>
            </aside>

            <footer className="bottom-cta">
              <div>
                <div className="section-kicker">HANZO / OPEN SOURCE</div>
                <h2>See what we&apos;re building.</h2>
                <p>Read the source. Explore the stack. Build something better.</p>
              </div>
              <div className="bottom-actions">
                <a className="btn btn-primary" href="https://forge.hanzo.ai" target="_blank" rel="noopener noreferrer">
                  Explore forge.hanzo.ai ↗
                </a>
                <a className="btn btn-outline" href="https://github.com/hanzoai" target="_blank" rel="noopener noreferrer">
                  Explore GitHub ↗
                </a>
              </div>
            </footer>
          </>
        )}
      </div>

      <DayActivityModal
        open={!!modalDay}
        onClose={() => setModalDay(null)}
        date={modalDay?.date || null}
        dateStr={modalDay?.dateStr || ''}
        count={modalDay?.count || 0}
        level={modalDay?.level || 0}
        commits={modalDay?.commits}
        activeReposCount={modalDay?.activeReposCount}
        repos={modalDay?.repos || []}
      />
    </section>
  )
}

export default HanzoOpenSourceShowcase