import { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import {
    enumerateDisplays,
    enumerateWindows,
    getCaptureReadiness,
    openAccessibilitySettings,
    startTerminalRecording,
    stopTerminalRecording,
    getTerminalWsUrl,
    type CaptureReadiness,
    type DisplayDevice,
    type WindowInfo,
} from "../lib/api";
import LiveTerminal from "../components/LiveTerminal";
import { useShortcutContext } from "../contexts/ShortcutContext";
import { useRecording } from "../hooks/useRecording";

type RecordingMode = "screen" | "terminal" | "both";
type SourceType = "display" | "window";

// Styles using design tokens
const styles = {
    container: {
        display: "flex",
        minHeight: "100vh",
        backgroundColor: "var(--bg-base)",
        color: "var(--text-primary)",
    },
    sidebar: {
        width: "380px",
        padding: "var(--space-6)",
        borderRight: "1px solid var(--border-default)",
        overflowY: "auto" as const,
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-6)",
        backgroundColor: "var(--bg-surface)",
    },
    header: {
        display: "flex",
        alignItems: "center",
        gap: "var(--space-3)",
    },
    logo: {
        width: "32px",
        height: "32px",
        borderRadius: "var(--radius-lg)",
        background: "linear-gradient(135deg, var(--accent-record) 0%, #b91c1c 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    headerText: {
        flex: 1,
    },
    title: {
        fontSize: "var(--text-lg)",
        fontWeight: "var(--weight-bold)" as unknown as number,
        letterSpacing: "var(--tracking-tight)",
        marginBottom: "var(--space-1)",
    },
    subtitle: {
        color: "var(--text-tertiary)",
        fontSize: "var(--text-sm)",
    },
    backLink: {
        display: "flex",
        alignItems: "center",
        gap: "var(--space-1)",
        color: "var(--text-tertiary)",
        fontSize: "var(--text-sm)",
        cursor: "pointer",
        transition: "var(--transition-colors)",
        background: "none",
        border: "none",
        padding: "var(--space-2)",
        borderRadius: "var(--radius-md)",
        marginLeft: "auto",
    },
    errorBanner: {
        padding: "var(--space-3) var(--space-4)",
        backgroundColor: "var(--accent-record-muted)",
        border: "1px solid var(--accent-record)",
        borderRadius: "var(--radius-lg)",
        color: "var(--accent-record-hover)",
        fontSize: "var(--text-sm)",
        display: "flex",
        alignItems: "center",
        gap: "var(--space-3)",
    },
    section: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-3)",
    },
    sectionTitle: {
        fontSize: "var(--text-xs)",
        fontWeight: "var(--weight-semibold)" as unknown as number,
        color: "var(--text-tertiary)",
        textTransform: "uppercase" as const,
        letterSpacing: "var(--tracking-wide)",
    },
    readinessCard: {
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-lg)",
        backgroundColor: "var(--bg-elevated)",
        padding: "var(--space-4)",
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-3)",
    },
    readinessHeader: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "2px",
    },
    readinessHeaderTop: {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "var(--space-3)",
    },
    readinessTitle: {
        fontSize: "var(--text-sm)",
        fontWeight: "var(--weight-semibold)" as unknown as number,
        color: "var(--text-primary)",
    },
    readinessHint: {
        fontSize: "var(--text-xs)",
        color: "var(--text-tertiary)",
        lineHeight: 1.4,
    },
    readinessList: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-2)",
    },
    readinessItem: {
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-md)",
        padding: "var(--space-3)",
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-2)",
        backgroundColor: "var(--bg-surface)",
    },
    readinessItemTop: {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "var(--space-3)",
    },
    readinessItemLeft: {
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
        minWidth: 0,
    },
    readinessCheckbox: {
        margin: 0,
        accentColor: "var(--accent-primary)",
    },
    readinessIndicator: {
        width: "10px",
        height: "10px",
        borderRadius: "50%",
        backgroundColor: "var(--text-muted)",
        border: "1px solid var(--border-default)",
        flexShrink: 0,
    },
    readinessLabel: {
        fontSize: "var(--text-sm)",
        color: "var(--text-primary)",
        fontWeight: "var(--weight-medium)" as unknown as number,
        whiteSpace: "nowrap" as const,
        overflow: "hidden",
        textOverflow: "ellipsis",
    },
    readinessBadge: {
        padding: "2px 8px",
        borderRadius: "999px",
        fontSize: "11px",
        fontWeight: "var(--weight-medium)" as unknown as number,
        border: "1px solid var(--border-default)",
        color: "var(--text-secondary)",
        backgroundColor: "var(--bg-base)",
        flexShrink: 0,
    },
    readinessMeta: {
        fontSize: "var(--text-xs)",
        color: "var(--text-tertiary)",
        lineHeight: 1.4,
    },
    readinessPath: {
        marginTop: "4px",
        fontFamily: "var(--font-mono)",
        fontSize: "11px",
        color: "var(--text-muted)",
        wordBreak: "break-all" as const,
    },
    readinessTimestamp: {
        marginTop: "2px",
        fontSize: "11px",
        color: "var(--text-muted)",
        fontFamily: "var(--font-mono)",
    },
    readinessActionBtn: {
        marginTop: "8px",
        alignSelf: "flex-start" as const,
    },
    modeButtons: {
        display: "flex",
        gap: "var(--space-2)",
    },
    modeBtn: {
        flex: 1,
        height: "var(--btn-height-md)",
        padding: "0 var(--space-3)",
        fontSize: "var(--text-sm)",
        fontWeight: "var(--weight-medium)" as unknown as number,
        backgroundColor: "var(--bg-elevated)",
        color: "var(--text-tertiary)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-md)",
        cursor: "pointer",
        transition: "var(--transition-all)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "var(--space-2)",
    },
    modeBtnActive: {
        backgroundColor: "var(--accent-primary)",
        color: "white",
        borderColor: "var(--accent-primary)",
    },
    sourceButtons: {
        display: "flex",
        gap: "var(--space-2)",
    },
    sourceBtn: {
        flex: 1,
        height: "var(--btn-height-md)",
        fontSize: "var(--text-sm)",
        fontWeight: "var(--weight-medium)" as unknown as number,
        backgroundColor: "var(--bg-elevated)",
        color: "var(--text-tertiary)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-md)",
        cursor: "pointer",
        transition: "var(--transition-all)",
    },
    sourceBtnActive: {
        backgroundColor: "var(--accent-success)",
        color: "white",
        borderColor: "var(--accent-success)",
    },
    displayList: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-2)",
    },
    displayItem: {
        display: "flex",
        alignItems: "center",
        padding: "var(--space-3) var(--space-4)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-lg)",
        cursor: "pointer",
        backgroundColor: "var(--bg-elevated)",
        transition: "var(--transition-all)",
    },
    displayItemActive: {
        borderColor: "var(--accent-primary)",
        backgroundColor: "var(--accent-primary-muted)",
    },
    displayRadio: {
        marginRight: "var(--space-3)",
        accentColor: "var(--accent-primary)",
    },
    displayInfo: {
        flex: 1,
    },
    displayName: {
        fontWeight: "var(--weight-medium)" as unknown as number,
        fontSize: "var(--text-sm)",
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
    },
    primaryBadge: {
        fontSize: "var(--text-xs)",
        color: "var(--accent-success)",
        fontWeight: "var(--weight-medium)" as unknown as number,
    },
    displayMeta: {
        fontSize: "var(--text-xs)",
        color: "var(--text-tertiary)",
        fontFamily: "var(--font-mono)",
        marginTop: "2px",
    },
    windowList: {
        display: "flex",
        flexDirection: "column" as const,
        gap: "var(--space-2)",
        maxHeight: "280px",
        overflowY: "auto" as const,
    },
    windowGroup: {
        marginBottom: "var(--space-2)",
    },
    windowGroupTitle: {
        fontSize: "var(--text-xs)",
        color: "var(--text-muted)",
        marginBottom: "var(--space-2)",
        fontWeight: "var(--weight-semibold)" as unknown as number,
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
    },
    windowItem: {
        display: "flex",
        alignItems: "center",
        padding: "var(--space-2) var(--space-3)",
        marginBottom: "var(--space-1)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-md)",
        cursor: "pointer",
        backgroundColor: "var(--bg-elevated)",
        transition: "var(--transition-all)",
    },
    windowItemActive: {
        borderColor: "var(--accent-primary)",
        backgroundColor: "var(--accent-primary-muted)",
    },
    windowInfo: {
        overflow: "hidden",
        flex: 1,
    },
    windowTitle: {
        fontWeight: "var(--weight-medium)" as unknown as number,
        fontSize: "var(--text-sm)",
        whiteSpace: "nowrap" as const,
        overflow: "hidden",
        textOverflow: "ellipsis",
    },
    windowSize: {
        fontSize: "var(--text-xs)",
        color: "var(--text-tertiary)",
        fontFamily: "var(--font-mono)",
    },
    refreshBtn: {
        padding: "var(--space-1) var(--space-2)",
        fontSize: "var(--text-xs)",
        backgroundColor: "transparent",
        color: "var(--text-tertiary)",
        border: "1px solid var(--border-default)",
        borderRadius: "var(--radius-sm)",
        cursor: "pointer",
        transition: "var(--transition-colors)",
    },
    recordingStatus: {
        padding: "var(--space-4)",
        backgroundColor: "var(--accent-record-muted)",
        border: "1px solid var(--accent-record)",
        borderRadius: "var(--radius-lg)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
    },
    recordingInfo: {
        display: "flex",
        alignItems: "center",
        gap: "var(--space-3)",
    },
    recordingDot: {
        width: "12px",
        height: "12px",
        borderRadius: "50%",
        backgroundColor: "var(--accent-record)",
    },
    recordingLabel: {
        fontWeight: "var(--weight-semibold)" as unknown as number,
        color: "var(--accent-record-hover)",
    },
    recordingTime: {
        fontFamily: "var(--font-mono)",
        color: "var(--text-tertiary)",
        fontSize: "var(--text-sm)",
    },
    recordBtn: {
        width: "100%",
        height: "var(--btn-height-lg)",
        fontSize: "var(--text-base)",
        fontWeight: "var(--weight-semibold)" as unknown as number,
        background: "linear-gradient(135deg, var(--accent-record) 0%, #dc2626 100%)",
        color: "white",
        border: "none",
        borderRadius: "var(--radius-lg)",
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "var(--space-2)",
        boxShadow: "0 4px 12px var(--accent-record-glow)",
        transition: "var(--transition-all)",
    },
    stopBtn: {
        width: "100%",
        height: "var(--btn-height-lg)",
        fontSize: "var(--text-base)",
        fontWeight: "var(--weight-semibold)" as unknown as number,
        backgroundColor: "var(--bg-muted)",
        color: "var(--text-primary)",
        border: "none",
        borderRadius: "var(--radius-lg)",
        cursor: "pointer",
        transition: "var(--transition-colors)",
    },
    mainContent: {
        flex: 1,
        display: "flex",
        flexDirection: "column" as const,
    },
    terminalContainer: {
        flex: 1,
        padding: "var(--space-4)",
    },
    terminalWrapper: {
        height: "100%",
        borderRadius: "var(--radius-xl)",
        overflow: "hidden",
        border: "1px solid var(--border-default)",
        backgroundColor: "var(--bg-void)",
    },
    emptyState: {
        flex: 1,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "var(--text-muted)",
    },
    emptyStateContent: {
        textAlign: "center" as const,
    },
    emptyStateIcon: {
        fontSize: "3rem",
        marginBottom: "var(--space-4)",
        opacity: 0.3,
    },
    emptyStateText: {
        color: "var(--text-tertiary)",
        fontSize: "var(--text-sm)",
    },
    shortcutHint: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "var(--space-2)",
        marginTop: "var(--space-4)",
        color: "var(--text-muted)",
        fontSize: "var(--text-xs)",
    },
    startBlockedHint: {
        marginTop: "var(--space-3)",
        fontSize: "var(--text-xs)",
        lineHeight: 1.4,
        color: "var(--status-warning)",
        textAlign: "center" as const,
    },
};

