"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { siteConfig } from "@/lib/site-config";
import { InstagramIcon } from "@/components/ui/icons";

type InstagramPost = {
  id: string;
  mediaUrl: string;
  thumbnailUrl?: string;
  caption?: string;
  permalink: string;
};

type ApiResponse = { posts: InstagramPost[]; fallback: boolean };

export default function InstagramGrid() {
  const [state, setState] = useState<"loading" | "posts" | "fallback">("loading");
  const [posts, setPosts] = useState<InstagramPost[]>([]);

  useEffect(() => {
    let cancelled = false;
    fetch("/api/instagram")
      .then((res) => res.json() as Promise<ApiResponse>)
      .then((data) => {
        if (cancelled) return;
        if (data.fallback || !data.posts?.length) {
          setState("fallback");
        } else {
          setPosts(data.posts.slice(0, 6));
          setState("posts");
        }
      })
      .catch(() => {
        if (!cancelled) setState("fallback");
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (state === "loading") {
    return (
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="aspect-square animate-pulse rounded bg-[#2a2a2a]" />
        ))}
      </div>
    );
  }

  if (state === "fallback") {
    return (
      <div>
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div
              key={i}
              className="tatami-bg relative aspect-square overflow-hidden rounded bg-[#2a2a2a]"
            >
              <div className="absolute inset-0 flex items-center justify-center text-cream/20">
                <InstagramIcon className="h-8 w-8" />
              </div>
            </div>
          ))}
        </div>
        <div className="mt-6 text-center">
          <p className="text-sm text-gray-400">
            Folge uns auf Instagram <span className="text-accent">{siteConfig.instagramHandle}</span> für Einblicke
            aus dem Dojo.
          </p>
          <a
            href={siteConfig.social.instagram}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-4 inline-block rounded border border-cream/30 px-5 py-2.5 text-sm font-semibold text-cream transition-colors duration-fast hover:border-primary hover:text-primary-light"
          >
            Zu Instagram
          </a>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        {posts.map((post) => (
          <a
            key={post.id}
            href={post.permalink}
            target="_blank"
            rel="noopener noreferrer"
            className="group relative aspect-square overflow-hidden rounded bg-[#2a2a2a]"
          >
            <Image
              src={post.thumbnailUrl ?? post.mediaUrl}
              alt={post.caption ?? "Instagram-Beitrag von " + siteConfig.instagramHandle}
              fill
              sizes="(min-width: 640px) 33vw, 50vw"
              className="object-cover"
              unoptimized
            />
            <div className="absolute inset-0 flex flex-col justify-end bg-primary/0 p-3 opacity-0 transition-all duration-base group-hover:bg-primary/70 group-hover:opacity-100">
              <InstagramIcon className="mb-2 h-5 w-5 text-cream" />
              {post.caption && (
                <p className="line-clamp-2 text-xs text-cream">{post.caption}</p>
              )}
            </div>
          </a>
        ))}
      </div>
      <div className="mt-6 text-center">
        <a
          href={siteConfig.social.instagram}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-block rounded border border-cream/30 px-5 py-2.5 text-sm font-semibold text-cream transition-colors duration-fast hover:border-primary hover:text-primary-light"
        >
          Folge uns auf Instagram
        </a>
      </div>
    </div>
  );
}