import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik";
import ky from "ky";

export default component$(() => {
    type TestimonialProps = {
        nickname: string;
        pfp?: string;
        id?: string;
        quote: string;
    };

    type LanyardResponse = {
        data: {
            discord_status: "online" | "idle" | "dnd";
            discord_user: {
                avatar: string;
            }
        },
        success: boolean;
    }

    const Testimonial = component$(({ nickname, id, quote, pfp }: TestimonialProps) => {
        const lanyard = useSignal<LanyardResponse>();

        useOnDocument("DOMContentLoaded", $(async () => {
            if (!id) return;

            try {
                const response = await ky.get(`https://api.lanyard.rest/v1/users/${id}`).json<LanyardResponse>();
                lanyard.value = response;
                console.log("Lanyard data:", lanyard.value);
            } catch (error) {
                console.error("Error fetching lanyard data:", error);
            }
        }));

        return (
            <div
                data-aos="fade-up"
                data-aos-duration="1000"
                class="flex gap-6 items-center bg-gradient-to-t from-stereo/15 to-stereo/5 rounded-2xl p-6 max-w-2xl shadow-2xl shadow-stereo/15"
            >
                <div class="relative h-30 aspect-square flex-shrink-0 rounded-full"
                style={{
                    border: lanyard.value ? `3px solid ${
                        lanyard.value.data.discord_status === "online"
                            ? "#43b581"
                            : lanyard.value.data.discord_status === "idle"
                                ? "#faa61a"
                                : lanyard.value.data.discord_status === "dnd"
                                    ? "#f04747"
                                    : "#7289da"
                    }` : "",
                    padding: lanyard.value ? `3px` : "0px",
                }}>
                    <img
                        src={pfp ? pfp : (
                            lanyard.value
                                ? `https://cdn.discordapp.com/avatars/${id}/${lanyard.value.data.discord_user.avatar}.png`
                                : `https://api.dicebear.com/9.x/shapes/svg?seed=${Math.random().toString(36).substring(2, 15)}.png`
                        )}
                        class="rounded-full h-full w-full object-cover"
                    />
                </div>
                
                <div class="flex flex-col gap-2">
                    <p class="text-stereo text-9xl h-min -mb-18">“</p>
                    <p class="text-lg text-white/90">
                        {quote}
                    </p>
                    <p class="text-white/60 font-light italic">— {nickname}</p>
                </div>
            </div>
        );
    });

    return (
        <div
            data-aos="fade-up"
            data-aos-duration="1000"
            class="flex flex-col gap-6 items-center justify-center w-4/5"
        >
            <div class="flex flex-col gap-1 items-center justify-center">
                <p class="text-lg text-stereo font-bold uppercase">testimonials</p>
                <p class="text-2xl text-white/80">
                    don't just take our word for it, hear it from our users.
                </p>
            </div>
            <div class="flex flex-col gap-6">
                <Testimonial 
                    nickname="grng"
                    id="829372486780715018"
                    quote="stereo is the best file host I've ever used, it's fast, reliable, and the interface is so clean and easy to use. I love it!"
                />

                <Testimonial 
                    nickname="hexlocation"
                    id="1325924978805440522"
                    quote="I've been using stereo for a while now, and I can't imagine going back to any other file host. It's just that good!"
                />

                <Testimonial
                    nickname="an anonymous user"
                    quote="stereo has changed the way I share files, it's so easy to use and the performance is top-notch. Highly recommend!"
                />
            </div>
            <p class="text-xl text-white/50">
                and many, many more...
            </p>
        </div>
    );
});