import { Lock } from 'lucide-react';
import { useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import EditorialPageHeader from '@/Components/layout/EditorialPageHeader';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { CONTENT_HUB_VIEWED } from '@/lib/event-catalog';
import { cn } from '@/lib/utils';
import type { SiteBasic } from '@/types';
import { CONTENT_CELLS } from './content-hub-cells';
interface ContentCounts {
inventory: number;
briefs: number;
drafts_in_flight: number;
}
interface Props {
site: SiteBasic & { has_gsc: boolean; has_analysis: boolean };
counts?: ContentCounts;
}
/**
* Content hub IA (plan R1 + B-03 fix):
* Content children = Content Inventory · Content Briefs · Calendar · Recovery Runs · Reports
*
* Always-on (work pre-GSC): Inventory, Briefs, Calendar.
* Analysis-gated: Recovery Runs, Reports.
*
* Editorialize-hubs (2026-05-28): brochure-card layout replaced with a
* hairline cell-grid. Gated cells render with a Lock overlay on the icon
* and a `aria-disabled` span (not a disabled Button — that was the
* pre-existing a11y antipattern fixed in this pass).
*
* R7UXB-005: Cell definitions moved to content-hub-cells.ts so ContentHub
* and RecoverHub share a single source of truth.
*/
/** Count accessor for each CONTENT_CELLS entry (same order). */
function getCount(key: string, c: ContentCounts): number | null {
switch (key) {
case 'content-inventory': return c.inventory;
case 'content-briefs': return c.briefs;
case 'calendar': return null;
case 'batch-ai': return c.drafts_in_flight;
case 'reports': return null;
default: return null;
}
}
const ZERO_COUNTS: ContentCounts = {
inventory: 0,
briefs: 0,
drafts_in_flight: 0,
};
export default function ContentHub({ site, counts }: Props) {
const resolvedCounts = counts ?? ZERO_COUNTS;
useEffect(() => {
trackProductEvent(CONTENT_HUB_VIEWED, { site_id: String(site.id) });
}, [site.id]);
return (
{resolvedCounts.inventory}
),
},
{
label: 'Briefs',
value: (
{resolvedCounts.briefs}
),
},
{
label: 'Drafts in flight',
value: (
{resolvedCounts.drafts_in_flight}
),
},
]}
/>
{CONTENT_CELLS.map((cell) => {
const Icon = cell.icon;
const gated = cell.gatedBy ? cell.gatedBy(site) : false;
const count = getCount(cell.key, resolvedCounts);
const hasSignal = !gated && count !== null && count > 0;
const description = gated && cell.gatedReason ? cell.gatedReason : cell.description;
// Cell content — extracted so the gated branch can render a plain
// rather than wrapping a disabled Button
// around a , which was the previous a11y antipattern.
const body = (
<>
{gated && (
)}
{!gated && (
/* UI-007: always visible on mobile (no hover on touch devices);
hover-reveal only on sm+ where pointer devices are typical. */
{cell.ctaLabel} →
)}
{gated && (
Locked
)}
{count !== null && (() => {
// R6UXS-010: show em-dash for analysis-gated cells when no
// analysis has run — '0' reads as "empty" rather than "not yet run".
const showDash = gated && count === 0;
return showDash ? (