import { useMemo, useState } from "react";
import "./FrameEditorLayout.css";

type MediaType = "image" | "video";
type EditorTab = "edit" | "preview" | "insights";
type InspectorSection = "design" | "metadata" | "audio" | "other";

interface FrameItem {
    id: string;
    number: number;
    mediaType: MediaType;
    previewLabel: string;
}

const FRAME_SEED: FrameItem[] = [
    { id: "frame-1", number: 1, mediaType: "video", previewLabel: "Frame 1 preview" },
    { id: "frame-2", number: 2, mediaType: "image", previewLabel: "Frame 2 preview" },
    { id: "frame-3", number: 3, mediaType: "video", previewLabel: "Frame 3 preview" },
    { id: "frame-4", number: 4, mediaType: "image", previewLabel: "Frame 4 preview" },
];

const INSPECTOR_CONTENT: Record<InspectorSection, string> = {
    design: "Design section placeholder content",
    metadata: "Metadata section placeholder content",
    audio: "Audio section placeholder content",
    other: "Other section placeholder content",
};

function TopNavigation({
    activeTab,
    onSelectTab,
}: {
    activeTab: EditorTab;
    onSelectTab: (tab: EditorTab) => void;
}) {
    return (
        <header className="fe-top-nav" aria-label="Editor top navigation">
            <div className="fe-top-nav-left">
                <nav aria-label="Breadcrumb">
                    <ol className="fe-breadcrumb">
                        <li>Just me</li>
                        <li aria-hidden>/</li>
                        <li>Untitled (Wed Feb 18 2026)</li>
                    </ol>
                </nav>
            </div>

            <div className="fe-top-nav-center" role="tablist" aria-label="Editor views">
                <button
                    type="button"
                    role="tab"
                    aria-selected={activeTab === "edit"}
                    onClick={() => onSelectTab("edit")}
                >
                    Edit
                </button>
                <button
                    type="button"
                    role="tab"
                    aria-selected={activeTab === "preview"}
                    onClick={() => onSelectTab("preview")}
                >
                    Preview
                </button>
                <button
                    type="button"
                    role="tab"
                    aria-selected={activeTab === "insights"}
                    onClick={() => onSelectTab("insights")}
                >
                    Insights
                </button>
            </div>

            <div className="fe-top-nav-right">
                <button type="button">Share</button>
                <button type="button" aria-label="Global actions">
                    ...
                </button>
            </div>
        </header>
    );
}

function FrameStackSidebar({
    frames,
    selectedFrameId,
    onSelectFrame,
}: {
    frames: FrameItem[];
    selectedFrameId: string | null;
    onSelectFrame: (frameId: string) => void;
}) {
    return (
        <aside className="fe-left-sidebar" aria-label="Frame stack sidebar">
            <div className="fe-left-sidebar-scroll">
                <ol className="fe-frame-list">
                    {frames.map((frame, index) => {
                        const selected = frame.id === selectedFrameId;
                        return (
                            <li key={frame.id} className="fe-frame-list-item">
                                <article
                                    className={`fe-frame-card ${selected ? "is-selected" : ""}`}
                                    aria-current={selected ? "step" : undefined}
                                >
                                    <button
                                        type="button"
                                        className="fe-frame-select"
                                        onClick={() => onSelectFrame(frame.id)}
                                    >
                                        <div className="fe-frame-preview">{frame.previewLabel}</div>
                                        <div className="fe-frame-meta-row">
                                            <span className="fe-frame-badge">{frame.number}</span>
                                            <span
                                                className="fe-frame-media-type"
                                                aria-label={`Media type: ${frame.mediaType}`}
                                            >
                                                {frame.mediaType}
                                            </span>
                                            <span
                                                className="fe-frame-overflow"
                                                aria-label={`Frame ${frame.number} actions`}
                                            >
                                                ...
                                            </span>
                                        </div>
                                    </button>
                                </article>

                                {index < frames.length - 1 && (
                                    <button
                                        type="button"
                                        className="fe-insert-step-btn"
                                        aria-label={`Insert new frame after frame ${frame.number}`}
                                    >
                                        +
                                    </button>
                                )}
                            </li>
                        );
                    })}
                </ol>
            </div>

            <footer className="fe-left-sidebar-footer">
                <button type="button" className="fe-add-step-btn">
                    Add Step
                </button>
            </footer>
        </aside>
    );
}

