@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/views/SEO.tsx

@@ -0,0 +1,458 @@
+'use client';
+
+import * as Tabs from '@radix-ui/react-tabs';
+import {
+  Search, Globe, FileCode2, BarChart3, AlertTriangle, CheckCircle2, XCircle,
+  ArrowUpRight, RefreshCw, BookOpen, Link2, Bot, Plus, Pencil, Trash2,
+  ExternalLink, ArrowRightLeft, Copy, ShieldCheck, Loader2,
+} from 'lucide-react';
+import { useState, useMemo, type FormEvent } 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';
+
+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');
+  const { data: linkHealthData, loading: linkHealthLoading } = useApiData<any[]>('/seo/link-health');
+
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterScore, setFilterScore] = useState<string>('all');
+  const [scanning, setScanning] = useState(false);
+
+  const [showAddRedirect, setShowAddRedirect] = useState(false);
+  const [newRedirect, setNewRedirect] = useState({ source: '', destination: '', type: '301' as '301' | '302' });
+  const [redirectSearch, setRedirectSearch] = useState('');
+
+  const seoPages = seoData ?? [];
+  const redirects = redirectsData ?? [];
+  const linkHealth = linkHealthData ?? [];
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    const path = tab === 'pages' ? '/seo' : `/seo/${tab}`;
+    onNavigate?.(path);
+  };
+
+  // --- 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 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();
+    }
+    setShowAddRedirect(false);
+    setNewRedirect({ source: '', destination: '', type: '301' });
+  };
+
+  const handleDeleteRedirect = async (id: number) => {
+    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Redirect deleted');
+      redirectsRefetch();
+    }
+  };
+
+  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="w-4 h-4 text-green-600" />;
+    if (score >= 50) return <AlertTriangle className="w-4 h-4 text-yellow-600" />;
+    return <XCircle className="w-4 h-4 text-red-600" />;
+  }
+
+  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 isLoading = seoLoading || redirectsLoading || linkHealthLoading;
+
+  if (isLoading) {
+    return (
+      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+      {(seoError || redirectsError) && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
+          <span className="text-sm text-red-800 flex-1">{seoError || redirectsError}</span>
+          <button onClick={() => { seoRefetch(); redirectsRefetch(); }} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+        </div>
+      )}
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">SEO & Redirects</h1>
+          <p className="text-sm text-gray-600">Search optimization, redirects, canonicalization, and link health</p>
+        </div>
+        <button onClick={handleScan} disabled={scanning} className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-60">
+          <RefreshCw className={`w-4 h-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 border-b border-gray-200 overflow-x-auto">
+          <Tabs.Trigger value="pages" className={tabClass}>
+            <span className="flex items-center gap-1.5"><BarChart3 className="w-4 h-4" />Pages</span>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="redirects" className={tabClass}>
+            <span className="flex items-center gap-1.5"><ArrowRightLeft className="w-4 h-4" />Redirects</span>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="canonicals" className={tabClass}>
+            <span className="flex items-center gap-1.5"><Copy className="w-4 h-4" />Canonicalization</span>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="links" className={tabClass}>
+            <span className="flex items-center gap-1.5"><Link2 className="w-4 h-4" />Link Health</span>
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        {/* PAGES TAB */}
+        <Tabs.Content value="pages" className="flex flex-col flex-1 min-h-0">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><BarChart3 className="w-4 h-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={`text-xs mt-1 ${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="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><AlertTriangle className="w-4 h-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="text-xs text-gray-500 mt-1">Across {seoPages.filter((p: any) => p.issues > 0).length} pages</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><FileCode2 className="w-4 h-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="text-xs text-gray-500 mt-1">Title or description</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><Globe className="w-4 h-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="text-xs text-gray-500 mt-1">No Schema.org markup</div>
+            </div>
+          </div>
+
+          <div className="bg-linear-to-r from-indigo-50 to-purple-50 border border-indigo-200 rounded-lg p-4 mb-4">
+            <div className="flex items-start gap-3">
+              <Bot className="w-5 h-5 text-indigo-600 mt-0.5 shrink-0" />
+              <div className="flex-1">
+                <h3 className="text-sm font-semibold text-indigo-900 mb-1">AI SEO Recommendations</h3>
+                <p className="text-sm text-indigo-700 mb-2">{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="px-3 py-1.5 text-xs bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">Configure AI</button>
+                  <button className="px-3 py-1.5 text-xs border border-indigo-300 text-indigo-700 rounded-lg hover:bg-indigo-50 transition-colors">Auto-fix All</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-lg border border-gray-200 mb-4">
+            <div className="p-3 flex flex-col sm:flex-row gap-3">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <input type="text" placeholder="Search pages by URL or title..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              </div>
+              <select value={filterScore} onChange={(e) => setFilterScore(e.target.value)} className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <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="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
+            <div className="overflow-x-auto h-full">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                  <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="hover:bg-gray-50 transition-colors">
+                      <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={`px-2 py-0.5 rounded-full 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="w-3.5 h-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="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">{page.schemaType}</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 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="px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{page.issues}</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 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="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit"><ArrowUpRight className="w-4 h-4 text-gray-600" /></button><button className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="AI analyze"><Bot className="w-4 h-4 text-indigo-600" /></button></div></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </Tabs.Content>
+
+        {/* REDIRECTS TAB */}
+        <Tabs.Content value="redirects" className="flex flex-col flex-1 min-h-0">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">Total Redirects</div>
+              <div className="text-2xl font-semibold text-gray-900">{redirects.length}</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">Active</div>
+              <div className="text-2xl font-semibold text-green-600">{redirects.filter((r: any) => r.active).length}</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">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="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">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="flex items-center gap-3 mb-4">
+            <div className="relative flex-1 max-w-md">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input type="text" placeholder="Search redirects..." value={redirectSearch} onChange={(e) => setRedirectSearch(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" />
+            </div>
+            <button onClick={() => setShowAddRedirect(true)} className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm shrink-0">
+              <Plus className="w-4 h-4" />Add Redirect
+            </button>
+          </div>
+
+          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
+            <div className="overflow-x-auto h-full">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                  <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="hover:bg-gray-50 transition-colors">
+                      <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={`px-2 py-0.5 rounded-full 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={`px-2 py-0.5 rounded-full 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="p-1.5 hover:bg-gray-100 rounded transition-colors"><Pencil className="w-4 h-4 text-gray-600" /></button><button onClick={() => handleDeleteRedirect(r.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors"><Trash2 className="w-4 h-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 left-1/2 top-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:outline-none focus:ring-2 focus:ring-blue-500" 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:outline-none focus:ring-2 focus:ring-blue-500" 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:outline-none focus:ring-2 focus:ring-blue-500"><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 flex-col flex-1 min-h-0 space-y-4">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><ShieldCheck className="w-4 h-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="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><AlertTriangle className="w-4 h-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="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><Globe className="w-4 h-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="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="flex items-center gap-2 mb-2"><CheckCircle2 className="w-4 h-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="text-xs text-gray-500 mt-1">Correct pattern</div>
+            </div>
+          </div>
+
+          {missingCanonical.length > 0 && (
+            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" />
+                <div className="flex-1">
+                  <h3 className="text-sm font-semibold text-yellow-900 mb-1">{missingCanonical.length} page{missingCanonical.length !== 1 ? 's' : ''} missing canonical URLs</h3>
+                  <p className="text-sm text-yellow-700 mb-2">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="px-2.5 py-1 text-xs bg-yellow-100 text-yellow-900 rounded-lg hover:bg-yellow-200 transition-colors">{p.title} ({p.url})</button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
+            <div className="overflow-x-auto h-full">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                  <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="hover:bg-gray-50 transition-colors">
+                      <td className="px-4 py-3 text-sm font-medium text-gray-900">{page.title}</td>
+                      <td className="px-4 py-3"><code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">{page.url}</code></td>
+                      <td className="px-4 py-3">{page.canonical ? <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700 truncate max-w-[200px] block">{page.canonical}</code> : <span className="text-xs text-red-600 font-medium">Not set</span>}</td>
+                      <td className="px-4 py-3">{page.canonical ? <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">✓ Set</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Missing</span>}</td>
+                      <td className="px-4 py-3"><button onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit"><Pencil className="w-4 h-4 text-gray-600" /></button></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </Tabs.Content>
+
+        {/* LINK HEALTH TAB */}
+        <Tabs.Content value="links" className="flex flex-col flex-1 min-h-0 space-y-4">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">Broken Links</div>
+              <div className="text-2xl font-semibold text-red-600">{linkHealth.filter((l: any) => l.status === 404).length}</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">Redirect Chains</div>
+              <div className="text-2xl font-semibold text-yellow-600">{linkHealth.filter((l: any) => l.status === 301).length}</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">Internal Issues</div>
+              <div className="text-2xl font-semibold text-gray-900">{linkHealth.filter((l: any) => l.type === 'internal').length}</div>
+            </div>
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <div className="text-xs text-gray-600 mb-1">External Issues</div>
+              <div className="text-2xl font-semibold text-gray-900">{linkHealth.filter((l: any) => l.type === 'external').length}</div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
+            <div className="overflow-x-auto h-full">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                  <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="hover:bg-gray-50 transition-colors">
+                      <td className="px-4 py-3"><code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">{link.page}</code></td>
+                      <td className="px-4 py-3"><code className="text-xs bg-red-50 px-2 py-1 rounded text-red-800 truncate max-w-[200px] block">{link.url}</code></td>
+                      <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded-full 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={`px-2 py-0.5 rounded-full 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="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Create redirect"><ArrowRightLeft className="w-4 h-4 text-gray-600" /></button><button className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Open URL"><ExternalLink className="w-4 h-4 text-gray-600" /></button></div></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>
+  );
+}