import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { open as openPathDialog } from "@tauri-apps/plugin-dialog";
import {
    listSessions,
    deleteSession,
    renameSession,
    showRecordingOverlay,
    exportSessionPackage,
    importSessionPackage,
    revealInFileManager,
    getSessionMetadata,
    onProcessingStarted,
    onProcessingComplete,
    onProcessingError,
    type SessionSummary,
} from "../lib/api";
import { useShortcutContext } from "../contexts/ShortcutContext";
import ShareDialog from "../components/ShareDialog";
import LibraryCommandCenter from "../components/LibraryCommandCenter";
import { scanSessionForSensitiveData, type PrivacyScanResult } from "../lib/privacyScan";
import {
    getWorkflowMetrics,
    initializeWorkflowMetricsStore,
    trackWorkflowEvent,
    type WorkflowMetrics,
} from "../lib/usageMetrics";

type ViewMode = "grid" | "list";
type SortMode = "last_edited" | "newest" | "oldest" | "longest" | "shortest";

const sortLabels: Record<SortMode, string> = {
    last_edited: "Last edited",
    newest: "Newest",
    oldest: "Oldest",
    longest: "Longest",
    shortest: "Shortest",
};

// Arcade-inspired shell layout (keep existing color tokens)
const styles = {
    shell: {
        height: "100vh",
        width: "100vw",
        display: "flex",
        overflow: "hidden",
        position: "fixed" as const,
        inset: 0,
        backgroundColor: "var(--bg-base)",
        color: "var(--text-primary)",
        fontFamily: "var(--font-sans)",
        isolation: "isolate" as const,
    },
    sidebar: {
        width: "280px",
        minWidth: "280px",
        maxWidth: "280px",
        backgroundColor: "var(--bg-surface)",
        borderRight: "1px solid var(--border-default)",
        display: "flex",
        flexDirection: "column" as const,
        gap: "16px",
        padding: "16px",
        overflow: "hidden",
    },
    workspaceRow: {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "10px",
        padding: "10px 10px",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        cursor: "default",
    },
    workspaceLeft: {
        display: "flex",
        alignItems: "center",
        gap: "10px",
        minWidth: 0,
    },
    workspaceAvatar: {
        width: "22px",
        height: "22px",
        borderRadius: "50%",
        background: "color-mix(in srgb, var(--accent-1) 18%, transparent)",
        border: "1px solid color-mix(in srgb, var(--accent-1) 45%, transparent)",
        color: "var(--accent-1)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontSize: "12px",
        fontWeight: 700,
        flexShrink: 0,
    },
    workspaceName: {
        fontSize: "12px",
        fontWeight: 650,
        color: "var(--text-primary)",
        whiteSpace: "nowrap" as const,
        overflow: "hidden",
        textOverflow: "ellipsis",
    },
    workspaceHint: {
        marginTop: "2px",
        fontSize: "11px",
        color: "var(--text-muted)",
        whiteSpace: "nowrap" as const,
        overflow: "hidden",
        textOverflow: "ellipsis",
    },
    searchWrapper: {
        position: "relative" as const,
        display: "flex",
        alignItems: "center",
    },
    searchIcon: {
        position: "absolute" as const,
        left: "12px",
        color: "var(--text-muted)",
        fontSize: "14px",
        pointerEvents: "none" as const,
    },
    searchInput: {
        width: "100%",
        height: "34px",
        padding: "0 12px 0 36px",
        backgroundColor: "var(--bg-elevated)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-md)",
        color: "var(--text-primary)",
        fontSize: "13px",
        fontFamily: "var(--font-sans)",
        transition: "border-color 150ms",
    },
    searchKbd: {
        position: "absolute" as const,
        right: "10px",
        display: "flex",
        alignItems: "center",
        gap: "2px",
        pointerEvents: "none" as const,
        color: "var(--text-muted)",
        fontSize: "11px",
    },
    navSection: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "6px",
    },
    navLabel: {
        padding: "6px 10px",
        fontSize: "11px",
        fontWeight: 700,
        letterSpacing: "0.06em",
        textTransform: "uppercase" as const,
        color: "var(--text-muted)",
    },
    navItem: {
        height: "36px",
        padding: "0 10px",
        borderRadius: "var(--radius-lg)",
        border: "1px solid transparent",
        background: "transparent",
        color: "var(--text-secondary)",
        cursor: "pointer",
        fontSize: "13px",
        fontWeight: 600,
        display: "flex",
        alignItems: "center",
        gap: "10px",
        transition: "all 140ms var(--ease-out)",
        textAlign: "left" as const,
    },
    navItemActive: {
        background: "color-mix(in srgb, var(--accent-1) 12%, transparent)",
        border: "1px solid color-mix(in srgb, var(--accent-1) 30%, transparent)",
        color: "var(--accent-1)",
    },
    planCard: {
        marginTop: "auto",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        padding: "14px",
        boxShadow: "0 1px 2px rgba(0,0,0,0.12)",
    },
    planTitleRow: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "baseline",
        gap: "10px",
    },
    planTitle: {
        fontSize: "13px",
        fontWeight: 700,
        color: "var(--text-primary)",
    },
    planQuota: {
        fontSize: "12px",
        fontFamily: "var(--font-mono)",
        color: "var(--text-muted)",
    },
    planDesc: {
        marginTop: "6px",
        fontSize: "12px",
        color: "var(--text-tertiary)",
        lineHeight: 1.4,
    },
    planBar: {
        marginTop: "12px",
        height: "8px",
        borderRadius: "999px",
        background: "rgba(255,255,255,0.06)",
        overflow: "hidden",
        border: "1px solid var(--border-subtle)",
    },
    planBarFill: {
        height: "100%",
        width: "33%",
        background: "var(--accent-1)",
        borderRadius: "999px",
        boxShadow: "0 0 0 1px color-mix(in srgb, var(--accent-1) 40%, transparent) inset",
    },
    planBtn: {
        marginTop: "12px",
        width: "100%",
        height: "36px",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--border-default)",
        background: "var(--bg-surface)",
        color: "var(--text-primary)",
        cursor: "pointer",
        fontSize: "13px",
        fontWeight: 700,
    },

    main: {
        flex: 1,
        minWidth: 0,
        display: "flex",
        flexDirection: "column" as const,
        overflow: "hidden",
    },
    mainScroll: {
        flex: 1,
        minHeight: 0,
        overflowY: "auto" as const,
        padding: "28px 32px",
    },
    mainHeaderRow: {
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: "16px",
    },
    mainTitle: {
        fontSize: "34px",
        fontWeight: 750,
        letterSpacing: "-0.03em",
        margin: 0,
    },
    toolbarRow: {
        marginTop: "18px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "16px",
        flexWrap: "wrap" as const,
    },
    pillRow: {
        display: "flex",
        alignItems: "center",
        gap: "10px",
        flexWrap: "wrap" as const,
    },
    pill: {
        height: "38px",
        padding: "0 14px",
        borderRadius: "12px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        cursor: "pointer",
        fontSize: "13px",
        fontWeight: 650,
        display: "flex",
        alignItems: "center",
        gap: "10px",
    },
    pillIcon: {
        width: "22px",
        height: "22px",
        borderRadius: "8px",
        background: "rgba(255,255,255,0.06)",
        border: "1px solid var(--border-subtle)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "var(--text-secondary)",
    },
    sortRow: {
        display: "flex",
        alignItems: "center",
        gap: "10px",
    },
    viewToggle: {
        display: "flex",
        alignItems: "center",
        gap: "4px",
        padding: "4px",
        borderRadius: "12px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
    },
    viewToggleBtn: {
        width: "40px",
        height: "34px",
        borderRadius: "10px",
        border: "none",
        background: "transparent",
        color: "var(--text-secondary)",
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        transition: "background 140ms var(--ease-out), color 140ms var(--ease-out)",
    },
    viewToggleBtnActive: {
        background: "rgba(255,255,255,0.08)",
        color: "var(--text-primary)",
    },
    createBtn: {
        height: "40px",
        padding: "0 16px",
        borderRadius: "12px",
        border: "1px solid color-mix(in srgb, var(--accent-1) 35%, transparent)",
        background: "var(--accent-1)",
        color: "#fff",
        cursor: "pointer",
        fontSize: "14px",
        fontWeight: 750,
        display: "flex",
        alignItems: "center",
        gap: "10px",
        boxShadow: "0 10px 22px rgba(0,0,0,0.18)",
        transition: "transform 140ms var(--ease-out), opacity 140ms var(--ease-out)",
        flexShrink: 0,
    },
    secondaryBtn: {
        height: "40px",
        padding: "0 16px",
        borderRadius: "12px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        cursor: "pointer",
        fontSize: "14px",
        fontWeight: 700,
        display: "flex",
        alignItems: "center",
        gap: "8px",
        flexShrink: 0,
        transition: "border-color 140ms var(--ease-out), opacity 140ms var(--ease-out)",
    },
    headerBtnGroup: {
        display: "flex",
        alignItems: "center",
        gap: "10px",
    },
    statusBanner: {
        padding: "12px 16px",
        borderRadius: "var(--radius-lg)",
        marginBottom: "18px",
        fontSize: "13px",
        display: "flex",
        alignItems: "center",
        gap: "12px",
    },
    statusBannerSuccess: {
        backgroundColor: "var(--status-success-muted)",
        border: "1px solid var(--status-success)",
        color: "var(--status-success)",
    },
    statusBannerError: {
        backgroundColor: "var(--status-error-muted)",
        border: "1px solid var(--status-error)",
        color: "var(--status-error)",
    },
    privacyPanel: {
        marginBottom: "18px",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--status-warning)",
        backgroundColor: "var(--status-warning-muted)",
        padding: "12px 14px",
    },
    privacyPanelTitle: {
        fontSize: "13px",
        fontWeight: 700,
        color: "var(--status-warning)",
    },
    privacyPanelMeta: {
        marginTop: "6px",
        fontSize: "12px",
        color: "var(--text-secondary)",
        lineHeight: 1.45,
    },
    privacyFindingList: {
        marginTop: "10px",
        display: "flex",
        flexDirection: "column" as const,
        gap: "8px",
        maxHeight: "170px",
        overflowY: "auto" as const,
    },
    privacyFinding: {
        border: "1px solid var(--border-default)",
        borderRadius: "10px",
        background: "rgba(0, 0, 0, 0.18)",
        padding: "8px 10px",
    },
    privacyFindingRule: {
        fontSize: "11px",
        color: "var(--status-warning)",
        fontWeight: 700,
        textTransform: "uppercase" as const,
        letterSpacing: "0.05em",
    },
    privacyFindingPath: {
        marginTop: "4px",
        color: "var(--text-muted)",
        fontSize: "11px",
        fontFamily: "var(--font-mono)",
    },
    privacyFindingSnippet: {
        marginTop: "5px",
        color: "var(--text-primary)",
        fontSize: "12px",
        lineHeight: 1.35,
        fontFamily: "var(--font-mono)",
    },
    privacyActions: {
        marginTop: "12px",
        display: "flex",
        gap: "8px",
        flexWrap: "wrap" as const,
    },
    privacyActionPrimary: {
        height: "34px",
        borderRadius: "9px",
        border: "1px solid color-mix(in srgb, var(--accent-1) 35%, transparent)",
        background: "var(--accent-1)",
        color: "#fff",
        padding: "0 12px",
        fontSize: "12px",
        fontWeight: 700,
        cursor: "pointer",
    },
    privacyActionSecondary: {
        height: "34px",
        borderRadius: "9px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        padding: "0 12px",
        fontSize: "12px",
        fontWeight: 650,
        cursor: "pointer",
    },
    modalBackdrop: {
        position: "fixed" as const,
        inset: 0,
        background: "rgba(6, 10, 18, 0.64)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 1200,
        padding: "24px",
    },
    modalCard: {
        width: "100%",
        maxWidth: "560px",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-default)",
        background: "var(--bg-surface)",
        boxShadow: "0 18px 38px rgba(0,0,0,0.35)",
        padding: "18px",
    },
    modalHeader: {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "12px",
    },
    modalTitle: {
        margin: 0,
        fontSize: "18px",
        fontWeight: 750,
        color: "var(--text-primary)",
    },
    modalBody: {
        marginTop: "12px",
        color: "var(--text-tertiary)",
        fontSize: "13px",
        lineHeight: 1.5,
    },
    modalError: {
        marginTop: "10px",
        fontSize: "12px",
        color: "var(--status-error)",
    },
    modalRow: {
        marginTop: "14px",
        display: "flex",
        gap: "8px",
        alignItems: "center",
    },
    modalInput: {
        flex: 1,
        height: "38px",
        borderRadius: "10px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        padding: "0 10px",
        fontSize: "13px",
        fontFamily: "var(--font-mono)",
    },
    modalButton: {
        height: "38px",
        borderRadius: "10px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        padding: "0 12px",
        fontSize: "13px",
        fontWeight: 650,
        cursor: "pointer",
    },
    modalActions: {
        marginTop: "16px",
        display: "flex",
        justifyContent: "flex-end",
        gap: "10px",
    },
    modalPrimaryBtn: {
        height: "38px",
        borderRadius: "10px",
        border: "1px solid color-mix(in srgb, var(--accent-1) 30%, transparent)",
        background: "var(--accent-1)",
        color: "#fff",
        padding: "0 14px",
        fontSize: "13px",
        fontWeight: 700,
        cursor: "pointer",
    },

    errorBanner: {
        padding: "12px 16px",
        backgroundColor: "var(--status-error-muted)",
        border: "1px solid var(--status-error)",
        borderRadius: "var(--radius-lg)",
        marginBottom: "18px",
        color: "var(--status-error)",
        fontSize: "13px",
        display: "flex",
        alignItems: "center",
        gap: "12px",
    },
    grid: {
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
        gap: "18px",
        marginTop: "18px",
    },
    card: {
        backgroundColor: "var(--bg-surface)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-xl)",
        overflow: "hidden",
        cursor: "pointer",
        transition: "all 150ms var(--ease-out)",
    },
    cardHover: {
        border: "1px solid var(--accent-1)",
        boxShadow: "var(--shadow-glow)",
        transform: "translateY(-2px)",
    },
    thumbnail: {
        height: "170px",
        background: "var(--bg-elevated)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative" as const,
        overflow: "hidden",
    },
    thumbnailIcon: {
        fontSize: "2.5rem",
        opacity: 0.2,
        color: "var(--text-muted)",
    },
    thumbnailImage: {
        width: "100%",
        height: "100%",
        objectFit: "cover" as const,
    },
    cardDetails: {
        padding: "14px 14px 12px",
    },
    sessionTitle: {
        fontSize: "14px",
        fontWeight: 700,
        marginBottom: "6px",
        color: "var(--text-primary)",
        display: "flex",
        alignItems: "center",
        gap: "8px",
    },
    titleInput: {
        width: "100%",
        padding: "8px 12px",
        backgroundColor: "var(--bg-elevated)",
        border: "1px solid var(--accent-1)",
        borderRadius: "var(--radius-md)",
        color: "var(--text-primary)",
        fontSize: "14px",
        fontWeight: 500,
        marginBottom: "8px",
    },
    metadata: {
        display: "flex",
        flexWrap: "wrap" as const,
        gap: "8px",
        fontSize: "12px",
        color: "var(--text-muted)",
        marginBottom: "12px",
        alignItems: "center",
    },
    metaSeparator: {
        color: "var(--text-muted)",
    },
    terminalBadge: {
        display: "inline-flex",
        alignItems: "center",
        gap: "4px",
        padding: "3px 8px",
        backgroundColor: "var(--status-success-muted)",
        color: "var(--status-success)",
        borderRadius: "var(--radius-sm)",
        fontSize: "11px",
        fontWeight: 500,
        fontFamily: "var(--font-mono)",
    },
    gitBadge: {
        display: "inline-flex",
        alignItems: "center",
        gap: "4px",
        padding: "3px 8px",
        backgroundColor: "var(--accent-4)",
        color: "var(--accent-1)",
        borderRadius: "var(--radius-sm)",
        fontSize: "11px",
        fontWeight: 500,
        fontFamily: "var(--font-mono)",
    },
    processingBadge: {
        display: "inline-flex",
        alignItems: "center",
        gap: "4px",
        padding: "3px 8px",
        backgroundColor: "var(--status-warning-muted)",
        color: "var(--status-warning)",
        borderRadius: "var(--radius-sm)",
        fontSize: "11px",
        fontWeight: 500,
    },
    processingOverlay: {
        position: "absolute" as const,
        inset: 0,
        background: "rgba(0, 0, 0, 0.6)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column" as const,
        gap: "8px",
    },
    processingSpinner: {
        width: "24px",
        height: "24px",
        border: "2px solid rgba(255, 255, 255, 0.3)",
        borderTopColor: "var(--status-warning)",
        borderRadius: "50%",
        animation: "spin 0.8s linear infinite",
    },
    processingText: {
        color: "#fff",
        fontSize: "12px",
        fontWeight: 500,
    },
    actions: {
        display: "flex",
        gap: "8px",
    },
    actionIconBtn: {
        width: "36px",
        height: "34px",
        borderRadius: "10px",
        backgroundColor: "var(--bg-elevated)",
        border: "1px solid var(--border-default)",
        color: "var(--text-secondary)",
        cursor: "pointer",
        transition: "all 150ms var(--ease-out)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    emptyState: {
        display: "flex",
        flexDirection: "column" as const,
        alignItems: "center",
        justifyContent: "center",
        padding: "80px 32px",
        textAlign: "center" as const,
    },
    emptyIcon: {
        width: "72px",
        height: "72px",
        borderRadius: "var(--radius-xl)",
        backgroundColor: "var(--bg-elevated)",
        border: "1px solid var(--border-default)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginBottom: "24px",
    },
    emptyIconInner: {
        fontSize: "1.5rem",
        opacity: 0.4,
        color: "var(--accent-1)",
    },
    emptyTitle: {
        fontSize: "16px",
        fontWeight: 500,
        color: "var(--text-primary)",
        marginBottom: "8px",
    },
    emptyDescription: {
        fontSize: "14px",
        color: "var(--text-tertiary)",
        marginBottom: "24px",
        maxWidth: "340px",
        lineHeight: 1.6,
    },
    emptyActionsRow: {
        display: "flex",
        flexWrap: "wrap" as const,
        alignItems: "center",
        justifyContent: "center",
        gap: "10px",
    },
    emptyBtn: {
        height: "42px",
        padding: "0 24px",
        background: "var(--accent-1)",
        border: "none",
        color: "#fff",
        borderRadius: "var(--radius-lg)",
        cursor: "pointer",
        fontSize: "14px",
        fontWeight: 600,
        display: "flex",
        alignItems: "center",
        gap: "8px",
        transition: "all 150ms var(--ease-out)",
        boxShadow: "var(--shadow-glow)",
    },
    emptySecondaryBtn: {
        height: "42px",
        padding: "0 16px",
        background: "var(--bg-elevated)",
        border: "1px solid var(--border-default)",
        color: "var(--text-primary)",
        borderRadius: "var(--radius-lg)",
        cursor: "pointer",
        fontSize: "13px",
        fontWeight: 700,
        display: "inline-flex",
        alignItems: "center",
        gap: "8px",
        transition: "all 150ms var(--ease-out)",
    },
    emptyChecklist: {
        marginTop: "18px",
        width: "min(560px, 100%)",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-default)",
        background: "linear-gradient(140deg, rgba(94, 106, 210, 0.12), rgba(0, 0, 0, 0.18))",
        padding: "14px",
        textAlign: "left" as const,
    },
    emptyChecklistTitle: {
        fontSize: "12px",
        fontWeight: 800,
        textTransform: "uppercase" as const,
        letterSpacing: "0.06em",
        color: "var(--text-muted)",
    },
    emptyChecklistList: {
        marginTop: "10px",
        display: "grid",
        gap: "8px",
    },
    emptyChecklistItem: {
        display: "grid",
        gridTemplateColumns: "20px minmax(0, 1fr) auto",
        alignItems: "center",
        gap: "10px",
        fontSize: "13px",
        color: "var(--text-secondary)",
        padding: "8px 10px",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--border-subtle)",
        background: "rgba(0, 0, 0, 0.14)",
    },
    emptyChecklistIndex: {
        width: "20px",
        height: "20px",
        borderRadius: "999px",
        display: "grid",
        placeItems: "center",
        fontSize: "11px",
        fontFamily: "var(--font-mono)",
        color: "var(--accent-1)",
        border: "1px solid color-mix(in srgb, var(--accent-1) 45%, transparent)",
        background: "color-mix(in srgb, var(--accent-1) 14%, transparent)",
    },
    emptyChecklistHint: {
        fontSize: "11px",
        color: "var(--text-muted)",
        fontFamily: "var(--font-mono)",
        whiteSpace: "nowrap" as const,
    },
    loadingState: {
        display: "flex",
        flexDirection: "column" as const,
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        width: "100%",
        gap: "16px",
    },
    loadingSpinner: {
        width: "28px",
        height: "28px",
        border: "2px solid var(--border-strong)",
        borderTopColor: "var(--accent-1)",
        borderRadius: "50%",
        animation: "spin 0.8s linear infinite",
    },
    loadingText: {
        color: "var(--text-tertiary)",
        fontSize: "13px",
    },

    list: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "10px",
        marginTop: "18px",
    },
    listRow: {
        display: "flex",
        gap: "14px",
        alignItems: "center",
        padding: "10px 12px",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-default)",
        background: "var(--bg-surface)",
        cursor: "pointer",
        transition: "border-color 140ms var(--ease-out), transform 140ms var(--ease-out)",
        overflow: "hidden",
    },
    listThumb: {
        width: "140px",
        height: "78px",
        borderRadius: "var(--radius-lg)",
        background: "var(--bg-elevated)",
        border: "1px solid var(--border-subtle)",
        overflow: "hidden",
        position: "relative" as const,
        flexShrink: 0,
    },
    listBody: {
        flex: 1,
        minWidth: 0,
    },
    listTitle: {
        fontSize: "14px",
        fontWeight: 750,
        color: "var(--text-primary)",
        whiteSpace: "nowrap" as const,
        overflow: "hidden",
        textOverflow: "ellipsis",
    },
    listMeta: {
        marginTop: "6px",
        fontSize: "12px",
        color: "var(--text-muted)",
        display: "flex",
        gap: "10px",
        flexWrap: "wrap" as const,
        alignItems: "center",
        fontFamily: "var(--font-mono)",
    },
};

