@actuate-media/cms-admin 0.19.0 → 0.21.0

package/src/views/SEO.tsx

@@ -1,904 +1,227 @@
 'use client'
 
+/**
+ * SEO Operations Center — five-tab workflow surface (Overview / Content /
+ * Technical / Redirects / Audit). Tab + deep-link state is driven by the
+ * `?tab=` query string so audits, issues, redirects, and content editors are
+ * all linkable. All data flows through `lib/seo-service.ts`.
+ */
 import * as Tabs from '@radix-ui/react-tabs'
 import {
-  Search,
-  Globe,
-  FileCode2,
-  BarChart3,
-  AlertTriangle,
-  CheckCircle2,
-  XCircle,
-  ArrowUpRight,
+  LayoutDashboard,
+  FileText,
+  Settings2,
+  ArrowRightLeft,
+  ClipboardCheck,
   RefreshCw,
-  BookOpen,
-  Link2,
   Bot,
-  Plus,
-  Pencil,
-  Trash2,
-  ExternalLink,
-  ArrowRightLeft,
-  Copy,
-  ShieldCheck,
-  Loader2,
 } from 'lucide-react'
-import { useState, useMemo, type FormEvent } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
-import * as Dialog from '@radix-ui/react-dialog'
-import { useApiData } from '../lib/useApiData.js'
-import { cmsApi } from '../lib/api.js'
+import { ErrorBoundary } from '../components/ErrorBoundary.js'
+import { fetchSeoOverview, runSeoAudit } from '../lib/seo-service.js'
+import { ScorePill, btnPrimary, btnSecondary } from '../components/seo/primitives.js'
+import { SeoCopilotDrawer } from '../components/seo/SeoCopilotDrawer.js'
+import { useSeoResource } from './seo/useSeoResource.js'
+import { OverviewTab } from './seo/OverviewTab.js'
+import { ContentTab } from './seo/ContentTab.js'
+import { TechnicalTab } from './seo/TechnicalTab.js'
+import { RedirectsTab } from './seo/RedirectsTab.js'
+import { AuditTab } from './seo/AuditTab.js'
 
 export interface SEOProps {
   onNavigate?: (path: string) => void
   initialTab?: string
 }
 
-export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
-  const {
-    data: seoData,
-    loading: seoLoading,
-    error: seoError,
-    refetch: seoRefetch,
-  } = useApiData<any[]>('/seo/pages')
-  const {
-    data: redirectsData,
-    loading: redirectsLoading,
-    error: redirectsError,
-    refetch: redirectsRefetch,
-  } = useApiData<any[]>('/redirects')
-  // /seo/link-health returns `{ truncated, checked, issues: [...] }`,
-  // NOT a bare array — the previous `useApiData<any[]>` typing was a lie
-  // and `linkHealthData ?? []` coerced the wrapper object into the
-  // `linkHealth` variable, which then crashed every render with
-  // "M.filter is not a function" because the JSX inside the (unmounted)
-  // links tab is still evaluated eagerly before being passed to Radix.
-  interface LinkHealthResponse {
-    truncated: boolean
-    checked: number
-    issues: Array<{
-      id: string
-      page: string
-      url: string
-      status: number
-      type: string
-    }>
-  }
-  const { data: linkHealthData, loading: linkHealthLoading } =
-    useApiData<LinkHealthResponse>('/seo/link-health')
+const TABS = [
+  { id: 'overview', label: 'Overview', icon: LayoutDashboard },
+  { id: 'content', label: 'Content SEO', icon: FileText },
+  { id: 'technical', label: 'Technical', icon: Settings2 },
+  { id: 'redirects', label: 'Redirects', icon: ArrowRightLeft },
+  { id: 'audit', label: 'Audit', icon: ClipboardCheck },
+] as const
 
-  const [activeTab, setActiveTab] = useState(initialTab)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [filterScore, setFilterScore] = useState<string>('all')
-  const [scanning, setScanning] = useState(false)
+type TabId = (typeof TABS)[number]['id']
 
