import React, { useState, useEffect } from 'react';
import { 
  Plus, 
  Trash2, 
  Layout, 
  User, 
  Palette, 
  Share2, 
  Cat, 
  GripVertical, 
  Eye,
  Instagram,
  Facebook,
  Twitter,
  Globe,
  Smartphone,
  Check,
  LogOut,
  Mail,
  Lock,
  ArrowRight
} from 'lucide-react';

// --- FIREBASE IMPORTS ---
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider, signOut, onAuthStateChanged } from 'firebase/auth';

// --- FIREBASE CONFIGURATION ---
const firebaseConfig = {
  apiKey: "AIzaSyAqndpG932fb8RfOUBDAf_Q4R-9llpUJlI",
  authDomain: "biolink-6e6ee.firebaseapp.com",
  projectId: "biolink-6e6ee",
  storageBucket: "biolink-6e6ee.firebasestorage.app",
  messagingSenderId: "232844523779",
  appId: "1:232844523779:web:a0bdf6e804892ca5c41136",
  measurementId: "G-2DSTF8HF5P"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

// --- 1. CÁC COMPONENT PHỤ TRỢ (ĐỊNH NGHĨA TRƯỚC KHI DÙNG) ---

// Nút chuyển đổi (Toggle Switch)
// FIX: Dùng span thay vì div bên trong button để tránh lỗi HTML nesting
const Toggle = ({ checked, onChange }) => (
  <button 
    onClick={() => onChange(!checked)}
    className={`w-11 h-6 flex items-center rounded-full p-1 transition-colors duration-300 ${checked ? 'bg-orange-500' : 'bg-gray-300'}`}
    type="button"
  >
    <span className={`bg-white w-4 h-4 rounded-full shadow-md transform transition-transform duration-300 block ${checked ? 'translate-x-5' : ''}`} />
  </button>
);

// Component Menu Item trong Sidebar
// FIX: Dùng span bọc icon thay vì div
const NavItem = ({ icon, label, active, onClick }) => {
  return (
    <button 
      onClick={onClick}
      className={`
        flex flex-col md:flex-row items-center md:space-x-3 p-3 rounded-xl transition-all w-full
        ${active ? 'bg-orange-50 text-orange-600' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-800'}
      `}
      type="button"
    >
      <span className={`${active ? 'text-orange-500' : ''}`}>{icon}</span>
      <span className={`text-xs md:text-sm font-medium ${active ? 'font-bold' : ''}`}>{label}</span>
    </button>
  );
};

// Component lựa chọn Theme
// FIX: Chuyển từ button sang div để chứa được các div con phức tạp bên trong
const ThemeOption = ({ label, bg, btn, textColor, active, onClick }) => {
    return (
        <div onClick={onClick} className="text-left group cursor-pointer" role="button" tabIndex={0}>
            <div className={`
               h-32 rounded-xl border-2 transition-all overflow-hidden relative shadow-sm
               ${active ? 'border-orange-500 ring-2 ring-orange-200' : 'border-gray-200 group-hover:border-gray-300'}
            `}>
                <div className={`w-full h-full ${bg} flex flex-col items-center justify-center p-3 space-y-2`}>
                    <div className="w-8 h-8 rounded-full bg-current opacity-20" />
                    <div className={`w-full h-3 ${btn} rounded-md opacity-80`} />
                    <div className={`w-full h-3 ${btn} rounded-md opacity-60`} />
                </div>
                {active && (
                   <div className="absolute top-2 right-2 bg-orange-500 text-white p-1 rounded-full shadow-sm">
                      <Check size={12} />
                   </div>
                )}
            </div>
            <p className="mt-2 text-sm font-medium text-gray-700 text-center">{label}</p>
        </div>
    )
};

// Component lựa chọn kiểu nút
const ButtonStyleOption = ({ label, shape, active, onClick }) => {
    return (
        <button 
          onClick={onClick}
          className={`
            flex-1 py-3 border-2 text-sm font-medium transition-all
            ${shape}
            ${active ? 'border-orange-500 bg-orange-50 text-orange-700' : 'border-gray-200 bg-white hover:border-gray-300'}
          `}
          type="button"
        >
            {label}
        </button>
    )
};

// --- 2. TRANG ĐĂNG NHẬP / ĐĂNG KÝ (AUTH PAGE) ---

const AuthPage = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  const handleGoogleLogin = async () => {
    setIsLoading(true);
    setErrorMsg("");
    try {
      await signInWithPopup(auth, provider);
      // Auth state change sẽ được bắt ở App component
    } catch (error) {
      console.error("Login Failed:", error);
      setErrorMsg(error.message);
      setIsLoading(false);
    }
  };

  const handleTraditionalSubmit = (e) => {
    e.preventDefault();
    alert("Vui lòng sử dụng Đăng nhập bằng Google trong phiên bản Demo này!");
  };

  return (
    <div className="min-h-screen bg-orange-50 flex items-center justify-center p-4 font-sans relative z-50">
      <div className="bg-white w-full max-w-md rounded-3xl shadow-xl overflow-hidden flex flex-col">
        
        {/* Form Container */}
        <div className="w-full p-8 md:p-10">
          {/* Logo */}
          <div className="flex justify-center mb-8">
             <div className="flex items-center gap-2 text-slate-900">
              <Cat size={32} strokeWidth={1.5} className="text-orange-500" />
              <span className="font-bold text-3xl tracking-tight lowercase">mewo</span>
            </div>
          </div>

          <h2 className="text-2xl font-bold text-center text-gray-800 mb-2">
            {isLogin ? 'Chào mừng trở lại! 👋' : 'Tạo tài khoản mới 🚀'}
          </h2>
          <p className="text-center text-gray-500 mb-8 text-sm">
            {isLogin ? 'Đăng nhập để quản lý Bio Link của bạn.' : 'Bắt đầu xây dựng trang Bio Link miễn phí.'}
          </p>

          <div className="space-y-4">
            {/* Google Login Button */}
            <button 
              type="button"
              onClick={handleGoogleLogin}
              disabled={isLoading}
              className="w-full flex items-center justify-center gap-3 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 font-semibold py-3 px-4 rounded-xl transition-all shadow-sm group disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoading ? (
                 <div className="w-5 h-5 border-2 border-orange-500 border-t-transparent rounded-full animate-spin"></div>
              ) : (
                <>
                  <svg className="w-5 h-5" viewBox="0 0 24 24">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                  </svg>
                  <span>{isLogin ? 'Đăng nhập với Google' : 'Đăng ký bằng Google'}</span>
                </>
              )}
            </button>
            
            {errorMsg && (
              <p className="text-red-500 text-xs text-center px-4 bg-red-50 py-2 rounded-lg">{errorMsg}</p>
            )}

            <div className="relative flex py-2 items-center">
                <div className="flex-grow border-t border-gray-200"></div>
                <span className="flex-shrink mx-4 text-gray-400 text-xs uppercase">Hoặc</span>
                <div className="flex-grow border-t border-gray-200"></div>
            </div>

            {/* Traditional Inputs */}
            <form onSubmit={handleTraditionalSubmit} className="space-y-3">
              <div className="relative">
                <Mail className="absolute left-3 top-3.5 text-gray-400" size={18} />
                <input 
                  type="email" 
                  placeholder="Email của bạn" 
                  className="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-200 focus:border-orange-400 outline-none transition-all text-sm"
                />
              </div>
              <div className="relative">
                <Lock className="absolute left-3 top-3.5 text-gray-400" size={18} />
                <input 
                  type="password" 
                  placeholder="Mật khẩu" 
                  className="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-200 focus:border-orange-400 outline-none transition-all text-sm"
                />
              </div>
              <button type="submit" className="w-full bg-slate-900 hover:bg-black text-white font-bold py-3 rounded-xl transition-all shadow-md active:scale-95 flex items-center justify-center gap-2">
                <span>{isLogin ? 'Đăng nhập' : 'Tạo tài khoản'}</span>
                <ArrowRight size={18} />
              </button>
            </form>
          </div>

          <div className="mt-8 text-center text-sm">
            <span className="text-gray-500">
              {isLogin ? 'Chưa có tài khoản?' : 'Đã có tài khoản?'}
            </span>
            <button 
              type="button"
              onClick={() => setIsLogin(!isLogin)}
              className="ml-2 font-bold text-orange-600 hover:text-orange-700 hover:underline"
            >
              {isLogin ? 'Đăng ký ngay' : 'Đăng nhập'}
            </button>
          </div>

        </div>
      </div>
    </div>
  );
};

