"use client"

import { useEffect, useState } from "react"
import { Instagram, Play, Images } from "lucide-react"
import { Button } from "@/components/ui/button"

/**
 * Últimas publicaciones de Instagram del negocio.
 *
 * Los datos llegan de `/api/instagram`, que habla con la API oficial de Meta
 * desde el servidor: el token nunca baja al navegador. Si el feed está apagado,
 * el token venció o Instagram no responde, **la sección no se dibuja** — vale
 * más una portada un poco más corta que un hueco roto.
 */

interface PublicacionIG {
  id: string
  caption: string | null
  mediaType: "IMAGE" | "VIDEO" | "CAROUSEL_ALBUM"
  mediaUrl: string
  thumbnailUrl: string | null
  permalink: string
  timestamp: string
}

interface InstagramFeedProps {
  /** `dark` sobre el verde de la portada; `light` sobre blanco. */
  variant?: "dark" | "light"
  /** Usuario de respaldo mientras carga o si la API no lo devuelve. */
  usuarioPorDefecto?: string
}

export function InstagramFeed({
  variant = "dark",
  usuarioPorDefecto = "vipplaysport",
}: InstagramFeedProps) {
  const [posts, setPosts] = useState<PublicacionIG[]>([])
  const [usuario, setUsuario] = useState(usuarioPorDefecto)
  const [cargando, setCargando] = useState(true)

  useEffect(() => {
    let cancelado = false
    fetch("/api/instagram")
      .then((r) => (r.ok ? r.json() : { enabled: false, posts: [] }))
      .then((d) => {
        if (cancelado) return
        setPosts(Array.isArray(d.posts) ? d.posts : [])
        if (d.username) setUsuario(d.username)
      })
      .catch(() => {
        if (!cancelado) setPosts([])
      })
      .finally(() => {
        if (!cancelado) setCargando(false)
      })
    return () => {
      cancelado = true
    }
  }, [])

  // Mientras carga no se reserva espacio: si al final no hay nada, la portada
  // no habrá dado un salto.
  if (cargando || posts.length === 0) return null

  const oscuro = variant === "dark"
  const perfil = `https://www.instagram.com/${usuario}`

  return (
    <section
      className={oscuro ? "py-14 bg-verde-bosque" : "py-14 bg-white"}
      aria-labelledby="instagram-titulo"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <header className="flex flex-wrap items-end justify-between gap-4 mb-6">
          <div>
            <span className="inline-flex items-center gap-2 text-naranja-vip font-semibold text-sm uppercase tracking-wide">
              <Instagram className="h-4 w-4" />
              Instagram
            </span>
            <h2
              id="instagram-titulo"
              className={`font-heading text-3xl sm:text-4xl mt-1 ${
                oscuro ? "text-white" : "text-verde-bosque"
              }`}
            >
              Lo último que publicamos
            </h2>
            <a
              href={perfil}
              target="_blank"
              rel="noopener noreferrer"
              className={`text-sm ${oscuro ? "text-crema/80" : "text-verde-bosque/70"} hover:underline underline-offset-4`}
            >
              @{usuario}
            </a>
          </div>
          <a href={perfil} target="_blank" rel="noopener noreferrer" className="hidden sm:block">
            <Button
              variant="outline"
              className={
                oscuro
                  ? "border-crema text-crema hover:bg-white/10 gap-2"
                  : "border-verde-bosque text-verde-bosque hover:bg-verde-bosque/10 gap-2"
              }
            >
              <Instagram className="h-4 w-4" />
              Seguir en Instagram
            </Button>
          </a>
        </header>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
          {posts.map((post) => {
            const imagen =
              post.mediaType === "VIDEO" ? post.thumbnailUrl || post.mediaUrl : post.mediaUrl
            const pie = post.caption?.trim() ?? ""
            return (
              <a
                key={post.id}
                href={post.permalink}
                target="_blank"
                rel="noopener noreferrer"
                className="group relative block aspect-square overflow-hidden rounded-xl bg-black/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-naranja-vip"
                // El texto alternativo es el pie real de la publicación: quien
                // navega con lector de pantalla oye de qué es la foto.
                aria-label={pie ? `Ver en Instagram: ${pie.slice(0, 120)}` : "Ver publicación en Instagram"}
              >
                {/* `img` a secas y no `next/image`: las URLs de Instagram son
                    firmadas, caducan y cambian de dominio; el optimizador está
                    desactivado en este proyecto de todos modos. */}
                <img
                  src={imagen}
                  alt={pie ? pie.slice(0, 120) : "Publicación de Instagram"}
                  loading="lazy"
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                />

                {(post.mediaType === "VIDEO" || post.mediaType === "CAROUSEL_ALBUM") && (
                  <span className="absolute top-2 right-2 rounded-full bg-black/55 p-1.5 text-white backdrop-blur-sm">
                    {post.mediaType === "VIDEO" ? (
                      <Play className="h-3.5 w-3.5" />
                    ) : (
                      <Images className="h-3.5 w-3.5" />
                    )}
                  </span>
                )}

                {pie && (
                  <span className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-3 pt-8 text-xs text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 line-clamp-2">
                    {pie}
                  </span>
                )}
              </a>
            )
          })}
        </div>

        <div className="mt-6 sm:hidden">
          <a href={perfil} target="_blank" rel="noopener noreferrer">
            <Button
              variant="outline"
              className={`w-full gap-2 ${oscuro ? "text-white border-white/40 hover:bg-white/10" : ""}`}
            >
              <Instagram className="h-4 w-4" />
              Seguir en Instagram
            </Button>
          </a>
        </div>
      </div>
    </section>
  )
}