<script lang="ts">
    import Icon from "@iconify/svelte";
    import Pagination from "./Pagination.svelte";

    let {
        viewMode = $bindable(),
        searchQuery = $bindable(),
        selectedCategory = $bindable(),
        categories,
        onSearchInput,
        currentPage,
        totalPages,
        goToPage,
    }: {
        viewMode: "company" | "user";
        searchQuery: string;
        selectedCategory: string;
        categories: string[];
        onSearchInput: () => void;
        currentPage: number;
        totalPages: number;
        goToPage: (page: number) => void;
    } = $props();
</script>

<div
    class="bg-black/40 backdrop-blur-2xl border border-white/10 rounded-4xl p-12 lg:p-14 mb-12 shadow-2xl shadow-black/30"
>
    <div class="mb-10 px-4 text-center">
        <h1
            class="text-white text-[42px] lg:text-[48px] font-black m-0 tracking-[-2px]"
        >
            Sustainability Database
        </h1>
        <p class="text-white/90 text-base lg:text-lg mt-3 font-medium">
            {#if viewMode === "company"}
                Search within verified company reports and impact assessments
            {:else}
                Browse user-submitted greenwashing reports
            {/if}
        </p>
    </div>

    <div class="flex items-center justify-center gap-5 my-8">
        <span
            class="flex items-center gap-2 text-sm lg:text-base font-semibold transition-all duration-300 {viewMode ===
            'company'
                ? 'text-emerald-400'
                : 'text-white/60'}"
        >
            <Icon icon="ri:building-2-line" width="16" />
            Company
        </span>
        <button
            class="relative w-16 h-8 bg-white/10 border-none rounded-full cursor-pointer transition-all duration-300 p-0 hover:bg-white/20 shadow-inner"
            onclick={() =>
                (viewMode = viewMode === "company" ? "user" : "company")}
            aria-label="Toggle between company and user reports"
        >
            <span
                class="absolute top-1/2 -translate-y-1/2 w-6 h-6 bg-emerald-500 rounded-full transition-all duration-300 shadow-[0_2px_12px_rgba(34,197,94,0.5)] {viewMode ===
                'user'
                    ? 'left-[calc(100%-28px)]'
                    : 'left-1'}"
            ></span>
        </button>
        <span
            class="flex items-center gap-2 text-sm lg:text-base font-semibold transition-all duration-300 {viewMode ===
            'user'
                ? 'text-emerald-400'
                : 'text-white/60'}"
        >
            <Icon icon="ri:user-voice-line" width="16" />
            User Reports
        </span>
    </div>

    {#if viewMode === "company"}
        <div class="relative max-w-[40.625rem] mx-auto mb-10">
            <div
                class="absolute left-6 top-1/2 -translate-y-1/2 text-white/60 flex items-center pointer-events-none"
            >
                <Icon icon="ri:search-line" width="22" />
            </div>
            <input
                type="text"
                class="w-full bg-white/10 border border-white/10 rounded-full py-4 lg:py-5 pl-14 pr-6 text-white text-base lg:text-lg font-medium outline-none transition-all duration-200 focus:bg-white/15 focus:border-emerald-400 placeholder:text-white/40 shadow-inner"
                placeholder="Search for companies, topics (e.g., 'emissions')..."
                bind:value={searchQuery}
                oninput={onSearchInput}
            />
        </div>

        <div class="flex justify-center flex-wrap gap-3.5 mb-6">
            {#each categories as category}
                <button
                    class="px-7 py-3 rounded-full text-sm lg:text-base font-semibold cursor-pointer transition-all duration-200 border {selectedCategory ===
                    category
                        ? 'bg-emerald-500 border-emerald-500 text-emerald-950 shadow-[0_4px_20px_rgba(34,197,94,0.4)]'
                        : 'bg-white/10 backdrop-blur-sm border-white/10 text-white/80 hover:bg-white/20 hover:text-white hover:-translate-y-0.5 hover:shadow-lg'}"
                    onclick={() => (selectedCategory = category)}
                >
                    {category}
                </button>
            {/each}
        </div>

        <Pagination {currentPage} {totalPages} {goToPage} />
    {/if}
</div>