function LibraryView() {
    const navigate = useNavigate();
    const [sessions, setSessions] = useState<SessionSummary[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [searchQuery, setSearchQuery] = useState("");
    const [editingId, setEditingId] = useState<string | null>(null);
    const [editTitle, setEditTitle] = useState("");
    const [sharingId, setSharingId] = useState<string | null>(null);
    const [hoveredCard, setHoveredCard] = useState<string | null>(null);
    const [processingSessions, setProcessingSessions] = useState<Set<string>>(new Set());
    const [exportingSessionId, setExportingSessionId] = useState<string | null>(null);
    const [importingPackage, setImportingPackage] = useState(false);
    const [showImportModal, setShowImportModal] = useState(false);
    const [importPackagePath, setImportPackagePath] = useState("");
    const [importModalError, setImportModalError] = useState<string | null>(null);
    const [workflowMetrics, setWorkflowMetrics] = useState<WorkflowMetrics>(() =>
        getWorkflowMetrics(30)
    );
    const [exportPrivacyOverrideSessionId, setExportPrivacyOverrideSessionId] = useState<
        string | null
    >(null);
    const [privacyScanSessionId, setPrivacyScanSessionId] = useState<string | null>(null);
    const [exportPrivacyAlert, setExportPrivacyAlert] = useState<{
        session: SessionSummary;
        scan: PrivacyScanResult;
    } | null>(null);
    const [statusMessage, setStatusMessage] = useState<{
        tone: "success" | "error";
        text: string;
    } | null>(null);
    const [viewMode, setViewMode] = useState<ViewMode>("grid");
    const [sortMode, setSortMode] = useState<SortMode>("last_edited");

    const { registerCategory, unregisterCategory, setShowHelp } = useShortcutContext();
    const refreshWorkflowMetrics = useCallback(() => {
        setWorkflowMetrics(getWorkflowMetrics(30));
    }, []);

    useEffect(() => {
        void loadSessions();
    }, []);

    useEffect(() => {
        refreshWorkflowMetrics();
    }, [sessions, refreshWorkflowMetrics]);

    useEffect(() => {
        void initializeWorkflowMetricsStore().then(() => {
            refreshWorkflowMetrics();
        });
    }, [refreshWorkflowMetrics]);

    useEffect(() => {
        if (!exportPrivacyAlert) return;
        const stillPresent = sessions.some(
            (session) => session.session_id === exportPrivacyAlert.session.session_id
        );
        if (!stillPresent) {
            setExportPrivacyAlert(null);
            setExportPrivacyOverrideSessionId(null);
        }
    }, [sessions, exportPrivacyAlert]);

    // Subscribe to processing events
    useEffect(() => {
        const unlisteners: (() => void)[] = [];

        onProcessingStarted((sessionId) => {
            setProcessingSessions((prev) => new Set(prev).add(sessionId));
        }).then((unlisten) => unlisteners.push(unlisten));

        onProcessingComplete((sessionId) => {
            setProcessingSessions((prev) => {
                const next = new Set(prev);
                next.delete(sessionId);
                return next;
            });
            setStatusMessage({
                tone: "success",
                text: `Session ${sessionId.slice(0, 8)} is ready for review.`,
            });
            // Refresh session list to get updated metadata
            void loadSessions();
        }).then((unlisten) => unlisteners.push(unlisten));

        onProcessingError((processingError) => {
            setStatusMessage({
                tone: "error",
                text: `Session processing failed: ${processingError}`,
            });
            void loadSessions();
        }).then((unlisten) => unlisteners.push(unlisten));

        return () => {
            unlisteners.forEach((unlisten) => unlisten());
        };
    }, []);

    // Register keyboard shortcuts
    useEffect(() => {
        registerCategory({
            name: "Navigation",
            shortcuts: {
                help: {
                    key: "?",
                    meta: true,
                    shift: true,
                    handler: () => setShowHelp(true),
                    description: "Show keyboard shortcuts",
                },
                "new-recording": {
                    key: "n",
                    meta: true,
                    handler: () => void handleStartCapture(),
                    description: "New recording",
                },
                search: {
                    key: "f",
                    meta: true,
                    handler: () => document.getElementById("search-input")?.focus(),
                    description: "Focus search",
                },
            },
        });

        return () => {
            unregisterCategory("Navigation");
        };
    }, [registerCategory, unregisterCategory, setShowHelp, navigate]);

    async function loadSessions() {
        try {
            setError(null);
            const data = await listSessions();
            setSessions(data);
            setLoading(false);

            // Initialize processingSessions from persisted metadata
            // This handles app restarts during conversion
            const stillConverting = new Set<string>();
            for (const session of data) {
                if (session.processing_status === "converting") {
                    stillConverting.add(session.session_id);
                }
            }
            setProcessingSessions((prev) => {
                // Merge: keep event-based additions, add persisted ones
                const merged = new Set(prev);
                stillConverting.forEach((id) => merged.add(id));
                return merged;
            });
        } catch (err) {
            setError(String(err));
            setLoading(false);
        }
    }

    async function handleDelete(sessionId: string) {
        try {
            await deleteSession(sessionId);
            await loadSessions();
        } catch (err) {
            console.error("Delete failed:", err);
            setStatusMessage({
                tone: "error",
                text: `Failed to delete session: ${String(err)}`,
            });
        }
    }

    async function handleRename(sessionId: string) {
        if (!editTitle.trim()) {
            setEditingId(null);
            return;
        }

        try {
            await renameSession(sessionId, editTitle);
            await loadSessions();
            setEditingId(null);
        } catch (err) {
            alert(`Failed to rename session: ${err}`);
        }
    }

    async function handleExportPackage(session: SessionSummary, forceOverride = false) {
        if (processingSessions.has(session.session_id)) {
            setStatusMessage({
                tone: "error",
                text: "Package export is unavailable while the session is still converting.",
            });
            return;
        }

        const overrideRequested =
            forceOverride || exportPrivacyOverrideSessionId === session.session_id;
        if (!overrideRequested) {
            try {
                setPrivacyScanSessionId(session.session_id);
                const metadata = await getSessionMetadata(session.session_id);
                const privacyScan = await scanSessionForSensitiveData(metadata);
                if (privacyScan.highSeverityCount > 0) {
                    setExportPrivacyOverrideSessionId(session.session_id);
                    setExportPrivacyAlert({ session, scan: privacyScan });
                    setStatusMessage({
                        tone: "error",
                        text: `Potential secrets detected (${privacyScan.highSeverityCount}). Review or redact first, then export again to confirm override.`,
                    });
                    return;
                }
                setExportPrivacyAlert(null);
            } catch (err) {
                setStatusMessage({
                    tone: "error",
                    text: `Could not run privacy check before export: ${String(err)}`,
                });
                return;
            } finally {
                setPrivacyScanSessionId(null);
            }
        } else {
            setExportPrivacyOverrideSessionId(null);
            setExportPrivacyAlert(null);
        }

        try {
            setStatusMessage(null);
            setExportingSessionId(session.session_id);
            const packagePath = await exportSessionPackage(session.session_id);
            trackWorkflowEvent("session_exported", {
                sessionId: session.session_id,
                metadata: { format: "package", override: overrideRequested },
            });
            setStatusMessage({
                tone: "success",
                text: `Package exported for "${session.title || session.session_id.slice(0, 8)}"${overrideRequested ? " (override)." : "."}`,
            });
            await revealInFileManager(packagePath);
        } catch (err) {
            setStatusMessage({
                tone: "error",
                text: `Failed to export package: ${String(err)}`,
            });
        } finally {
            setExportingSessionId(null);
            refreshWorkflowMetrics();
        }
    }

    async function handleImportPackage() {
        setStatusMessage(null);
        setImportModalError(null);
        setShowImportModal(true);
    }

    async function handlePickImportPackagePath() {
        try {
            const selectedPath = await openPathDialog({
                title: "Select ShowRunner package folder",
                directory: true,
                multiple: false,
                defaultPath: importPackagePath.trim() || undefined,
            });

            if (typeof selectedPath === "string") {
                setImportPackagePath(selectedPath);
                setImportModalError(null);
            }
        } catch (err) {
            setImportModalError(`Failed to open import dialog: ${String(err)}`);
        }
    }

    async function handleConfirmImportPackage() {
        const packagePath = importPackagePath.trim();
        if (!packagePath) {
            setImportModalError("Select a package folder before importing.");
            return;
        }

        try {
            setStatusMessage(null);
            setImportModalError(null);
            setImportingPackage(true);
            const imported = await importSessionPackage(packagePath);
            setShowImportModal(false);
            setImportPackagePath("");
            setImportModalError(null);
            setStatusMessage({
                tone: "success",
                text: `Package imported (${imported.imported_files} files).`,
            });
            await loadSessions();
            navigate(`/editor/${imported.session_id}`);
        } catch (err) {
            setImportModalError(`Failed to import package: ${String(err)}`);
        } finally {
            setImportingPackage(false);
        }
    }

    function handleStartCapture() {
        void (async () => {
            try {
                await showRecordingOverlay();
            } catch (err) {
                setStatusMessage({
                    tone: "error",
                    text: `Failed to open recorder: ${String(err)}`,
                });
                return;
            }

            // Best effort: hide Library so capture starts on a clean desktop.
            const isTauriRuntime = typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
            if (!isTauriRuntime) return;

            try {
                const { getCurrentWindow } = await import("@tauri-apps/api/window");
                await getCurrentWindow().hide();
            } catch {
                // Ignore hide failures; overlay is already visible.
            }
        })();
    }

    function handleDismissExportPrivacyAlert() {
        setExportPrivacyAlert(null);
        setExportPrivacyOverrideSessionId(null);
    }

    function handleOpenPrivacySession() {
        if (!exportPrivacyAlert) return;
        navigate(`/editor/${exportPrivacyAlert.session.session_id}`);
    }

    function handleExportAnywayFromAlert() {
        if (!exportPrivacyAlert) return;
        void handleExportPackage(exportPrivacyAlert.session, true);
    }

    function formatDuration(ms: number | null): string {
        if (!ms) return "--:--";
        const seconds = Math.floor(ms / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);

        if (hours > 0) {
            return `${hours}h ${minutes % 60}m`;
        }
        if (minutes > 0) {
            return `${minutes}m ${seconds % 60}s`;
        }
        return `${seconds}s`;
    }

    function formatDate(isoString: string): string {
        try {
            const timestamp = parseInt(isoString);
            const date = new Date(timestamp * 1000);
            const now = new Date();
            const diffMs = now.getTime() - date.getTime();
            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

            if (diffDays === 0) return "Today";
            if (diffDays === 1) return "Yesterday";
            if (diffDays < 7) return `${diffDays}d ago`;

            return date.toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
            });
        } catch {
            return isoString;
        }
    }

    const filteredSessions = useMemo(() => {
        const query = searchQuery.trim().toLowerCase();
        const filtered = sessions.filter((session) => {
            if (!query) return true;
            return (
                session.title?.toLowerCase().includes(query) ||
                session.session_id.toLowerCase().includes(query)
            );
        });

        const createdAtSeconds = (created_at: string) => {
            const value = Number(created_at);
            return Number.isFinite(value) ? value : 0;
        };

        const sorted = [...filtered].sort((a, b) => {
            if (sortMode === "last_edited" || sortMode === "newest") {
                return createdAtSeconds(b.created_at) - createdAtSeconds(a.created_at);
            }
            if (sortMode === "oldest") {
                return createdAtSeconds(a.created_at) - createdAtSeconds(b.created_at);
            }
            if (sortMode === "longest") {
                return (b.duration_ms ?? 0) - (a.duration_ms ?? 0);
            }
            if (sortMode === "shortest") {
                return (a.duration_ms ?? 0) - (b.duration_ms ?? 0);
            }
            return 0;
        });

        return sorted;
    }, [sessions, searchQuery, sortMode]);

    const newestFirstSessions = useMemo(() => {
        const createdAtSeconds = (created_at: string) => {
            const value = Number(created_at);
            return Number.isFinite(value) ? value : 0;
        };
        return [...sessions].sort(
            (a, b) => createdAtSeconds(b.created_at) - createdAtSeconds(a.created_at)
        );
    }, [sessions]);

    const readySessionCount = useMemo(
        () => sessions.filter((session) => !processingSessions.has(session.session_id)).length,
        [sessions, processingSessions]
    );

    const convertingSessionCount = useMemo(
        () => sessions.filter((session) => processingSessions.has(session.session_id)).length,
        [sessions, processingSessions]
    );

    const terminalSessionCount = useMemo(
        () => sessions.filter((session) => session.has_terminal).length,
        [sessions]
    );

    const latestReadySessionId = useMemo(() => {
        return (
            newestFirstSessions.find((session) => !processingSessions.has(session.session_id))
                ?.session_id ?? null
        );
    }, [newestFirstSessions, processingSessions]);

    function handleOpenLatestReadySession() {
        if (!latestReadySessionId) {
            setStatusMessage({
                tone: "error",
                text: "No ready sessions yet. Finish a recording to unlock quick resume.",
            });
            return;
        }
        navigate(`/editor/${latestReadySessionId}`);
    }

    if (loading) {
        return (
            <div style={styles.shell}>
                <div style={styles.loadingState}>
                    <div style={styles.loadingSpinner} />
                    <span style={styles.loadingText}>Loading sessions...</span>
                </div>
                <style>{`
                    @keyframes spin {
                        from { transform: rotate(0deg); }
                        to { transform: rotate(360deg); }
                    }
                `}</style>
            </div>
        );
    }

    return (
        <div style={styles.shell}>
            {/* Sidebar */}
            <aside style={styles.sidebar}>
                <div style={styles.workspaceRow}>
                    <div style={styles.workspaceLeft}>
                        <div style={styles.workspaceAvatar}>F</div>
                        <div style={{ minWidth: 0 }}>
                            <div style={styles.workspaceName}>Farman Pirzada</div>
                            <div style={styles.workspaceHint}>Just me</div>
                        </div>
                    </div>
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        style={{ color: "var(--text-muted)", flexShrink: 0 }}
                    >
                        <path d="M6 9l6 6 6-6" />
                    </svg>
                </div>

                <div style={styles.searchWrapper}>
                    <span style={styles.searchIcon}>
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                        >
                            <circle cx="11" cy="11" r="8" />
                            <path d="m21 21-4.35-4.35" />
                        </svg>
                    </span>
                    <input
                        id="search-input"
                        type="text"
                        placeholder="Search"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        style={styles.searchInput}
                    />
                    <div style={styles.searchKbd}>
                        <kbd>&#8984;</kbd>
                        <kbd>F</kbd>
                    </div>
                </div>

                <div style={styles.navSection}>
                    <div style={styles.navLabel}>Just me</div>
                    <button style={{ ...styles.navItem, ...styles.navItemActive }}>
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                        >
                            <rect x="3" y="4" width="18" height="14" rx="2" />
                            <path d="M7 20h10" />
                        </svg>
                        Library
                    </button>
                    <button style={styles.navItem} disabled title="Coming soon">
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                        >
                            <path d="M3 3v18h18" />
                            <path d="M7 14l3-3 3 2 5-6" />
                        </svg>
                        Insights
                    </button>
                </div>

                <div style={styles.planCard}>
                    <div style={styles.planTitleRow}>
                        <div style={styles.planTitle}>Free Plan</div>
                        <div style={styles.planQuota}>1/3</div>
                    </div>
                    <div style={styles.planDesc}>You can publish up to 3 files for free.</div>
                    <div style={styles.planBar}>
                        <div style={styles.planBarFill} />
                    </div>
                    <button style={styles.planBtn} disabled title="Coming soon">
                        Upgrade
                    </button>
                </div>
            </aside>

            {/* Main */}
            <main style={styles.main}>
                <div style={styles.mainScroll}>
                    <div style={styles.mainHeaderRow}>
                        <h1 style={styles.mainTitle}>My Library</h1>
                        <div style={styles.headerBtnGroup}>
                            <button
                                onClick={handleImportPackage}
                                disabled={importingPackage}
                                style={{
                                    ...styles.secondaryBtn,
                                    opacity: importingPackage ? 0.6 : 1,
                                    cursor: importingPackage ? "not-allowed" : "pointer",
                                }}
                            >
                                <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                >
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                    <polyline points="7 10 12 15 17 10" />
                                    <line x1="12" y1="15" x2="12" y2="3" />
                                </svg>
                                {importingPackage ? "Importing..." : "Import Package"}
                            </button>
                            <button
                                onClick={handleStartCapture}
                                style={styles.createBtn}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.opacity = "0.92";
                                    e.currentTarget.style.transform = "translateY(-1px)";
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.opacity = "1";
                                    e.currentTarget.style.transform = "translateY(0)";
                                }}
                            >
                                <span
                                    style={{
                                        width: "24px",
                                        height: "24px",
                                        borderRadius: "10px",
                                        background: "rgba(255,255,255,0.16)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                    }}
                                    aria-hidden
                                >
                                    <svg
                                        width="14"
                                        height="14"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                    >
                                        <path d="M12 5v14M5 12h14" />
                                    </svg>
                                </span>
                                Create
                            </button>
                        </div>
                    </div>

                    <div style={styles.toolbarRow}>
                        <div style={styles.pillRow}>
                            <button style={styles.pill} title="Filter (coming soon)" disabled>
                                <span style={styles.pillIcon} aria-hidden>
                                    <svg
                                        width="14"
                                        height="14"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                    >
                                        <rect x="3" y="3" width="7" height="7" rx="1" />
                                        <rect x="14" y="3" width="7" height="7" rx="1" />
                                        <rect x="3" y="14" width="7" height="7" rx="1" />
                                        <rect x="14" y="14" width="7" height="7" rx="1" />
                                    </svg>
                                </span>
                                All
                                <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    style={{ color: "var(--text-muted)" }}
                                    aria-hidden
                                >
                                    <path d="M6 9l6 6 6-6" />
                                </svg>
                            </button>
                            <button style={styles.pill} title="Filter (coming soon)" disabled>
                                Status
                                <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    style={{ color: "var(--text-muted)" }}
                                    aria-hidden
                                >
                                    <path d="M6 9l6 6 6-6" />
                                </svg>
                            </button>
                            <button style={styles.pill} title="Filter (coming soon)" disabled>
                                Tags
                                <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    style={{ color: "var(--text-muted)" }}
                                    aria-hidden
                                >
                                    <path d="M6 9l6 6 6-6" />
                                </svg>
                            </button>
                        </div>

                        <div style={styles.sortRow}>
                            <select
                                value={sortMode}
                                onChange={(e) => setSortMode(e.target.value as SortMode)}
                                style={{
                                    ...styles.pill,
                                    paddingRight: "12px",
                                    appearance: "none",
                                }}
                                aria-label="Sort"
                            >
                                {Object.entries(sortLabels).map(([value, label]) => (
                                    <option key={value} value={value}>
                                        {label}
                                    </option>
                                ))}
                            </select>
                            <div style={styles.viewToggle} aria-label="View mode">
                                <button
                                    onClick={() => setViewMode("grid")}
                                    style={{
                                        ...styles.viewToggleBtn,
                                        ...(viewMode === "grid" ? styles.viewToggleBtnActive : {}),
                                    }}
                                    title="Grid view"
                                >
                                    <svg
                                        width="16"
                                        height="16"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                    >
                                        <rect x="3" y="3" width="7" height="7" rx="1" />
                                        <rect x="14" y="3" width="7" height="7" rx="1" />
                                        <rect x="3" y="14" width="7" height="7" rx="1" />
                                        <rect x="14" y="14" width="7" height="7" rx="1" />
                                    </svg>
                                </button>
                                <button
                                    onClick={() => setViewMode("list")}
                                    style={{
                                        ...styles.viewToggleBtn,
                                        ...(viewMode === "list" ? styles.viewToggleBtnActive : {}),
                                    }}
                                    title="List view"
                                >
                                    <svg
                                        width="16"
                                        height="16"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                    >
                                        <path d="M8 6h13" />
                                        <path d="M8 12h13" />
                                        <path d="M8 18h13" />
                                        <path d="M3 6h.01" />
                                        <path d="M3 12h.01" />
                                        <path d="M3 18h.01" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>

                    <LibraryCommandCenter
                        totalSessions={sessions.length}
                        readySessions={readySessionCount}
                        convertingSessions={convertingSessionCount}
                        terminalSessions={terminalSessionCount}
                        workflowMetrics={workflowMetrics}
                        latestReadySessionId={latestReadySessionId}
                        onStartRecording={handleStartCapture}
                        onOpenLatestReady={handleOpenLatestReadySession}
                    />

                    {error && (
                        <div style={styles.errorBanner}>
                            <svg
                                width="16"
                                height="16"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                            >
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 8v4m0 4h.01" />
                            </svg>
                            {error}
                        </div>
                    )}
                    {statusMessage && (
                        <div
                            style={{
                                ...styles.statusBanner,
                                ...(statusMessage.tone === "success"
                                    ? styles.statusBannerSuccess
                                    : styles.statusBannerError),
                            }}
                        >
                            <svg
                                width="16"
                                height="16"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                            >
                                {statusMessage.tone === "success" ? (
                                    <>
                                        <circle cx="12" cy="12" r="10" />
                                        <path d="m9 12 2 2 4-4" />
                                    </>
                                ) : (
                                    <>
                                        <circle cx="12" cy="12" r="10" />
                                        <path d="M12 8v4m0 4h.01" />
                                    </>
                                )}
                            </svg>
                            {statusMessage.text}
                        </div>
                    )}
                    {exportPrivacyAlert && (
                        <div style={styles.privacyPanel}>
                            <div style={styles.privacyPanelTitle}>
                                Privacy check flagged potential secrets
                            </div>
                            <div style={styles.privacyPanelMeta}>
                                {exportPrivacyAlert.scan.highSeverityCount} high-severity match
                                {exportPrivacyAlert.scan.highSeverityCount === 1 ? "" : "es"} in
                                session{" "}
                                <code>
                                    {exportPrivacyAlert.session.title ||
                                        exportPrivacyAlert.session.session_id.slice(0, 8)}
                                </code>
                                . Review findings before exporting.
                            </div>
                            <div style={styles.privacyFindingList}>
                                {exportPrivacyAlert.scan.findings
                                    .slice(0, 6)
                                    .map((finding, idx) => (
                                        <div
                                            key={`${finding.path}-${finding.rule}-${idx}`}
                                            style={styles.privacyFinding}
                                        >
                                            <div style={styles.privacyFindingRule}>
                                                {finding.rule}
                                            </div>
                                            <div style={styles.privacyFindingPath}>
                                                {finding.path}
                                            </div>
                                            <div style={styles.privacyFindingSnippet}>
                                                {finding.snippet}
                                            </div>
                                        </div>
                                    ))}
                            </div>
                            <div style={styles.privacyActions}>
                                <button
                                    type="button"
                                    style={styles.privacyActionPrimary}
                                    onClick={handleExportAnywayFromAlert}
                                >
                                    Export package anyway
                                </button>
                                <button
                                    type="button"
                                    style={styles.privacyActionSecondary}
                                    onClick={handleOpenPrivacySession}
                                >
                                    Open in editor
                                </button>
                                <button
                                    type="button"
                                    style={styles.privacyActionSecondary}
                                    onClick={handleDismissExportPrivacyAlert}
                                >
                                    Dismiss
                                </button>
                            </div>
                        </div>
                    )}

                    {filteredSessions.length === 0 ? (
                        <div style={styles.emptyState}>
                            <div style={styles.emptyIcon}>
                                <span style={styles.emptyIconInner}>
                                    <svg
                                        width="32"
                                        height="32"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="1.5"
                                    >
                                        <rect x="2" y="3" width="20" height="14" rx="2" />
                                        <path d="m8 21 4-4 4 4" />
                                        <path d="M12 17v-4" />
                                        <circle cx="12" cy="10" r="2" fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                            <h2 style={styles.emptyTitle}>
                                {searchQuery ? "No sessions found" : "No recordings yet"}
                            </h2>
                            <p style={styles.emptyDescription}>
                                {searchQuery
                                    ? "Try a different search term"
                                    : "Capture your screen, terminal, or both to create developer-friendly walkthroughs."}
                            </p>
                            {!searchQuery && (
                                <>
                                    <div style={styles.emptyActionsRow}>
                                        <button
                                            onClick={handleStartCapture}
                                            style={styles.emptyBtn}
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.opacity = "0.9";
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.opacity = "1";
                                            }}
                                        >
                                            Start Recording
                                        </button>
                                        <button
                                            type="button"
                                            style={styles.emptySecondaryBtn}
                                            onClick={() => setShowHelp(true)}
                                            title="Show keyboard shortcuts"
                                        >
                                            Keyboard shortcuts
                                        </button>
                                    </div>
                                    <div style={styles.emptyChecklist}>
                                        <div style={styles.emptyChecklistTitle}>
                                            60-second launch checklist
                                        </div>
                                        <div style={styles.emptyChecklistList}>
                                            <div style={styles.emptyChecklistItem}>
                                                <span style={styles.emptyChecklistIndex}>1</span>
                                                <span>Record a complete dev task in one take</span>
                                                <span style={styles.emptyChecklistHint}>~25s</span>
                                            </div>
                                            <div style={styles.emptyChecklistItem}>
                                                <span style={styles.emptyChecklistIndex}>2</span>
                                                <span>Clean up step titles and hotspot copy</span>
                                                <span style={styles.emptyChecklistHint}>~20s</span>
                                            </div>
                                            <div style={styles.emptyChecklistItem}>
                                                <span style={styles.emptyChecklistIndex}>3</span>
                                                <span>Share link, localized variant, or embed</span>
                                                <span style={styles.emptyChecklistHint}>~15s</span>
                                            </div>
                                        </div>
                                    </div>
                                </>
                            )}
                        </div>
                    ) : (
                        <>
                            {viewMode === "grid" ? (
                                <div style={styles.grid}>
                                    {filteredSessions.map((session, index) => (
                                        <div
                                            key={session.session_id}
                                            style={{
                                                ...styles.card,
                                                ...(hoveredCard === session.session_id
                                                    ? styles.cardHover
                                                    : {}),
                                                animationDelay: `${index * 50}ms`,
                                            }}
                                            className="animate-fade-in-up"
                                            onMouseEnter={() => setHoveredCard(session.session_id)}
                                            onMouseLeave={() => setHoveredCard(null)}
                                            onClick={() =>
                                                navigate(`/editor/${session.session_id}`)
                                            }
                                        >
                                            <div style={styles.thumbnail}>
                                                {session.thumbnail_path ? (
                                                    <img
                                                        src={session.thumbnail_path}
                                                        alt="Session thumbnail"
                                                        style={styles.thumbnailImage}
                                                    />
                                                ) : (
                                                    <span style={styles.thumbnailIcon}>
                                                        <svg
                                                            width="40"
                                                            height="40"
                                                            viewBox="0 0 24 24"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            strokeWidth="1"
                                                        >
                                                            <rect
                                                                x="2"
                                                                y="3"
                                                                width="20"
                                                                height="14"
                                                                rx="2"
                                                            />
                                                            <polygon
                                                                points="10,8 16,11 10,14"
                                                                fill="currentColor"
                                                            />
                                                        </svg>
                                                    </span>
                                                )}

                                                {processingSessions.has(session.session_id) && (
                                                    <div style={styles.processingOverlay}>
                                                        <div style={styles.processingSpinner} />
                                                        <span style={styles.processingText}>
                                                            Converting...
                                                        </span>
                                                    </div>
                                                )}

                                                <div
                                                    style={{
                                                        position: "absolute",
                                                        bottom: "10px",
                                                        right: "10px",
                                                        padding: "3px 8px",
                                                        backgroundColor: "rgba(0, 0, 0, 0.78)",
                                                        borderRadius: "999px",
                                                        fontSize: "11px",
                                                        fontFamily: "var(--font-mono)",
                                                        color: "#fff",
                                                    }}
                                                >
                                                    {formatDuration(session.duration_ms)}
                                                </div>
                                            </div>

                                            <div style={styles.cardDetails}>
                                                {editingId === session.session_id ? (
                                                    <input
                                                        type="text"
                                                        value={editTitle}
                                                        onChange={(e) =>
                                                            setEditTitle(e.target.value)
                                                        }
                                                        onBlur={() =>
                                                            handleRename(session.session_id)
                                                        }
                                                        onKeyDown={(e) => {
                                                            if (e.key === "Enter")
                                                                handleRename(session.session_id);
                                                            if (e.key === "Escape")
                                                                setEditingId(null);
                                                        }}
                                                        autoFocus
                                                        style={styles.titleInput}
                                                    />
                                                ) : (
                                                    <div
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setEditingId(session.session_id);
                                                            setEditTitle(session.title || "");
                                                        }}
                                                        style={styles.sessionTitle}
                                                        title="Click to rename"
                                                    >
                                                        {session.title ||
                                                            `Session ${session.session_id.substring(
                                                                0,
                                                                8
                                                            )}`}
                                                        <svg
                                                            width="12"
                                                            height="12"
                                                            viewBox="0 0 24 24"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            strokeWidth="2"
                                                            style={{ opacity: 0.25 }}
                                                            aria-hidden
                                                        >
                                                            <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
                                                        </svg>
                                                    </div>
                                                )}

                                                <div style={styles.metadata}>
                                                    <span>
                                                        Edited {formatDate(session.created_at)}
                                                    </span>
                                                </div>

                                                <div
                                                    style={{
                                                        display: "flex",
                                                        alignItems: "center",
                                                        justifyContent: "space-between",
                                                        gap: "12px",
                                                    }}
                                                >
                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            alignItems: "center",
                                                            gap: "8px",
                                                            minWidth: 0,
                                                        }}
                                                    >
                                                        {session.has_terminal && (
                                                            <span style={styles.terminalBadge}>
                                                                <svg
                                                                    width="10"
                                                                    height="10"
                                                                    viewBox="0 0 24 24"
                                                                    fill="none"
                                                                    stroke="currentColor"
                                                                    strokeWidth="2"
                                                                >
                                                                    <polyline points="4 17 10 11 4 5" />
                                                                    <line
                                                                        x1="12"
                                                                        y1="19"
                                                                        x2="20"
                                                                        y2="19"
                                                                    />
                                                                </svg>
                                                                Terminal
                                                            </span>
                                                        )}
                                                        {session.git_branch && (
                                                            <span style={styles.gitBadge}>
                                                                {session.git_branch}
                                                            </span>
                                                        )}
                                                    </div>

                                                    <div style={styles.actions}>
                                                        <button
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                void handleExportPackage(session);
                                                            }}
                                                            style={{
                                                                ...styles.actionIconBtn,
                                                                opacity:
                                                                    exportingSessionId ===
                                                                        session.session_id ||
                                                                    privacyScanSessionId ===
                                                                        session.session_id ||
                                                                    processingSessions.has(
                                                                        session.session_id
                                                                    )
                                                                        ? 0.55
                                                                        : 1,
                                                                cursor:
                                                                    exportingSessionId ===
                                                                        session.session_id ||
                                                                    privacyScanSessionId ===
                                                                        session.session_id ||
                                                                    processingSessions.has(
                                                                        session.session_id
                                                                    )
                                                                        ? "not-allowed"
                                                                        : "pointer",
                                                            }}
                                                            title={
                                                                processingSessions.has(
                                                                    session.session_id
                                                                )
                                                                    ? "Wait for conversion to complete"
                                                                    : privacyScanSessionId ===
                                                                        session.session_id
                                                                      ? "Running privacy check..."
                                                                      : "Export package"
                                                            }
                                                            disabled={
                                                                exportingSessionId ===
                                                                    session.session_id ||
                                                                privacyScanSessionId ===
                                                                    session.session_id ||
                                                                processingSessions.has(
                                                                    session.session_id
                                                                )
                                                            }
                                                        >
                                                            <svg
                                                                width="16"
                                                                height="16"
                                                                viewBox="0 0 24 24"
                                                                fill="none"
                                                                stroke="currentColor"
                                                                strokeWidth="2"
                                                            >
                                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                                                <polyline points="17 8 12 3 7 8" />
                                                                <line
                                                                    x1="12"
                                                                    y1="3"
                                                                    x2="12"
                                                                    y2="15"
                                                                />
                                                            </svg>
                                                        </button>
                                                        <button
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                setSharingId(session.session_id);
                                                            }}
                                                            style={styles.actionIconBtn}
                                                            title="Share"
                                                        >
                                                            <svg
                                                                width="16"
                                                                height="16"
                                                                viewBox="0 0 24 24"
                                                                fill="none"
                                                                stroke="currentColor"
                                                                strokeWidth="2"
                                                            >
                                                                <circle cx="18" cy="5" r="3" />
                                                                <circle cx="6" cy="12" r="3" />
                                                                <circle cx="18" cy="19" r="3" />
                                                                <line
                                                                    x1="8.59"
                                                                    y1="13.51"
                                                                    x2="15.42"
                                                                    y2="17.49"
                                                                />
                                                                <line
                                                                    x1="15.41"
                                                                    y1="6.51"
                                                                    x2="8.59"
                                                                    y2="10.49"
                                                                />
                                                            </svg>
                                                        </button>
                                                        <button
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                handleDelete(session.session_id);
                                                            }}
                                                            style={styles.actionIconBtn}
                                                            title="Delete"
                                                        >
                                                            <svg
                                                                width="16"
                                                                height="16"
                                                                viewBox="0 0 24 24"
                                                                fill="none"
                                                                stroke="currentColor"
                                                                strokeWidth="2"
                                                            >
                                                                <path d="M3 6h18" />
                                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div style={styles.list}>
                                    {filteredSessions.map((session) => (
                                        <div
                                            key={session.session_id}
                                            style={styles.listRow}
                                            onClick={() =>
                                                navigate(`/editor/${session.session_id}`)
                                            }
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.borderColor =
                                                    "var(--accent-1)";
                                                e.currentTarget.style.transform =
                                                    "translateY(-1px)";
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.borderColor =
                                                    "var(--border-default)";
                                                e.currentTarget.style.transform = "translateY(0)";
                                            }}
                                        >
                                            <div style={styles.listThumb}>
                                                {session.thumbnail_path ? (
                                                    <img
                                                        src={session.thumbnail_path}
                                                        alt="Session thumbnail"
                                                        style={styles.thumbnailImage}
                                                    />
                                                ) : (
                                                    <div
                                                        style={{
                                                            width: "100%",
                                                            height: "100%",
                                                            display: "flex",
                                                            alignItems: "center",
                                                            justifyContent: "center",
                                                            color: "var(--text-muted)",
                                                            opacity: 0.6,
                                                        }}
                                                    >
                                                        <svg
                                                            width="28"
                                                            height="28"
                                                            viewBox="0 0 24 24"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            strokeWidth="1.5"
                                                        >
                                                            <rect
                                                                x="2"
                                                                y="3"
                                                                width="20"
                                                                height="14"
                                                                rx="2"
                                                            />
                                                            <polygon
                                                                points="10,8 16,11 10,14"
                                                                fill="currentColor"
                                                            />
                                                        </svg>
                                                    </div>
                                                )}
                                                {processingSessions.has(session.session_id) && (
                                                    <div style={styles.processingOverlay}>
                                                        <div style={styles.processingSpinner} />
                                                        <span style={styles.processingText}>
                                                            Converting...
                                                        </span>
                                                    </div>
                                                )}
                                            </div>
                                            <div style={styles.listBody}>
                                                <div style={styles.listTitle}>
                                                    {session.title ||
                                                        `Session ${session.session_id.substring(0, 8)}`}
                                                </div>
                                                <div style={styles.listMeta}>
                                                    <span>{formatDate(session.created_at)}</span>
                                                    <span>·</span>
                                                    <span>
                                                        {formatDuration(session.duration_ms)}
                                                    </span>
                                                    <span>·</span>
                                                    <span>
                                                        {session.step_count}{" "}
                                                        {session.step_count === 1
                                                            ? "step"
                                                            : "steps"}
                                                    </span>
                                                    {session.has_terminal && (
                                                        <>
                                                            <span>·</span>
                                                            <span>terminal</span>
                                                        </>
                                                    )}
                                                    {session.git_branch && (
                                                        <>
                                                            <span>·</span>
                                                            <span>{session.git_branch}</span>
                                                        </>
                                                    )}
                                                </div>
                                            </div>
                                            <div style={styles.actions}>
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        void handleExportPackage(session);
                                                    }}
                                                    style={{
                                                        ...styles.actionIconBtn,
                                                        opacity:
                                                            exportingSessionId ===
                                                                session.session_id ||
                                                            privacyScanSessionId ===
                                                                session.session_id ||
                                                            processingSessions.has(
                                                                session.session_id
                                                            )
                                                                ? 0.55
                                                                : 1,
                                                        cursor:
                                                            exportingSessionId ===
                                                                session.session_id ||
                                                            privacyScanSessionId ===
                                                                session.session_id ||
                                                            processingSessions.has(
                                                                session.session_id
                                                            )
                                                                ? "not-allowed"
                                                                : "pointer",
                                                    }}
                                                    title={
                                                        processingSessions.has(session.session_id)
                                                            ? "Wait for conversion to complete"
                                                            : privacyScanSessionId ===
                                                                session.session_id
                                                              ? "Running privacy check..."
                                                              : "Export package"
                                                    }
                                                    disabled={
                                                        exportingSessionId === session.session_id ||
                                                        privacyScanSessionId ===
                                                            session.session_id ||
                                                        processingSessions.has(session.session_id)
                                                    }
                                                >
                                                    <svg
                                                        width="16"
                                                        height="16"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        strokeWidth="2"
                                                    >
                                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                                        <polyline points="17 8 12 3 7 8" />
                                                        <line x1="12" y1="3" x2="12" y2="15" />
                                                    </svg>
                                                </button>
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        setSharingId(session.session_id);
                                                    }}
                                                    style={styles.actionIconBtn}
                                                    title="Share"
                                                >
                                                    <svg
                                                        width="16"
                                                        height="16"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        strokeWidth="2"
                                                    >
                                                        <circle cx="18" cy="5" r="3" />
                                                        <circle cx="6" cy="12" r="3" />
                                                        <circle cx="18" cy="19" r="3" />
                                                        <line
                                                            x1="8.59"
                                                            y1="13.51"
                                                            x2="15.42"
                                                            y2="17.49"
                                                        />
                                                        <line
                                                            x1="15.41"
                                                            y1="6.51"
                                                            x2="8.59"
                                                            y2="10.49"
                                                        />
                                                    </svg>
                                                </button>
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        handleDelete(session.session_id);
                                                    }}
                                                    style={styles.actionIconBtn}
                                                    title="Delete"
                                                >
                                                    <svg
                                                        width="16"
                                                        height="16"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        strokeWidth="2"
                                                    >
                                                        <path d="M3 6h18" />
                                                        <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </>
                    )}
                </div>
            </main>

            {/* Share Dialog */}
            {sharingId && (
                <ShareDialog
                    sessionId={sharingId}
                    onClose={() => setSharingId(null)}
                    onShared={refreshWorkflowMetrics}
                />
            )}
            {showImportModal && (
                <div
                    style={styles.modalBackdrop}
                    onClick={() => {
                        if (!importingPackage) {
                            setImportModalError(null);
                            setShowImportModal(false);
                        }
                    }}
                >
                    <div style={styles.modalCard} onClick={(e) => e.stopPropagation()}>
                        <div style={styles.modalHeader}>
                            <h3 style={styles.modalTitle}>Import Package</h3>
                        </div>
                        <div style={styles.modalBody}>
                            Select the package folder that contains{" "}
                            <code>workflow.package.json</code>, or paste a path manually.
                        </div>
                        {importModalError && (
                            <div style={styles.modalError}>{importModalError}</div>
                        )}
                        <div style={styles.modalRow}>
                            <input
                                type="text"
                                value={importPackagePath}
                                onChange={(e) => {
                                    setImportPackagePath(e.target.value);
                                    if (importModalError) {
                                        setImportModalError(null);
                                    }
                                }}
                                placeholder="/absolute/path/to/package/folder"
                                style={styles.modalInput}
                                autoFocus
                                onKeyDown={(e) => {
                                    if (e.key === "Enter" && !importingPackage) {
                                        void handleConfirmImportPackage();
                                    }
                                    if (e.key === "Escape" && !importingPackage) {
                                        setImportModalError(null);
                                        setShowImportModal(false);
                                    }
                                }}
                            />
                            <button
                                type="button"
                                style={{
                                    ...styles.modalButton,
                                    opacity: importingPackage ? 0.6 : 1,
                                    cursor: importingPackage ? "not-allowed" : "pointer",
                                }}
                                onClick={() => {
                                    void handlePickImportPackagePath();
                                }}
                                disabled={importingPackage}
                            >
                                Browse…
                            </button>
                        </div>
                        <div style={styles.modalActions}>
                            <button
                                type="button"
                                style={{
                                    ...styles.modalButton,
                                    opacity: importingPackage ? 0.6 : 1,
                                    cursor: importingPackage ? "not-allowed" : "pointer",
                                }}
                                onClick={() => {
                                    setImportModalError(null);
                                    setShowImportModal(false);
                                }}
                                disabled={importingPackage}
                            >
                                Cancel
                            </button>
                            <button
                                type="button"
                                style={{
                                    ...styles.modalPrimaryBtn,
                                    opacity:
                                        importingPackage || !importPackagePath.trim() ? 0.65 : 1,
                                    cursor:
                                        importingPackage || !importPackagePath.trim()
                                            ? "not-allowed"
                                            : "pointer",
                                }}
                                onClick={() => {
                                    void handleConfirmImportPackage();
                                }}
                                disabled={importingPackage || !importPackagePath.trim()}
                            >
                                {importingPackage ? "Importing..." : "Import Package"}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            <style>{`
                @keyframes fade-in-up {
                    from {
                        opacity: 0;
                        transform: translateY(8px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                .animate-fade-in-up {
                    animation: fade-in-up 0.3s ease-out forwards;
                    opacity: 0;
                }
            `}</style>
        </div>
    );
}

export default LibraryView;