import { useState } from "react";
import { useEditor } from "./EditorContext";

const EditorStepsRail = () => {
    const {
        steps,
        selectedStepId,
        handleSelectStep,
        handleRenameStep,
        moveStepUp,
        moveStepDown,
        splitSelectedStepAtCurrentFrame,
        mergeSelectedStepWithNext,
    } = useEditor();

    const [editingStepId, setEditingStepId] = useState<string | null>(null);
    const [editingTitle, setEditingTitle] = useState("");

    const saveTitle = () => {
        if (!editingStepId) return;
        handleRenameStep(editingStepId, editingTitle);
        setEditingStepId(null);
        setEditingTitle("");
    };

    return (
        <aside
            style={{
                width: "260px",
                minWidth: "260px",
                maxWidth: "260px",
                background: "var(--bg-surface)",
                borderRight: "1px solid var(--border-default)",
                display: "flex",
                flexDirection: "column",
                overflow: "hidden",
            }}
        >
            <div
                style={{
                    padding: "16px 16px 12px",
                    borderBottom: "1px solid var(--border-default)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: "12px",
                }}
            >
                <div style={{ minWidth: 0 }}>
                    <div
                        style={{
                            fontSize: "11px",
                            fontWeight: 700,
                            color: "var(--text-tertiary)",
                            textTransform: "uppercase",
                            letterSpacing: "0.06em",
                        }}
                    >
                        Steps
                    </div>
                    <div
                        style={{
                            marginTop: "4px",
                            fontSize: "12px",
                            color: "var(--text-muted)",
                            fontFamily: "var(--font-mono)",
                        }}
                    >
                        {steps.length} total
                    </div>
                </div>

                <div style={{ display: "flex", gap: "6px", flexShrink: 0 }}>
                    <button
                        onClick={splitSelectedStepAtCurrentFrame}
                        disabled={!selectedStepId}
                        title="Split selected step at playhead"
                        style={{
                            width: "54px",
                            height: "32px",
                            borderRadius: "var(--radius-md)",
                            border: "1px solid var(--border-default)",
                            background: "var(--bg-elevated)",
                            color: "var(--text-secondary)",
                            cursor: selectedStepId ? "pointer" : "not-allowed",
                            opacity: selectedStepId ? 1 : 0.5,
                            transition: "background 120ms var(--ease-out)",
                            fontSize: "11px",
                            fontWeight: 600,
                        }}
                    >
                        Split
                    </button>
                    <button
                        onClick={mergeSelectedStepWithNext}
                        disabled={!selectedStepId}
                        title="Merge selected step with next"
                        style={{
                            width: "54px",
                            height: "32px",
                            borderRadius: "var(--radius-md)",
                            border: "1px solid var(--border-default)",
                            background: "var(--bg-elevated)",
                            color: "var(--text-secondary)",
                            cursor: selectedStepId ? "pointer" : "not-allowed",
                            opacity: selectedStepId ? 1 : 0.5,
                            transition: "background 120ms var(--ease-out)",
                            fontSize: "11px",
                            fontWeight: 600,
                        }}
                    >
                        Merge
                    </button>
                </div>
            </div>

            <div style={{ padding: "12px", overflowY: "auto" }}>
                {steps.map((step, idx) => {
                    const selected = step.id === selectedStepId;
                    const isEditing = step.id === editingStepId;

                    return (
                        <div
                            key={step.id}
                            style={{
                                borderRadius: "var(--radius-lg)",
                                border: selected
                                    ? "1px solid var(--accent-1)"
                                    : "1px solid var(--border-default)",
                                background: selected ? "var(--accent-4)" : "var(--bg-elevated)",
                                padding: "10px",
                                marginBottom: "10px",
                                cursor: "pointer",
                                boxShadow: selected ? "var(--shadow-glow)" : "none",
                                transition: "border-color 120ms var(--ease-out)",
                            }}
                            onClick={() => handleSelectStep(step.id)}
                        >
                            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                                <div
                                    style={{
                                        width: "28px",
                                        height: "28px",
                                        borderRadius: "var(--radius-md)",
                                        background: selected
                                            ? "rgba(255,255,255,0.08)"
                                            : "rgba(255,255,255,0.04)",
                                        border: "1px solid var(--border-subtle)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        fontFamily: "var(--font-mono)",
                                        fontSize: "11px",
                                        fontWeight: 700,
                                        color: selected
                                            ? "var(--accent-1)"
                                            : "var(--text-secondary)",
                                        flexShrink: 0,
                                    }}
                                >
                                    {idx + 1}
                                </div>

                                <div style={{ flex: 1, minWidth: 0 }}>
                                    {isEditing ? (
                                        <input
                                            value={editingTitle}
                                            autoFocus
                                            onClick={(e) => e.stopPropagation()}
                                            onChange={(e) => setEditingTitle(e.target.value)}
                                            onBlur={saveTitle}
                                            onKeyDown={(e) => {
                                                if (e.key === "Enter") saveTitle();
                                                if (e.key === "Escape") {
                                                    setEditingStepId(null);
                                                    setEditingTitle("");
                                                }
                                            }}
                                            style={{
                                                width: "100%",
                                                background: "var(--bg-surface)",
                                                border: "1px solid var(--border-default)",
                                                borderRadius: "var(--radius-sm)",
                                                color: "var(--text-primary)",
                                                fontSize: "12px",
                                                padding: "6px 8px",
                                            }}
                                        />
                                    ) : (
                                        <button
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setEditingStepId(step.id);
                                                setEditingTitle(step.title);
                                            }}
                                            title="Rename step"
                                            style={{
                                                width: "100%",
                                                border: "none",
                                                background: "transparent",
                                                padding: 0,
                                                textAlign: "left",
                                                fontSize: "12px",
                                                fontWeight: selected ? 700 : 600,
                                                color: "var(--text-primary)",
                                                whiteSpace: "nowrap",
                                                overflow: "hidden",
                                                textOverflow: "ellipsis",
                                                cursor: "text",
                                            }}
                                        >
                                            {step.title}
                                        </button>
                                    )}

                                    <div
                                        style={{
                                            marginTop: "6px",
                                            fontFamily: "var(--font-mono)",
                                            fontSize: "11px",
                                            color: "var(--text-muted)",
                                        }}
                                    >
                                        {(step.start_ms / 1000).toFixed(1)}s -{" "}
                                        {(step.end_ms / 1000).toFixed(1)}s
                                    </div>
                                </div>

                                <div
                                    style={{ display: "flex", flexDirection: "column", gap: "6px" }}
                                >
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            moveStepUp(step.id);
                                        }}
                                        disabled={idx === 0}
                                        title="Move up"
                                        style={{
                                            width: "28px",
                                            height: "22px",
                                            borderRadius: "8px",
                                            border: "1px solid var(--border-default)",
                                            background: "var(--bg-surface)",
                                            color: "var(--text-secondary)",
                                            fontSize: "12px",
                                            cursor: idx === 0 ? "not-allowed" : "pointer",
                                            opacity: idx === 0 ? 0.5 : 1,
                                        }}
                                    >
                                        ^
                                    </button>
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            moveStepDown(step.id);
                                        }}
                                        disabled={idx === steps.length - 1}
                                        title="Move down"
                                        style={{
                                            width: "28px",
                                            height: "22px",
                                            borderRadius: "8px",
                                            border: "1px solid var(--border-default)",
                                            background: "var(--bg-surface)",
                                            color: "var(--text-secondary)",
                                            fontSize: "12px",
                                            cursor:
                                                idx === steps.length - 1
                                                    ? "not-allowed"
                                                    : "pointer",
                                            opacity: idx === steps.length - 1 ? 0.5 : 1,
                                        }}
                                    >
                                        v
                                    </button>
                                </div>
                            </div>
                        </div>
                    );
                })}

                {steps.length === 0 && (
                    <div
                        style={{
                            padding: "18px 12px",
                            border: "1px solid var(--border-default)",
                            borderRadius: "var(--radius-lg)",
                            background: "var(--bg-elevated)",
                            fontSize: "12px",
                            color: "var(--text-muted)",
                            lineHeight: 1.4,
                        }}
                    >
                        No steps found yet. Use Auto Steps or + Step.
                    </div>
                )}
            </div>
        </aside>
    );
};

export default EditorStepsRail;
