import { createSignal, createEffect, For, Show } from "solid-js";

export function HierarchyApp(props) {
    // props.state contains springs, rivers, streams, trenches, etc.
    // props.push is the function to push events to LiveView
    // props.setState can be used for local updates if needed, 
    // but better to just use props.state and fire events.

    const handleSpringClick = (springId) => {
        // Optimistic update or just wait for server?
        // Let's fire event to server to fetch rivers
        props.push("fetch_rivers", { spring_id: springId });
        // We can also update local state to show selection immediately?
        // But sending `setState` from parent is cleaner. 
        // Wait, the parent hook has `setState`. 
        // We can use a local signal for UI selection state content, 
        // but the data (rivers) must come from server.

        // Actually, let's just trigger the push.
        // And ideally we also set activeSpringId in the store.
        props.setState("activeSpringId", springId);
        props.setState("activeRiverId", null);
        props.setState("activeStreamId", null);
    };

    const handleRiverClick = (riverId) => {
        props.push("fetch_streams", { river_id: riverId });
        props.setState("activeRiverId", riverId);
        // Maybe toggle expansion?
    };

    const handleStreamClick = (streamId) => {
        props.push("fetch_trenches", { stream_id: streamId });
        props.setState("activeStreamId", streamId);
    };

    return (
        <div class="flex h-screen bg-gray-900 text-white font-sans">
            {/* 1. Springs (Servers) Column */}
            <div class="w-20 flex flex-col items-center py-4 bg-gray-950 border-r border-gray-800 space-y-4">
                <For each={props.state.springs}>
                    {(spring) => (
                        <button
                            onClick={() => handleSpringClick(spring.id)}
                            class={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200 hover:rounded-2xl ${props.state.activeSpringId === spring.id
                                    ? "bg-indigo-500 rounded-2xl shadow-lg ring-2 ring-indigo-400"
                                    : "bg-gray-800 hover:bg-indigo-600"
                                }`}
                            title={spring.name}
                        >
                            {spring.name.substring(0, 2).toUpperCase()}
                        </button>
                    )}
                </For>

                <button class="w-12 h-12 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-green-400 hover:text-white transition-all duration-200 hover:rounded-2xl">
                    <span class="text-2xl">+</span>
                </button>
            </div>

            {/* 2. Rivers & Streams (Channels) Column */}
            <Show when={props.state.activeSpringId}>
                <div class="w-64 bg-gray-900 flex flex-col border-r border-gray-800">
                    {/* Header */}
                    <div class="h-12 border-b border-gray-800 flex items-center px-4 font-bold shadow-sm">
                        {props.state.springs.find(s => s.id === props.state.activeSpringId)?.name || "Spring"}
                    </div>

                    {/* Rivers List */}
                    <div class="flex-1 overflow-y-auto p-2 space-y-2">
                        <Show when={props.state.rivers[props.state.activeSpringId]} fallback={<div class="p-4 text-gray-500 text-sm">Loading rivers...</div>}>
                            <For each={props.state.rivers[props.state.activeSpringId]}>
                                {(river) => (
                                    <div class="mb-2">
                                        <div
                                            class="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider hover:text-gray-200 cursor-pointer flex items-center justify-between group"
                                            onClick={() => handleRiverClick(river.id)}
                                        >
                                            <span>v {river.name}</span>
                                            <span class="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-white">+</span>
                                        </div>

                                        {/* Streams in this river */}
                                        <Show when={props.state.streams[river.id]}>
                                            <div class="mt-1 space-y-0.5">
                                                <For each={props.state.streams[river.id]}>
                                                    {(stream) => (
                                                        <div
                                                            onClick={() => handleStreamClick(stream.id)}
                                                            class={`px-2 py-1 rounded mx-2 text-gray-400 hover:bg-gray-800 hover:text-gray-100 cursor-pointer flex items-center ${props.state.activeStreamId === stream.id ? "bg-gray-800 text-white font-medium" : ""
                                                                }`}
                                                        >
                                                            <span class="mr-1 text-gray-500">#</span>
                                                            {stream.name}
                                                        </div>
                                                    )}
                                                </For>
                                            </div>
                                        </Show>
                                    </div>
                                )}
                            </For>
                        </Show>
                    </div>
                </div>
            </Show>

            {/* 3. Main Stream (Chat) Area */}
            <div class="flex-1 flex flex-col bg-gray-800">
                <Show when={props.state.activeStreamId} fallback={
                    <div class="flex-1 flex items-center justify-center text-gray-500 flex-col">
                        <div class="text-4xl mb-4">👋</div>
                        <p>Select a stream to start chatting</p>
                    </div>
                }>
                    {/* Header */}
                    <div class="h-12 border-b border-gray-700 flex items-center px-4 shadow-sm bg-gray-900 justify-between">
                        <div class="flex items-center">
                            <span class="text-2xl text-gray-500 mr-2">#</span>
                            <span class="font-bold">
                                {/* Need to find stream name across all rivers? inefficient.
                       Better to store activeStream details? Or just find it. */}
                                Stream Name
                            </span>
                        </div>
                    </div>

                    {/* Messages */}
                    <div class="flex-1 overflow-y-auto p-4 space-y-4">
                        {/* Placeholder messages */}
                        <div class="flex items-start">
                            <div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div>
                            <div>
                                <div class="flex items-baseline">
                                    <span class="font-bold mr-2 text-white">User A</span>
                                    <span class="text-xs text-gray-400">10:30 AM</span>
                                </div>
                                <p class="text-gray-300">Welcome to the stream!</p>
                            </div>
                        </div>

                        <Show when={props.state.trenches[props.state.activeStreamId]}>
                            <div class="pl-12 pt-2">
                                <div class="text-xs font-bold text-gray-400 mb-1">Trenches (Threads):</div>
                                <For each={props.state.trenches[props.state.activeStreamId]}>
                                    {(trench) => (
                                        <div class="text-sm text-indigo-400 hover:underline cursor-pointer">
                                            ↳ {trench.name}
                                        </div>
                                    )}
                                </For>
                            </div>
                        </Show>
                    </div>

                    {/* Input */}
                    <div class="p-4 bg-gray-900">
                        <input
                            type="text"
                            class="w-full bg-gray-800 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            placeholder="Message #stream"
                        />
                    </div>
                </Show>
            </div>
        </div>
    );
}