// Icons
const icons = {
    screen: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="2" y="3" width="20" height="14" rx="2" />
            <path d="M8 21h8M12 17v4" />
        </svg>
    ),
    terminal: (
        <svg width="16" height="16" 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>
    ),
    both: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="2" y="3" width="20" height="10" rx="2" />
            <polyline points="4 18 7 15 4 12" />
            <line x1="9" y1="18" x2="14" y2="18" />
        </svg>
    ),
    back: (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="m15 18-6-6 6-6" />
        </svg>
    ),
    record: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <circle cx="12" cy="12" r="8" />
        </svg>
    ),
    stop: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <rect x="6" y="6" width="12" height="12" rx="2" />
        </svg>
    ),
    refresh: (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
            <path d="M3 3v5h5" />
        </svg>
    ),
};

function RecordingView() {
    const navigate = useNavigate();
    const [displays, setDisplays] = useState<DisplayDevice[]>([]);
    const [windows, setWindows] = useState<WindowInfo[]>([]);
    const [sourceType, setSourceType] = useState<SourceType>("display");
    const [selectedDisplay, setSelectedDisplay] = useState<string | null>(null);
    const [selectedWindow, setSelectedWindow] = useState<number | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [screenReadyConfirmed, setScreenReadyConfirmed] = useState(false);
    const [domExtensionConfirmed, setDomExtensionConfirmed] = useState(false);
    const [captureReadiness, setCaptureReadiness] = useState<CaptureReadiness | null>(null);
    const [captureReadinessLoading, setCaptureReadinessLoading] = useState(false);
    const [captureReadinessError, setCaptureReadinessError] = useState<string | null>(null);

    const {
        recording,
        stopping,
        elapsedTime,
        start: startScreenRecording,
        stop: stopScreenRecording,
    } = useRecording({
        onError: (err) => setError(err),
    });

    const [recordingMode, setRecordingMode] = useState<RecordingMode>("screen");
    const [terminalWsUrl, setTerminalWsUrl] = useState<string | null>(null);

    const { registerCategory, unregisterCategory, setShowHelp } = useShortcutContext();
    const refreshCaptureReadiness = useCallback(async () => {
        setCaptureReadinessLoading(true);
        setCaptureReadinessError(null);
        try {
            const readiness = await getCaptureReadiness();
            setCaptureReadiness(readiness);
        } catch (err) {
            const message = err instanceof Error ? err.message : String(err);
            setCaptureReadiness(null);
            setCaptureReadinessError(message);
        } finally {
            setCaptureReadinessLoading(false);
        }
    }, []);

    useEffect(() => {
        registerCategory({
            name: "Recording",
            shortcuts: {
                "toggle-recording": {
                    key: "R",
                    meta: true,
                    shift: true,
                    handler: () => {
                        if (stopping) return;
                        if (recording) {
                            handleStopRecording();
                        } else {
                            handleStartRecording();
                        }
                    },
                    description: "Toggle recording (start/stop)",
                },
                stop: {
                    key: "Escape",
                    handler: () => {
                        if (recording && !stopping) {
                            handleStopRecording();
                        }
                    },
                    description: "Stop recording",
                    enabled: recording,
                },
            },
        });

        registerCategory({
            name: "Navigation",
            shortcuts: {
                help: {
                    key: "?",
                    meta: true,
                    shift: true,
                    handler: () => setShowHelp(true),
                    description: "Show keyboard shortcuts",
                },
                library: {
                    key: "L",
                    meta: true,
                    handler: () => navigate("/library"),
                    description: "Back to library",
                },
            },
        });

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

    useEffect(() => {
        loadSources();
    }, []);

    useEffect(() => {
        if (sourceType === "window") {
            loadWindows();
        }
    }, [sourceType]);

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

    useEffect(() => {
        if (recording) return;

        let refreshTimeout: ReturnType<typeof setTimeout> | null = null;

        const scheduleRefresh = () => {
            if (refreshTimeout) {
                clearTimeout(refreshTimeout);
            }
            // Small delay allows macOS privacy state to settle after returning from System Settings.
            refreshTimeout = setTimeout(() => {
                void refreshCaptureReadiness();
            }, 300);
        };

        const handleWindowFocus = () => {
            scheduleRefresh();
        };

        const handleVisibilityChange = () => {
            if (document.visibilityState === "visible") {
                scheduleRefresh();
            }
        };

        window.addEventListener("focus", handleWindowFocus);
        document.addEventListener("visibilitychange", handleVisibilityChange);

        return () => {
            window.removeEventListener("focus", handleWindowFocus);
            document.removeEventListener("visibilitychange", handleVisibilityChange);
            if (refreshTimeout) {
                clearTimeout(refreshTimeout);
            }
        };
    }, [recording, refreshCaptureReadiness]);

    useEffect(() => {
        const needsScreenSource = recordingMode === "screen" || recordingMode === "both";
        if (!needsScreenSource) return;
        const hasSource =
            sourceType === "display" ? Boolean(selectedDisplay) : Boolean(selectedWindow);
        if (!hasSource) {
            setScreenReadyConfirmed(false);
        }
    }, [recordingMode, sourceType, selectedDisplay, selectedWindow]);

    async function handleOpenAccessibilitySettings() {
        try {
            setCaptureReadinessError(null);
            await openAccessibilitySettings();
        } catch (err) {
            const message = err instanceof Error ? err.message : String(err);
            setCaptureReadinessError(message);
        }
    }

    async function loadSources() {
        try {
            const [devicesList, windowsList] = await Promise.all([
                enumerateDisplays(),
                enumerateWindows(),
            ]);
            setDisplays(devicesList);
            setWindows(windowsList);
            const primary = devicesList.find((d) => d.is_primary);
            if (primary) {
                setSelectedDisplay(primary.id);
            }
            if (windowsList.length > 0) {
                setSelectedWindow(windowsList[0].id);
            }
            setLoading(false);
        } catch (err) {
            setError(String(err));
            setLoading(false);
        }
    }

    async function loadWindows() {
        try {
            const windowsList = await enumerateWindows();
            setWindows(windowsList);
            if (windowsList.length > 0 && !selectedWindow) {
                setSelectedWindow(windowsList[0].id);
            }
        } catch (err) {
            console.error("Failed to load windows:", err);
        }
    }

    async function handleStartRecording() {
        const needsSource = recordingMode === "screen" || recordingMode === "both";

        if (needsSource && !screenReadyConfirmed) {
            setError("Confirm the Screen Recording readiness check before starting.");
            return;
        }
        if (needsSource && (!sidecarReady || !accessibilityReady)) {
            setError(
                "Complete Context Sidecar and Accessibility readiness checks before starting."
            );
            return;
        }

        if (needsSource) {
            if (sourceType === "display" && !selectedDisplay) {
                setError("Please select a display");
                return;
            }
            if (sourceType === "window" && !selectedWindow) {
                setError("Please select a window");
                return;
            }
        }

        try {
            setError(null);
            let newSessionId: string | null = null;
            const recordingStartMs = Date.now();

            if (recordingMode === "screen" || recordingMode === "both") {
                if (sourceType === "display") {
                    const display = displays.find((d) => d.id === selectedDisplay);
                    if (!display) return;
                    newSessionId = await startScreenRecording(
                        display.id,
                        display.resolution.width,
                        display.resolution.height
                    );
                } else {
                    const window = windows.find((w) => w.id === selectedWindow);
                    if (!window) return;
                    const display = displays.find((d) => d.is_primary) || displays[0];
                    if (!display) return;
                    newSessionId = await startScreenRecording(
                        `window-${window.id}`,
                        Math.round(window.bounds.width),
                        Math.round(window.bounds.height)
                    );
                }
            }

            if (recordingMode === "terminal" || recordingMode === "both") {
                if (!newSessionId) {
                    const display = displays[0];
                    if (display) {
                        newSessionId = await startScreenRecording(
                            display.id,
                            display.resolution.width,
                            display.resolution.height
                        );
                    }
                }

                if (newSessionId) {
                    await startTerminalRecording(newSessionId, 120, 40, recordingStartMs);
                    const wsUrl = await getTerminalWsUrl(newSessionId);
                    setTerminalWsUrl(wsUrl);
                }
            }
        } catch (err) {
            setError(String(err));
        }
    }

    async function handleStopRecording() {
        try {
            if (recordingMode === "terminal" || recordingMode === "both") {
                await stopTerminalRecording();
                setTerminalWsUrl(null);
            }

            const finalSessionId = await stopScreenRecording();
            if (finalSessionId) {
                navigate(`/editor/${finalSessionId}`);
            }
        } catch (err) {
            setError(String(err));
        }
    }

    const formatTime = (seconds: number) => {
        const mins = Math.floor(seconds / 60);
        const secs = seconds % 60;
        return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
    };

    const groupedWindows = windows.reduce(
        (acc, window) => {
            if (!acc[window.owner_name]) {
                acc[window.owner_name] = [];
            }
            acc[window.owner_name].push(window);
            return acc;
        },
        {} as Record<string, WindowInfo[]>
    );

    const needsScreenSource = recordingMode === "screen" || recordingMode === "both";
    const sourceSelectionMissing =
        needsScreenSource &&
        ((sourceType === "display" && !selectedDisplay) ||
            (sourceType === "window" && !selectedWindow));
    const sidecarReady = Boolean(
        captureReadiness?.sidecar_healthy && captureReadiness?.sidecar_events_healthy
    );
    const accessibilityReady = Boolean(captureReadiness?.accessibility_event_tap_available);
    const startBlockedByChecklist = needsScreenSource && !screenReadyConfirmed;
    const startBlockedByRuntimeChecks = needsScreenSource && (!sidecarReady || !accessibilityReady);
    const canStartRecording =
        !sourceSelectionMissing && !startBlockedByChecklist && !startBlockedByRuntimeChecks;
    const startBlockedReason = (() => {
        if (!needsScreenSource) return null;
        if (sourceSelectionMissing) return "Select a capture source before starting.";
        if (startBlockedByChecklist) return "Confirm Screen Recording readiness first.";
        if (!sidecarReady && !accessibilityReady) {
            return "Context Sidecar and Accessibility must both be Ready.";
        }
        if (!sidecarReady) return "Context Sidecar must be Ready.";
        if (!accessibilityReady) return "Accessibility Permissions must be Ready.";
        return null;
    })();

    const selectedDisplayInfo = displays.find((display) => display.id === selectedDisplay);
    const selectedWindowInfo = windows.find((window) => window.id === selectedWindow);
    const selectedSourceSummary =
        sourceType === "display"
            ? selectedDisplayInfo
                ? `${selectedDisplayInfo.name} (${selectedDisplayInfo.resolution.width}x${selectedDisplayInfo.resolution.height})`
                : "Select a display to continue."
            : selectedWindowInfo
              ? `${selectedWindowInfo.title || "(Untitled)"} · ${selectedWindowInfo.owner_name}`
              : "Select a window to continue.";
    const readinessLastChecked = captureReadiness
        ? new Date(captureReadiness.checked_at_ms).toLocaleTimeString("en-US", {
              hour: "2-digit",
              minute: "2-digit",
              second: "2-digit",
          })
        : null;

    if (loading) {
        return (
            <div style={styles.container}>
                <div style={{ ...styles.emptyState, width: "100%" }}>
                    <div style={styles.emptyStateContent}>
                        <div
                            style={{
                                width: "32px",
                                height: "32px",
                                border: "2px solid var(--border-default)",
                                borderTopColor: "var(--accent-primary)",
                                borderRadius: "50%",
                                animation: "spin 0.8s linear infinite",
                                margin: "0 auto var(--space-4)",
                            }}
                        />
                        <p style={styles.emptyStateText}>Loading displays...</p>
                    </div>
                </div>
                <style>{`
                    @keyframes spin {
                        from { transform: rotate(0deg); }
                        to { transform: rotate(360deg); }
                    }
                `}</style>
            </div>
        );
    }

    return (
        <div style={styles.container}>
            {/* Sidebar */}
            <div style={styles.sidebar}>
                {/* Header */}
                <div style={styles.header}>
                    <div style={styles.logo}>
                        <span style={{ color: "white", fontSize: "14px" }}>&#9679;</span>
                    </div>
                    <div style={styles.headerText}>
                        <h1 style={styles.title}>ShowRunner</h1>
                        <p style={styles.subtitle}>Terminal Recording</p>
                    </div>
                    <button
                        onClick={() => navigate("/library")}
                        style={styles.backLink}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = "var(--bg-hover)";
                            e.currentTarget.style.color = "var(--text-primary)";
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = "transparent";
                            e.currentTarget.style.color = "var(--text-tertiary)";
                        }}
                    >
                        {icons.back}
                        Library
                    </button>
                </div>

                {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>
                )}

                <div style={styles.readinessCard}>
                    <div style={styles.readinessHeader}>
                        <div style={styles.readinessHeaderTop}>
                            <div style={styles.readinessTitle}>Capture Readiness</div>
                            <button
                                onClick={() => {
                                    void refreshCaptureReadiness();
                                }}
                                disabled={captureReadinessLoading || recording}
                                style={{
                                    ...styles.refreshBtn,
                                    cursor:
                                        captureReadinessLoading || recording
                                            ? "not-allowed"
                                            : "pointer",
                                }}
                            >
                                {captureReadinessLoading ? "Checking..." : "Refresh checks"}
                            </button>
                        </div>
                        <div style={styles.readinessHint}>
                            Confirm required checks before recording. Runtime probes verify
                            sidecar and accessibility readiness.
                        </div>
                        {readinessLastChecked && (
                            <div style={styles.readinessTimestamp}>
                                Last checked: {readinessLastChecked}
                            </div>
                        )}
                    </div>

                    <div style={styles.readinessList}>
                        <div style={styles.readinessItem}>
                            <div style={styles.readinessItemTop}>
                                <label style={styles.readinessItemLeft}>
                                    <input
                                        type="checkbox"
                                        checked={!needsScreenSource || screenReadyConfirmed}
                                        onChange={(e) => {
                                            setScreenReadyConfirmed(e.target.checked);
                                            setError(null);
                                        }}
                                        disabled={recording || !needsScreenSource}
                                        style={styles.readinessCheckbox}
                                    />
                                    <span style={styles.readinessLabel}>Screen Recording</span>
                                </label>
                                <span style={styles.readinessBadge}>
                                    {!needsScreenSource
                                        ? "Not required"
                                        : screenReadyConfirmed
                                          ? "Ready"
                                          : "Required"}
                                </span>
                            </div>
                            <div style={styles.readinessMeta}>
                                {needsScreenSource
                                    ? selectedSourceSummary
                                    : "Terminal-only mode selected. Screen capture is optional."}
                            </div>
                        </div>

                        <div style={styles.readinessItem}>
                            <div style={styles.readinessItemTop}>
                                <div style={styles.readinessItemLeft}>
                                    <span
                                        style={{
                                            ...styles.readinessIndicator,
                                            backgroundColor: captureReadinessLoading
                                                ? "var(--status-warning)"
                                                : sidecarReady
                                                  ? "var(--status-success)"
                                                  : "var(--status-error)",
                                            borderColor: "transparent",
                                        }}
                                    />
                                    <span style={styles.readinessLabel}>Context Sidecar</span>
                                </div>
                                <span style={styles.readinessBadge}>
                                    {captureReadinessLoading
                                        ? "Checking..."
                                        : sidecarReady
                                          ? "Ready"
                                          : "Limited"}
                                </span>
                            </div>
                            <div style={styles.readinessMeta}>
                                {captureReadinessLoading
                                    ? "Checking local sidecar health."
                                    : sidecarReady
                                      ? "Event sidecar is reachable and will enrich context (app focus, shortcuts, file activity)."
                                      : captureReadinessError
                                        ? `Unable to verify sidecar readiness: ${captureReadinessError}`
                                        : "Sidecar appears unavailable. Recording still works, but context capture will be limited."}
                            </div>
                        </div>

                        <div style={styles.readinessItem}>
                            <div style={styles.readinessItemTop}>
                                <div style={styles.readinessItemLeft}>
                                    <span
                                        style={{
                                            ...styles.readinessIndicator,
                                            backgroundColor: captureReadinessLoading
                                                ? "var(--status-warning)"
                                                : accessibilityReady
                                                  ? "var(--status-success)"
                                                  : "var(--status-error)",
                                            borderColor: "transparent",
                                        }}
                                    />
                                    <span style={styles.readinessLabel}>
                                        Accessibility Permissions
                                    </span>
                                </div>
                                <span style={styles.readinessBadge}>
                                    {captureReadinessLoading
                                        ? "Checking..."
                                        : accessibilityReady
                                          ? "Ready"
                                          : "Needs setup"}
                                </span>
                            </div>
                            <div style={styles.readinessMeta}>
                                {captureReadinessLoading
                                    ? "Checking event tap availability."
                                    : accessibilityReady
                                      ? "Accessibility event tap is available for richer click and input semantics."
                                      : "Grant access in System Settings > Privacy & Security > Accessibility, then refresh checks."}
                                {!captureReadinessLoading && !accessibilityReady && (
                                    <button
                                        onClick={() => {
                                            void handleOpenAccessibilitySettings();
                                        }}
                                        disabled={recording}
                                        style={{
                                            ...styles.refreshBtn,
                                            ...styles.readinessActionBtn,
                                            cursor: recording ? "not-allowed" : "pointer",
                                        }}
                                    >
                                        Open Accessibility Settings
                                    </button>
                                )}
                            </div>
                        </div>

                        <div style={styles.readinessItem}>
                            <div style={styles.readinessItemTop}>
                                <label style={styles.readinessItemLeft}>
                                    <input
                                        type="checkbox"
                                        checked={domExtensionConfirmed}
                                        onChange={(e) => setDomExtensionConfirmed(e.target.checked)}
                                        disabled={recording}
                                        style={styles.readinessCheckbox}
                                    />
                                    <span style={styles.readinessLabel}>DOM Capture Extension</span>
                                </label>
                                <span style={styles.readinessBadge}>Optional</span>
                            </div>
                            <div style={styles.readinessMeta}>
                                For web workflows only. Load the extension in Chrome via
                                `chrome://extensions` and the local `/docs` folder.
                                <div style={styles.readinessPath}>
                                    /Users/farman/Documents/projects/showrunner/docs
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Recording Mode */}
                <div style={styles.section}>
                    <h2 style={styles.sectionTitle}>Recording Mode</h2>
                    <div style={styles.modeButtons}>
                        {[
                            { mode: "screen" as RecordingMode, label: "Screen", icon: icons.screen },
                            { mode: "terminal" as RecordingMode, label: "Terminal", icon: icons.terminal },
                            { mode: "both" as RecordingMode, label: "Both", icon: icons.both },
                        ].map(({ mode, label, icon }) => (
                            <button
                                key={mode}
                                onClick={() => !recording && setRecordingMode(mode)}
                                disabled={recording}
                                style={{
                                    ...styles.modeBtn,
                                    ...(recordingMode === mode ? styles.modeBtnActive : {}),
                                    opacity: recording ? 0.6 : 1,
                                    cursor: recording ? "not-allowed" : "pointer",
                                }}
                            >
                                {icon}
                                {label}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Source Type (for screen modes) */}
                {(recordingMode === "screen" || recordingMode === "both") && (
                    <>
                        <div style={styles.section}>
                            <h2 style={styles.sectionTitle}>Source Type</h2>
                            <div style={styles.sourceButtons}>
                                <button
                                    onClick={() => !recording && setSourceType("display")}
                                    disabled={recording}
                                    style={{
                                        ...styles.sourceBtn,
                                        ...(sourceType === "display" ? styles.sourceBtnActive : {}),
                                        opacity: recording ? 0.6 : 1,
                                        cursor: recording ? "not-allowed" : "pointer",
                                    }}
                                >
                                    Full Screen
                                </button>
                                <button
                                    onClick={() => !recording && setSourceType("window")}
                                    disabled={recording}
                                    style={{
                                        ...styles.sourceBtn,
                                        ...(sourceType === "window" ? styles.sourceBtnActive : {}),
                                        opacity: recording ? 0.6 : 1,
                                        cursor: recording ? "not-allowed" : "pointer",
                                    }}
                                >
                                    Window
                                </button>
                            </div>
                        </div>

                        {/* Display Selection */}
                        {sourceType === "display" && (
                            <div style={styles.section}>
                                <h2 style={styles.sectionTitle}>Select Display</h2>
                                <div style={styles.displayList}>
                                    {displays.map((display) => (
                                        <label
                                            key={display.id}
                                            style={{
                                                ...styles.displayItem,
                                                ...(selectedDisplay === display.id ? styles.displayItemActive : {}),
                                                opacity: recording ? 0.6 : 1,
                                                cursor: recording ? "not-allowed" : "pointer",
                                            }}
                                        >
                                            <input
                                                type="radio"
                                                name="display"
                                                value={display.id}
                                                checked={selectedDisplay === display.id}
                                                onChange={() => !recording && setSelectedDisplay(display.id)}
                                                disabled={recording}
                                                style={styles.displayRadio}
                                            />
                                            <div style={styles.displayInfo}>
                                                <div style={styles.displayName}>
                                                    {display.name}
                                                    {display.is_primary && (
                                                        <span style={styles.primaryBadge}>(Primary)</span>
                                                    )}
                                                </div>
                                                <div style={styles.displayMeta}>
                                                    {display.resolution.width}x{display.resolution.height} @ {display.refresh_rate}Hz
                                                </div>
                                            </div>
                                        </label>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* Window Selection */}
                        {sourceType === "window" && (
                            <div style={styles.section}>
                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                                    <h2 style={styles.sectionTitle}>Select Window</h2>
                                    <button
                                        onClick={loadWindows}
                                        disabled={recording}
                                        style={{
                                            ...styles.refreshBtn,
                                            cursor: recording ? "not-allowed" : "pointer",
                                        }}
                                        onMouseEnter={(e) => {
                                            if (!recording) {
                                                e.currentTarget.style.borderColor = "var(--accent-primary)";
                                                e.currentTarget.style.color = "var(--accent-primary)";
                                            }
                                        }}
                                        onMouseLeave={(e) => {
                                            e.currentTarget.style.borderColor = "var(--border-default)";
                                            e.currentTarget.style.color = "var(--text-tertiary)";
                                        }}
                                    >
                                        {icons.refresh}
                                        Refresh
                                    </button>
                                </div>
                                <div style={styles.windowList}>
                                    {Object.entries(groupedWindows).map(([appName, appWindows]) => (
                                        <div key={appName} style={styles.windowGroup}>
                                            <div style={styles.windowGroupTitle}>
                                                {appName}
                                            </div>
                                            {appWindows.map((window) => (
                                                <label
                                                    key={window.id}
                                                    style={{
                                                        ...styles.windowItem,
                                                        ...(selectedWindow === window.id ? styles.windowItemActive : {}),
                                                        opacity: recording ? 0.6 : 1,
                                                        cursor: recording ? "not-allowed" : "pointer",
                                                    }}
                                                >
                                                    <input
                                                        type="radio"
                                                        name="window"
                                                        value={window.id}
                                                        checked={selectedWindow === window.id}
                                                        onChange={() => !recording && setSelectedWindow(window.id)}
                                                        disabled={recording}
                                                        style={styles.displayRadio}
                                                    />
                                                    <div style={styles.windowInfo}>
                                                        <div style={styles.windowTitle}>
                                                            {window.title || "(Untitled)"}
                                                        </div>
                                                        <div style={styles.windowSize}>
                                                            {Math.round(window.bounds.width)}x{Math.round(window.bounds.height)}
                                                        </div>
                                                    </div>
                                                </label>
                                            ))}
                                        </div>
                                    ))}
                                    {windows.length === 0 && (
                                        <div style={{ color: "var(--text-tertiary)", textAlign: "center", padding: "var(--space-4)" }}>
                                            No windows found
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </>
                )}

                {/* Recording Controls */}
                <div style={{ marginTop: "auto" }}>
                    {recording ? (
                        <>
                            <div style={styles.recordingStatus}>
                                <div style={styles.recordingInfo}>
                                    <span className="animate-pulse-record" style={styles.recordingDot} />
                                    <span style={styles.recordingLabel}>Recording</span>
                                </div>
                                <span style={styles.recordingTime}>{formatTime(elapsedTime)}</span>
                            </div>
                            <button
                                onClick={handleStopRecording}
                                disabled={stopping}
                                style={{
                                    ...styles.stopBtn,
                                    marginTop: "var(--space-3)",
                                    opacity: stopping ? 0.6 : 1,
                                    cursor: stopping ? "not-allowed" : "pointer",
                                }}
                                onMouseEnter={(e) => {
                                    if (!stopping) {
                                        e.currentTarget.style.backgroundColor = "var(--bg-hover)";
                                    }
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.backgroundColor = "var(--bg-muted)";
                                }}
                            >
                                {icons.stop}
                                {stopping ? "Processing..." : "Stop Recording"}
                            </button>
                        </>
                    ) : (
                        <button
                            onClick={handleStartRecording}
                            disabled={!canStartRecording}
                            style={{
                                ...styles.recordBtn,
                                opacity: canStartRecording ? 1 : 0.65,
                                cursor: canStartRecording ? "pointer" : "not-allowed",
                            }}
                            onMouseEnter={(e) => {
                                if (!canStartRecording) return;
                                e.currentTarget.style.transform = "translateY(-2px)";
                                e.currentTarget.style.boxShadow = "0 6px 20px var(--accent-record-glow)";
                            }}
                            onMouseLeave={(e) => {
                                if (!canStartRecording) return;
                                e.currentTarget.style.transform = "translateY(0)";
                                e.currentTarget.style.boxShadow = "0 4px 12px var(--accent-record-glow)";
                            }}
                        >
                            {icons.record}
                            Start Recording
                        </button>
                    )}
                    {!recording && startBlockedReason && (
                        <div style={styles.startBlockedHint}>{startBlockedReason}</div>
                    )}
                    <div style={styles.shortcutHint}>
                        <kbd>&#8984;</kbd><kbd>&#8679;</kbd><kbd>R</kbd>
                        <span>to toggle recording</span>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div style={styles.mainContent}>
                {recording && (recordingMode === "terminal" || recordingMode === "both") && terminalWsUrl ? (
                    <div style={styles.terminalContainer}>
                        <div style={styles.terminalWrapper}>
                            <LiveTerminal
                                wsUrl={terminalWsUrl}
                                onExit={() => {
                                    console.log("Terminal session ended");
                                }}
                                onError={(err: string) => setError(err)}
                            />
                        </div>
                    </div>
                ) : (
                    <div style={styles.emptyState}>
                        <div style={styles.emptyStateContent}>
                            <div style={styles.emptyStateIcon}>
                                {recordingMode === "terminal" || recordingMode === "both" ? (
                                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                                        <polyline points="4 17 10 11 4 5" />
                                        <line x1="12" y1="19" x2="20" y2="19" />
                                    </svg>
                                ) : (
                                    <svg width="48" height="48" 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 21h8M12 17v4" />
                                    </svg>
                                )}
                            </div>
                            <p style={styles.emptyStateText}>
                                {recordingMode === "terminal" || recordingMode === "both"
                                    ? "Terminal will appear here when recording starts"
                                    : "Screen recording preview"}
                            </p>
                        </div>
                    </div>
                )}
            </div>

            <style>{`
                @keyframes pulse-record {
                    0%, 100% {
                        opacity: 1;
                        box-shadow: 0 0 0 0 var(--accent-record-glow);
                    }
                    50% {
                        opacity: 0.6;
                        box-shadow: 0 0 0 4px transparent;
                    }
                }
                .animate-pulse-record {
                    animation: pulse-record 1.5s ease-in-out infinite;
                }
            `}</style>
        </div>
    );
}

export default RecordingView;