import React, { useState, useEffect } from 'react';
import { 
  Instagram, 
  ExternalLink, 
  Heart, 
  MessageCircle, 
  RefreshCw, 
  CheckCircle2, 
  MapPin, 
  Sparkles,
  X,
  Share2
} from 'lucide-react';
import { 
  fetchLast6InstagramPosts, 
  InstagramPost, 
  ENTOURAGE_INSTAGRAM_PROFILE 
} from '../services/instagramFeed';

export const InstagramFeedPlugin: React.FC = () => {
  const [posts, setPosts] = useState<InstagramPost[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [selectedPost, setSelectedPost] = useState<InstagramPost | null>(null);
  const [lastUpdated, setLastUpdated] = useState<string>('Just now');

  const loadFeed = async (isManualRefresh = false) => {
    if (isManualRefresh) setRefreshing(true);
    try {
      const data = await fetchLast6InstagramPosts();
      setPosts(data);
      const now = new Date();
      setLastUpdated(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
    } catch (e) {
      console.error('Failed to load Instagram feed:', e);
    } finally {
      setLoading(false);
      if (isManualRefresh) {
        setTimeout(() => setRefreshing(false), 600);
      }
    }
  };

  useEffect(() => {
    loadFeed();
    // Auto refresh every 5 minutes
    const interval = setInterval(() => {
      loadFeed();
    }, 5 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="w-full my-8 bg-slate-900/90 rounded-3xl border border-white/10 p-6 sm:p-8 shadow-2xl relative overflow-hidden backdrop-blur-md">
      {/* Background Subtle Accent Gradients */}
      <div className="absolute -right-20 -top-20 w-72 h-72 bg-gradient-to-br from-pink-500/10 via-purple-500/10 to-transparent rounded-full blur-3xl pointer-events-none" />
      <div className="absolute -left-20 -bottom-20 w-72 h-72 bg-gradient-to-tr from-amber-500/10 via-rose-500/10 to-transparent rounded-full blur-3xl pointer-events-none" />

      {/* Plugin Header Bar */}
      <div className="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-6 mb-6 border-b border-white/10">
        
        {/* Profile Card */}
        <div className="flex items-center gap-4 sm:gap-5">
          <a 
            href={ENTOURAGE_INSTAGRAM_PROFILE.profileUrl} 
            target="_blank" 
            rel="noopener noreferrer"
            className="relative group shrink-0"
            title="Open @entourage.hk on Instagram"
          >
            <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl p-1 bg-gradient-to-tr from-amber-400 via-rose-500 to-purple-600 group-hover:scale-105 group-hover:shadow-[0_0_25px_rgba(236,72,153,0.5)] transition-all duration-300">
              <div className="w-full h-full rounded-[14px] overflow-hidden bg-slate-950">
                <img 
                  src={ENTOURAGE_INSTAGRAM_PROFILE.profilePicUrl} 
                  alt="Entourage Instagram"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
            <div className="absolute -bottom-1 -right-1 bg-gradient-to-r from-purple-600 to-pink-600 text-white p-1.5 rounded-full border-2 border-slate-900 shadow-md">
              <Instagram className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
            </div>
          </a>

          <div>
            <div className="flex items-center gap-2.5 flex-wrap">
              <a 
                href={ENTOURAGE_INSTAGRAM_PROFILE.profileUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white hover:text-amber-400 transition-colors flex items-center gap-2 group tracking-tight"
              >
                <span className="bg-gradient-to-r from-white via-slate-100 to-amber-200 bg-clip-text text-transparent group-hover:from-amber-300 group-hover:to-pink-400">
                  @{ENTOURAGE_INSTAGRAM_PROFILE.username}
                </span>
                <CheckCircle2 className="w-6 h-6 sm:w-7 sm:h-7 text-sky-400 shrink-0 inline-block drop-shadow" />
              </a>

              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs font-mono font-semibold">
                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                Live Feed (Latest 6 Photos)
              </span>
            </div>

            <p className="text-xs sm:text-sm text-slate-300 font-light mt-1 max-w-xl flex items-center gap-2 flex-wrap">
              <span>Official Instagram</span>
              <span className="text-slate-600">•</span>
              <span className="text-amber-400 font-semibold">{ENTOURAGE_INSTAGRAM_PROFILE.followersCount} Followers</span>
              <span className="text-slate-600">•</span>
              <span className="text-slate-400">Updated {lastUpdated}</span>
            </p>
          </div>
        </div>

        {/* Action Controls & Big Follow Button */}
        <div className="flex items-center gap-3 sm:self-start lg:self-center shrink-0">
          <button
            onClick={() => loadFeed(true)}
            disabled={refreshing}
            title="Refresh latest 6 posts"
            className="p-3.5 rounded-2xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-white/10 transition-colors disabled:opacity-50 cursor-pointer"
          >
            <RefreshCw className={`w-5 h-5 ${refreshing ? 'animate-spin text-amber-400' : ''}`} />
          </button>

          <a
            href={ENTOURAGE_INSTAGRAM_PROFILE.profileUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="group px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 hover:from-purple-500 hover:to-amber-400 text-white font-black text-sm sm:text-base tracking-wide transition-all duration-300 shadow-xl shadow-pink-500/25 hover:shadow-pink-500/40 hover:scale-[1.03] active:scale-[0.98] flex items-center gap-3 border border-white/20"
          >
            <div className="p-1 rounded-lg bg-white/20 backdrop-blur-xs">
              <Instagram className="w-5 h-5 text-white" />
            </div>
            <span className="whitespace-nowrap">Follow @{ENTOURAGE_INSTAGRAM_PROFILE.username}</span>
            <ExternalLink className="w-4 h-4 opacity-90 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
          </a>
        </div>
      </div>

      {/* 6-Image Instagram Grid */}
      <div className="relative z-10">
        {loading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
            {[1, 2, 3, 4, 5, 6].map((idx) => (
              <div key={idx} className="aspect-square rounded-2xl bg-slate-800/60 animate-pulse border border-white/5" />
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
            {posts.slice(0, 6).map((post, idx) => (
              <div
                key={post.id}
                onClick={() => setSelectedPost(post)}
                className="group relative aspect-square rounded-2xl overflow-hidden bg-slate-950 border border-white/10 hover:border-amber-400/50 transition-all duration-300 cursor-pointer shadow-md hover:shadow-2xl hover:shadow-amber-500/10 hover:-translate-y-1"
              >
                {/* Yacht Photo */}
                <img
                  src={post.mediaUrl}
                  alt={post.caption}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  loading="lazy"
                />

                {/* Top Badge: "Latest" for the newest post */}
                {idx === 0 && (
                  <div className="absolute top-2 left-2 z-20">
                    <span className="px-2 py-0.5 rounded-md bg-rose-600/90 text-white text-[9px] font-bold uppercase tracking-wider backdrop-blur-xs flex items-center gap-1 shadow">
                      <Sparkles className="w-2.5 h-2.5" />
                      Latest
                    </span>
                  </div>
                )}

                {/* Top Right Instagram Mark */}
                <div className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="w-6 h-6 rounded-full bg-slate-900/80 backdrop-blur-md flex items-center justify-center text-white border border-white/20">
                    <Instagram className="w-3.5 h-3.5 text-pink-400" />
                  </div>
                </div>

                {/* Hover Overlay with engagement metrics & caption preview */}
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/95 via-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-3 z-10">
                  <div className="flex items-center justify-between text-white text-xs font-semibold mb-1.5">
                    <div className="flex items-center gap-1 text-rose-300">
                      <Heart className="w-3.5 h-3.5 fill-rose-500 text-rose-500" />
                      <span>{post.likeCount}</span>
                    </div>
                    <div className="flex items-center gap-1 text-slate-300">
                      <MessageCircle className="w-3.5 h-3.5 text-sky-400" />
                      <span>{post.commentsCount}</span>
                    </div>
                  </div>

                  <p className="text-[10px] text-slate-200 line-clamp-2 leading-snug font-light">
                    {post.caption}
                  </p>

                  <div className="mt-2 flex items-center justify-between text-[9px] text-amber-400 font-medium">
                    <span>{post.timestamp}</span>
                    <span className="flex items-center gap-0.5 hover:underline">
                      View Post <ExternalLink className="w-2.5 h-2.5" />
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Bottom Follow & Explore Callout Bar */}
      <div className="relative z-10 mt-6 pt-5 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 bg-slate-950/60 p-4 sm:p-5 rounded-2xl border border-white/5">
        <div className="flex items-center gap-3 text-center sm:text-left">
          <div className="p-2.5 rounded-xl bg-gradient-to-tr from-purple-600 to-pink-600 text-white shrink-0 hidden sm:flex shadow-md">
            <Instagram className="w-5 h-5" />
          </div>
          <div>
            <div className="text-sm sm:text-base font-bold text-white flex items-center gap-2 justify-center sm:justify-start">
              <span>Join our Instagram community</span>
              <a 
                href={ENTOURAGE_INSTAGRAM_PROFILE.profileUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-amber-400 hover:text-amber-300 underline font-mono font-bold"
              >
                @{ENTOURAGE_INSTAGRAM_PROFILE.username}
              </a>
            </div>
            <p className="text-xs text-slate-400 mt-0.5">
              Tag <span className="text-slate-200 font-semibold">#EntourageHK</span> in your stories & posts to be featured on our yacht profile.
            </p>
          </div>
        </div>

        <a
          href={ENTOURAGE_INSTAGRAM_PROFILE.profileUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 hover:from-purple-500 hover:to-amber-400 text-white text-xs sm:text-sm font-extrabold uppercase tracking-wider transition-all duration-300 shadow-lg shadow-pink-500/20 hover:scale-105 flex items-center gap-2 shrink-0"
        >
          <Instagram className="w-4 h-4" />
          <span>Follow @{ENTOURAGE_INSTAGRAM_PROFILE.username}</span>
          <ExternalLink className="w-3.5 h-3.5 opacity-80" />
        </a>
      </div>

      {/* Lightbox / Post Detail Modal */}
      {selectedPost && (
        <div 
          className="fixed inset-0 z-50 bg-slate-950/85 backdrop-blur-md flex items-center justify-center p-4 sm:p-6"
          onClick={() => setSelectedPost(null)}
        >
          <div 
            className="bg-slate-900 border border-white/15 rounded-3xl max-w-3xl w-full overflow-hidden shadow-2xl relative flex flex-col md:flex-row"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Close Button */}
            <button
              onClick={() => setSelectedPost(null)}
              className="absolute top-4 right-4 z-30 p-2 rounded-full bg-slate-950/70 hover:bg-slate-800 text-white border border-white/20 transition-colors"
            >
              <X className="w-4 h-4" />
            </button>

            {/* Post Photo */}
            <div className="md:w-1/2 bg-black flex items-center justify-center aspect-square md:aspect-auto">
              <img
                src={selectedPost.mediaUrl}
                alt={selectedPost.caption}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Post Info & Actions */}
            <div className="md:w-1/2 p-6 flex flex-col justify-between">
              <div>
                {/* Author Header */}
                <div className="flex items-center gap-3 pb-4 border-b border-white/10">
                  <img
                    src={ENTOURAGE_INSTAGRAM_PROFILE.profilePicUrl}
                    alt="Entourage"
                    className="w-10 h-10 rounded-full object-cover border border-amber-400/40"
                  />
                  <div>
                    <div className="text-sm font-bold text-white flex items-center gap-1">
                      <span>@{ENTOURAGE_INSTAGRAM_PROFILE.username}</span>
                      <CheckCircle2 className="w-3.5 h-3.5 text-sky-400" />
                    </div>
                    {selectedPost.location && (
                      <div className="text-xs text-slate-400 flex items-center gap-1 mt-0.5">
                        <MapPin className="w-3 h-3 text-amber-400" />
                        <span>{selectedPost.location}</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Caption Content */}
                <div className="py-4 text-sm text-slate-200 leading-relaxed font-light space-y-2 max-h-60 overflow-y-auto">
                  <p>{selectedPost.caption}</p>
                </div>
              </div>

              {/* Engagement & Link Out */}
              <div className="pt-4 border-t border-white/10 space-y-4">
                <div className="flex items-center justify-between text-xs text-slate-300">
                  <div className="flex items-center gap-4">
                    <span className="flex items-center gap-1.5 text-rose-400 font-semibold">
                      <Heart className="w-4 h-4 fill-rose-500" />
                      {selectedPost.likeCount} likes
                    </span>
                    <span className="flex items-center gap-1.5 text-sky-400">
                      <MessageCircle className="w-4 h-4" />
                      {selectedPost.commentsCount} comments
                    </span>
                  </div>
                  <span className="text-slate-500 font-mono text-[11px]">{selectedPost.timestamp}</span>
                </div>

                <a
                  href={selectedPost.permalink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full py-3 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 hover:from-purple-500 hover:to-amber-400 text-white font-bold text-xs uppercase tracking-wider transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-pink-500/20"
                >
                  <Instagram className="w-4 h-4" />
                  <span>View Original on Instagram</span>
                  <ExternalLink className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};