import React, { useState, useEffect, useRef } from 'react';
import { 
  Heart, 
  MessageCircle, 
  Share2, 
  MoreHorizontal, 
  Image as ImageIcon, 
  Video, 
  Smile, 
  Home, 
  Users, 
  PlaySquare, 
  Bell, 
  Search,
  Plus,
  Bookmark,
  User,
  Settings,
  LogOut,
  ChevronDown
} from 'lucide-react';

// --- Mock Data ---
const INITIAL_POSTS = [
  {
    id: 1,
    user: {
      name: "Elena Rodriguez",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150",
      handle: "@elena_r"
    },
    content: "Golden hour in the city! ✨",
    media: {
      type: "image",
      url: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=800"
    },
    likes: 1240,
    comments: 42,
    timestamp: "2h ago"
  },
  {
    id: 2,
    user: {
      name: "Sophia Chen",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150",
      handle: "@sophia_c"
    },
    content: "Check out this beautiful landscape from my weekend trip.",
    media: {
      type: "video",
      url: "https://assets.mixkit.co/videos/preview/mixkit-girl-in-neon-light-1282-large.mp4",
      poster: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=800"
    },
    likes: 856,
    comments: 18,
    timestamp: "5h ago"
  }
];

const SUGGESTIONS = [
  { id: 1, name: "Chloe Miller", avatar: "https://images.unsplash.com/photo-1524504527035-231b0ca210a6?w=100" },
  { id: 2, name: "Isabella Silva", avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100" },
  { id: 3, name: "Mia Johnson", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100" }
];

// --- Components ---

const SidebarLink = ({ icon: Icon, label, active = false }) => (
  <button className={`flex items-center space-x-4 w-full p-3 rounded-xl transition-all ${active ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-100 text-gray-700'}`}>
    <Icon size={22} fill={active ? "currentColor" : "none"} />
    <span className="font-medium">{label}</span>
  </button>
);

const PostCard = ({ post }) => {
  const [liked, setLiked] = useState(false);
  const [likesCount, setLikesCount] = useState(post.likes);

  const toggleLike = () => {
    setLiked(!liked);
    setLikesCount(prev => liked ? prev - 1 : prev + 1);
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
      {/* Post Header */}
      <div className="p-4 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <img src={post.user.avatar} className="w-10 h-10 rounded-full object-cover border" alt="" />
          <div>
            <h3 className="font-semibold text-gray-900 text-sm leading-tight">{post.user.name}</h3>
            <p className="text-xs text-gray-500">{post.timestamp}</p>
          </div>
        </div>
        <button className="text-gray-400 hover:text-gray-600">
          <MoreHorizontal size={20} />
        </button>
      </div>

      {/* Post Content */}
      <div className="px-4 pb-3">
        <p className="text-gray-800 text-sm">{post.content}</p>
      </div>

      {/* Media Content */}
      <div className="relative bg-black aspect-[4/5] flex items-center justify-center">
        {post.media.type === 'image' ? (
          <img src={post.media.url} className="w-full h-full object-cover" alt="Post" />
        ) : (
          <video 
            src={post.media.url} 
            poster={post.media.poster}
            className="w-full h-full object-cover" 
            controls 
          />
        )}
      </div>

      {/* Interactions */}
      <div className="p-4">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center space-x-4">
            <button onClick={toggleLike} className={`transition-colors ${liked ? 'text-red-500' : 'text-gray-600 hover:text-red-500'}`}>
              <Heart size={24} fill={liked ? "currentColor" : "none"} />
            </button>
            <button className="text-gray-600 hover:text-blue-500 transition-colors">
              <MessageCircle size={24} />
            </button>
            <button className="text-gray-600 hover:text-green-500 transition-colors">
              <Share2 size={24} />
            </button>
          </div>
          <button className="text-gray-600 hover:text-gray-900">
            <Bookmark size={24} />
          </button>
        </div>
        <p className="text-sm font-semibold text-gray-900">{likesCount.toLocaleString()} likes</p>
        <button className="text-gray-500 text-sm mt-1 hover:underline">View all {post.comments} comments</button>
      </div>
    </div>
  );
};

export default function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [posts, setPosts] = useState(INITIAL_POSTS);
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-900">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-8">
            <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent cursor-pointer">
              SOCIETY
            </h1>
            <div className="relative hidden md:block">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
              <input 
                type="text" 
                placeholder="Search posts, girls, videos..." 
                className="bg-gray-100 rounded-full py-2 pl-10 pr-4 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

          <nav className="flex items-center space-x-2 md:space-x-6">
            <button className="p-2 text-gray-600 hover:bg-gray-100 rounded-full transition-all relative">
              <Bell size={22} />
              <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
            </button>
            <button className="p-2 text-gray-600 hover:bg-gray-100 rounded-full transition-all">
              <Plus size={22} />
            </button>
            <div className="flex items-center space-x-2 pl-2 border-l border-gray-200">
              <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100" className="w-8 h-8 rounded-full object-cover border" alt="Profile" />
              <span className="hidden sm:inline font-medium text-sm">Me</span>
              <ChevronDown size={14} className="text-gray-400" />
            </div>
          </nav>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        {/* Left Sidebar */}
        <aside className="hidden lg:block lg:col-span-3 space-y-2 sticky top-24 h-fit">
          <SidebarLink icon={Home} label="Home" active={activeTab === 'home'} />
          <SidebarLink icon={Users} label="People" active={activeTab === 'people'} />
          <SidebarLink icon={PlaySquare} label="Videos" active={activeTab === 'videos'} />
          <SidebarLink icon={Bookmark} label="Saved" />
          <SidebarLink icon={Settings} label="Settings" />
          <hr className="my-4 border-gray-200" />
          <div className="px-4 py-2">
            <h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">My Favorites</h4>
            <div className="space-y-4">
              {SUGGESTIONS.map(user => (
                <div key={user.id} className="flex items-center space-x-3 cursor-pointer group">
                  <img src={user.avatar} className="w-8 h-8 rounded-full object-cover" alt="" />
                  <span className="text-sm font-medium group-hover:text-blue-600 transition-colors">{user.name}</span>
                </div>
              ))}
            </div>
          </div>
        </aside>

        {/* Center Feed */}
        <section className="col-span-1 lg:col-span-6">
          {/* Create Post */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6">
            <div className="flex space-x-4">
              <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100" className="w-10 h-10 rounded-full object-cover" alt="" />
              <button className="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-500 text-left px-4 rounded-full transition-colors text-sm">
                What's on your mind?
              </button>
            </div>
            <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-50">
              <button className="flex items-center space-x-2 hover:bg-gray-100 px-4 py-2 rounded-xl transition-all text-sm font-medium text-gray-600">
                <ImageIcon size={18} className="text-green-500" />
                <span>Photos</span>
              </button>
              <button className="flex items-center space-x-2 hover:bg-gray-100 px-4 py-2 rounded-xl transition-all text-sm font-medium text-gray-600">
                <Video size={18} className="text-blue-500" />
                <span>Videos</span>
              </button>
              <button className="flex items-center space-x-2 hover:bg-gray-100 px-4 py-2 rounded-xl transition-all text-sm font-medium text-gray-600">
                <Smile size={18} className="text-yellow-500" />
                <span>Feelings</span>
              </button>
            </div>
          </div>

          {/* Post Feed */}
          {posts.map(post => (
            <PostCard key={post.id} post={post} />
          ))}

          {/* Loading State */}
          <div className="py-4 text-center">
            <div className="inline-block w-8 h-8 border-4 border-blue-600/20 border-t-blue-600 rounded-full animate-spin"></div>
            <p className="text-gray-500 text-sm mt-2">Discovering more content...</p>
          </div>
        </section>

        {/* Right Sidebar */}
        <aside className="hidden lg:block lg:col-span-3 space-y-6 sticky top-24 h-fit">
          {/* Suggestions */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-bold text-gray-900">People You May Know</h3>
              <button className="text-blue-600 text-xs font-semibold hover:underline">See All</button>
            </div>
            <div className="space-y-4">
              {SUGGESTIONS.map(user => (
                <div key={user.id} className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <img src={user.avatar} className="w-10 h-10 rounded-full object-cover" alt="" />
                    <span className="text-sm font-semibold">{user.name}</span>
                  </div>
                  <button className="text-blue-600 hover:bg-blue-50 p-1.5 rounded-full transition-all">
                    <Plus size={18} />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Trending */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <h3 className="font-bold text-gray-900 mb-4">Trending Now</h3>
            <div className="space-y-4">
              <div>
                <p className="text-xs text-gray-400 font-medium">LIFESTYLE • TRENDING</p>
                <p className="text-sm font-semibold hover:text-blue-600 cursor-pointer">#UrbanPhotography</p>
                <p className="text-xs text-gray-500">1.2k people talking about this</p>
              </div>
              <div>
                <p className="text-xs text-gray-400 font-medium">CINEMA • TRENDING</p>
                <p className="text-sm font-semibold hover:text-blue-600 cursor-pointer">#SummerVlog2024</p>
                <p className="text-xs text-gray-500">850 posts</p>
              </div>
              <div>
                <p className="text-xs text-gray-400 font-medium">MUSIC</p>
                <p className="text-sm font-semibold hover:text-blue-600 cursor-pointer">#NewArtistDiscovery</p>
                <p className="text-xs text-gray-500">420 people talking about this</p>
              </div>
            </div>
          </div>

          {/* Footer Links */}
          <footer className="px-4 text-[11px] text-gray-400 leading-relaxed">
            <div className="flex flex-wrap gap-2 mb-2">
              <a href="#" className="hover:underline">About</a>
              <a href="#" className="hover:underline">Privacy</a>
              <a href="#" className="hover:underline">Terms</a>
              <a href="#" className="hover:underline">Help</a>
              <a href="#" className="hover:underline">Cookies</a>
            </div>
            <p>© 2024 SOCIETY PLATFORM BY GOOGLE</p>
          </footer>
        </aside>

      </main>

      {/* Mobile Navigation */}
      <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-3 flex justify-between items-center z-50">
        <Home size={24} className="text-blue-600" />
        <Users size={24} className="text-gray-400" />
        <div className="bg-blue-600 p-2 rounded-full -mt-8 shadow-lg shadow-blue-200 border-4 border-gray-50 text-white">
          <Plus size={24} />
        </div>
        <PlaySquare size={24} className="text-gray-400" />
        <User size={24} className="text-gray-400" />
      </nav>
    </div>
  );
}