hanzo.ai/app/(marketing)/oss/[org]/OrgView.tsx

'use client'

import React, { useState, useMemo, useEffect } from 'react'
import Link from 'next/link'
import { findOrg, getOrgRepos } from '@/lib/oss'
import { superAdmin } from '@hanzo/app/lib/session'
import { useHydrated } from '@hanzo/app/lib/hydrated'
import { mix } from '@hanzo/app/lib/mix'
import { Page, PageHero, Section } from '@/components/marketing/page-kit'
import { Box, Button, Input, Text, View, XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Chip, Display, Lede, Title, Leaf, Line } from '@hanzo/ui/marketing'
import { Github } from '@/components/brand'
import { ArrowLeft, ExternalLink, GitBranch, Lock, Shield, Star, Terminal } from 'lucide-react'

const MUTED = 'var(--muted-foreground)'
const INK = 'var(--foreground)'
const BORDER = 'var(--border)'

const PRIVATE_INTERNAL_REPOS = [
  {
    name: 'cloud-backend',
    desc: 'Core microservices, multi-tenant billing settlement, and edge proxy behind api.hanzo.ai.',
    tag: 'Proprietary Core',
    lang: 'Go',
  },
  {
    name: 'iam-production',
    desc: 'Sovereign IAM directory, OIDC authentication, and cryptographic session claims.',
    tag: 'Security & Auth',
    lang: 'TypeScript',
  },
  {
    name: 'cluster-ops',
    desc: 'Automated bare-metal GPU provisioning, Slurm clusters, and ROCm / CUDA scheduler.',
    tag: 'Infrastructure',
    lang: 'Rust / Python',
  },
  {
    name: 'billing-ledger',
    desc: 'Real-time metered spend ledger, author royalty calculation (20%), and payout settlement.',
    tag: 'Finance Engine',
    lang: 'Go / SQL',
  },
]