-  const [showAddRedirect, setShowAddRedirect] = useState(false)
-  const [newRedirect, setNewRedirect] = useState({
-    source: '',
-    destination: '',
-    type: '301' as '301' | '302',
-  })
-  const [redirectSearch, setRedirectSearch] = useState('')
+function normalizeTab(tab: string | undefined): TabId {
+  const valid = TABS.map((t) => t.id) as string[]
+  return (valid.includes(tab ?? '') ? tab : 'overview') as TabId
+}
 
-  const seoPages = seoData ?? []
-  const redirects = redirectsData ?? []
-  const linkHealth = linkHealthData?.issues ?? []
+interface UrlState {
+  tab: string | null
+  entityType: string | null
+  entityId: string | null
+  issueId: string | null
+}
 
-  const handleTabChange = (tab: string) => {
-    setActiveTab(tab)
-    const path = tab === 'pages' ? '/seo' : `/seo/${tab}`
-    onNavigate?.(path)
+/** Read tab + deep-link query params from the current URL. */
+function readUrlState(): UrlState {
+  if (typeof window === 'undefined') {
+    return { tab: null, entityType: null, entityId: null, issueId: null }
   }
-
-  // --- Pages tab data ---
-  const filtered = seoPages
-    .filter((page: any) => {
-      const matchesSearch =
-        (page.url ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesScore =
-        filterScore === 'all' ||
-        (filterScore === 'good' && page.score >= 80) ||
-        (filterScore === 'warning' && page.score >= 50 && page.score < 80) ||
-        (filterScore === 'critical' && page.score < 50)
-      return matchesSearch && matchesScore
-    })
-    .sort((a: any, b: any) => (!searchQuery ? b.issues - a.issues : 0))
-
-  const totalIssues = seoPages.reduce((sum: number, p: any) => sum + p.issues, 0)
-  const avgScore =
-    seoPages.length > 0
-      ? Math.round(seoPages.reduce((sum: number, p: any) => sum + p.score, 0) / seoPages.length)
-      : 0
-  const missingMeta = seoPages.filter((p: any) => !p.metaTitle || !p.metaDescription).length
-  const missingSchema = seoPages.filter((p: any) => !p.schemaType).length
-
-  // --- Canonical data ---
-  const missingCanonical = seoPages.filter((p: any) => !p.canonical)
-  const allCanonicals = seoPages.filter((p: any) => p.canonical)
-  const canonicalDomains = [
-    ...new Set(
-      allCanonicals
-        .map((p: any) => {
-          try {
-            return new URL(p.canonical).hostname
-          } catch {
-            return ''
-          }
-        })
-        .filter(Boolean),
-    ),
-  ]
-
-  // --- Redirects data ---
-  const filteredRedirects = redirects.filter(
-    (r: any) =>
-      (r.from ?? '').toLowerCase().includes(redirectSearch.toLowerCase()) ||
-      (r.to ?? '').toLowerCase().includes(redirectSearch.toLowerCase()),
-  )
-
-  const handleScan = async () => {
-    setScanning(true)
-    try {
-      const res = await cmsApi('/seo/scan', { method: 'POST' })
-      if (res.error) {
-        toast.error(res.error)
-      } else {
-        const d = res.data as { total: number; pagesWithIssues: number; totalProblems: number }
-        toast.success(
-          `SEO scan complete — ${d.totalProblems} issues found across ${d.pagesWithIssues} of ${d.total} pages`,
-        )
-        seoRefetch()
-      }
-    } catch {
-      toast.error('SEO scan failed')
-    } finally {
-      setScanning(false)
-    }
+  const params = new URLSearchParams(window.location.search)
+  return {
+    tab: params.get('tab'),
+    entityType: params.get('entityType'),
+    entityId: params.get('entityId'),
+    issueId: params.get('issueId'),
   }
+}
 
-  const handleAddRedirect = async (e: FormEvent) => {
-    e.preventDefault()
-    const res = await cmsApi('/redirects', {
-      method: 'POST',
-      body: JSON.stringify({
-        from: newRedirect.source,
-        to: newRedirect.destination,
-        type: newRedirect.type,
-      }),
-    })
-    if (res.error) {
-      toast.error(res.error)
-    } else {
-      toast.success('Redirect added')
-      redirectsRefetch()
+export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
+  const initialUrl = readUrlState()
+  const [activeTab, setActiveTab] = useState<TabId>(normalizeTab(initialUrl.tab ?? initialTab))
+  const [refetchKey, setRefetchKey] = useState(0)
+  const [auditing, setAuditing] = useState(false)
+  const [copilotOpen, setCopilotOpen] = useState(false)
+  const [deepLink, setDeepLink] = useState<UrlState>(initialUrl)
+
+  // Overview resource is owned here so the header score pill and the Overview
+  // tab share a single request; `refetchKey` re-runs it after an audit.
+  const overviewResource = useSeoResource(fetchSeoOverview, [refetchKey])
+
+  // Keep tab + deep links in sync with browser back/forward navigation.
+  useEffect(() => {
+    function sync() {
+      const url = readUrlState()
+      setActiveTab(normalizeTab(url.tab ?? initialTab))
+      setDeepLink(url)
     }
-    setShowAddRedirect(false)
-    setNewRedirect({ source: '', destination: '', type: '301' })
-  }
+    window.addEventListener('popstate', sync)
+    return () => window.removeEventListener('popstate', sync)
+  }, [initialTab])
+
+  useEffect(() => {
+    const url = readUrlState()
+    setActiveTab(normalizeTab(url.tab ?? initialTab))
+    setDeepLink(url)
+  }, [initialTab])
+
+  const changeTab = useCallback(
+    (tab: string) => {
+      const next = normalizeTab(tab)
+      setActiveTab(next)
+      setDeepLink({ tab: next, entityType: null, entityId: null, issueId: null })
+      onNavigate?.(`/seo?tab=${next}`)
+    },
+    [onNavigate],
+  )
 
-  const handleDeleteRedirect = async (id: number) => {
-    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' })
+  const handleRunAudit = useCallback(async () => {
+    setAuditing(true)
+    const res = await runSeoAudit('full')
+    setAuditing(false)
     if (res.error) {
       toast.error(res.error)
-    } else {
-      toast.success('Redirect deleted')
-      redirectsRefetch()
+      return
     }
-  }
-
-  function scoreBadge(score: number) {
-    if (score >= 80) return 'bg-green-100 text-green-800'
-    if (score >= 50) return 'bg-yellow-100 text-yellow-800'
-    return 'bg-red-100 text-red-800'
-  }
-  function scoreIcon(score: number) {
-    if (score >= 80) return <CheckCircle2 className="h-4 w-4 text-green-600" />
-    if (score >= 50) return <AlertTriangle className="h-4 w-4 text-yellow-600" />
-    return <XCircle className="h-4 w-4 text-red-600" />
-  }
+    toast.success('Audit complete.')
+    setRefetchKey((k) => k + 1)
+  }, [])
 
-  const tabClass =
-    'px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600 shrink-0'
+  const score = overviewResource.data?.siteScore.score
 
-  const isLoading = seoLoading || redirectsLoading || linkHealthLoading
-
-  if (isLoading) {
-    return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-      </div>
-    )
-  }
+  const badgeCounts = useMemo(() => {
+    const summary = overviewResource.data?.issuesSummary
+    return { audit: summary ? summary.critical + summary.warning : 0 }
+  }, [overviewResource.data])
 
   return (
-    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
-      {(seoError || redirectsError) && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{seoError || redirectsError}</span>
-          <button
-            onClick={() => {
-              seoRefetch()
-              redirectsRefetch()
-            }}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
+    <div className="space-y-6 p-6">
+      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">SEO & Redirects</h1>
-          <p className="text-sm text-gray-600">
-            Search optimization, redirects, canonicalization, and link health
+          <h1 className="text-foreground text-2xl font-medium">SEO Operations Center</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Monitor, fix, and automate SEO across your content, redirects, and technical setup.
           </p>
         </div>
-        <button
-          onClick={handleScan}
-          disabled={scanning}
-          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
-        >
-          <RefreshCw className={`h-4 w-4 ${scanning ? 'animate-spin' : ''}`} />
-          {scanning ? 'Scanning...' : 'Run SEO Scan'}
-        </button>
-      </div>
-
-      <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
-        <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
-          <Tabs.Trigger value="pages" className={tabClass}>
-            <span className="flex items-center gap-1.5">
-              <BarChart3 className="h-4 w-4" />
-              Pages
+        <div className="flex items-center gap-3">
+          {typeof score === 'number' && (
+            <span className="text-muted-foreground flex items-center gap-2 text-sm">
+              Site score <ScorePill score={score} />
             </span>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="redirects" className={tabClass}>
-            <span className="flex items-center gap-1.5">
-              <ArrowRightLeft className="h-4 w-4" />
-              Redirects
-            </span>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="canonicals" className={tabClass}>
-            <span className="flex items-center gap-1.5">
-              <Copy className="h-4 w-4" />
-              Canonicalization
-            </span>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="links" className={tabClass}>
-            <span className="flex items-center gap-1.5">
-              <Link2 className="h-4 w-4" />
-              Link Health
-            </span>
-          </Tabs.Trigger>
-        </Tabs.List>
-
-        {/* PAGES TAB */}
-        <Tabs.Content value="pages" className="flex min-h-0 flex-1 flex-col">
-          <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <BarChart3 className="h-4 w-4 text-blue-600" />
-                <span className="text-xs font-medium text-gray-600">Avg SEO Score</span>
-              </div>
-              <div className="text-2xl font-semibold text-gray-900">{avgScore}</div>
-              <div
-                className={`mt-1 text-xs ${avgScore >= 80 ? 'text-green-600' : avgScore >= 50 ? 'text-yellow-600' : 'text-red-600'}`}
-              >
-                {avgScore >= 80 ? 'Good' : avgScore >= 50 ? 'Needs improvement' : 'Critical'}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <AlertTriangle className="h-4 w-4 text-yellow-600" />
-                <span className="text-xs font-medium text-gray-600">Total Issues</span>
-              </div>
-              <div className="text-2xl font-semibold text-gray-900">{totalIssues}</div>
-              <div className="mt-1 text-xs text-gray-500">
-                Across {seoPages.filter((p: any) => p.issues > 0).length} pages
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <FileCode2 className="h-4 w-4 text-purple-600" />
-                <span className="text-xs font-medium text-gray-600">Missing Meta</span>
-              </div>
-              <div className="text-2xl font-semibold text-gray-900">{missingMeta}</div>
-              <div className="mt-1 text-xs text-gray-500">Title or description</div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <Globe className="h-4 w-4 text-green-600" />
-                <span className="text-xs font-medium text-gray-600">Missing Schema</span>
-              </div>
-              <div className="text-2xl font-semibold text-gray-900">{missingSchema}</div>
-              <div className="mt-1 text-xs text-gray-500">No Schema.org markup</div>
-            </div>
-          </div>
-
-          <div className="mb-4 rounded-lg border border-indigo-200 bg-linear-to-r from-indigo-50 to-purple-50 p-4">
-            <div className="flex items-start gap-3">
-              <Bot className="mt-0.5 h-5 w-5 shrink-0 text-indigo-600" />
-              <div className="flex-1">
-                <h3 className="mb-1 text-sm font-semibold text-indigo-900">
-                  AI SEO Recommendations
-                </h3>
-                <p className="mb-2 text-sm text-indigo-700">
-                  {missingMeta} pages missing meta descriptions. {missingCanonical.length} pages
-                  without canonical URLs. AI can auto-generate these from page content.
-                </p>
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => onNavigate?.('/settings')}
-                    className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-indigo-700"
-                  >
-                    Configure AI
-                  </button>
-                  <button className="rounded-lg border border-indigo-300 px-3 py-1.5 text-xs text-indigo-700 transition-colors hover:bg-indigo-50">
-                    Auto-fix All
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="mb-4 rounded-lg border border-gray-200 bg-white">
-            <div className="flex flex-col gap-3 p-3 sm:flex-row">
-              <div className="relative flex-1">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                <input
-                  type="text"
-                  placeholder="Search pages by URL or title..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <select
-                value={filterScore}
-                onChange={(e) => setFilterScore(e.target.value)}
-                className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-              >
-                <option value="all">All Scores</option>
-                <option value="good">Good (80+)</option>
-                <option value="warning">Needs Work (50-79)</option>
-                <option value="critical">Critical (&lt;50)</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Page</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Score</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Readability
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Schema
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Meta</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Issues
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {filtered.map((page: any) => (
-                    <tr key={page.id} className="transition-colors hover:bg-gray-50">
-                      <td className="px-4 py-3">
-                        <div className="text-sm font-medium text-gray-900">{page.title}</div>
-                        <div className="text-xs text-gray-500">{page.url}</div>
-                      </td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          {scoreIcon(page.score)}
-                          <span
-                            className={`rounded-full px-2 py-0.5 text-xs font-medium ${scoreBadge(page.score)}`}
-                          >
-                            {page.score}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">
-                        {page.readability > 0 ? (
-                          <div className="flex items-center gap-2">
-                            <BookOpen className="h-3.5 w-3.5 text-gray-400" />
-                            <span
-                              className={`text-sm ${page.readability >= 80 ? 'text-green-700' : page.readability >= 60 ? 'text-yellow-700' : 'text-red-700'}`}
-                            >
-                              {page.readability}
-                            </span>
-                          </div>
-                        ) : (
-                          <span className="text-xs text-gray-400">—</span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3">
-                        {page.schemaType ? (
-                          <span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800">
-                            {page.schemaType}
-                          </span>
-                        ) : (
-                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">
-                            Missing
-                          </span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3">
-                        <div className="flex flex-col gap-0.5">
-                          <span
-                            className={`text-xs ${page.metaTitle ? 'text-green-700' : 'text-red-600'}`}
-                          >
-                            {page.metaTitle ? '✓ Title' : '✗ Title'}
-                          </span>
-                          <span
-                            className={`text-xs ${page.metaDescription ? 'text-green-700' : 'text-red-600'}`}
-                          >
-                            {page.metaDescription ? '✓ Desc' : '✗ Desc'}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">
-                        {page.issues > 0 ? (
-                          <span className="rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
-                            {page.issues}
-                          </span>
-                        ) : (
-                          <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                            ✓
-                          </span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-1">
-                          <button
-                            onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Edit"
-                          >
-                            <ArrowUpRight className="h-4 w-4 text-gray-600" />
-                          </button>
-                          <button
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="AI analyze"
-                          >
-                            <Bot className="h-4 w-4 text-indigo-600" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </Tabs.Content>
-
-        {/* REDIRECTS TAB */}
-        <Tabs.Content value="redirects" className="flex min-h-0 flex-1 flex-col">
-          <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Total Redirects</div>
-              <div className="text-2xl font-semibold text-gray-900">{redirects.length}</div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Active</div>
-              <div className="text-2xl font-semibold text-green-600">
-                {redirects.filter((r: any) => r.active).length}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Total Hits</div>
-              <div className="text-2xl font-semibold text-blue-600">
-                {redirects.reduce((s: number, r: any) => s + r.hits, 0).toLocaleString()}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">301 Permanent</div>
-              <div className="text-2xl font-semibold text-gray-900">
-                {redirects.filter((r: any) => r.type === '301').length}
-              </div>
-            </div>
-          </div>
-
-          <div className="mb-4 flex items-center gap-3">
-            <div className="relative max-w-md flex-1">
-              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              <input
-                type="text"
-                placeholder="Search redirects..."
-                value={redirectSearch}
-                onChange={(e) => setRedirectSearch(e.target.value)}
-                className="w-full rounded-lg border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-              />
-            </div>
-            <button
-              onClick={() => setShowAddRedirect(true)}
-              className="flex shrink-0 items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-            >
-              <Plus className="h-4 w-4" />
-              Add Redirect
-            </button>
-          </div>
-
-          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Source
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Destination
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Type</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Hits</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Status
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {filteredRedirects.map((r: any) => (
-                    <tr key={r.id} className="transition-colors hover:bg-gray-50">
-                      <td className="px-4 py-3">
-                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
-                          {r.from}
-                        </code>
-                      </td>
-                      <td className="px-4 py-3">
-                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
-                          {r.to}
-                        </code>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${r.type === '301' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}
-                        >
-                          {r.type}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{r.hits.toLocaleString()}</td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${r.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
-                        >
-                          {r.active ? 'Active' : 'Inactive'}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          <button className="rounded p-1.5 transition-colors hover:bg-gray-100">
-                            <Pencil className="h-4 w-4 text-gray-600" />
-                          </button>
-                          <button
-                            onClick={() => handleDeleteRedirect(r.id)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                          >
-                            <Trash2 className="h-4 w-4 text-red-600" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <Dialog.Root open={showAddRedirect} onOpenChange={setShowAddRedirect}>
-            <Dialog.Portal>
-              <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-              <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
-                <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
-                  Add Redirect
-                </Dialog.Title>
-                <form onSubmit={handleAddRedirect} className="space-y-4">
-                  <div>
-                    <label className="mb-1 block text-sm font-medium text-gray-700">
-                      Source URL
-                    </label>
-                    <input
-                      type="text"
-                      value={newRedirect.source}
-                      onChange={(e) => setNewRedirect({ ...newRedirect, source: e.target.value })}
-                      placeholder="/old-page"
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                      required
-                    />
-                  </div>
-                  <div>
-                    <label className="mb-1 block text-sm font-medium text-gray-700">
-                      Destination URL
-                    </label>
-                    <input
-                      type="text"
-                      value={newRedirect.destination}
-                      onChange={(e) =>
-                        setNewRedirect({ ...newRedirect, destination: e.target.value })
-                      }
-                      placeholder="/new-page"
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                      required
-                    />
-                  </div>
-                  <div>
-                    <label className="mb-1 block text-sm font-medium text-gray-700">Type</label>
-                    <select
-                      value={newRedirect.type}
-                      onChange={(e) =>
-                        setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })
-                      }
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                    >
-                      <option value="301">301 (Permanent)</option>
-                      <option value="302">302 (Temporary)</option>
-                    </select>
-                  </div>
-                  <div className="flex justify-end gap-3 pt-4">
-                    <Dialog.Close asChild>
-                      <button
-                        type="button"
-                        className="rounded-lg border border-gray-300 px-4 py-2 text-sm hover:bg-gray-50"
-                      >
-                        Cancel
-                      </button>
-                    </Dialog.Close>
-                    <button
-                      type="submit"
-                      className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
-                    >
-                      Add Redirect
-                    </button>
-                  </div>
-                </form>
-              </Dialog.Content>
-            </Dialog.Portal>
-          </Dialog.Root>
-        </Tabs.Content>
-
-        {/* CANONICALIZATION TAB */}
-        <Tabs.Content value="canonicals" className="flex min-h-0 flex-1 flex-col space-y-4">
-          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <ShieldCheck className="h-4 w-4 text-green-600" />
-                <span className="text-xs font-medium text-gray-600">With Canonical</span>
-              </div>
-              <div className="text-2xl font-semibold text-green-700">{allCanonicals.length}</div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <AlertTriangle className="h-4 w-4 text-red-600" />
-                <span className="text-xs font-medium text-gray-600">Missing Canonical</span>
-              </div>
-              <div className="text-2xl font-semibold text-red-700">{missingCanonical.length}</div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <Globe className="h-4 w-4 text-blue-600" />
-                <span className="text-xs font-medium text-gray-600">Canonical Domains</span>
-              </div>
-              <div className="text-2xl font-semibold text-gray-900">{canonicalDomains.length}</div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <CheckCircle2 className="h-4 w-4 text-green-600" />
-                <span className="text-xs font-medium text-gray-600">Self-Referencing</span>
-              </div>
-              <div className="text-2xl font-semibold text-green-700">{allCanonicals.length}</div>
-              <div className="mt-1 text-xs text-gray-500">Correct pattern</div>
-            </div>
-          </div>
-
-          {missingCanonical.length > 0 && (
-            <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
-              <div className="flex items-start gap-3">
-                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-yellow-600" />
-                <div className="flex-1">
-                  <h3 className="mb-1 text-sm font-semibold text-yellow-900">
-                    {missingCanonical.length} page{missingCanonical.length !== 1 ? 's' : ''} missing
-                    canonical URLs
-                  </h3>
-                  <p className="mb-2 text-sm text-yellow-700">
-                    Without canonical tags, search engines may index duplicate versions of these
-                    pages, diluting your ranking signals.
-                  </p>
-                  <div className="flex flex-wrap gap-2">
-                    {missingCanonical.map((p: any) => (
-                      <button
-                        key={p.id}
-                        onClick={() => onNavigate?.(`/pages/${p.id}`)}
-                        className="rounded-lg bg-yellow-100 px-2.5 py-1 text-xs text-yellow-900 transition-colors hover:bg-yellow-200"
-                      >
-                        {p.title} ({p.url})
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
           )}
+          <button className={btnSecondary} onClick={() => setCopilotOpen(true)}>
+            <Bot className="h-4 w-4" aria-hidden />
+            AI Copilot
+          </button>
+          <button className={btnPrimary} onClick={handleRunAudit} disabled={auditing}>
+            <RefreshCw className={`h-4 w-4 ${auditing ? 'animate-spin' : ''}`} aria-hidden />
+            {auditing ? 'Running audit…' : 'Run audit'}
+          </button>
+        </div>
+      </header>
 
-          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Page</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">URL</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Canonical URL
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Status
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {seoPages.map((page: any) => (
-                    <tr key={page.id} className="transition-colors hover:bg-gray-50">
-                      <td className="px-4 py-3 text-sm font-medium text-gray-900">{page.title}</td>
-                      <td className="px-4 py-3">
-                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-700">
-                          {page.url}
-                        </code>
-                      </td>
-                      <td className="px-4 py-3">
-                        {page.canonical ? (
-                          <code className="block max-w-[200px] truncate rounded bg-gray-100 px-2 py-1 text-xs text-gray-700">
-                            {page.canonical}
-                          </code>
-                        ) : (
-                          <span className="text-xs font-medium text-red-600">Not set</span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3">
-                        {page.canonical ? (
-                          <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                            ✓ Set
-                          </span>
-                        ) : (
-                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">
-                            Missing
-                          </span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3">
-                        <button
-                          onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                          title="Edit"
-                        >
-                          <Pencil className="h-4 w-4 text-gray-600" />
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </Tabs.Content>
+      <SeoCopilotDrawer open={copilotOpen} onOpenChange={setCopilotOpen} />
 
-        {/* LINK HEALTH TAB */}
-        <Tabs.Content value="links" className="flex min-h-0 flex-1 flex-col space-y-4">
-          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Broken Links</div>
-              <div className="text-2xl font-semibold text-red-600">
-                {linkHealth.filter((l: any) => l.status === 404).length}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Redirect Chains</div>
-              <div className="text-2xl font-semibold text-yellow-600">
-                {linkHealth.filter((l: any) => l.status === 301).length}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">Internal Issues</div>
-              <div className="text-2xl font-semibold text-gray-900">
-                {linkHealth.filter((l: any) => l.type === 'internal').length}
-              </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <div className="mb-1 text-xs text-gray-600">External Issues</div>
-              <div className="text-2xl font-semibold text-gray-900">
-                {linkHealth.filter((l: any) => l.type === 'external').length}
-              </div>
-            </div>
-          </div>
+      <Tabs.Root value={activeTab} onValueChange={changeTab}>
+        <Tabs.List
+          className="border-border flex gap-1 overflow-x-auto border-b"
+          aria-label="SEO sections"
+        >
+          {TABS.map((t) => {
+            const Icon = t.icon
+            const badge = t.id === 'audit' ? badgeCounts.audit : 0
+            return (
+              <Tabs.Trigger
+                key={t.id}
+                value={t.id}
+                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px flex items-center gap-2 border-b-2 border-transparent px-3 py-2.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <Icon className="h-4 w-4" aria-hidden />
+                {t.label}
+                {badge > 0 && (
+                  <span className="bg-destructive/10 text-destructive ml-1 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums">
+                    {badge}
+                  </span>
+                )}
+              </Tabs.Trigger>
+            )
+          })}
+        </Tabs.List>
 
-          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Found On
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Broken URL
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Status
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Type</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Last Checked
-                    </th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {linkHealth.map((link: any) => (
-                    <tr key={link.id} className="transition-colors hover:bg-gray-50">
-                      <td className="px-4 py-3">
-                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-700">
-                          {link.page}
-                        </code>
-                      </td>
-                      <td className="px-4 py-3">
-                        <code className="block max-w-[200px] truncate rounded bg-red-50 px-2 py-1 text-xs text-red-800">
-                          {link.url}
-                        </code>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${link.status === 404 ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'}`}
-                        >
-                          {link.status}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${link.type === 'internal' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}`}
-                        >
-                          {link.type}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{link.lastChecked}</td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-1">
-                          <button
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Create redirect"
-                          >
-                            <ArrowRightLeft className="h-4 w-4 text-gray-600" />
-                          </button>
-                          <button
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Open URL"
-                          >
-                            <ExternalLink className="h-4 w-4 text-gray-600" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </Tabs.Content>
+        <div className="pt-6">
+          <ErrorBoundary>
+            <Tabs.Content value="overview" tabIndex={-1}>
+              {activeTab === 'overview' && (
+                <OverviewTab
+                  resource={overviewResource}
+                  onOpenIssue={(issueId) => onNavigate?.(`/seo?tab=audit&issueId=${issueId}`)}
+                  onConnectSearchConsole={() =>
+                    toast.info(
+                      'Google Search Console integration is coming soon. Demo performance data is available in local development.',
+                    )
+                  }
+                />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="content" tabIndex={-1}>
+              {activeTab === 'content' && (
+                <ContentTab
+                  initialEntityType={deepLink.entityType}
+                  initialEntityId={deepLink.entityId}
+                />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="technical" tabIndex={-1}>
+              {activeTab === 'technical' && <TechnicalTab />}
+            </Tabs.Content>
+            <Tabs.Content value="redirects" tabIndex={-1}>
+              {activeTab === 'redirects' && <RedirectsTab />}
+            </Tabs.Content>
+            <Tabs.Content value="audit" tabIndex={-1}>
+              {activeTab === 'audit' && (
+                <AuditTab
+                  refetchKey={refetchKey}
+                  initialIssueId={deepLink.issueId}
+                  onNavigate={onNavigate}
+                />
+              )}
+            </Tabs.Content>
+          </ErrorBoundary>
+        </div>
       </Tabs.Root>
     </div>
   )