import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show, createSignal } from "solid-js";
import { base } from "../../network";
import { Dialog } from "@kobalte/core";

const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
    const [isOpen, setIsOpen] = createSignal(false);

    return (
        <>
            <button
                aria-label="Delete image from list"
                class="text-white bg-red-600 hover:bg-red-700 rounded px-2 py-1 text-sm"
                onClick={() => setIsOpen(true)}
            >
                ×
            </button>

            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
                <Dialog.Portal>
                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
                    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
                        <Dialog.Content class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
                            <Dialog.Title class="text-lg font-bold mb-2">
                                Confirm Delete
                            </Dialog.Title>
                            <Dialog.Description class="mb-4">
                                Are you sure you want to delete this image from
                                this list?
                            </Dialog.Description>
                            <div class="flex justify-end gap-2">
                                <Dialog.CloseButton>
                                    <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
                                        Cancel
                                    </button>
                                </Dialog.CloseButton>
                                <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={props.onDelete}>
                                    Confirm
                                </button>
                            </div>
                        </Dialog.Content>
                    </div>
                </Dialog.Portal>
            </Dialog.Root>
        </>
    );
};

export const List: Component = () => {
    const { listId } = useParams();

    const { lists, onDeleteImageFromStack } = useSearchImageContext();

    const list = () => lists().find((l) => l.ID === listId);

    return (
        <Show when={list()} fallback="List could not be found">
            {(l) => (
                <div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
                    <div class="overflow-x-auto overflow-y-auto h-full">
                        <table class="w-full min-w-full">
                            <thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
                                        Image
                                    </th>
                                    <For each={l().Schema.SchemaItems}>
                                        {(item, index) => (
                                            <th
                                                class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
                                                    l().Schema.SchemaItems
                                                        .length -
                                                    1
                                                    ? "border-r border-neutral-200"
                                                    : ""
                                                    }`}
                                            >
                                                {item.Item}
                                            </th>
                                        )}
                                    </For>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-neutral-200">
                                <For each={l().Images}>
                                    {(image, rowIndex) => (
                                        <tr
                                            class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
                                                ? "bg-white"
                                                : "bg-neutral-25"
                                                }`}
                                        >
                                            <td class="px-6 py-4 border-r border-neutral-200">
                                                <div class="flex items-center gap-2">
                                                    <a
                                                        href={`/image/${image.ImageID}`}
                                                        class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
                                                    >
                                                        <img
                                                            class="w-full h-full object-cover rounded-lg"
                                                            src={`${base}/images/${image.ImageID}`}
                                                            alt="List item"
                                                        />
                                                    </a>
                                                    <DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
                                                </div>
                                            </td>
                                            <For each={image.Items}>
                                                {(item, colIndex) => (
                                                    <td
                                                        class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
                                                            image.Items.length -
                                                            1
                                                            ? "border-r border-neutral-200"
                                                            : ""
                                                            }`}
                                                    >
                                                        <div
                                                            class="max-w-xs truncate"
                                                            title={item.Value}
                                                        >
                                                            {item.Value}
                                                        </div>
                                                    </td>
                                                )}
                                            </For>
                                        </tr>
                                    )}
                                </For>
                            </tbody>
                        </table>
                        <Show when={l().Images.length === 0}>
                            <div class="px-6 py-12 text-center text-neutral-500">
                                <p class="text-lg">
                                    No images in this list yet
                                </p>
                                <p class="text-sm mt-1">
                                    Images will appear here once added to the
                                    list
                                </p>
                            </div>
                        </Show>
                    </div>
                </div>
            )}
        </Show>
    );
};