---
import { Icon } from "astro-icon/components";
import Layout from "../layouts/Layout.astro";
import { getProjectPrompt } from "../lib/constants";
import AIPrompt from "./AIPrompt.astro";

export interface Props {
    metadata: {
        title: string;
        description: string;
        date: string;
        slug: string;
        image?: string | null;
        url?: string;
        github?: string;
        hidden: boolean;
        tags?: string[];
        type: string;
    };
}

const { metadata } = Astro.props;

metadata.tags?.sort();

const projectPrompt = getProjectPrompt(metadata.title, metadata.description, metadata.slug);
---

<style>
    .github {
        color: var(--ayu-green-500);
        border: none;
    }
    .github:hover {
        color: var(--ayu-green-500);
        text-decoration: underline;
    }

    .green {
        color: var(--ayu-green-500);
    }
</style>

<Layout
    currentPage={{
        title: `${metadata.title}`,
        path: `projects/${metadata.slug}`,
    }}
>
    <div class="text-md">
        <div class="flex justify-between items-start mb-2">
            <div class="flex flex-col gap-2">
                <h1 class="text-2xl text-ayu-accent">
                    {metadata.title}
                </h1>
                {
                    metadata.image ? (
                        <img
                            src={metadata.image}
                            alt={`${metadata.title} project icon`}
                            class="w-24 h-24 rounded mb-2"
                        />
                    ) : (
                        <div class="w-24 h-24 mb-2 border border-ayu-gutter rounded" />
                    )
                }
            </div>
            <div class="flex flex-col items-end gap-2">
                <p class="text-fg text-lg">Ask AI about this project</p>
                <div class="flex gap-4 items-center">
                    <AIPrompt
                        url="https://chat.openai.com/?q="
                        title="Ask ChatGPT"
                        icon="simple-icons:openai"
                        prompt={projectPrompt}
                    />
                    <AIPrompt
                        url="https://claude.ai/new?q="
                        title="Ask Claude"
                        icon="simple-icons:claude"
                        prompt={projectPrompt}
                    />
                    <div class="relative flex items-center">
                        <button
                            id="copy-prompt-btn"
                            class="text-fg hover:text-[var(--ayu-accent)] transition-colors duration-150 cursor-pointer flex items-center"
                            title="Copy prompt to clipboard"
                        >
                            <Icon name="mdi:content-copy" class="w-7 h-7" />
                        </button>
                        <span
                            id="copy-tooltip"
                            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-[var(--ayu-popup)] text-[var(--ayu-fg)] border border-[var(--ayu-gutter-dim)] rounded opacity-0 pointer-events-none transition-opacity duration-150 whitespace-nowrap"
                        >
                            Copied to clipboard
                        </span>
                    </div>
                </div>
            </div>
        </div>


        <p class="text-sm text-ayu-gutter mb-2">
            {metadata.date}
            {
                metadata.github && (
                    <>
                        {" "}
                        -{" "}
                        <a
                            href={metadata.github}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="github"
                        >
                            Source Code
                        </a>
                    </>
                )
            }
        </p>

        {
            metadata.tags && metadata.tags.length > 0 && (
                <div class="flex gap-1.5 text-sm flex-wrap leading-3 items-center mb-2 no-select">
                    {metadata.tags.map((tag: string, idx: number) => (
                        <span class="flex items-center text-ayu-gutter font-500 rounded-md border border-ayu-gutter px-1.5 py-1">
                            {tag}
                        </span>
                    ))}
                </div>
            )
        }

        {
            metadata.url ? (
                <a
                    href={metadata.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="link-project-page inline-block text-sm"
                >
                    Try {metadata.title}
                </a>
            ) : null
        }

        <slot />

        <p class="text-center text-md text-ayu-gutter mt-8 mb-4">
            Oliver Bryan - {metadata.date}
            {
                metadata.github && (
                    <>
                        {" "}
                        -{" "}
                        <a
                            href={metadata.github}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="github"
                        >
                            Source Code
                        </a>
                    </>
                )
            }
        </p>
    </div>

    <script define:vars={{ projectPrompt }}>
        document
            .getElementById("copy-prompt-btn")
            ?.addEventListener("click", async () => {
                await navigator.clipboard.writeText(projectPrompt);

                const tooltip = document.getElementById("copy-tooltip");
                if (tooltip) {
                    tooltip.style.opacity = "1";
                    setTimeout(() => {
                        tooltip.style.opacity = "0";
                    }, 1500);
                }
            });
    </script>
</Layout>
