import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  onAuthStateChanged,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  sendPasswordResetEmail,
  updateProfile,
  signOut,
  signInAnonymously,
  signInWithCustomToken
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  addDoc, 
  onSnapshot, 
  query, 
  updateDoc, 
  getDoc,
  arrayUnion,
  arrayRemove,
  orderBy
} from 'firebase/firestore';
import { 
  Heart, 
  MessageCircle, 
  Send, 
  Search, 
  Home, 
  PlusSquare,
  X,
  Camera,
  User,
  Settings,
  BadgeCheck,
  LogOut,
  MoreHorizontal,
  Compass,
  Film,
  Bookmark,
  ChevronLeft
} from 'lucide-react';

// --- FIREBASE INITIALIZATION ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'kadraj-pro-desktop';

export default function App() {
  const [user, setUser] = useState(null);
  const [userData, setUserData] = useState(null);
  const [authMode, setAuthMode] = useState('login');
  const [activeTab, setActiveTab] = useState('home');
  const [targetUserId, setTargetUserId] = useState(null);
  const [posts, setPosts] = useState([]);
  const [users, setUsers] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [isCreating, setIsCreating] = useState(false);
  const [previewUrl, setPreviewUrl] = useState(null);
  const [loading, setLoading] = useState(true);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [activeChat, setActiveChat] = useState(null);
  const [messages, setMessages] = useState([]);

  // --- AUTHENTICATION FLOW (RULE 3) ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          // Normal user flow handled by UI, but we ensure a base state
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, async (u) => {
      if (u) {
        const userRef = doc(db, 'artifacts', appId, 'public', 'data', 'users', u.uid);
        const userDoc = await getDoc(userRef);
        
        if (userDoc.exists()) {
          setUserData(userDoc.data());
        } else {
          const defaultData = {
            uid: u.uid,
            username: u.displayName?.toLowerCase().replace(/\s/g, '') || `kullanici_${u.uid.slice(0, 5)}`,
            fullName: u.displayName || 'Kadraj Kullanıcısı',
            avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${u.uid}`,
            bio: 'Kadraj Sosyal dünyasına yeni katıldım.',
            followers: [],
            following: [],
            isVerified: false,
            createdAt: Date.now()
          };
          await setDoc(userRef, defaultData);
          setUserData(defaultData);
        }
        setUser(u);
      } else {
        setUser(null);
        setUserData(null);
      }
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // --- DATA SYNC (RULE 1 & 2) ---
  useEffect(() => {
    if (!user) return;

    // Posts listener
    const postsQuery = query(
      collection(db, 'artifacts', appId, 'public', 'data', 'posts')
    );
    const unsubPosts = onSnapshot(postsQuery, (snap) => {
      const p = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      setPosts(p.sort((a, b) => b.createdAt - a.createdAt));
    }, (err) => console.error("Posts error:", err));

    // Users listener
    const usersQuery = collection(db, 'artifacts', appId, 'public', 'data', 'users');
    const unsubUsers = onSnapshot(usersQuery, (snap) => {
      setUsers(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Users error:", err));

    return () => { unsubPosts(); unsubUsers(); };
  }, [user]);

  // --- MESSAGES SYNC ---
  useEffect(() => {
    if (!activeChat || !user) return;
    const chatId = [user.uid, activeChat.uid].sort().join('_');
    const msgQuery = collection(db, 'artifacts', appId, 'public', 'data', 'chats', chatId, 'messages');
    
    const unsubMsgs = onSnapshot(msgQuery, (snap) => {
      const m = snap.docs.map(d => d.data());
      setMessages(m.sort((a, b) => a.createdAt - b.createdAt));
    }, (err) => console.error("Messages error:", err));

    return () => unsubMsgs();
  }, [activeChat, user]);

  // --- NAVIGATION & ACTIONS ---
  const navigateTo = (tab, targetId = null) => {
    setIsTransitioning(true);
    setTimeout(() => {
      setActiveTab(tab);
      if (targetId) setTargetUserId(targetId);
      setIsTransitioning(false);
    }, 400);
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    try {
      if (authMode === 'signup') {
        const res = await createUserWithEmailAndPassword(auth, fd.get('email'), fd.get('password'));
        await updateProfile(res.user, { displayName: fd.get('username') });
      } else if (authMode === 'login') {
        await signInWithEmailAndPassword(auth, fd.get('email'), fd.get('password'));
      } else {
        await sendPasswordResetEmail(auth, fd.get('email'));
        setAuthMode('login');
      }
    } catch (err) { console.error(err); }
  };

  const handlePost = async (e) => {
    e.preventDefault();
    if (!previewUrl || !user) return;
    const caption = e.target.caption.value;
    
    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'posts'), {
      userId: user.uid,
      username: userData.username,
      avatar: userData.avatar,
      content: previewUrl,
      caption: caption,
      likes: [],
      isVerified: userData.isVerified,
      createdAt: Date.now()
    });
    
    setIsCreating(false);
    setPreviewUrl(null);
  };

  const handleSendMessage = async (e) => {
    e.preventDefault();
    const text = e.target.msg.value;
    if (!text || !activeChat) return;

    const chatId = [user.uid, activeChat.uid].sort().join('_');
    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'chats', chatId, 'messages'), {
      senderId: user.uid,
      text,
      createdAt: Date.now()
    });
    e.target.reset();
  };

  const toggleFollow = async (tUid) => {
    const isFollowing = userData.following.includes(tUid);
    const myRef = doc(db, 'artifacts', appId, 'public', 'data', 'users', user.uid);
    const tRef = doc(db, 'artifacts', appId, 'public', 'data', 'users', tUid);

    await updateDoc(myRef, { following: isFollowing ? arrayRemove(tUid) : arrayUnion(tUid) });
    await updateDoc(tRef, { followers: isFollowing ? arrayRemove(user.uid) : arrayUnion(user.uid) });
  };

  if (loading) return <div className="h-screen bg-black flex items-center justify-center"><div className="w-10 h-10 border-4 border-zinc-800 border-t-white rounded-full animate-spin"></div></div>;

  if (!user) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center p-6">
        <div className="w-full max-w-[350px] space-y-3">
          <div className="bg-zinc-950 border border-zinc-900 p-10 flex flex-col items-center">
            <h1 className="text-4xl font-black italic tracking-tighter mb-10 font-serif">Kadraj</h1>
            <form onSubmit={handleLogin} className="w-full space-y-2">
              {authMode === 'signup' && (
                <input name="username" type="text" placeholder="Kullanıcı adı" className="w-full bg-zinc-900 border border-zinc-800 rounded-sm px-3 py-2 text-xs text-white focus:outline-none focus:border-zinc-500" required />
              )}
              <input name="email" type="email" placeholder="E-posta" className="w-full bg-zinc-900 border border-zinc-800 rounded-sm px-3 py-2 text-xs text-white focus:outline-none focus:border-zinc-500" required />
              {authMode !== 'reset' && (
                <input name="password" type="password" placeholder="Şifre" className="w-full bg-zinc-900 border border-zinc-800 rounded-sm px-3 py-2 text-xs text-white focus:outline-none focus:border-zinc-500" required />
              )}
              <button className="w-full bg-sky-500 hover:bg-sky-600 text-white font-bold py-1.5 rounded-lg text-sm mt-4">
                {authMode === 'login' ? 'Giriş Yap' : authMode === 'signup' ? 'Kaydol' : 'Şifre Sıfırla'}
              </button>
            </form>
            <div className="mt-6 text-xs text-sky-200 cursor-pointer" onClick={() => setAuthMode('reset')}>Şifreni mi unuttun?</div>
          </div>
          <div className="bg-zinc-950 border border-zinc-900 p-6 text-center">
            <p className="text-sm">
              {authMode === 'login' ? "Hesabın yok mu?" : "Zaten hesabın var mı?"}
              <button onClick={() => setAuthMode(authMode === 'login' ? 'signup' : 'login')} className="ml-1 text-sky-500 font-bold">
                {authMode === 'login' ? 'Kaydol' : 'Giriş Yap'}
              </button>
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-black text-white flex overflow-hidden">
      {/* Geçiş Perdesi */}
      <div className={`fixed inset-0 z-[1000] bg-black transition-opacity duration-300 pointer-events-none ${isTransitioning ? 'opacity-100' : 'opacity-0'}`} />

      {/* Sol Kenar Çubuğu */}
      <aside className="w-[72px] xl:w-64 border-r border-zinc-900 flex flex-col p-3 fixed h-full bg-black z-50">
        <div className="py-10 px-3 cursor-pointer" onClick={() => navigateTo('home')}>
          <h1 className="text-2xl font-black italic tracking-tighter hidden xl:block">KADRAJ</h1>
          <Camera className="xl:hidden" size={28} />
        </div>
        
        <nav className="flex-1 space-y-1">
          {[
            { id: 'home', icon: Home, label: 'Ana Sayfa' },
            { id: 'search', icon: Search, label: 'Ara' },
            { id: 'explore', icon: Compass, label: 'Keşfet' },
            { id: 'chat', icon: MessageCircle, label: 'Mesajlar' },
            { id: 'profile', icon: User, label: 'Profil' }
          ].map(item => (
            <div 
              key={item.id} 
              onClick={() => navigateTo(item.id)} 
              className={`flex items-center gap-4 p-3 rounded-xl cursor-pointer transition-all hover:bg-zinc-900 group ${activeTab === item.id ? 'font-bold' : 'text-zinc-400'}`}
            >
              <item.icon size={26} className={`group-hover:scale-105 transition-transform ${activeTab === item.id ? 'text-white' : ''}`} />
              <span className="hidden xl:block text-base">{item.label}</span>
            </div>
          ))}
          <div onClick={() => setIsCreating(true)} className="flex items-center gap-4 p-3 rounded-xl cursor-pointer hover:bg-zinc-900 text-zinc-400">
            <PlusSquare size={26} />
            <span className="hidden xl:block text-base">Oluştur</span>
          </div>
        </nav>

        <button onClick={() => signOut(auth)} className="flex items-center gap-4 p-3 rounded-xl hover:bg-red-500/10 text-zinc-500 hover:text-red-500 transition-all">
          <LogOut size={26} />
          <span className="hidden xl:block">Çıkış</span>
        </button>
      </aside>

      {/* Ana İçerik */}
      <main className="flex-1 ml-[72px] xl:ml-64 flex justify-center overflow-y-auto">
        <div className="w-full max-w-[935px] flex transition-opacity duration-500">
          
          {/* Akış Sayfası */}
          {activeTab === 'home' && (
            <div className="flex-1 max-w-[630px] py-8 px-4">
              {/* Hikayeler */}
              <div className="flex gap-4 overflow-x-auto pb-8 mb-4 border-b border-zinc-900 scrollbar-hide">
                {users.map(u => (
                  <div key={u.uid} className="flex flex-col items-center gap-1 cursor-pointer min-w-[66px]">
                    <div className="p-0.5 rounded-full bg-gradient-to-tr from-yellow-400 to-fuchsia-600">
                      <img src={u.avatar} className="w-14 h-14 rounded-full border-2 border-black object-cover" />
                    </div>
                    <span className="text-[10px] text-zinc-400 truncate w-full text-center">@{u.username}</span>
                  </div>
                ))}
              </div>

              {/* Gönderiler */}
              <div className="space-y-12">
                {posts.map(post => (
                  <div key={post.id} className="pb-8 border-b border-zinc-900 last:border-0">
                    <div className="flex items-center justify-between py-3">
                      <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigateTo('otherProfile', post.userId)}>
                        <img src={post.avatar} className="w-8 h-8 rounded-full border border-zinc-800" />
                        <div className="flex items-center gap-1">
                          <span className="text-sm font-bold">@{post.username}</span>
                          {post.isVerified && <BadgeCheck size={14} className="text-sky-500 fill-sky-500" />}
                          <span className="text-zinc-500 text-xs">• 2s</span>
                        </div>
                      </div>
                      <MoreHorizontal size={20} className="text-zinc-500 cursor-pointer" />
                    </div>
                    <div className="rounded-lg border border-zinc-900 overflow-hidden bg-zinc-950">
                      <img src={post.content} className="w-full h-auto max-h-[600px] object-contain mx-auto" />
                    </div>
                    <div className="py-3 flex flex-col gap-2">
                      <div className="flex items-center gap-4">
                        <Heart size={24} className="cursor-pointer hover:text-zinc-500" />
                        <MessageCircle size={24} className="cursor-pointer hover:text-zinc-500" />
                        <Send size={24} className="cursor-pointer hover:text-zinc-500" />
                        <Bookmark size={24} className="ml-auto cursor-pointer hover:text-zinc-500" />
                      </div>
                      <p className="text-sm font-bold">428 beğenme</p>
                      <p className="text-sm">
                        <span className="font-bold mr-2">@{post.username}</span>
                        {post.caption}
                      </p>
                      <button className="text-zinc-500 text-sm text-left">24 yorumun tümünü gör</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Mesajlaşma Sayfası */}
          {activeTab === 'chat' && (
            <div className="w-full h-[calc(100vh-40px)] my-5 border border-zinc-900 rounded-lg flex overflow-hidden bg-zinc-950">
              <div className="w-[350px] border-r border-zinc-900 flex flex-col">
                <div className="p-5 border-b border-zinc-900 flex justify-between items-center">
                  <span className="font-bold">@{userData.username}</span>
                  <PlusSquare size={24} className="cursor-pointer" />
                </div>
                <div className="flex-1 overflow-y-auto">
                  {users.filter(u => u.uid !== user.uid).map(u => (
                    <div 
                      key={u.uid} 
                      onClick={() => setActiveChat(u)}
                      className={`p-4 flex items-center gap-3 cursor-pointer hover:bg-zinc-900 ${activeChat?.uid === u.uid ? 'bg-zinc-900' : ''}`}
                    >
                      <img src={u.avatar} className="w-14 h-14 rounded-full" />
                      <div className="flex flex-col">
                        <span className="text-sm font-bold">@{u.username}</span>
                        <span className="text-xs text-zinc-500 line-clamp-1">{u.fullName}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="flex-1 flex flex-col bg-black">
                {activeChat ? (
                  <>
                    <div className="p-4 border-b border-zinc-900 flex items-center gap-3">
                      <img src={activeChat.avatar} className="w-8 h-8 rounded-full" />
                      <span className="font-bold">@{activeChat.username}</span>
                    </div>
                    <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
                      {messages.map((m, i) => (
                        <div key={i} className={`max-w-[70%] p-3 px-4 rounded-2xl text-sm ${m.senderId === user.uid ? 'bg-sky-500 self-end rounded-br-none' : 'bg-zinc-800 self-start rounded-bl-none'}`}>
                          {m.text}
                        </div>
                      ))}
                    </div>
                    <form onSubmit={handleSendMessage} className="p-4 flex gap-3 border-t border-zinc-900">
                      <input name="msg" autoComplete="off" placeholder="Mesaj gönder..." className="flex-1 bg-zinc-900 rounded-full px-4 py-2 text-sm outline-none" />
                      <button className="text-sky-500 font-bold text-sm">Gönder</button>
                    </form>
                  </>
                ) : (
                  <div className="flex-1 flex flex-col items-center justify-center text-center p-10 opacity-60">
                    <div className="w-24 h-24 border-2 border-white rounded-full flex items-center justify-center mb-4">
                      <MessageCircle size={44} />
                    </div>
                    <h2 className="text-xl font-bold">Mesajların</h2>
                    <p className="text-sm mt-2">Arkadaşlarına özel fotoğraflar ve mesajlar gönder.</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Profil Sayfası */}
          {(activeTab === 'profile' || activeTab === 'otherProfile') && (
            <div className="w-full py-8 px-4">
              {(() => {
                const p = activeTab === 'profile' ? userData : users.find(u => u.uid === targetUserId);
                if (!p) return null;
                const isMe = p.uid === user.uid;
                return (
                  <>
                    <header className="flex flex-col md:flex-row items-center gap-10 md:gap-20 mb-12 border-b border-zinc-900 pb-12">
                      <div className="relative group cursor-pointer">
                        <img src={p.avatar} className="w-40 h-40 rounded-full border border-zinc-800 object-cover" />
                        {isMe && <div className="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"><Camera size={24} /></div>}
                      </div>
                      <div className="flex-1 flex flex-col gap-6 items-center md:items-start">
                        <div className="flex items-center gap-4 flex-wrap">
                          <h2 className="text-xl font-light tracking-widest">@{p.username}</h2>
                          {isMe ? (
                            <button className="bg-zinc-900 hover:bg-zinc-800 px-4 py-1.5 rounded-lg text-sm font-bold border border-zinc-800">Profili Düzenle</button>
                          ) : (
                            <button onClick={() => toggleFollow(p.uid)} className={`px-5 py-1.5 rounded-lg text-sm font-bold transition-all ${userData.following.includes(p.uid) ? 'bg-zinc-900' : 'bg-sky-500'}`}>
                              {userData.following.includes(p.uid) ? 'Takipten Çık' : 'Takip Et'}
                            </button>
                          )}
                          <Settings className="cursor-pointer" size={20} />
                        </div>
                        <div className="flex gap-8">
                          <div className="text-sm"><span className="font-bold">{posts.filter(x => x.userId === p.uid).length}</span> gönderi</div>
                          <div className="text-sm"><span className="font-bold">{p.followers.length}</span> takipçi</div>
                          <div className="text-sm"><span className="font-bold">{p.following.length}</span> takip</div>
                        </div>
                        <div className="text-sm text-center md:text-left">
                          <p className="font-bold mb-1">{p.fullName}</p>
                          <p className="text-zinc-400 whitespace-pre-line">{p.bio}</p>
                        </div>
                      </div>
                    </header>
                    <div className="grid grid-cols-3 gap-1 md:gap-4">
                      {posts.filter(x => x.userId === p.uid).map(post => (
                        <div key={post.id} className="aspect-square relative group bg-zinc-900 cursor-pointer overflow-hidden">
                          <img src={post.content} className="w-full h-full object-cover transition-transform group-hover:scale-105" />
                          <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center gap-6 font-bold">
                            <span className="flex items-center gap-1"><Heart fill="white" size={20} /> 12</span>
                            <span className="flex items-center gap-1"><MessageCircle fill="white" size={20} /> 3</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </>
                );
              })()}
            </div>
          )}

          {/* Keşfet Sayfası */}
          {activeTab === 'explore' && (
            <div className="w-full py-8 px-4 grid grid-cols-3 gap-1 md:gap-4">
              {posts.map(post => (
                <div key={post.id} onClick={() => navigateTo('otherProfile', post.userId)} className="aspect-square relative group bg-zinc-900 cursor-pointer overflow-hidden">
                   <img src={post.content} className="w-full h-full object-cover transition-transform group-hover:scale-110 duration-500" />
                   <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all">
                      <Heart fill="white" size={24} />
                   </div>
                </div>
              ))}
            </div>
          )}

          {/* Sağ Kenar Çubuğu (Öneriler) */}
          {activeTab === 'home' && (
            <aside className="hidden lg:block w-[320px] py-10 px-8 sticky top-0 h-screen overflow-hidden">
               <div className="flex items-center justify-between mb-8">
                  <div className="flex items-center gap-4 cursor-pointer" onClick={() => navigateTo('profile')}>
                    <img src={userData.avatar} className="w-14 h-14 rounded-full border border-zinc-800" />
                    <div className="flex flex-col">
                       <p className="font-bold text-sm">@{userData.username}</p>
                       <p className="text-zinc-500 text-sm">{userData.fullName}</p>
                    </div>
                  </div>
                  <button onClick={() => navigateTo('profile')} className="text-sky-500 text-xs font-bold">Geçiş Yap</button>
               </div>
               
               <div className="flex justify-between mb-4">
                  <span className="text-zinc-500 text-sm font-bold">Senin İçin Öneriler</span>
                  <span className="text-xs font-bold hover:text-zinc-500 cursor-pointer">Tümünü Gör</span>
               </div>
               
               <div className="space-y-4">
                  {users.filter(u => u.uid !== user.uid && !userData.following.includes(u.uid)).slice(0, 5).map(u => (
                    <div key={u.uid} className="flex items-center justify-between">
                       <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigateTo('otherProfile', u.uid)}>
                          <img src={u.avatar} className="w-8 h-8 rounded-full" />
                          <div className="flex flex-col">
                             <span className="text-xs font-bold">@{u.username}</span>
                             <span className="text-[10px] text-zinc-500">Instagram'da yeni</span>
                          </div>
                       </div>
                       <button onClick={() => toggleFollow(u.uid)} className="text-sky-500 text-xs font-bold">Takip Et</button>
                    </div>
                  ))}
               </div>

               <div className="mt-12 text-[11px] text-zinc-600 leading-relaxed uppercase tracking-tighter">
                  Hakkında • Yardım • Basın • API • İş Fırsatları • Gizlilik • Koşullar • Konumlar • Dil
                  <p className="mt-6">© 2024 KADRAJ SOSYAL</p>
               </div>
            </aside>
          )}

        </div>
      </main>

      {/* Gönderi Oluştur Modal */}
      {isCreating && (
        <div className="fixed inset-0 z-[200] bg-black/90 flex items-center justify-center p-4">
          <button onClick={() => { setIsCreating(false); setPreviewUrl(null); }} className="absolute top-6 right-6 text-white"><X size={32} /></button>
          <div className="bg-zinc-950 border border-zinc-800 w-full max-w-2xl rounded-2xl overflow-hidden flex flex-col shadow-2xl">
            <div className="p-4 border-b border-zinc-900 text-center font-bold">Yeni Gönderi Oluştur</div>
            <div className="flex-1 flex flex-col items-center justify-center min-h-[450px]">
              {!previewUrl ? (
                <div className="text-center space-y-6">
                  <Film size={80} className="mx-auto text-zinc-700" />
                  <p className="text-xl font-light">Fotoğrafları buraya sürükle</p>
                  <input type="file" id="fileup" className="hidden" onChange={e => {
                    const reader = new FileReader();
                    reader.onload = () => setPreviewUrl(reader.result);
                    reader.readAsDataURL(e.target.files[0]);
                  }} />
                  <label htmlFor="fileup" className="bg-sky-500 text-white px-5 py-1.5 rounded-lg text-sm font-bold cursor-pointer inline-block">Bilgisayardan Seç</label>
                </div>
              ) : (
                <form onSubmit={handlePost} className="w-full h-full flex flex-col md:flex-row">
                  <div className="w-full md:w-1/2 aspect-square bg-black">
                    <img src={previewUrl} className="w-full h-full object-contain" />
                  </div>
                  <div className="flex-1 p-5 border-l border-zinc-900 flex flex-col">
                    <div className="flex items-center gap-3 mb-6">
                      <img src={userData.avatar} className="w-8 h-8 rounded-full" />
                      <span className="font-bold text-sm">@{userData.username}</span>
                    </div>
                    <textarea name="caption" placeholder="Açıklama yaz..." className="flex-1 bg-transparent border-none outline-none resize-none text-sm"></textarea>
                    <button className="bg-sky-500 text-white py-2 rounded-lg font-bold text-sm mt-4">Paylaş</button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      )}

      <style>{`
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        .animate-fade { animation: fade-in 0.4s ease-out; }
      `}</style>
    </div>
  );
}