feat: add session replay functionality with privacy controls

app/sites/[id]/replays/[replayId]/page.tsx

@@ -0,0 +1,352 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { getSite, type Site } from '@/lib/api/sites'
+import { getReplay, getReplayData, deleteReplay, formatDuration, type SessionReplay } from '@/lib/api/replays'
+import { toast } from 'sonner'
+import LoadingOverlay from '@/components/LoadingOverlay'
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function getFlagEmoji(countryCode: string | null) {
+  if (!countryCode || countryCode.length !== 2) return '🌍'
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 127397 + char.charCodeAt(0))
+  return String.fromCodePoint(...codePoints)
+}
+
+export default function ReplayViewerPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+  const replayId = params.replayId as string
+
+  const [site, setSite] = useState<Site | null>(null)
+  const [replay, setReplay] = useState<SessionReplay | null>(null)
+  const [replayData, setReplayData] = useState<unknown[] | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [loadingData, setLoadingData] = useState(false)
+  const [playerReady, setPlayerReady] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [speed, setSpeed] = useState(1)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+
+  const playerContainerRef = useRef<HTMLDivElement>(null)
+  const playerRef = useRef<unknown>(null)
+
+  // Load site and replay info
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const [siteData, replayData] = await Promise.all([
+          getSite(siteId),
+          getReplay(siteId, replayId)
+        ])
+        setSite(siteData)
+        setReplay(replayData)
+      } catch (error: unknown) {
+        toast.error('Failed to load replay')
+      } finally {
+        setLoading(false)
+      }
+    }
+    init()
+  }, [siteId, replayId])
+
+  // Load replay data
+  useEffect(() => {
+    const loadData = async () => {
+      if (!replay) return
+      setLoadingData(true)
+      try {
+        const data = await getReplayData(siteId, replayId)
+        setReplayData(data)
+      } catch (error: unknown) {
+        toast.error('Failed to load replay data')
+      } finally {
+        setLoadingData(false)
+      }
+    }
+    loadData()
+  }, [replay, siteId, replayId])
+
+  // Initialize rrweb player when data is ready
+  useEffect(() => {
+    if (!replayData || !playerContainerRef.current || replayData.length === 0) return
+
+    // Dynamically import rrweb-player
+    const initPlayer = async () => {
+      try {
+        const rrwebPlayer = await import('rrweb-player')
+
+        // Clear previous player
+        if (playerContainerRef.current) {
+          playerContainerRef.current.innerHTML = ''
+        }
+
+        // Create player
+        const player = new rrwebPlayer.default({
+          target: playerContainerRef.current!,
+          props: {
+            events: replayData as unknown[],
+            width: playerContainerRef.current!.clientWidth,
+            height: Math.min(600, window.innerHeight - 300),
+            autoPlay: false,
+            showController: true,
+            speed: speed,
+            skipInactive: true,
+            showWarning: false,
+            showDebug: false,
+          },
+        })
+
+        playerRef.current = player
+
+        // Listen for player events
+        player.addEventListener('pause', () => setIsPlaying(false))
+        player.addEventListener('start', () => setIsPlaying(true))
+        player.addEventListener('finish', () => setIsPlaying(false))
+
+        setPlayerReady(true)
+      } catch (error) {
+        console.error('Failed to initialize player:', error)
+        toast.error('Failed to initialize replay player')
+      }
+    }
+
+    initPlayer()
+
+    return () => {
+      if (playerRef.current) {
+        // Cleanup player
+        playerRef.current = null
+      }
+    }
+  }, [replayData])
+
+  // Update speed
+  useEffect(() => {
+    if (playerRef.current && typeof (playerRef.current as { setSpeed?: (s: number) => void }).setSpeed === 'function') {
+      (playerRef.current as { setSpeed: (s: number) => void }).setSpeed(speed)
+    }
+  }, [speed])
+
+  const handleDelete = async () => {
+    try {
+      await deleteReplay(siteId, replayId)
+      toast.success('Replay deleted')
+      router.push(`/sites/${siteId}/replays`)
+    } catch (error: unknown) {
+      toast.error('Failed to delete replay')
+    }
+  }
+
+  if (loading) return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Loading Replay" />
+  if (!site || !replay) return <div className="p-8">Replay not found</div>
+
+  return (
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-2 mb-1">
+          <button
+            onClick={() => router.push(`/sites/${siteId}/replays`)}
+            className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
+          >
+            &larr; Back to Replays
+          </button>
+        </div>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+            Session Replay
+          </h1>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-6">
+        {/* Player */}
+        <div className="flex-1">
+          <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900">
+            {/* Player Container */}
+            <div
+              ref={playerContainerRef}
+              className="w-full bg-neutral-100 dark:bg-neutral-800 min-h-[400px] flex items-center justify-center"
+            >
+              {loadingData ? (
+                <div className="flex flex-col items-center gap-3">
+                  <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-neutral-900 dark:border-white"></div>
+                  <span className="text-sm text-neutral-500">Loading replay data...</span>
+                </div>
+              ) : !replayData || replayData.length === 0 ? (
+                <div className="text-center text-neutral-500 p-8">
+                  <div className="text-4xl mb-4">🎬</div>
+                  <p className="text-lg font-medium mb-2">No replay data available</p>
+                  <p className="text-sm">This session may not have recorded any events.</p>
+                </div>
+              ) : null}
+            </div>
+
+            {/* Custom Controls */}
+            {playerReady && (
+              <div className="p-4 border-t border-neutral-200 dark:border-neutral-800 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <span className="text-sm text-neutral-500">Playback Speed:</span>
+                  <div className="flex gap-1">
+                    {[0.5, 1, 2, 4].map((s) => (
+                      <button
+                        key={s}
+                        onClick={() => setSpeed(s)}
+                        className={`px-2 py-1 text-sm rounded ${
+                          speed === s
+                            ? 'bg-brand-orange text-white'
+                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                        }`}
+                      >
+                        {s}x
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-neutral-500">
+                  <span>{replay.events_count} events</span>
+                  <span>•</span>
+                  <span>{formatDuration(replay.duration_ms)}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Session Info Sidebar */}
+        <div className="w-80 flex-shrink-0">
+          <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900">
+            <div className="p-4 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
+              <h2 className="font-semibold text-neutral-900 dark:text-white">Session Details</h2>
+            </div>
+            <div className="p-4 space-y-4">
+              <div>
+                <span className="text-xs text-neutral-500 uppercase tracking-wider">Session ID</span>
+                <p className="font-mono text-sm text-neutral-900 dark:text-white mt-1">{replay.session_id}</p>
+              </div>
+
+              <div>
+                <span className="text-xs text-neutral-500 uppercase tracking-wider">Entry Page</span>
+                <p className="text-sm text-neutral-900 dark:text-white mt-1 break-all">{replay.entry_page}</p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Duration</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{formatDuration(replay.duration_ms)}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Events</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{replay.events_count}</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Device</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1 capitalize">{replay.device_type || 'Unknown'}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Browser</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{replay.browser || 'Unknown'}</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">OS</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{replay.os || 'Unknown'}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Location</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{getFlagEmoji(replay.country)} {replay.country || 'Unknown'}</p>
+                </div>
+              </div>
+
+              <div>
+                <span className="text-xs text-neutral-500 uppercase tracking-wider">Started</span>
+                <p className="text-sm text-neutral-900 dark:text-white mt-1">{formatDate(replay.started_at)}</p>
+              </div>
+
+              {replay.ended_at && (
+                <div>
+                  <span className="text-xs text-neutral-500 uppercase tracking-wider">Ended</span>
+                  <p className="text-sm text-neutral-900 dark:text-white mt-1">{formatDate(replay.ended_at)}</p>
+                </div>
+              )}
+
+              <div className="pt-2 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-2">
+                  {replay.is_skeleton_mode ? (
+                    <span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-1 rounded">
+                      🔒 Skeleton Mode (Anonymous)
+                    </span>
+                  ) : replay.consent_given ? (
+                    <span className="text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-1 rounded">
+                      ✓ Consent Given
+                    </span>
+                  ) : (
+                    <span className="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 px-2 py-1 rounded">
+                      ⚠ No Consent Record
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-neutral-900 rounded-xl p-6 max-w-md w-full mx-4 shadow-xl">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">Delete Replay?</h3>
+            <p className="text-neutral-600 dark:text-neutral-400 mb-6">
+              This action cannot be undone. The replay data will be permanently deleted.
+            </p>
+            <div className="flex gap-3 justify-end">
+              <button
+                onClick={() => setShowDeleteModal(false)}
+                className="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

app/sites/[id]/replays/page.tsx

@@ -0,0 +1,275 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { getSite, type Site } from '@/lib/api/sites'
+import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters } from '@/lib/api/replays'
+import { toast } from 'sonner'
+import LoadingOverlay from '@/components/LoadingOverlay'
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function getFlagEmoji(countryCode: string | null) {
+  if (!countryCode || countryCode.length !== 2) return '🌍'
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 127397 + char.charCodeAt(0))
+  return String.fromCodePoint(...codePoints)
+}
+
+function getDeviceEmoji(deviceType: string | null) {
+  switch (deviceType?.toLowerCase()) {
+    case 'mobile':
+      return '📱'
+    case 'tablet':
+      return '📱'
+    default:
+      return '💻'
+  }
+}
+
+export default function ReplaysPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+
+  const [site, setSite] = useState<Site | null>(null)
+  const [replays, setReplays] = useState<ReplayListItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [filters, setFilters] = useState<ReplayFilters>({
+    limit: 20,
+    offset: 0,
+  })
+
+  // Load site info and replays
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const siteData = await getSite(siteId)
+        setSite(siteData)
+      } catch (error: unknown) {
+        toast.error('Failed to load site')
+      } finally {
+        setLoading(false)
+      }
+    }
+    init()
+  }, [siteId])
+
+  // Load replays when filters change
+  useEffect(() => {
+    const loadReplays = async () => {
+      try {
+        const response = await listReplays(siteId, filters)
+        setReplays(response.replays || [])
+        setTotal(response.total)
+      } catch (error: unknown) {
+        toast.error('Failed to load replays')
+      }
+    }
+    if (site) {
+      loadReplays()
+    }
+  }, [siteId, site, filters])
+
+  const handlePageChange = (newOffset: number) => {
+    setFilters(prev => ({ ...prev, offset: newOffset }))
+  }
+
+  if (loading) return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Session Replays" />
+  if (!site) return <div className="p-8">Site not found</div>
+
+  const currentPage = Math.floor((filters.offset || 0) / (filters.limit || 20)) + 1
+  const totalPages = Math.ceil(total / (filters.limit || 20))
+
+  return (
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8">
+      <div className="mb-6">
+        <div className="flex items-center gap-2 mb-1">
+          <button
+            onClick={() => router.push(`/sites/${siteId}`)}
+            className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
+          >
+            &larr; Back to Dashboard
+          </button>
+        </div>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
+            Session Replays
+            <span className="text-lg font-normal text-neutral-500">
+              {total} recordings
+            </span>
+          </h1>
+          {site.replay_mode === 'disabled' && (
+            <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg text-sm">
+              <span>⚠️</span>
+              <span>Session replay is disabled</span>
+              <button
+                onClick={() => router.push(`/sites/${siteId}/settings`)}
+                className="underline hover:no-underline"
+              >
+                Enable in settings
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="mb-6 flex gap-4 flex-wrap">
+        <select
+          className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
+          value={filters.device_type || ''}
+          onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
+        >
+          <option value="">All Devices</option>
+          <option value="desktop">Desktop</option>
+          <option value="mobile">Mobile</option>
+          <option value="tablet">Tablet</option>
+        </select>
+
+        <select
+          className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
+          value={filters.min_duration || ''}
+          onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
+        >
+          <option value="">Any Duration</option>
+          <option value="5000">5s+</option>
+          <option value="30000">30s+</option>
+          <option value="60000">1m+</option>
+          <option value="300000">5m+</option>
+        </select>
+      </div>
+
+      {/* Replays List */}
+      <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900">
+        {replays.length === 0 ? (
+          <div className="p-12 text-center text-neutral-500">
+            <div className="text-4xl mb-4">🎬</div>
+            <p className="text-lg font-medium mb-2">No session replays yet</p>
+            <p className="text-sm">
+              {site.replay_mode === 'disabled'
+                ? 'Enable session replay in settings to start recording visitor sessions.'
+                : 'Recordings will appear here once visitors start interacting with your site.'}
+            </p>
+          </div>
+        ) : (
+          <>
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Session</th>
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Entry Page</th>
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Duration</th>
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Device</th>
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Location</th>
+                  <th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Date</th>
+                  <th className="text-right px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-neutral-100 dark:divide-neutral-800">
+                {replays.map((replay) => (
+                  <tr
+                    key={replay.id}
+                    className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors cursor-pointer"
+                    onClick={() => router.push(`/sites/${siteId}/replays/${replay.id}`)}
+                  >
+                    <td className="px-4 py-4">
+                      <div className="flex items-center gap-2">
+                        {replay.is_skeleton_mode && (
+                          <span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-1.5 py-0.5 rounded">
+                            Skeleton
+                          </span>
+                        )}
+                        <span className="font-mono text-sm text-neutral-500">
+                          {replay.session_id.substring(0, 8)}...
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4">
+                      <span className="text-sm text-neutral-900 dark:text-white truncate block max-w-[200px]" title={replay.entry_page}>
+                        {replay.entry_page}
+                      </span>
+                    </td>
+                    <td className="px-4 py-4">
+                      <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                        {formatDuration(replay.duration_ms)}
+                      </span>
+                    </td>
+                    <td className="px-4 py-4">
+                      <div className="flex items-center gap-2 text-sm">
+                        <span>{getDeviceEmoji(replay.device_type)}</span>
+                        <span className="text-neutral-600 dark:text-neutral-400">
+                          {replay.browser || 'Unknown'}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4">
+                      <span className="text-sm">
+                        {getFlagEmoji(replay.country)} {replay.country || 'Unknown'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-4">
+                      <span className="text-sm text-neutral-500">
+                        {formatDate(replay.started_at)}
+                      </span>
+                    </td>
+                    <td className="px-4 py-4 text-right">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          router.push(`/sites/${siteId}/replays/${replay.id}`)
+                        }}
+                        className="text-sm text-brand-orange hover:underline"
+                      >
+                        Watch →
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
+                <span className="text-sm text-neutral-500">
+                  Showing {(filters.offset || 0) + 1} - {Math.min((filters.offset || 0) + (filters.limit || 20), total)} of {total}
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handlePageChange((filters.offset || 0) - (filters.limit || 20))}
+                    disabled={currentPage === 1}
+                    className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
+                  >
+                    Previous
+                  </button>
+                  <span className="px-3 py-1 text-sm text-neutral-500">
+                    Page {currentPage} of {totalPages}
+                  </span>
+                  <button
+                    onClick={() => handlePageChange((filters.offset || 0) + (filters.limit || 20))}
+                    disabled={currentPage === totalPages}
+                    className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
+                  >
+                    Next
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

app/sites/[id]/settings/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
+import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel, type ReplayMode } from '@/lib/api/sites'
 import { getRealtime } from '@/lib/api/stats'
 import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
@@ -18,6 +18,7 @@ import {
   CopyIcon,
   ExclamationTriangleIcon,
   LightningBoltIcon,
+  VideoIcon,
 } from '@radix-ui/react-icons'
 
 const TIMEZONES = [
@@ -45,7 +46,7 @@ export default function SiteSettingsPage() {
   const [site, setSite] = useState<Site | null>(null)
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data'>('general')
+  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'replay'>('general')
 
   const [formData, setFormData] = useState({
     name: '',
@@ -58,7 +59,13 @@ export default function SiteSettingsPage() {
     collect_referrers: true,
     collect_device_info: true,
     collect_geo_data: 'full' as GeoDataLevel,
-    collect_screen_resolution: true
+    collect_screen_resolution: true,
+    // Session replay settings
+    replay_mode: 'disabled' as ReplayMode,
+    replay_sampling_rate: 100,
+    replay_retention_days: 30,
+    replay_mask_all_text: false,
+    replay_mask_all_inputs: true
   })
   const [scriptCopied, setScriptCopied] = useState(false)
   const [linkCopied, setLinkCopied] = useState(false)
@@ -85,7 +92,13 @@ export default function SiteSettingsPage() {
         collect_referrers: data.collect_referrers ?? true,
         collect_device_info: data.collect_device_info ?? true,
         collect_geo_data: data.collect_geo_data || 'full',
-        collect_screen_resolution: data.collect_screen_resolution ?? true
+        collect_screen_resolution: data.collect_screen_resolution ?? true,
+        // Session replay settings
+        replay_mode: data.replay_mode || 'disabled',
+        replay_sampling_rate: data.replay_sampling_rate ?? 100,
+        replay_retention_days: data.replay_retention_days ?? 30,
+        replay_mask_all_text: data.replay_mask_all_text ?? false,
+        replay_mask_all_inputs: data.replay_mask_all_inputs ?? true
       })
       if (data.has_password) {
         setIsPasswordEnabled(true)
@@ -121,7 +134,13 @@ export default function SiteSettingsPage() {
         collect_referrers: formData.collect_referrers,
         collect_device_info: formData.collect_device_info,
         collect_geo_data: formData.collect_geo_data,
-        collect_screen_resolution: formData.collect_screen_resolution
+        collect_screen_resolution: formData.collect_screen_resolution,
+        // Session replay settings
+        replay_mode: formData.replay_mode,
+        replay_sampling_rate: formData.replay_sampling_rate,
+        replay_retention_days: formData.replay_retention_days,
+        replay_mask_all_text: formData.replay_mask_all_text,
+        replay_mask_all_inputs: formData.replay_mask_all_inputs
       })
       toast.success('Site updated successfully')
       loadSite()
@@ -235,6 +254,17 @@ export default function SiteSettingsPage() {
             <FileTextIcon className="w-5 h-5" />
             Data & Privacy
           </button>
+          <button
+            onClick={() => setActiveTab('replay')}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+              activeTab === 'replay'
+                ? 'bg-brand-orange/10 text-brand-orange'
+                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+            }`}
+          >
+            <VideoIcon className="w-5 h-5" />
+            Session Replay
+          </button>
         </nav>
 
         {/* Content Area */}
@@ -703,6 +733,263 @@ export default function SiteSettingsPage() {
                 </form>
               </div>
             )}
+
+            {activeTab === 'replay' && (
+              <div className="space-y-12">
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Session Replay</h2>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Record and playback visitor sessions to understand user behavior.</p>
+                  </div>
+
+                  {/* Privacy Mode Selection */}
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Privacy Mode</h3>
+
+                    <div className="space-y-3">
+                      {/* Disabled */}
+                      <label className={`block p-4 rounded-xl border-2 cursor-pointer transition-all ${
+                        formData.replay_mode === 'disabled'
+                          ? 'border-brand-orange bg-brand-orange/5'
+                          : 'border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700'
+                      }`}>
+                        <div className="flex items-start gap-3">
+                          <input
+                            type="radio"
+                            name="replay_mode"
+                            value="disabled"
+                            checked={formData.replay_mode === 'disabled'}
+                            onChange={(e) => setFormData({ ...formData, replay_mode: e.target.value as ReplayMode })}
+                            className="mt-1 accent-brand-orange"
+                          />
+                          <div>
+                            <div className="font-medium text-neutral-900 dark:text-white">Disabled</div>
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                              No session recording. Maximum privacy.
+                            </p>
+                          </div>
+                        </div>
+                      </label>
+
+                      {/* Consent Required */}
+                      <label className={`block p-4 rounded-xl border-2 cursor-pointer transition-all ${
+                        formData.replay_mode === 'consent_required'
+                          ? 'border-brand-orange bg-brand-orange/5'
+                          : 'border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700'
+                      }`}>
+                        <div className="flex items-start gap-3">
+                          <input
+                            type="radio"
+                            name="replay_mode"
+                            value="consent_required"
+                            checked={formData.replay_mode === 'consent_required'}
+                            onChange={(e) => setFormData({ ...formData, replay_mode: e.target.value as ReplayMode })}
+                            className="mt-1 accent-brand-orange"
+                          />
+                          <div>
+                            <div className="font-medium text-neutral-900 dark:text-white flex items-center gap-2">
+                              Consent Required
+                              <span className="text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-0.5 rounded">GDPR Safe</span>
+                            </div>
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                              Only records after visitor explicitly consents. Use with your cookie consent banner.
+                            </p>
+                          </div>
+                        </div>
+                      </label>
+
+                      {/* Anonymous Skeleton */}
+                      <label className={`block p-4 rounded-xl border-2 cursor-pointer transition-all ${
+                        formData.replay_mode === 'anonymous_skeleton'
+                          ? 'border-brand-orange bg-brand-orange/5'
+                          : 'border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700'
+                      }`}>
+                        <div className="flex items-start gap-3">
+                          <input
+                            type="radio"
+                            name="replay_mode"
+                            value="anonymous_skeleton"
+                            checked={formData.replay_mode === 'anonymous_skeleton'}
+                            onChange={(e) => setFormData({ ...formData, replay_mode: e.target.value as ReplayMode })}
+                            className="mt-1 accent-brand-orange"
+                          />
+                          <div>
+                            <div className="font-medium text-neutral-900 dark:text-white flex items-center gap-2">
+                              Anonymous Skeleton
+                              <span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded">Privacy First</span>
+                            </div>
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                              All text replaced with blocks (████), all inputs hidden. Layout and clicks preserved. No consent required.
+                            </p>
+                          </div>
+                        </div>
+                      </label>
+                    </div>
+                  </div>
+
+                  {/* Recording Settings - Only show when not disabled */}
+                  <AnimatePresence>
+                    {formData.replay_mode !== 'disabled' && (
+                      <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        className="space-y-4 overflow-hidden"
+                      >
+                        <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 pt-4 border-t border-neutral-100 dark:border-neutral-800">Recording Settings</h3>
+
+                        {/* Sampling Rate */}
+                        <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
+                          <div className="flex items-center justify-between mb-3">
+                            <div>
+                              <h4 className="font-medium text-neutral-900 dark:text-white">Sampling Rate</h4>
+                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                                Percentage of sessions to record
+                              </p>
+                            </div>
+                            <span className="text-lg font-semibold text-brand-orange">{formData.replay_sampling_rate}%</span>
+                          </div>
+                          <input
+                            type="range"
+                            min="1"
+                            max="100"
+                            value={formData.replay_sampling_rate}
+                            onChange={(e) => setFormData({ ...formData, replay_sampling_rate: parseInt(e.target.value) })}
+                            className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange"
+                          />
+                          <div className="flex justify-between text-xs text-neutral-500 mt-1">
+                            <span>1%</span>
+                            <span>50%</span>
+                            <span>100%</span>
+                          </div>
+                        </div>
+
+                        {/* Retention Period */}
+                        <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <h4 className="font-medium text-neutral-900 dark:text-white">Retention Period</h4>
+                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                                How long to keep recordings
+                              </p>
+                            </div>
+                            <div className="relative">
+                              <select
+                                value={formData.replay_retention_days}
+                                onChange={(e) => setFormData({ ...formData, replay_retention_days: parseInt(e.target.value) })}
+                                className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
+                              >
+                                <option value={7}>7 days</option>
+                                <option value={14}>14 days</option>
+                                <option value={30}>30 days</option>
+                                <option value={60}>60 days</option>
+                                <option value={90}>90 days</option>
+                              </select>
+                              <div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
+                                <svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                                </svg>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Masking Options - Only for consent mode */}
+                        {formData.replay_mode === 'consent_required' && (
+                          <>
+                            <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 pt-4">Privacy Masking</h3>
+
+                            {/* Mask All Text */}
+                            <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
+                              <div className="flex items-center justify-between">
+                                <div>
+                                  <h4 className="font-medium text-neutral-900 dark:text-white">Mask All Text</h4>
+                                  <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                                    Replace all text content with asterisks
+                                  </p>
+                                </div>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={formData.replay_mask_all_text}
+                                    onChange={(e) => setFormData({ ...formData, replay_mask_all_text: e.target.checked })}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                              </div>
+                            </div>
+
+                            {/* Mask All Inputs */}
+                            <div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
+                              <div className="flex items-center justify-between">
+                                <div>
+                                  <h4 className="font-medium text-neutral-900 dark:text-white">Mask All Inputs</h4>
+                                  <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                                    Hide all form input values (recommended)
+                                  </p>
+                                </div>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={formData.replay_mask_all_inputs}
+                                    onChange={(e) => setFormData({ ...formData, replay_mask_all_inputs: e.target.checked })}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                              </div>
+                            </div>
+                          </>
+                        )}
+
+                        {/* Integration Guide */}
+                        {formData.replay_mode === 'consent_required' && (
+                          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
+                            <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Integration with Consent Managers</h4>
+                            <p className="text-sm text-blue-700 dark:text-blue-300 mb-3">
+                              Call this function when the user grants consent for analytics/functional cookies:
+                            </p>
+                            <code className="block bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 p-3 rounded-lg text-sm font-mono">
+                              window.ciphera('enableReplay')
+                            </code>
+                          </div>
+                        )}
+
+                        {/* View Replays Link */}
+                        <div className="pt-4">
+                          <a
+                            href={`/sites/${siteId}/replays`}
+                            className="inline-flex items-center gap-2 text-brand-orange hover:underline text-sm font-medium"
+                          >
+                            <VideoIcon className="w-4 h-4" />
+                            View Session Replays →
+                          </a>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+
+                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
+                    <button
+                      type="submit"
+                      disabled={saving}
+                      className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
+                      hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                    >
+                      {saving ? (
+                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                      ) : (
+                        <>
+                          <CheckIcon className="w-4 h-4" />
+                          Save Changes
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </form>
+              </div>
+            )}
           </motion.div>
         </div>
       </div>