export function OrgView({ orgSlug }: { orgSlug: string }) {
  const org = findOrg(orgSlug) || {
    slug: orgSlug,
    title: orgSlug.charAt(0).toUpperCase() + orgSlug.slice(1),
    category: 'Ecosystem',
    description: `Official open-source repository organization for ${orgSlug} on Hanzo Forge.`,
  }

  const hydrated = useHydrated()
  const [isAdmin, setIsAdmin] = useState(false)
  const [query, setQuery] = useState('')

  useEffect(() => {
    if (hydrated) {
      try {
        setIsAdmin(superAdmin())
      } catch {
        setIsAdmin(false)
      }
    }
  }, [hydrated])

  const repos = useMemo(() => getOrgRepos(orgSlug), [orgSlug])
  const filteredRepos = useMemo(() => {
    if (!query.trim()) return repos
    const q = query.toLowerCase()
    return repos.filter((r) => r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q))
  }, [repos, query])

  const isHanzoInc = orgSlug === 'hanzo-inc'

  return (
    <Page>
      <PageHero
        eyebrow={`ORGANIZATION / ${org.category.toUpperCase()}`}
        title={org.title}
        lede={org.description}
      >
        <XStack flexWrap="wrap" items="center" gap={12}>
          <Button size="sm" asChild>
            <a href={`https://git.hanzo.ai/${orgSlug}`} target="_blank" rel="noopener noreferrer">
              <Terminal size={14} />
              View on git.hanzo.ai ↗
            </a>
          </Button>
          <Button size="sm" variant="outline" asChild>
            <a href={`https://github.com/${orgSlug}`} target="_blank" rel="noopener noreferrer">
              <Github width={14} height={14} />
              GitHub Mirror ↗
            </a>
          </Button>
          <Button size="sm" variant="ghost" asChild>
            <Link href="/open-source">
              <ArrowLeft size={14} />
              All Organizations
            </Link>
          </Button>
        </XStack>
      </PageHero>

      {/* Privacy Notice for hanzo-inc */}
      {isHanzoInc && (
        <Section title={isAdmin ? 'SuperAdmin Verified' : 'Restricted Internal Infrastructure'}>
          {isAdmin ? (
            <Box
              p={20}
              rounded="$5"
              borderWidth={1}
              borderColor="var(--primary)"
              bg={mix('var(--primary)', 10, 'srgb')}
            >
              <XStack items="center" gap={12} mb={8}>
                <Shield size={20} color="var(--primary)" />
                <Text fontWeight="600" color={INK} fontSize="$3">
                  SuperAdmin Access Active (owner == &apos;admin&apos;)
                </Text>
              </XStack>
              <Text color={MUTED} fontSize="$2" mb={16}>
                You have elevated authorization to inspect internal production repositories, private cluster manifests,
                and sovereign deployment pipelines on git.hanzo.ai.
              </Text>
              <Grid columns={{ min: 280, max: 2 }} gap={12}>
                {PRIVATE_INTERNAL_REPOS.map((p) => (
                  <Box
                    key={p.name}
                    p={16}
                    rounded="$4"
                    borderWidth={1}
                    borderColor="var(--border)"
                    bg="var(--background)"
                  >
                    <XStack items="center" justify="space-between" mb={6}>
                      <Text fontWeight="600" color={INK} fontSize="$2">
                        hanzo-inc/{p.name}
                      </Text>
                      <Chip
                        fontSize="$1"
                        px={8}
                        py={2}
                        rounded="var(--radius-full)"
                        bg={mix('var(--primary)', 15, 'srgb')}
                        color="var(--primary)"
                      >
                        {p.tag}
                      </Chip>
                    </XStack>
                    <Text color={MUTED} fontSize="$1" mb={8}>
                      {p.desc}
                    </Text>
                    <XStack items="center" justify="space-between">
                      <Text color={MUTED} fontSize="$1" fontFamily="$mono">
                        {p.lang}
                      </Text>
                      <Text
                        render={<a href={`https://git.hanzo.ai/hanzo-inc/${p.name}`} target="_blank" rel="noopener noreferrer" />}
                        fontSize="$1"
                        color="var(--primary)"
                      >
                        Internal Tree ↗
                      </Text>
                    </XStack>
                  </Box>
                ))}
              </Grid>
            </Box>
          ) : (
            <Box
              p={20}
              rounded="$5"
              borderWidth={1}
              borderColor={BORDER}
              bg={mix('var(--foreground)', 3, 'srgb')}
            >
              <XStack items="center" gap={12} mb={8}>
                <Lock size={18} color="var(--muted-foreground)" />
                <Text fontWeight="600" color={INK} fontSize="$2">
                  Proprietary Infrastructure Restricted
                </Text>
              </XStack>
              <Text color={MUTED} fontSize="$2" mb={14}>
                This organization manages Hanzo Inc. core production backend infrastructure and cloud services. Internal
                clusters and proprietary APIs are restricted to authorized Hanzo SuperAdmins (<code>owner == &apos;admin&apos;</code>).
                Public application frameworks and client libraries remain open and listed below.
              </Text>
              <XStack items="center" gap={12}>
                <Button size="xs" variant="outline" asChild>
                  <Link href="/login">
                    Sign in with SuperAdmin
                  </Link>
                </Button>
                <Text color={MUTED} fontSize="$1">
                  Public repositories are accessible to all visitors.
                </Text>
              </XStack>
            </Box>
          )}
        </Section>
      )}

      {/* Repositories in this Org */}
      <Section title={`Repositories in ${org.slug}`}>
        <XStack items="center" justify="space-between" gap={16} mb={20} flexWrap="wrap">
          <Text color={MUTED} fontSize="$2">
            Showing {filteredRepos.length} public {filteredRepos.length === 1 ? 'repository' : 'repositories'}
          </Text>
          <Box width="100%" maxW={320}>
            <Input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Filter repositories..."
              size="sm"
            />
          </Box>
        </XStack>

        <Grid columns={{ min: 280, max: 3 }} gap={16}>
          {filteredRepos.map((repo) => (
            <Link
              key={repo.name}
              href={`/oss/${repo.org}/${repo.name}`}
            >
              <Leaf
                p={20}
                rounded="$5"
                borderWidth={1}
                borderColor={BORDER}
                bg="var(--background)"
                hoverStyle={{ borderColor: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}
                height="100%"
                display="flex"
                flexDirection="column"
              >
                <XStack items="center" justify="space-between" mb={12}>
                  <Box
                    width={36}
                    height={36}
                    rounded="$3"
                    borderWidth={1}
                    borderColor={BORDER}
                    items="center"
                    justify="center"
                  >
                    <Text fontSize={18}>{repo.icon}</Text>
                  </Box>
                  <XStack items="center" gap={6}>
                    <Star size={13} color="var(--muted-foreground)" />
                    <Text fontSize="$1" color={MUTED} fontFamily="$mono">
                      {repo.stars}
                    </Text>
                  </XStack>
                </XStack>

                <Text render="h3" fontSize="$3" fontWeight="600" color={INK} mb={6}>
                  {repo.org}/{repo.name}
                </Text>
                <Text fontSize="$2" color={MUTED} mb={16} flex={1} numberOfLines={2}>
                  {repo.description}
                </Text>

                <XStack items="center" justify="space-between" pt={12} borderTopWidth={1} borderColor={BORDER}>
                  <XStack gap={6}>
                    {repo.languages.slice(0, 2).map((lang) => (
                      <Chip key={lang} fontSize="$1" px={6} py={2} rounded="$2" bg="$hover" color={MUTED}>
                        {lang}
                      </Chip>
                    ))}
                  </XStack>
                  <Text fontSize="$1" color="var(--primary)" fontWeight="500">
                    Explore →
                  </Text>
                </XStack>
              </Leaf>
            </Link>
          ))}
        </Grid>
      </Section>
    </Page>
  )
}