import { useEffect, useState } from "react";
import { CalendarDays, ExternalLink, Sparkles, Tag } from "lucide-react";

type EventItem = {
    id: string;
    title: string;
    displayed_date: string;
    coins: { name: string; symbol: string }[];
    url: string;
};
type Payload = {
    configured: boolean;
    events: EventItem[];
    unavailable?: boolean;
};

export default function CryptoEvents() {
    const [payload, setPayload] = useState<Payload | null>(null);

    useEffect(() => {
        const controller = new AbortController();
        fetch("/dashboard/crypto-events", {
            headers: { Accept: "application/json" },
            credentials: "same-origin",
            signal: controller.signal,
        })
            .then((response) => {
                if (!response.ok) throw new Error("Events request failed");
                return response.json();
            })
            .then((result: Payload) => setPayload(result))
            .catch(() => {
                if (!controller.signal.aborted)
                    setPayload({
                        configured: true,
                        events: [],
                        unavailable: true,
                    });
            });

        return () => controller.abort();
    }, []);

    return (
        <section className="relative overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm transition-all hover:shadow-md">
            {/* Header Section */}
            <div className="flex items-center justify-between gap-3 border-b border-slate-100 dark:border-slate-800 pb-4">
                <div className="flex items-center gap-3">
                    <div className="flex size-10 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 shadow-2xs">
                        <CalendarDays className="size-5" />
                    </div>
                    <div>
                        <div className="flex items-center gap-1.5">
                            <h2 className="text-sm font-bold text-slate-900 dark:text-slate-100">
                                Crypto Events
                            </h2>
                            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
                                <Sparkles className="size-2.5" /> Live
                            </span>
                        </div>
                        <p className="mt-0.5 text-xs text-slate-500">
                            7 upcoming events · Powered by CoinMarketCal
                        </p>
                    </div>
                </div>
            </div>

            {/* Content List */}
            <div className="mt-4 space-y-3">
                {payload?.configured === false && (
                    <div className="rounded-2xl border border-amber-500/20 bg-amber-500/10 p-4 text-xs font-medium text-amber-800 dark:text-amber-300">
                        Konfigurasi API CoinMarketCal diperlukan untuk
                        menampilkan event.
                    </div>
                )}

                {payload?.configured && payload.events.length === 0 && (
                    <div className="rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/60 p-8 text-center text-xs text-slate-500">
                        {payload.unavailable
                            ? "Event sedang tidak tersedia sementara waktu. Silakan coba beberapa saat lagi."
                            : "Tidak ada event cryptocurrency yang ditemukan."}
                    </div>
                )}

                {payload?.events.slice(0, 7).map((event) => (
                    <a
                        key={event.id}
                        href={event.url}
                        target="_blank"
                        rel="noreferrer"
                        className="group relative flex items-start gap-3.5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-950/50 p-3.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-emerald-500/50 hover:bg-slate-100 dark:hover:bg-slate-800 hover:shadow-md"
                    >
                        {/* Tanggal Badge Bergaya Kalender */}
                        <div className="flex w-16 shrink-0 flex-col items-center justify-center rounded-xl border border-emerald-500/20 bg-white dark:bg-black px-1 py-2 text-center shadow-2xs transition-colors duration-200 group-hover:bg-emerald-600 group-hover:border-emerald-600">
                            <span className="text-[10px] font-bold uppercase tracking-wider leading-tight text-emerald-600 dark:text-emerald-400 group-hover:text-white">
                                {event.displayed_date
                                    ? event.displayed_date.split(" ")[0]
                                    : "SOON"}
                            </span>
                            <span className="text-xs font-extrabold tracking-tight text-emerald-600 dark:text-emerald-400 group-hover:text-white">
                                {event.displayed_date
                                    ? event.displayed_date
                                          .split(" ")
                                          .slice(1)
                                          .join(" ")
                                    : "Upcoming"}
                            </span>
                        </div>

                        {/* Detail Event */}
                        <div className="min-w-0 flex-1">
                            <h3 className="text-xs font-bold leading-relaxed text-slate-800 dark:text-slate-200 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors line-clamp-2">
                                {event.title}
                            </h3>

                            {/* Daftar Koin sebagai Tag Pills */}
                            <div className="mt-2 flex flex-wrap items-center gap-1.5">
                                <Tag className="size-3 text-slate-400 shrink-0" />
                                {event.coins.length > 0 ? (
                                    event.coins.map((coin, idx) => (
                                        <span
                                            key={idx}
                                            className="inline-flex items-center rounded-md border border-slate-200 dark:border-slate-700/70 bg-white dark:bg-slate-900/80 px-1.5 py-0.5 text-[9px] font-bold text-slate-600 dark:text-slate-400 shadow-2xs"
                                        >
                                            {coin.symbol || coin.name}
                                        </span>
                                    ))
                                ) : (
                                    <span className="text-[10px] text-slate-400 font-medium">
                                        General Crypto
                                    </span>
                                )}
                            </div>
                        </div>

                        {/* Icon External Link dengan transisi geser */}
                        <ExternalLink className="mt-1 size-3.5 shrink-0 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-emerald-600 dark:group-hover:text-emerald-400" />
                    </a>
                ))}
            </div>

            {/* Footer Link */}
            <div className="mt-4 pt-2 border-t border-slate-100 dark:border-slate-800 flex justify-end">
                <a
                    href="https://coinmarketcal.com/"
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors"
                >
                    View all on CoinMarketCal{" "}
                    <ExternalLink className="size-3.5" />
                </a>
            </div>
        </section>
    );
}