// --- 3. ỨNG DỤNG CHÍNH (MAIN APP) - ĐƯỢC ĐỊNH NGHĨA CUỐI CÙNG ---

const App = () => {
  // --- STATE (DỮ LIỆU) ---
  const [currentUser, setCurrentUser] = useState(null); // Trạng thái đăng nhập
  const [authLoading, setAuthLoading] = useState(true); // Trạng thái tải auth ban đầu
  const [activeTab, setActiveTab] = useState('links'); 
  const [mobilePreviewMode, setMobilePreviewMode] = useState(false); 

  // Dữ liệu Profile (sẽ được cập nhật khi login)
  const [profile, setProfile] = useState({
    username: 'user',
    displayName: 'User',
    bio: '',
    avatar: '',
  });

  // Dữ liệu Giao diện (Theme)
  const [theme, setTheme] = useState({
    background: 'bg-slate-50', 
    buttonStyle: 'rounded-xl', 
    buttonColor: 'bg-white',
    textColor: 'text-slate-800',
    accentColor: 'text-orange-500',
  });

  // Danh sách Links
  const [links, setLinks] = useState([
    { id: 1, title: 'Ghé thăm Mewo Website', url: 'https://mewo.life', active: true, icon: 'shop' },
    { id: 2, title: 'Đặt lịch tư vấn (Book me)', url: 'https://cal.com', active: true, icon: 'calendar' },
    { id: 3, title: 'Nhận Ebook Miễn Phí', url: 'https://gumroad.com', active: false, icon: 'book' },
  ]);

  // --- HÀM XỬ LÝ AUTH (FIREBASE LISTENER) ---
  useEffect(() => {
    // Lắng nghe sự thay đổi trạng thái đăng nhập
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        // User is signed in
        setCurrentUser(user);
        setProfile(prev => ({
          ...prev,
          username: user.email ? user.email.split('@')[0] : 'user', 
          displayName: user.displayName || 'Mewo Friend',
          avatar: user.photoURL || 'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',
          bio: prev.bio || 'Chuyên gia bắt chuột & Marketing 🐟 | CEO @Mewo'
        }));
      } else {
        // User is signed out
        setCurrentUser(null);
      }
      setAuthLoading(false);
    });

    return () => unsubscribe(); // Cleanup subscription
  }, []);

  const handleLogout = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error("Logout Error:", error);
    }
  };

  // --- CÁC HÀM XỬ LÝ LINK (ACTIONS) ---

  const handleAddLink = () => {
    const newLink = {
      id: Date.now(),
      title: '',
      url: '',
      active: true,
      icon: 'link'
    };
    setLinks([newLink, ...links]);
  };

  const handleUpdateLink = (id, field, value) => {
    setLinks(links.map(link => link.id === id ? { ...link, [field]: value } : link));
  };

  const handleDeleteLink = (id) => {
    setLinks(links.filter(link => link.id !== id));
  };

  const handleToggleLink = (id) => {
    setLinks(links.map(link => link.id === id ? { ...link, active: !link.active } : link));
  };

  // --- RENDERING ---

  // Màn hình chờ khi đang kiểm tra đăng nhập
  if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-orange-50">
         <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  // Nếu chưa đăng nhập -> Hiển thị AuthPage
  if (!currentUser) {
    return <AuthPage />;
  }

  // Nếu đã đăng nhập -> Hiển thị Dashboard
  return (
    <div className="flex h-screen bg-gray-100 font-sans overflow-hidden">
      
      {/* --- SIDEBAR MENU (DESKTOP) --- */}
      <aside className="w-16 md:w-64 bg-white border-r border-gray-200 flex flex-col justify-between z-20">
        <div>
          <div className="h-16 flex items-center justify-center md:justify-start md:px-6 border-b border-gray-100">
            {/* Minimalist Logo */}
            <div className="flex items-center gap-2 text-slate-900 group cursor-pointer">
              <Cat size={28} strokeWidth={1.5} className="group-hover:text-orange-500 transition-colors" />
              <span className="hidden md:block font-bold text-2xl tracking-tight lowercase group-hover:text-orange-500 transition-colors">mewo</span>
            </div>
          </div>

          <nav className="mt-6 flex flex-col space-y-2 px-2">
            <NavItem 
              icon={<Layout size={20} />} 
              label="Liên kết" 
              active={activeTab === 'links'} 
              onClick={() => setActiveTab('links')} 
            />
            <NavItem 
              icon={<Palette size={20} />} 
              label="Giao diện" 
              active={activeTab === 'appearance'} 
              onClick={() => setActiveTab('appearance')} 
            />
            <NavItem 
              icon={<User size={20} />} 
              label="Tài khoản" 
              active={activeTab === 'settings'} 
              onClick={() => setActiveTab('settings')} 
            />
          </nav>
        </div>

        {/* Footer Sidebar: Logout Button */}
        <div className="p-4 border-t border-gray-100 hidden md:block">
           <div className="mb-4 flex items-center gap-3 px-2">
              <img src={profile.avatar} className="w-8 h-8 rounded-full bg-gray-100" referrerPolicy="no-referrer" />
              <div className="overflow-hidden">
                <p className="text-sm font-bold truncate">{profile.displayName}</p>
                <p className="text-xs text-gray-500 truncate">@{profile.username}</p>
              </div>
           </div>
          <button 
            onClick={handleLogout}
            className="w-full flex items-center space-x-2 text-sm text-red-500 hover:bg-red-50 p-2 rounded-lg transition-colors"
            type="button"
          >
            <LogOut size={16} />
            <span>Đăng xuất</span>
          </button>
        </div>
      </aside>

      {/* --- MAIN EDITOR AREA --- */}
      <main className="flex-1 flex flex-col h-full overflow-hidden relative">
        
        {/* Header Mobile */}
        <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 md:px-8">
          <h2 className="text-lg font-bold text-gray-800">
            {activeTab === 'links' && 'Quản lý Liên kết'}
            {activeTab === 'appearance' && 'Tùy chỉnh Giao diện'}
            {activeTab === 'settings' && 'Cài đặt Tài khoản'}
          </h2>
          
          <button 
            className="md:hidden p-2 text-gray-600 bg-gray-100 rounded-lg"
            onClick={() => setMobilePreviewMode(!mobilePreviewMode)}
          >
            {mobilePreviewMode ? <Layout size={20}/> : <Eye size={20}/>}
          </button>

          <div className="hidden md:flex items-center space-x-2 text-sm">
            <span className="text-gray-500">Link của bạn:</span>
            <a href="#" className="text-orange-500 font-medium hover:underline">mewo.life/{profile.username}</a>
          </div>
        </header>

        {/* Scrollable Content */}
        <div className="flex-1 overflow-y-auto p-4 md:p-8 pb-32 md:pb-8">
          <div className="max-w-2xl mx-auto">
            
            {/* TAB: LINKS */}
            {activeTab === 'links' && (
              <div className="space-y-6">
                {/* Profile Quick Edit */}
                <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col md:flex-row gap-6 items-center md:items-start">
                   <div className="relative group cursor-pointer">
                      <img src={profile.avatar} alt="Avatar" className="w-20 h-20 rounded-full object-cover border-2 border-gray-200" referrerPolicy="no-referrer" />
                      <div className="absolute inset-0 bg-black/30 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white text-xs">
                        Đổi ảnh
                      </div>
                   </div>
                   <div className="flex-1 w-full space-y-3">
                      <input 
                        type="text" 
                        value={profile.displayName}
                        onChange={(e) => setProfile({...profile, displayName: e.target.value})}
                        className="w-full text-lg font-bold border-none p-0 focus:ring-0 placeholder-gray-400"
                        placeholder="Tên hiển thị"
                      />
                      <textarea 
                        value={profile.bio}
                        onChange={(e) => setProfile({...profile, bio: e.target.value})}
                        className="w-full text-sm text-gray-600 border-none p-0 focus:ring-0 resize-none h-14 bg-transparent placeholder-gray-400"
                        placeholder="Viết bio ngắn gọn..."
                      />
                   </div>
                </div>

                {/* Add Link Button */}
                <button 
                  onClick={handleAddLink}
                  className="w-full py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-full font-bold shadow-md shadow-orange-200 transition-all flex items-center justify-center space-x-2 transform active:scale-95"
                >
                  <Plus size={20} />
                  <span>Thêm liên kết mới</span>
                </button>

                {/* Links List */}
                <div className="space-y-4">
                  {links.length === 0 && (
                    <div className="text-center py-10 text-gray-400">
                      Chưa có liên kết nào. Hãy thêm cái đầu tiên! 🐾
                    </div>
                  )}
                  {links.map((link, index) => (
                    <div key={link.id} className="bg-white rounded-2xl p-4 shadow-sm border border-gray-200 group hover:border-orange-300 transition-colors">
                      <div className="flex items-start gap-3">
                        <div className="mt-3 cursor-grab text-gray-300 hover:text-gray-500">
                          <GripVertical size={20} />
                        </div>
                        <div className="flex-1 space-y-2">
                          <div className="flex items-center justify-between">
                             <input 
                                type="text" 
                                value={link.title}
                                onChange={(e) => handleUpdateLink(link.id, 'title', e.target.value)}
                                placeholder="Tiêu đề (Ví dụ: Facebook của tôi)"
                                className="font-semibold text-gray-800 bg-transparent border-none p-0 focus:ring-0 w-full placeholder-gray-400"
                             />
                             <Toggle checked={link.active} onChange={() => handleToggleLink(link.id)} />
                          </div>
                          <input 
                              type="text" 
                              value={link.url}
                              onChange={(e) => handleUpdateLink(link.id, 'url', e.target.value)}
                              placeholder="URL (https://...)"
                              className="text-sm text-gray-500 bg-gray-50 rounded-md px-2 py-1 w-full border-none focus:ring-1 focus:ring-orange-300 transition-all"
                           />
                        </div>
                      </div>
                      <div className="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center text-gray-400">
                         <div className="text-xs flex space-x-3">
                            <button className="hover:text-gray-600 flex items-center space-x-1"><Smartphone size={14}/> <span>Thumbnail</span></button>
                            <button className="hover:text-gray-600 flex items-center space-x-1"><Layout size={14}/> <span>Layout</span></button>
                         </div>
                         <button onClick={() => handleDeleteLink(link.id)} className="text-gray-400 hover:text-red-500 p-1">
                           <Trash2 size={16} />
                         </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* TAB: APPEARANCE */}
            {activeTab === 'appearance' && (
              <div className="space-y-8">
                <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                  <h3 className="font-bold text-gray-800 mb-4">Themes (Chủ đề)</h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {/* Theme 1: Default */}
                    <ThemeOption 
                      label="Minimal" 
                      bg="bg-slate-50" 
                      btn="bg-white" 
                      active={theme.background === 'bg-slate-50'}
                      onClick={() => setTheme({...theme, background: 'bg-slate-50', buttonColor: 'bg-white', textColor: 'text-slate-800'})}
                    />
                     {/* Theme 2: Dark Cat */}
                     <ThemeOption 
                      label="Mèo Đêm" 
                      bg="bg-gray-900" 
                      btn="bg-gray-800"
                      textColor="text-white"
                      active={theme.background === 'bg-gray-900'}
                      onClick={() => setTheme({...theme, background: 'bg-gray-900', buttonColor: 'bg-gray-800', textColor: 'text-white'})}
                    />
                    {/* Theme 3: Orange Paw */}
                    <ThemeOption 
                      label="Mèo Cam" 
                      bg="bg-orange-50" 
                      btn="bg-white"
                      textColor="text-orange-900"
                      active={theme.background === 'bg-orange-50'}
                      onClick={() => setTheme({...theme, background: 'bg-orange-50', buttonColor: 'bg-white', textColor: 'text-orange-900'})}
                    />
                     {/* Theme 4: Purple Dream */}
                     <ThemeOption 
                      label="Mộng Mơ" 
                      bg="bg-indigo-900" 
                      btn="bg-indigo-800"
                      textColor="text-indigo-100"
                      active={theme.background === 'bg-indigo-900'}
                      onClick={() => setTheme({...theme, background: 'bg-indigo-900', buttonColor: 'bg-indigo-800', textColor: 'text-indigo-100'})}
                    />
                  </div>
                </div>

                <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                  <h3 className="font-bold text-gray-800 mb-4">Kiểu dáng nút</h3>
                  <div className="flex space-x-4">
                     <ButtonStyleOption label="Vuông" shape="rounded-none" active={theme.buttonStyle === 'rounded-none'} onClick={() => setTheme({...theme, buttonStyle: 'rounded-none'})} />
                     <ButtonStyleOption label="Bo góc" shape="rounded-xl" active={theme.buttonStyle === 'rounded-xl'} onClick={() => setTheme({...theme, buttonStyle: 'rounded-xl'})} />
                     <ButtonStyleOption label="Tròn" shape="rounded-full" active={theme.buttonStyle === 'rounded-full'} onClick={() => setTheme({...theme, buttonStyle: 'rounded-full'})} />
                  </div>
                </div>
              </div>
            )}
            
            {/* TAB: SETTINGS */}
            {activeTab === 'settings' && (
                <div className="bg-white p-8 rounded-2xl shadow-sm space-y-6">
                    <div className="text-center">
                      <Cat size={48} className="mx-auto text-orange-400 mb-4" />
                      <h3 className="font-bold text-xl">Tài khoản của bạn</h3>
                    </div>
                    
                    <div className="space-y-4 max-w-md mx-auto">
                      <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                        <span className="text-gray-500">Email</span>
                        <span className="font-medium">{currentUser.email}</span>
                      </div>
                      <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                         <span className="text-gray-500">Gói thành viên</span>
                         <span className="bg-orange-100 text-orange-700 px-3 py-1 rounded-full text-xs font-bold">Mèo Con (Free)</span>
                      </div>
                      
                      <button 
                        onClick={handleLogout}
                        className="w-full border border-red-200 text-red-500 hover:bg-red-50 font-bold py-3 rounded-xl transition-colors mt-6"
                      >
                        Đăng xuất khỏi thiết bị này
                      </button>
                    </div>
                </div>
            )}

          </div>
        </div>
      </main>

      {/* --- PREVIEW SECTION (DESKTOP: RIGHT SIDE / MOBILE: OVERLAY) --- */}
      <aside className={`
        fixed inset-0 z-50 bg-white md:static md:w-[450px] md:bg-gray-50 md:border-l md:border-gray-200 
        flex items-center justify-center p-4 transition-transform duration-300
        ${mobilePreviewMode ? 'translate-y-0' : 'translate-y-full md:translate-y-0'}
      `}>
         {/* Close Mobile Preview Button */}
         <button 
           onClick={() => setMobilePreviewMode(false)}
           className="absolute top-4 right-4 md:hidden p-2 bg-gray-100 rounded-full"
         >
            <Layout size={24} />
         </button>

         {/* THE PHONE FRAME */}
         <div className="relative w-full max-w-[320px] h-[680px] border-[12px] border-gray-800 rounded-[3rem] bg-gray-800 shadow-2xl overflow-hidden ring-4 ring-gray-100/50">
            {/* Dynamic Content Inside Phone */}
            <div className={`w-full h-full overflow-y-auto hide-scrollbar ${theme.background} ${theme.textColor} transition-colors duration-300`}>
                
                {/* Profile Header */}
                <div className="pt-12 pb-6 px-6 flex flex-col items-center text-center">
                    <div className="relative mb-4">
                        <img 
                            src={profile.avatar} 
                            alt="avatar" 
                            className="w-24 h-24 rounded-full object-cover border-4 border-white/50 shadow-lg" 
                            referrerPolicy="no-referrer"
                        />
                         {/* Mewo Badge */}
                        <div className="absolute -bottom-1 -right-1 bg-orange-400 text-white p-1 rounded-full border-2 border-white text-xs">
                           🐾
                        </div>
                    </div>
                    <h1 className="text-lg font-bold leading-tight">{profile.displayName || '@username'}</h1>
                    <p className="mt-2 text-sm opacity-80 leading-relaxed font-medium">{profile.bio}</p>
                    
                    {/* Social Icons (Demo) */}
                    <div className="flex space-x-3 mt-4 opacity-70">
                        <Instagram size={20} />
                        <Facebook size={20} />
                        <Twitter size={20} />
                    </div>
                </div>

                {/* Link List */}
                <div className="px-4 space-y-3 pb-12">
                    {links.filter(l => l.active).map(link => (
                        <a 
                           key={link.id} 
                           href="#" // Prevent navigation in demo
                           className={`
                             block w-full p-4 text-center text-sm font-semibold
                             ${theme.buttonColor} ${theme.buttonStyle}
                             ${theme.background === 'bg-white' ? 'border border-gray-200' : ''}
                             shadow-sm hover:scale-[1.02] active:scale-95
                             transition-all duration-200 group relative overflow-hidden
                           `}
                           style={{ color: 'inherit' }} // Inherit text color from parent
                        >
                           <span className="relative z-10">{link.title || 'Tiêu đề liên kết'}</span>
                           
                           {/* Hover Effect */}
                           <div className="absolute inset-0 bg-current opacity-0 group-hover:opacity-5 transition-opacity" />
                        </a>
                    ))}
                </div>

                {/* Footer */}
                <div className="mt-auto pb-8 text-center opacity-40 hover:opacity-100 transition-opacity">
                   <div className="flex items-center justify-center space-x-1.5">
                      <span className="text-[10px] font-bold uppercase tracking-widest">Powered by</span> 
                      <div className="flex items-center space-x-0.5 font-bold text-sm lowercase">
                        <Cat size={14} strokeWidth={2} />
                        <span>mewo</span>
                      </div>
                   </div>
                </div>

            </div>
            
            {/* Phone Notch/Island */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-6 bg-gray-800 rounded-b-xl z-50"></div>
         </div>
      </aside>

    </div>
  );
};

export default App;