function CanvasAndTimeline({ selectedFrame }: { selectedFrame: FrameItem | null }) {
    return (
        <main className="fe-center-column" aria-label="Step viewer">
            <section className="fe-canvas-panel" aria-label="Canvas viewer">
                <div className="fe-canvas-stage">
                    <p className="fe-canvas-title">
                        {selectedFrame
                            ? `Selected Frame ${selectedFrame.number}`
                            : "No frame selected"}
                    </p>
                    <div
                        className="fe-large-frame-preview"
                        role="img"
                        aria-label="Large frame preview"
                    >
                        Large preview area
                    </div>
                    <div className="fe-overlay-layer" aria-label="Interactive overlays layer">
                        Overlay layer placeholder (cursor, annotations, hotspots)
                    </div>
                </div>
            </section>

            <section className="fe-timeline-panel" aria-label="Timeline editor">
                <div className="fe-timeline-controls">
                    <button type="button">Play</button>
                    <button type="button">Pause</button>
                    <button type="button">Jump Back</button>
                    <button type="button">Jump Forward</button>
                    <button type="button">Mute</button>
                    <output>00:00.00 / 00:15.05</output>
                </div>

                <div className="fe-clip-track" aria-label="Clip track with draggable handles">
                    <button type="button" aria-label="Left trim handle">
                        |
                    </button>
                    <div className="fe-clip-body">Clip waveform / filmstrip placeholder</div>
                    <button type="button" aria-label="Right trim handle">
                        |
                    </button>
                </div>
            </section>
        </main>
    );
}

function InspectorPanel({
    openSection,
    onSectionChange,
}: {
    openSection: InspectorSection;
    onSectionChange: (section: InspectorSection) => void;
}) {
    const sections: InspectorSection[] = ["design", "metadata", "audio", "other"];

    return (
        <aside className="fe-inspector" aria-label="Inspector panel">
            {sections.map((section) => {
                const isOpen = openSection === section;
                const panelId = `inspector-panel-${section}`;
                return (
                    <section key={section} className="fe-inspector-section">
                        <h2>
                            <button
                                type="button"
                                aria-expanded={isOpen}
                                aria-controls={panelId}
                                onClick={() => onSectionChange(section)}
                            >
                                {section[0].toUpperCase() + section.slice(1)}
                            </button>
                        </h2>
                        {isOpen && (
                            <div id={panelId} className="fe-inspector-panel-body">
                                {INSPECTOR_CONTENT[section]}
                            </div>
                        )}
                    </section>
                );
            })}
        </aside>
    );
}

function UtilityToolbar() {
    const tools = ["Theme", "Export", "Translate", "Branching", "Variables"] as const;
    return (
        <nav className="fe-utility-toolbar" aria-label="Utility toolbar">
            {tools.map((tool) => (
                <button key={tool} type="button" title={tool} aria-label={tool}>
                    {tool}
                </button>
            ))}
        </nav>
    );
}

export default function FrameEditorLayout() {
    const [frames] = useState(FRAME_SEED);
    const [selectedFrameId, setSelectedFrameId] = useState<string | null>(
        FRAME_SEED[0]?.id ?? null
    );
    const [activeTab, setActiveTab] = useState<EditorTab>("edit");
    const [openSection, setOpenSection] = useState<InspectorSection>("design");

    const selectedFrame = useMemo(
        () => frames.find((frame) => frame.id === selectedFrameId) ?? null,
        [frames, selectedFrameId]
    );

    return (
        <div className="fe-editor-root">
            <TopNavigation activeTab={activeTab} onSelectTab={setActiveTab} />

            <div className="fe-workspace-grid">
                <FrameStackSidebar
                    frames={frames}
                    selectedFrameId={selectedFrameId}
                    onSelectFrame={setSelectedFrameId}
                />
                <CanvasAndTimeline selectedFrame={selectedFrame} />
                <InspectorPanel openSection={openSection} onSectionChange={setOpenSection} />
                <UtilityToolbar />
            </div>
        </div>
    );
}