import { useMemo, useState } from "react";
import { useEditor } from "./EditorContext";
import HotspotEditor from "../../components/HotspotEditor";
import { buildCaptureInsights, markerTypeLabel } from "./activityHeuristics";
import type { TimelineMarker } from "../../lib/api";

const EVENT_TYPE_COLORS: Record<TimelineMarker["type"], string> = {
    command: "var(--status-success)",
    click: "var(--accent-1)",
    file_change: "var(--status-warning)",
    marker: "var(--accent-2)",
    shortcut: "var(--status-danger)",
    keypress: "var(--text-secondary)",
    mouse_scroll: "var(--accent-3)",
    app_focus: "var(--accent-4)",
    dom_navigation: "var(--accent-5)",
    dom_action: "var(--accent-2)",
};

const EditorSidebar = () => {
    const {
        sessionId,
        metadata,
        currentFrame,
        totalFrames,
        currentTime,
        duration,
        hotspots,
        selectedHotspotId,
        setSelectedHotspotId,
        editingHotspots,
        setEditingHotspots,
        placingHotspot,
        setPlacingHotspot,
        setWalkthroughMode,
        handleUpdateHotspot,
        handleDeleteHotspot,
        hasTerminal,
        steps,
        selectedStepId,
        handleSelectStep,
        handleRenameStep,
        moveStepUp,
        moveStepDown,
        splitSelectedStepAtCurrentFrame,
        mergeSelectedStepWithNext,
        markers,
        clicks,
        seekToTimestamp,
        handleGenerateStepsFromActivity,
        transcript,
        transcribing,
        transcriptError,
        handleTranscribe,
    } = useEditor();

    const [editingStepId, setEditingStepId] = useState<string | null>(null);
    const [editingStepTitle, setEditingStepTitle] = useState("");
    const insights = useMemo(() => buildCaptureInsights(markers, clicks), [markers, clicks]);

    const recentActivity = useMemo(() => {
        const sorted = [...markers].sort((a, b) => b.timestamp_ms - a.timestamp_ms);
        const filtered: TimelineMarker[] = [];
        for (const marker of sorted) {
            if (marker.type === "keypress" && marker.label.toLowerCase() === "key press") continue;
            const previous = filtered[filtered.length - 1];
            if (
                previous &&
                previous.type === marker.type &&
                previous.label === marker.label &&
                Math.abs(previous.timestamp_ms - marker.timestamp_ms) < 450
            ) {
                continue;
            }
            filtered.push(marker);
            if (filtered.length >= 10) break;
        }
        return filtered;
    }, [markers]);

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

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

    const saveStepTitle = () => {
        if (!editingStepId) return;
        handleRenameStep(editingStepId, editingStepTitle);
        setEditingStepId(null);
        setEditingStepTitle("");
    };

    return (
        <aside
            style={{
                width: "var(--sidebar-width)",
                minWidth: "var(--sidebar-width)",
                maxWidth: "var(--sidebar-width)",
                flexShrink: 0,
                background: "var(--bg-surface)",
                borderLeft: "1px solid var(--border-default)",
                display: "flex",
                flexDirection: "column",
                fontFamily: "var(--font-sans)",
                overflow: "hidden",
            }}
        >
            <div
                style={{
                    padding: "20px",
                    borderBottom: "1px solid var(--border-default)",
                }}
            >
                <div
                    style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: "28px",
                        fontWeight: 500,
                        letterSpacing: "-0.02em",
                        color: "var(--text-primary)",
                    }}
                >
                    {formatTime(currentTime)}
                </div>
                <div
                    style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: "12px",
                        color: "var(--text-tertiary)",
                        marginTop: "4px",
                    }}
                >
                    {formatTime(duration)} total
                </div>
            </div>

            <div style={{ flex: 1, overflowY: "auto" }}>
                {metadata?.capture_limited && (
                    <div
                        style={{
                            padding: "12px 20px",
                            borderBottom: "1px solid var(--border-default)",
                        }}
                    >
                        <div
                            style={{
                                border: "1px solid var(--status-warning)",
                                background:
                                    "color-mix(in srgb, var(--status-warning) 12%, transparent)",
                                color: "var(--text-secondary)",
                                borderRadius: "var(--radius-md)",
                                padding: "10px 12px",
                                fontSize: "12px",
                                lineHeight: 1.4,
                            }}
                        >
                            Limited capture mode: recording is complete, but some global context
                            (app/window or input telemetry) was unavailable.
                            {metadata.capture_limit_reason
                                ? ` ${metadata.capture_limit_reason}`
                                : ""}
                        </div>
                    </div>
                )}
                <div style={{ padding: "20px", borderBottom: "1px solid var(--border-default)" }}>
                    <div
                        style={{
                            fontSize: "11px",
                            fontWeight: 600,
                            color: "var(--text-tertiary)",
                            textTransform: "uppercase",
                            letterSpacing: "0.05em",
                            marginBottom: "12px",
                        }}
                    >
                        Capture Summary
                    </div>

                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                            gap: "8px",
                            marginBottom: "12px",
                        }}
                    >
                        {[
                            { label: "Apps", value: insights.appCount },
                            { label: "Clicks", value: insights.clickCount },
                            { label: "Shortcuts", value: insights.shortcutCount },
                            { label: "Keys", value: insights.keypressCount },
                        ].map((item) => (
                            <div
                                key={item.label}
                                style={{
                                    border: "1px solid var(--border-default)",
                                    borderRadius: "var(--radius-md)",
                                    background: "var(--bg-elevated)",
                                    padding: "8px 10px",
                                }}
                            >
                                <div
                                    style={{
                                        fontSize: "10px",
                                        color: "var(--text-muted)",
                                        textTransform: "uppercase",
                                        letterSpacing: "0.04em",
                                    }}
                                >
                                    {item.label}
                                </div>
                                <div
                                    style={{
                                        marginTop: "3px",
                                        fontSize: "15px",
                                        fontWeight: 600,
                                        color: "var(--text-primary)",
                                        fontFamily: "var(--font-mono)",
                                    }}
                                >
                                    {item.value}
                                </div>
                            </div>
                        ))}
                    </div>

                    {(metadata?.display?.resolution || metadata?.actual_resolution) && (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "baseline",
                                justifyContent: "space-between",
                                gap: "12px",
                                padding: "10px 12px",
                                borderRadius: "var(--radius-md)",
                                border: "1px solid var(--border-default)",
                                background: "var(--bg-elevated)",
                                marginBottom: "12px",
                                fontFamily: "var(--font-mono)",
                            }}
                        >
                            <div
                                style={{
                                    fontSize: "10px",
                                    color: "var(--text-muted)",
                                    textTransform: "uppercase",
                                    letterSpacing: "0.04em",
                                }}
                            >
                                Video Resolution
                            </div>
                            <div
                                style={{
                                    fontSize: "12px",
                                    fontWeight: 700,
                                    color: "var(--text-primary)",
                                    fontVariantNumeric: "tabular-nums",
                                    whiteSpace: "nowrap",
                                }}
                                title={
                                    metadata?.actual_resolution
                                        ? `Encoded: ${metadata.actual_resolution}`
                                        : "Encoded: unknown"
                                }
                            >
                                {metadata?.display?.resolution ?? "unknown"}{" "}
                                <span style={{ color: "var(--text-tertiary)", fontWeight: 500 }}>
                                    {"->"}
                                </span>{" "}
                                {metadata?.actual_resolution ?? "unknown"}
                            </div>
                        </div>
                    )}

                    <div
                        style={{
                            fontSize: "12px",
                            color: "var(--text-secondary)",
                            marginBottom: "12px",
                            lineHeight: 1.4,
                        }}
                    >
                        {insights.topApps.length > 0
                            ? `Top apps: ${insights.topApps.join(", ")}`
                            : "No app focus events captured."}
                    </div>

                    <button
                        onClick={handleGenerateStepsFromActivity}
                        style={{
                            width: "100%",
                            padding: "9px 10px",
                            border: "1px solid var(--status-success)",
                            background: "var(--status-success-muted)",
                            borderRadius: "var(--radius-md)",
                            color: "var(--status-success)",
                            fontSize: "12px",
                            fontWeight: 600,
                            cursor: "pointer",
                        }}
                    >
                        Generate Steps from Activity
                    </button>
                </div>

                <div style={{ padding: "20px", borderBottom: "1px solid var(--border-default)" }}>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: "12px",
                        }}
                    >
                        <span
                            style={{
                                fontSize: "11px",
                                fontWeight: 600,
                                color: "var(--text-tertiary)",
                                textTransform: "uppercase",
                                letterSpacing: "0.05em",
                            }}
                        >
                            Recent Activity
                        </span>
                        <span
                            style={{
                                fontSize: "11px",
                                fontFamily: "var(--font-mono)",
                                color: "var(--text-muted)",
                            }}
                        >
                            {recentActivity.length}
                        </span>
                    </div>

                    {recentActivity.length === 0 ? (
                        <div
                            style={{
                                fontSize: "12px",
                                color: "var(--text-muted)",
                                background: "var(--bg-elevated)",
                                border: "1px solid var(--border-default)",
                                borderRadius: "var(--radius-md)",
                                padding: "10px",
                            }}
                        >
                            No events available yet.
                        </div>
                    ) : (
                        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                            {recentActivity.map((event) => (
                                <button
                                    key={`${event.id}-recent`}
                                    onClick={() => seekToTimestamp(event.timestamp_ms / 1000)}
                                    style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        gap: "10px",
                                        width: "100%",
                                        border: "1px solid var(--border-default)",
                                        background: "var(--bg-elevated)",
                                        borderRadius: "var(--radius-md)",
                                        padding: "7px 8px",
                                        textAlign: "left",
                                        cursor: "pointer",
                                    }}
                                >
                                    <div style={{ minWidth: 0 }}>
                                        <div
                                            style={{
                                                fontSize: "11px",
                                                color: EVENT_TYPE_COLORS[event.type],
                                                marginBottom: "2px",
                                            }}
                                        >
                                            {markerTypeLabel(event.type)}
                                        </div>
                                        <div
                                            style={{
                                                fontSize: "12px",
                                                color: "var(--text-primary)",
                                                whiteSpace: "nowrap",
                                                overflow: "hidden",
                                                textOverflow: "ellipsis",
                                            }}
                                        >
                                            {event.label}
                                        </div>
                                    </div>
                                    <span
                                        style={{
                                            fontSize: "11px",
                                            fontFamily: "var(--font-mono)",
                                            color: "var(--text-muted)",
                                            flexShrink: 0,
                                        }}
                                    >
                                        {formatTime(event.timestamp_ms / 1000)}
                                    </span>
                                </button>
                            ))}
                        </div>
                    )}
                </div>

                <div style={{ padding: "20px", borderBottom: "1px solid var(--border-default)" }}>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: "12px",
                        }}
                    >
                        <span
                            style={{
                                fontSize: "11px",
                                fontWeight: 600,
                                color: "var(--text-tertiary)",
                                textTransform: "uppercase",
                                letterSpacing: "0.05em",
                            }}
                        >
                            Transcript
                        </span>
                        {transcript && (
                            <span
                                style={{
                                    fontSize: "11px",
                                    fontFamily: "var(--font-mono)",
                                    color: "var(--text-muted)",
                                }}
                            >
                                {transcript.segments.length} segments
                            </span>
                        )}
                    </div>

                    {!transcript ? (
                        <div>
                            <button
                                onClick={handleTranscribe}
                                disabled={transcribing}
                                style={{
                                    width: "100%",
                                    padding: "9px 10px",
                                    border: "1px solid var(--accent-2)",
                                    background: transcribing
                                        ? "var(--bg-elevated)"
                                        : "color-mix(in srgb, var(--accent-2) 12%, transparent)",
                                    borderRadius: "var(--radius-md)",
                                    color: transcribing ? "var(--text-muted)" : "var(--accent-2)",
                                    fontSize: "12px",
                                    fontWeight: 600,
                                    cursor: transcribing ? "not-allowed" : "pointer",
                                    opacity: transcribing ? 0.7 : 1,
                                }}
                            >
                                {transcribing ? "Transcribing..." : "Transcribe Audio"}
                            </button>
                            {transcriptError && (
                                <div
                                    style={{
                                        marginTop: "8px",
                                        fontSize: "11px",
                                        color: "var(--status-danger)",
                                        background:
                                            "color-mix(in srgb, var(--status-danger) 12%, transparent)",
                                        border: "1px solid var(--status-danger)",
                                        borderRadius: "var(--radius-sm)",
                                        padding: "6px 8px",
                                    }}
                                >
                                    {transcriptError}
                                </div>
                            )}
                        </div>
                    ) : (
                        <div
                            style={{
                                maxHeight: "200px",
                                overflowY: "auto",
                                display: "flex",
                                flexDirection: "column",
                                gap: "4px",
                            }}
                        >
                            {transcript.segments.map((segment, idx) => (
                                <button
                                    key={`segment-${idx}`}
                                    onClick={() => seekToTimestamp(segment.start_ms / 1000)}
                                    style={{
                                        display: "flex",
                                        gap: "8px",
                                        width: "100%",
                                        border: "1px solid var(--border-default)",
                                        background: "var(--bg-elevated)",
                                        borderRadius: "var(--radius-sm)",
                                        padding: "6px 8px",
                                        textAlign: "left",
                                        cursor: "pointer",
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: "10px",
                                            fontFamily: "var(--font-mono)",
                                            color: "var(--accent-2)",
                                            flexShrink: 0,
                                            minWidth: "32px",
                                        }}
                                    >
                                        {formatTimestampMs(segment.start_ms)}
                                    </span>
                                    <span
                                        style={{
                                            fontSize: "11px",
                                            color: "var(--text-primary)",
                                            lineHeight: 1.3,
                                            overflow: "hidden",
                                            display: "-webkit-box",
                                            WebkitLineClamp: 2,
                                            WebkitBoxOrient: "vertical",
                                        }}
                                    >
                                        {segment.text}
                                    </span>
                                </button>
                            ))}
                        </div>
                    )}
                </div>

                <div style={{ padding: "20px", borderBottom: "1px solid var(--border-default)" }}>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: "12px",
                        }}
                    >
                        <span
                            style={{
                                fontSize: "11px",
                                fontWeight: 600,
                                color: "var(--text-tertiary)",
                                textTransform: "uppercase",
                                letterSpacing: "0.05em",
                            }}
                        >
                            Steps
                        </span>
                        <span
                            style={{
                                fontSize: "11px",
                                fontFamily: "var(--font-mono)",
                                color: "var(--text-muted)",
                                background: "var(--bg-elevated)",
                                padding: "2px 6px",
                                borderRadius: "4px",
                            }}
                        >
                            {steps.length}
                        </span>
                    </div>

                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                        <div style={{ display: "flex", gap: "6px" }}>
                            <button
                                onClick={splitSelectedStepAtCurrentFrame}
                                disabled={!selectedStepId}
                                style={{
                                    flex: 1,
                                    padding: "6px 8px",
                                    border: "1px solid var(--border-default)",
                                    background: "var(--bg-elevated)",
                                    color: "var(--text-secondary)",
                                    borderRadius: "var(--radius-sm)",
                                    fontSize: "11px",
                                    cursor: selectedStepId ? "pointer" : "not-allowed",
                                    opacity: selectedStepId ? 1 : 0.5,
                                }}
                            >
                                Split @ Playhead
                            </button>
                            <button
                                onClick={mergeSelectedStepWithNext}
                                disabled={!selectedStepId}
                                style={{
                                    flex: 1,
                                    padding: "6px 8px",
                                    border: "1px solid var(--border-default)",
                                    background: "var(--bg-elevated)",
                                    color: "var(--text-secondary)",
                                    borderRadius: "var(--radius-sm)",
                                    fontSize: "11px",
                                    cursor: selectedStepId ? "pointer" : "not-allowed",
                                    opacity: selectedStepId ? 1 : 0.5,
                                }}
                            >
                                Merge With Next
                            </button>
                        </div>

                        {steps.map((step, idx) => {
                            const selected = step.id === selectedStepId;
                            const isEditing = step.id === editingStepId;

                            return (
                                <div
                                    key={step.id}
                                    style={{
                                        border: selected
                                            ? "1px solid var(--accent-1)"
                                            : "1px solid var(--border-default)",
                                        borderRadius: "var(--radius-md)",
                                        background: selected
                                            ? "var(--accent-4)"
                                            : "var(--bg-elevated)",
                                        padding: "8px",
                                        cursor: "pointer",
                                    }}
                                    onClick={() => handleSelectStep(step.id)}
                                >
                                    <div
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            gap: "8px",
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontSize: "11px",
                                                fontFamily: "var(--font-mono)",
                                                color: "var(--text-muted)",
                                                minWidth: "22px",
                                            }}
                                        >
                                            {idx + 1}.
                                        </span>

                                        {isEditing ? (
                                            <input
                                                value={editingStepTitle}
                                                autoFocus
                                                onClick={(e) => e.stopPropagation()}
                                                onChange={(e) =>
                                                    setEditingStepTitle(e.target.value)
                                                }
                                                onBlur={saveStepTitle}
                                                onKeyDown={(e) => {
                                                    if (e.key === "Enter") saveStepTitle();
                                                    if (e.key === "Escape") {
                                                        setEditingStepId(null);
                                                        setEditingStepTitle("");
                                                    }
                                                }}
                                                style={{
                                                    flex: 1,
                                                    background: "var(--bg-surface)",
                                                    border: "1px solid var(--border-default)",
                                                    borderRadius: "var(--radius-sm)",
                                                    color: "var(--text-primary)",
                                                    fontSize: "12px",
                                                    padding: "4px 6px",
                                                }}
                                            />
                                        ) : (
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    setEditingStepId(step.id);
                                                    setEditingStepTitle(step.title);
                                                }}
                                                style={{
                                                    flex: 1,
                                                    border: "none",
                                                    background: "transparent",
                                                    color: "var(--text-primary)",
                                                    textAlign: "left",
                                                    fontSize: "12px",
                                                    fontWeight: selected ? 600 : 500,
                                                    cursor: "text",
                                                    padding: 0,
                                                }}
                                                title="Rename step"
                                            >
                                                {step.title}
                                            </button>
                                        )}
                                    </div>

                                    <div
                                        style={{
                                            marginTop: "8px",
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontSize: "11px",
                                                fontFamily: "var(--font-mono)",
                                                color: "var(--text-muted)",
                                            }}
                                        >
                                            {(step.start_ms / 1000).toFixed(1)}s -{" "}
                                            {(step.end_ms / 1000).toFixed(1)}s
                                        </span>
                                        <div style={{ display: "flex", gap: "4px" }}>
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    moveStepUp(step.id);
                                                }}
                                                disabled={idx === 0}
                                                style={{
                                                    border: "1px solid var(--border-default)",
                                                    background: "var(--bg-surface)",
                                                    color: "var(--text-secondary)",
                                                    borderRadius: "var(--radius-sm)",
                                                    fontSize: "10px",
                                                    padding: "2px 6px",
                                                    cursor: idx === 0 ? "not-allowed" : "pointer",
                                                    opacity: idx === 0 ? 0.5 : 1,
                                                }}
                                                title="Move up"
                                            >
                                                ↑
                                            </button>
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    moveStepDown(step.id);
                                                }}
                                                disabled={idx === steps.length - 1}
                                                style={{
                                                    border: "1px solid var(--border-default)",
                                                    background: "var(--bg-surface)",
                                                    color: "var(--text-secondary)",
                                                    borderRadius: "var(--radius-sm)",
                                                    fontSize: "10px",
                                                    padding: "2px 6px",
                                                    cursor:
                                                        idx === steps.length - 1
                                                            ? "not-allowed"
                                                            : "pointer",
                                                    opacity: idx === steps.length - 1 ? 0.5 : 1,
                                                }}
                                                title="Move down"
                                            >
                                                ↓
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>

                <div style={{ padding: "20px", borderBottom: "1px solid var(--border-default)" }}>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: "16px",
                        }}
                    >
                        <span
                            style={{
                                fontSize: "11px",
                                fontWeight: 600,
                                color: "var(--text-tertiary)",
                                textTransform: "uppercase",
                                letterSpacing: "0.05em",
                            }}
                        >
                            Hotspots (Selected Step)
                        </span>
                        <span
                            style={{
                                fontSize: "11px",
                                fontFamily: "var(--font-mono)",
                                color: "var(--text-muted)",
                                background: "var(--bg-elevated)",
                                padding: "2px 6px",
                                borderRadius: "4px",
                            }}
                        >
                            {hotspots.length}
                        </span>
                    </div>

                    {!editingHotspots ? (
                        <button
                            onClick={() => {
                                setEditingHotspots(true);
                                setWalkthroughMode(false);
                            }}
                            style={{
                                width: "100%",
                                padding: "10px 0",
                                background: "var(--accent-4)",
                                border: "1px solid var(--accent-1)",
                                borderRadius: "var(--radius-md)",
                                color: "var(--accent-1)",
                                fontSize: "13px",
                                fontWeight: 500,
                                cursor: "pointer",
                                transition: "all 150ms var(--ease-out)",
                            }}
                        >
                            {hotspots.length === 0 ? "Add Hotspot" : "Edit Hotspots"}
                        </button>
                    ) : (
                        <div>
                            <HotspotEditor
                                hotspots={hotspots}
                                selectedHotspotId={selectedHotspotId}
                                placingMode={placingHotspot}
                                currentFrame={currentFrame}
                                totalFrames={totalFrames}
                                onSelectHotspot={(id) => setSelectedHotspotId(id || null)}
                                onDeleteHotspot={handleDeleteHotspot}
                                onTogglePlacingMode={() => setPlacingHotspot((c) => !c)}
                                onUpdateHotspot={handleUpdateHotspot}
                            />
                            <button
                                onClick={() => {
                                    setEditingHotspots(false);
                                    setPlacingHotspot(false);
                                    setSelectedHotspotId(null);
                                }}
                                style={{
                                    marginTop: "16px",
                                    width: "100%",
                                    padding: "8px 0",
                                    background: "var(--bg-elevated)",
                                    border: "1px solid var(--border-default)",
                                    borderRadius: "var(--radius-md)",
                                    color: "var(--text-primary)",
                                    fontSize: "12px",
                                    fontWeight: 500,
                                    cursor: "pointer",
                                    transition: "all 150ms var(--ease-out)",
                                }}
                            >
                                Done
                            </button>
                        </div>
                    )}
                </div>

                <div style={{ padding: "20px" }}>
                    <div
                        style={{
                            fontSize: "11px",
                            fontWeight: 600,
                            color: "var(--text-tertiary)",
                            textTransform: "uppercase",
                            letterSpacing: "0.05em",
                            marginBottom: "16px",
                        }}
                    >
                        Details
                    </div>

                    <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                            }}
                        >
                            <span style={{ fontSize: "13px", color: "var(--text-tertiary)" }}>
                                Frame
                            </span>
                            <span
                                style={{
                                    fontSize: "12px",
                                    fontFamily: "var(--font-mono)",
                                    color: "var(--text-primary)",
                                    background: "var(--bg-elevated)",
                                    padding: "3px 8px",
                                    borderRadius: "4px",
                                }}
                            >
                                {currentFrame} / {totalFrames}
                            </span>
                        </div>

                        {metadata?.git_branch && (
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}
                            >
                                <span style={{ fontSize: "13px", color: "var(--text-tertiary)" }}>
                                    Branch
                                </span>
                                <span
                                    style={{
                                        fontSize: "12px",
                                        fontFamily: "var(--font-mono)",
                                        color: "var(--accent-1)",
                                        background: "var(--accent-4)",
                                        padding: "3px 8px",
                                        borderRadius: "4px",
                                    }}
                                >
                                    {metadata.git_branch}
                                </span>
                            </div>
                        )}

                        {metadata?.git_commit && (
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}
                            >
                                <span style={{ fontSize: "13px", color: "var(--text-tertiary)" }}>
                                    Commit
                                </span>
                                <span
                                    style={{
                                        fontSize: "12px",
                                        fontFamily: "var(--font-mono)",
                                        color: "var(--text-secondary)",
                                    }}
                                >
                                    {metadata.git_commit.slice(0, 7)}
                                </span>
                            </div>
                        )}

                        {hasTerminal && (
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}
                            >
                                <span style={{ fontSize: "13px", color: "var(--text-tertiary)" }}>
                                    Terminal
                                </span>
                                <span
                                    style={{
                                        fontSize: "11px",
                                        color: "var(--status-success)",
                                        background: "var(--status-success-muted)",
                                        padding: "3px 8px",
                                        borderRadius: "4px",
                                        fontWeight: 500,
                                    }}
                                >
                                    Recorded
                                </span>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <div
                style={{
                    padding: "14px 20px",
                    borderTop: "1px solid var(--border-default)",
                    fontFamily: "var(--font-mono)",
                    fontSize: "11px",
                    color: "var(--text-muted)",
                    display: "flex",
                    alignItems: "center",
                    gap: "6px",
                }}
            >
                <span
                    style={{
                        width: "6px",
                        height: "6px",
                        borderRadius: "50%",
                        background: "var(--accent-1)",
                    }}
                />
                {sessionId?.slice(0, 8)}
            </div>
        </aside>
    );
};

export default EditorSidebar;
