/* global React, ReactDOM */
const { useEffect, useRef, useState, useMemo } = React;

const I = {
  arrowLeft: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m15 18-6-6 6-6'})),
  arrowUp: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m18 15-6-6-6 6'})),
  arrowDown: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m6 9 6 6 6-6'})),
  ban: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('circle',{cx:12,cy:12,r:10}),React.createElement('path',{d:'m4.9 4.9 14.2 14.2'})),
  bell: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'}),React.createElement('path',{d:'M10.3 21a1.94 1.94 0 0 0 3.4 0'})),
  bellOff: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'}),React.createElement('path',{d:'M12 12H3'}),React.createElement('path',{d:'m1 1 2 2'}),React.createElement('path',{d:'M20.56 15H3'}),React.createElement('path',{d:'m16 19 2 2'}),React.createElement('path',{d:'m17 21 .5-1.5M17.5 4 .5 2.5M1 15h9'})),
  bot: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M12 8V4H8'}),React.createElement('rect',{width:16,height:12,x:4,y:8,rx:2}),React.createElement('path',{d:'M2 14h2'}),React.createElement('path',{d:'M20 14h2'}),React.createElement('path',{d:'M15 13v2'}),React.createElement('path',{d:'M9 13v2'})),
  check: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M20 6 9 17l-5-5'})),
  chevronDown: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m6 9 6 6 6-6'})),
  clipboardList: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('rect',{width:8,height:4,x:8,y:2,rx:1,ry:1}),React.createElement('path',{d:'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'}),React.createElement('path',{d:'M12 11h4'}),React.createElement('path',{d:'M12 16h4'}),React.createElement('path',{d:'M8 11h.01'}),React.createElement('path',{d:'M8 16h.01'})),
  flame: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'})),
  globe: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('circle',{cx:12,cy:12,r:10}),React.createElement('path',{d:'M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'}),React.createElement('path',{d:'M2 12h20'})),
  headphones: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'})),
  image: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('rect',{width:18,height:18,x:3,y:3,rx:2,ry:2}),React.createElement('circle',{cx:9,cy:9,r:2}),React.createElement('path',{d:'m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'})),
  layout: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('rect',{width:18,height:18,x:3,y:3,rx:2}),React.createElement('path',{d:'M3 9h18'}),React.createElement('path',{d:'M9 21V9'})),
  listMusic: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M21 15V6'}),React.createElement('path',{d:'M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'}),React.createElement('path',{d:'M12 12H3'}),React.createElement('path',{d:'M16 6H3'}),React.createElement('path',{d:'M12 18H3'})),
  lock: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('rect',{width:18,height:11,x:3,y:11,rx:2,ry:2}),React.createElement('path',{d:'M7 11V7a5 5 0 0 1 10 0v4'})),
  logOut: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'}),React.createElement('polyline',{points:'16,17 21,12 16,7'}),React.createElement('line',{x1:21,x2:9,y1:12,y2:12})),
  menu: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('line',{x1:4,x2:20,y1:12,y2:12}),React.createElement('line',{x1:4,x2:20,y1:6,y2:6}),React.createElement('line',{x1:4,x2:20,y1:18,y2:18})),
  messageCircle: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M7.9 20A9 9 0 1 0 4 16.1L2 22Z'})),
  mic: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'}),React.createElement('path',{d:'M19 10v2a7 7 0 0 1-14 0v-2'}),React.createElement('line',{x1:12,x2:12,y1:19,y2:22})),
  moreH: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('circle',{cx:12,cy:12,r:1}),React.createElement('circle',{cx:19,cy:12,r:1}),React.createElement('circle',{cx:5,cy:12,r:1})),
  paperclip: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'})),
  phone: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'})),
  pin: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('line',{x1:12,x2:12,y1:17,y2:22}),React.createElement('path',{d:'M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z'})),
  plus: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M5 12h14'}),React.createElement('path',{d:'M12 5v14'})),
  radio: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M4.9 19.1C1 15.2 1 8.8 4.9 4.9'}),React.createElement('path',{d:'M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'}),React.createElement('circle',{cx:12,cy:12,r:2}),React.createElement('path',{d:'M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'}),React.createElement('path',{d:'M19.1 4.9C23 8.8 23 15.1 19.1 19'})),
  search: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('circle',{cx:11,cy:11,r:8}),React.createElement('path',{d:'m21 21-4.3-4.3'})),
  send: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m22 2-7 20-4-9-9-4Z'}),React.createElement('path',{d:'M22 2 11 13'})),
  settings: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'}),React.createElement('circle',{cx:12,cy:12,r:3})),
  smile: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('circle',{cx:12,cy:12,r:10}),React.createElement('path',{d:'M8 14s1.5 2 4 2 4-2 4-2'}),React.createElement('line',{x1:9,x2:9.01,y1:9,y2:9}),React.createElement('line',{x1:15,x2:15.01,y1:9,y2:9})),
  userRound: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M18 21a8 8 0 0 0-16 0'}),React.createElement('circle',{cx:10,cy:8,r:5})),
  userRoundPlus: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'}),React.createElement('circle',{cx:9,cy:7,r:4}),React.createElement('line',{x1:19,x2:19,y1:8,y2:14}),React.createElement('line',{x1:22,x2:16,y1:11,y2:11})),
  users: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'}),React.createElement('circle',{cx:9,cy:7,r:4}),React.createElement('path',{d:'M22 21v-2a4 4 0 0 0-3-3.87'}),React.createElement('path',{d:'M16 3.13a4 4 0 0 1 0 7.75'})),
  volume2: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('polygon',{points:'11,5 6,9 2,9 2,15 6,15 11,19'}),React.createElement('path',{d:'M15.54 8.46a5 5 0 0 1 0 7.07'}),React.createElement('path',{d:'M19.07 4.93a10 10 0 0 1 0 14.14'})),
  volumeX: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('polygon',{points:'11,5 6,9 2,9 2,15 6,15 11,19'}),React.createElement('line',{x1:22,x2:16,y1:9,y2:15}),React.createElement('line',{x1:16,x2:22,y1:9,y2:15})),
  video: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'}),React.createElement('rect',{x:2,y:6,width:14,height:12,rx:2})),
  warning: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'}),React.createElement('path',{d:'M12 9v4'}),React.createElement('path',{d:'M12 17h.01'})),
  x: (s=18) => React.createElement('svg',{width:s,height:s,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M18 6 6 18'}),React.createElement('path',{d:'m6 6 12 12'})),
};

const API_URL = "/api.php";

async function apiRequest(action, options = {}) {
  const { method = "GET", body, query = {} } = options;
  const params = new URLSearchParams({ action, ...query });
  const response = await fetch(`${API_URL}?${params.toString()}`, {
    method,
    headers: body instanceof FormData
      ? { Accept: "application/json" }
      : body
        ? { "Content-Type": "application/json", Accept: "application/json" }
        : { Accept: "application/json" },
    credentials: "include",
    body: body instanceof FormData ? body : body ? JSON.stringify(body) : undefined,
  });
  const payload = await response.json().catch(() => ({}));
  if (response.status === 503 && action === "me") return { ok: true, user: null, backendUnavailable: true };
  if (!response.ok || payload.ok === false) {
    const error = new Error(payload.message || payload.error || "İşlem tamamlanamadı.");
    error.code = payload.error;
    throw error;
  }
  return payload;
}

function Avatar({ person, size = "md", showStatus = false }) {
  const src = person.avatar_url || person.avatar;
  const isGif = src && src.toLowerCase().endsWith('.gif');
  return (
    <span className={`avatar avatar-${size}`}>
      {src ? <img src={src} alt={person.display_name || person.name} className={isGif ? 'avatar-gif' : ''} /> : <span className="avatar-placeholder">{(person.display_name || person.name || '??').slice(0, 2).toUpperCase()}</span>}
      {showStatus && <span className={`presence ${person.is_online || person.status === 'online' ? 'presence-online' : person.status === 'away' ? 'presence-away' : ''}`} />}
    </span>
  );
}

function RoleBadge({ role }) {
  const config = {
    root: { label: 'ROOT', color: '#ff4444', bg: 'rgba(255,68,68,.15)' },
    super_admin: { label: 'SÜPER ADMİN', color: '#ff6b00', bg: 'rgba(255,107,0,.15)' },
    admin: { label: 'ADMİN', color: '#e74c3c', bg: 'rgba(231,76,60,.15)' },
    moderator: { label: 'MOD', color: '#3498db', bg: 'rgba(52,152,219,.15)' },
  };
  const c = config[role];
  if (!c) return null;
  return <span className="role-badge" style={{ color: c.color, background: c.bg, borderColor: c.color + '40' }}>{c.label}</span>;
}

function getRoleColor(role) {
  return { root: '#ff4444', super_admin: '#ff6b00', admin: '#e74c3c', moderator: '#3498db', user: '#2ecc71' }[role] || '#95a5a6';
}

function Modal({ children, title, onClose, wide = false }) {
  return (
    <div className="modal-backdrop" onMouseDown={onClose}>
      <section className={`modal-card ${wide ? "modal-wide" : ""}`} onMouseDown={(event) => event.stopPropagation()}>
        <div className="modal-heading">
          <h2>{title}</h2>
          <button className="icon-button subtle" onClick={onClose} aria-label="Kapat">I.x(18)</button>
        </div>
        {children}
      </section>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState("chats");
  const [selectedId, setSelectedId] = useState(null);
  const [search, setSearch] = useState("");
  const [messages, setMessages] = useState({});
  const [draft, setDraft] = useState("");
  const [showSearch, setShowSearch] = useState(false);
  const [showNotifications, setShowNotifications] = useState(false);
  const [showAdmin, setShowAdmin] = useState(false);
  const [showAccount, setShowAccount] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [liveUser, setLiveUser] = useState(null);
  const [authMode, setAuthMode] = useState("login");
  const [authForm, setAuthForm] = useState({ identity: "", password: "", display_name: "", username: "", email: "", gender: "other" });
  const [authError, setAuthError] = useState("");
  const [callType, setCallType] = useState(null);
  const [mobileSidebar, setMobileSidebar] = useState(false);
  const [toast, setToast] = useState("");
  const [roomFilter, setRoomFilter] = useState("Tümü");
  const [conversations, setConversations] = useState([]);
  const [rooms, setRooms] = useState([]);
  const [onlineUsers, setOnlineUsers] = useState([]);
  const [adminTab, setAdminTab] = useState("dashboard");
  const [adminStats, setAdminStats] = useState(null);
  const [adminUsers, setAdminUsers] = useState([]);
  const [adminRooms, setAdminRooms] = useState([]);
  const [adminLogs, setAdminLogs] = useState([]);
  const [adminReports, setAdminReports] = useState([]);
  const [adminSettings, setAdminSettings] = useState({});
  const [adminBots, setAdminBots] = useState([]);
  const [adminRadio, setAdminRadio] = useState([]);
  const [adminAnnouncements, setAdminAnnouncements] = useState([]);
  const [adminIpBans, setAdminIpBans] = useState([]);
  const [adminSearch, setAdminSearch] = useState("");
  const [adminRoleFilter, setAdminRoleFilter] = useState("");
  const [showBotModal, setShowBotModal] = useState(false);
  const [showRadioModal, setShowRadioModal] = useState(false);
  const [showAnnouncementModal, setShowAnnouncementModal] = useState(false);
  const [showVoiceModal, setShowVoiceModal] = useState(false);
  const [selectedRoom, setSelectedRoom] = useState(null);
  const [voiceChannels, setVoiceChannels] = useState([]);
  const [currentVoiceChannel, setCurrentVoiceChannel] = useState(null);
  const [myBots, setMyBots] = useState([]);
  const [radioStations, setRadioStations] = useState([]);
  const [announcements, setAnnouncements] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [showAvatarUpload, setShowAvatarUpload] = useState(false);
  const [avatarPreview, setAvatarPreview] = useState(null);
  const [chatClosed, setChatClosed] = useState(false);
  const [botForm, setBotForm] = useState({ bot_name: "", username: "", description: "" });
  const [autoReplyForm, setAutoReplyForm] = useState({ trigger_keyword: "", reply_text: "" });
  const [selectedBot, setSelectedBot] = useState(null);
  const [radioForm, setRadioForm] = useState({ name: "", stream_url: "", genre: "" });
  const [announcementForm, setAnnouncementForm] = useState({ title: "", body: "", priority: "normal" });
  const [voiceForm, setVoiceForm] = useState({ name: "", channel_type: "voice" });
  const [userSearch, setUserSearch] = useState("");
  const [muted, setMuted] = useState(false);
  const [blocked, setBlocked] = useState(false);
  const [followed, setFollowed] = useState(false);

  const selected = conversations.find((c) => c.user_id === selectedId || c.id === selectedId);
  const selectedMessages = messages[selected?.id || selectedId] || [];
  const messagesEndRef = useRef(null);

  useEffect(() => {
    apiRequest("me").then((r) => {
      if (r.user) {
        setLiveUser(r.user);
        loadConversations();
        loadRooms();
        loadOnlineUsers();
      }
    }).catch(() => {});
  }, []);

  useEffect(() => {
    if (!liveUser) return;
    loadConversations();
    loadRooms();
    loadOnlineUsers();
    const interval = setInterval(() => {
      apiRequest("heartbeat").catch(() => {});
      loadOnlineUsers();
      loadConversations();
    }, 30000);
    return () => clearInterval(interval);
  }, [liveUser?.id]);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [selectedMessages.length]);

  function notify(message) { setToast(message); window.setTimeout(() => setToast(""), 2200); }

  async function loadConversations() {
    try {
      const r = await apiRequest("conversations");
      setConversations(r.items || []);
    } catch {}
  }

  async function loadRooms() {
    try {
      const r = await apiRequest("rooms");
      setRooms(r.items || []);
    } catch {}
  }

  async function loadOnlineUsers() {
    try {
      const r = await apiRequest("online_users");
      setOnlineUsers(r.items || []);
    } catch {}
  }

  async function loadMessages(convId) {
    try {
      const r = await apiRequest("messages", { query: { conversation_id: convId } });
      setMessages((prev) => ({ ...prev, [convId]: r.items || [] }));
    } catch {}
  }

  async function loadAdminData(tab) {
    try {
      if (tab === "dashboard") {
        const r = await apiRequest("admin_stats");
        setAdminStats(r.stats);
      } else if (tab === "users") {
        const r = await apiRequest("admin_users", { query: { search: adminSearch, role: adminRoleFilter } });
        setAdminUsers(r.items || []);
      } else if (tab === "rooms") {
        const r = await apiRequest("admin_rooms");
        setAdminRooms(r.items || []);
      } else if (tab === "logs") {
        const r = await apiRequest("admin_logs");
        setAdminLogs(r.items || []);
      } else if (tab === "reports") {
        const r = await apiRequest("admin_reports");
        setAdminReports(r.items || []);
      } else if (tab === "settings") {
        const r = await apiRequest("admin_settings");
        setAdminSettings(r.settings || {});
      } else if (tab === "bots") {
        const r = await apiRequest("admin_bots");
        setAdminBots(r.items || []);
      } else if (tab === "radio") {
        const r = await apiRequest("admin_radio_stations");
        setAdminRadio(r.items || []);
      } else if (tab === "announcements") {
        const r = await apiRequest("admin_announcements");
        setAdminAnnouncements(r.items || []);
      } else if (tab === "ipbans") {
        const r = await apiRequest("admin_ip_bans");
        setAdminIpBans(r.items || []);
      }
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function loadAnnouncements() {
    try {
      const r = await apiRequest("announcements");
      setAnnouncements(r.items || []);
    } catch {}
  }

  async function loadMyBots() {
    try {
      const r = await apiRequest("my_bots");
      setMyBots(r.items || []);
    } catch {}
  }

  async function loadRadioStations() {
    try {
      const r = await apiRequest("radio_stations");
      setRadioStations(r.items || []);
    } catch {}
  }

  function selectConversation(id) {
    setSelectedId(id);
    setActiveTab("chats");
    setMobileSidebar(false);
    const conv = conversations.find((c) => c.id === id || c.user_id === id);
    if (conv) {
      loadMessages(conv.id);
      setChatClosed(!!conv.is_closed);
    }
  }

  async function sendMessage(event) {
    event?.preventDefault();
    const text = draft.trim();
    if (!text || !selected) return;
    try {
      const r = await apiRequest("send_message", { method: "POST", body: { conversation_id: selected.id, body: text } });
      setMessages((prev) => ({
        ...prev,
        [selected.id]: [...(prev[selected.id] || []), { id: r.id, sender_id: liveUser.id, body: text, message_type: "text", color: getRoleColor(liveUser.role), created_at: new Date().toISOString(), display_name: liveUser.display_name, username: liveUser.username }],
      }));
      setDraft("");
    } catch (e) { notify("Mesaj gönderilemedi: " + e.message); }
  }

  function startCall(type) { setCallType(type); notify(`${type === "voice" ? "Sesli" : "Görüntülü"} arama başlatılıyor`); }

  async function submitAuth(event) {
    event.preventDefault();
    setAuthError("");
    try {
      const result = await apiRequest(authMode, {
        method: "POST",
        body: authMode === "login" ? { identity: authForm.identity, password: authForm.password } : authForm,
      });
      setLiveUser(result.user);
      setShowAccount(false);
      notify(authMode === "login" ? "Giriş yapıldı" : "Hesabın oluşturuldu");
      loadConversations();
      loadRooms();
    } catch (error) { setAuthError(error.message); }
  }

  async function submitGoogleLogin() {
    try {
      const result = await apiRequest("google_login", { method: "POST", body: { google_id: "demo_" + Date.now(), email: "demo@novatalk.app", display_name: "Google Kullanıcı", avatar_url: "" } });
      setLiveUser(result.user);
      setShowAccount(false);
      notify("Google ile giriş yapıldı");
      loadConversations();
      loadRooms();
    } catch (error) { setAuthError(error.message); }
  }

  async function handleAvatarUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append("avatar", file);
    try {
      const response = await fetch("/api.php?action=upload_avatar", { method: "POST", body: formData, credentials: "include" });
      const result = await response.json();
      if (result.ok) {
        setLiveUser((prev) => ({ ...prev, avatar_url: result.avatar_url }));
        notify("Avatar güncellendi");
        setShowAvatarUpload(false);
      } else { notify("Yükleme başarısız: " + (result.error || "")); }
    } catch { notify("Yükleme hatası"); }
  }

  async function openAdminPanel() {
    setShowAdmin(true);
    setAdminTab("dashboard");
    loadAdminData("dashboard");
  }

  async function switchAdminTab(tab) {
    setAdminTab(tab);
    loadAdminData(tab);
  }

  async function updateAdminSetting(key, value) {
    try {
      await apiRequest("admin_settings", { method: "POST", body: { [key]: value } });
      setAdminSettings((prev) => ({ ...prev, [key]: value }));
      notify("Ayar güncellendi");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function createBot() {
    try {
      await apiRequest("create_bot", { method: "POST", body: botForm });
      notify("Bot oluşturuldu");
      setShowBotModal(false);
      setBotForm({ bot_name: "", username: "", description: "" });
      loadAdminData("bots");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function addAutoReply(botId) {
    try {
      await apiRequest("add_auto_reply", { method: "POST", body: { bot_id: botId, ...autoReplyForm } });
      notify("Otomatik cevap eklendi");
      setAutoReplyForm({ trigger_keyword: "", reply_text: "" });
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function addRadioStation() {
    try {
      await apiRequest("add_radio_station", { method: "POST", body: radioForm });
      notify("Radyo istasyonu eklendi");
      setShowRadioModal(false);
      setRadioForm({ name: "", stream_url: "", genre: "" });
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function createAnnouncement() {
    try {
      await apiRequest("admin_announcements", { method: "POST", body: announcementForm });
      notify("Duyuru oluşturuldu");
      setShowAnnouncementModal(false);
      setAnnouncementForm({ title: "", body: "", priority: "normal" });
      loadAdminData("announcements");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function createVoiceChannel() {
    if (!selectedRoom) return;
    try {
      await apiRequest("create_voice_channel", { method: "POST", body: { room_id: selectedRoom.id, ...voiceForm } });
      notify("Sesli kanal oluşturuldu");
      setShowVoiceModal(false);
      setVoiceForm({ name: "", channel_type: "voice" });
      loadVoiceChannels(selectedRoom.id);
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function loadVoiceChannels(roomId) {
    try {
      const r = await apiRequest("voice_channels", { query: { room_id: roomId } });
      setVoiceChannels(r.items || []);
    } catch {}
  }

  async function joinVoiceChannel(channelId) {
    try {
      await apiRequest("join_voice_channel", { method: "POST", body: { channel_id: channelId } });
      setCurrentVoiceChannel(channelId);
      notify("Sesli kanala katıldın");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function leaveVoiceChannel() {
    try {
      await apiRequest("leave_voice_channel", { method: "POST" });
      setCurrentVoiceChannel(null);
      notify("Sesli kanaldan ayrıldın");
    } catch {}
  }

  async function updateUserRole(userId, role) {
    try {
      await apiRequest("admin_update_user", { method: "POST", body: { user_id: userId, role } });
      notify("Kullanıcı rolü güncellendi");
      loadAdminData("users");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function toggleUserBan(userId, ban) {
    try {
      await apiRequest("admin_update_user", { method: "POST", body: { user_id: userId, is_banned: ban } });
      notify(ban ? "Kullanıcı engellendi" : "Engel kaldırıldı");
      loadAdminData("users");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function toggleUserActive(userId, active) {
    try {
      await apiRequest("admin_update_user", { method: "POST", body: { user_id: userId, is_active: active } });
      notify(active ? "Kullanıcı aktif edildi" : "Kullanıcı deaktif edildi");
      loadAdminData("users");
    } catch (e) { notify("Hata: " + e.message); }
  }

  async function warnUser(userId, reason, severity) {
    try {
      await apiRequest("admin_warn_user", { method: "POST", body: { user_id: userId, reason, severity } });
      notify("Kullanıcı uyarıldı");
    } catch (e) { notify("Hata: " + e.message); }
  }

  function renderAdminPanel() {
    if (!liveUser || !["admin", "super_admin", "root", "moderator"].includes(liveUser.role)) return null;
    const isRoot = liveUser.role === "root";
    const isSuperAdmin = ["super_admin", "root"].includes(liveUser.role);
    const tabs = [
      { id: "dashboard", label: "Gösterge Paneli", icon: I.layout(15) },
      { id: "users", label: "Kullanıcılar", icon: I.users(15) },
      { id: "rooms", label: "Odalar", icon: I.radio(15) },
      { id: "bots", label: "Botlar", icon: I.bot(15) },
      { id: "radio", label: "Radyo", icon: I.headphones(15) },
      { id: "reports", label: "Raporlar", icon: I.warning(15) },
      { id: "logs", label: "Loglar", icon: I.clipboardList(15) },
    ];
    if (isSuperAdmin) tabs.push({ id: "announcements", label: "Duyurular", icon: I.bell(15) });
    if (isRoot) tabs.push({ id: "settings", label: "Ayarlar", icon: I.settings(15) }, { id: "ipbans", label: "IP Ban", icon: I.ban(15) });

    return (
      <Modal title="Yönetim Merkezi" wide onClose={() => setShowAdmin(false)}>
        <div className="admin-tabs">
          {tabs.map((t) => (
            <button key={t.id} className={adminTab === t.id ? "active" : ""} onClick={() => switchAdminTab(t.id)}>
              {t.icon} {t.label}
            </button>
          ))}
        </div>
        <div className="admin-content-area">
          {adminTab === "dashboard" && adminStats && (
            <div className="admin-dashboard">
              <div className="admin-stat-grid">
                <div className="admin-stat"><span className="stat-icon violet">I.users(20)</span><div><strong>{adminStats.users}</strong><small>Toplam Üye</small></div></div>
                <div className="admin-stat"><span className="stat-icon cyan">I.globe(20)</span><div><strong>{adminStats.online}</strong><small>Çevrimiçi</small></div></div>
                <div className="admin-stat"><span className="stat-icon amber">I.radio(20)</span><div><strong>{adminStats.rooms}</strong><small>Canlı Oda</small></div></div>
                <div className="admin-stat"><span className="stat-icon coral">{I.messageCircle(20)}</span><div><strong>{adminStats.messages_today}</strong><small>Bugünkü Mesaj</small></div></div>
                <div className="admin-stat"><span className="stat-icon violet">I.bot(20)</span><div><strong>{adminStats.bots}</strong><small>Aktif Bot</small></div></div>
                <div className="admin-stat"><span className="stat-icon cyan">I.headphones(20)</span><div><strong>{adminStats.radio_stations}</strong><small>Radyo İstasyonu</small></div></div>
                <div className="admin-stat"><span className="stat-icon coral">I.warning(20)</span><div><strong>{adminStats.reports_open}</strong><small>Açık Rapor</small></div></div>
                <div className="admin-stat"><span className="stat-icon amber">I.ban(20)</span><div><strong>{adminStats.banned_users}</strong><small>Engellenen</small></div></div>
              </div>
            </div>
          )}
          {adminTab === "users" && (
            <div className="admin-users-section">
              <div className="admin-toolbar">
                <input placeholder="Kullanıcı ara..." value={adminSearch} onChange={(e) => setAdminSearch(e.target.value)} onKeyDown={(e) => e.key === "Enter" && loadAdminData("users")} />
                <select value={adminRoleFilter} onChange={(e) => { setAdminRoleFilter(e.target.value); }}>
                  <option value="">Tüm Roller</option>
                  <option value="user">Kullanıcı</option>
                  <option value="moderator">Moderatör</option>
                  <option value="admin">Admin</option>
                  <option value="super_admin">Süper Admin</option>
                  <option value="root">Root</option>
                </select>
                <button onClick={() => loadAdminData("users")}>I.search(14) Ara</button>
              </div>
              <div className="admin-user-list">
                {adminUsers.map((u) => (
                  <div className="admin-user-row" key={u.id}>
                    <Avatar person={u} size="sm" showStatus />
                    <div className="admin-user-info">
                      <strong style={{ color: getRoleColor(u.role) }}>{u.display_name}</strong>
                      <span>@{u.username} · {u.email}</span>
                      <RoleBadge role={u.role} />
                    </div>
                    <div className="admin-user-actions">
                      {isSuperAdmin && (
                        <select value={u.role} onChange={(e) => updateUserRole(u.id, e.target.value)}>
                          <option value="user">Kullanıcı</option>
                          <option value="moderator">Moderatör</option>
                          <option value="admin">Admin</option>
                          {isRoot && <option value="super_admin">Süper Admin</option>}
                        </select>
                      )}
                      <button className={u.is_banned ? "btn-danger" : "btn-warning"} onClick={() => toggleUserBan(u.id, !u.is_banned)}>
                        {u.is_banned ? "Engeli Kaldır" : "Engelle"}
                      </button>
                      <button className={u.is_active ? "btn-success" : "btn-secondary"} onClick={() => toggleUserActive(u.id, !u.is_active)}>
                        {u.is_active ? "Deaktif" : "Aktif"}
                      </button>
                      <button className="btn-info" onClick={() => {
                        const reason = prompt("Uyarı nedeni:");
                        if (reason) warnUser(u.id, reason, "medium");
                      }}>Uyar</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
          {adminTab === "rooms" && (
            <div className="admin-room-list">
              {adminRooms.map((r) => (
                <div className="admin-room-row" key={r.id}>
                  <div className="admin-room-info">
                    <strong>{r.name}</strong>
                    <span>{r.category} · {r.member_count} üye · {r.host_name}</span>
                    <span>{r.is_live ? "🟢 Canlı" : "⚫ Kapalı"} · {r.is_hidden ? "Gizli" : "Açık"}</span>
                  </div>
                  <div className="admin-room-actions">
                    <button onClick={() => apiRequest("admin_update_room", { method: "POST", body: { room_id: r.id, name: r.name, description: r.description, category: r.category, is_live: !r.is_live, is_hidden: r.is_hidden } }).then(() => { notify("Oda durumu güncellendi"); loadAdminData("rooms"); })}>
                      {r.is_live ? "Kapat" : "Canlı Yap"}
                    </button>
                    <button className="btn-danger" onClick={() => { if (confirm("Oda silinecek emin misin?")) { apiRequest("admin_delete_room", { method: "POST", body: { room_id: r.id } }).then(() => { notify("Oda silindi"); loadAdminData("rooms"); }); } }}>Sil</button>
                  </div>
                </div>
              ))}
            </div>
          )}
          {adminTab === "bots" && (
            <div className="admin-bots-section">
              <button className="btn-primary" onClick={() => setShowBotModal(true)}>+ Yeni Bot Oluştur</button>
              <div className="admin-bot-list">
                {adminBots.map((b) => (
                  <div className="admin-bot-row" key={b.id}>
                    {I.bot(20)}
                    <div className="admin-bot-info">
                      <strong>{b.bot_name}</strong>
                      <span>@{b.username} · Sahibi: {b.owner_name}</span>
                      <span>{b.is_active ? "Aktif" : "Pasif"} · {b.reply_count || 0} otomatik cevap</span>
                    </div>
                    <button className="btn-danger" onClick={() => apiRequest("admin_delete_bot", { method: "POST", body: { bot_id: b.id } }).then(() => { notify("Bot silindi"); loadAdminData("bots"); })}>Sil</button>
                  </div>
                ))}
              </div>
            </div>
          )}
          {adminTab === "radio" && (
            <div className="admin-radio-section">
              {adminRadio.map((s) => (
                <div className="admin-radio-row" key={s.id}>
                  {I.headphones(18)}
                  <div className="admin-radio-info">
                    <strong>{s.name}</strong>
                    <span>{s.genre || 'Genel'} · {s.vote_count} oy · Ekleyen: {s.added_by_name}</span>
                  </div>
                  <div className="admin-radio-actions">
                    <button onClick={() => apiRequest("admin_update_radio", { method: "POST", body: { station_id: s.id, is_featured: !s.is_featured } }).then(() => { notify("Güncellendi"); loadAdminData("radio"); })}>
                      {s.is_featured ? "Öne Çıkarılmış" : "Öne Çıkar"}
                    </button>
                    <button className="btn-danger" onClick={() => apiRequest("admin_delete_radio", { method: "POST", body: { station_id: s.id } }).then(() => { notify("Silindi"); loadAdminData("radio"); })}>Sil</button>
                  </div>
                </div>
              ))}
            </div>
          )}
          {adminTab === "reports" && (
            <div className="admin-report-list">
              {adminReports.length === 0 && <div className="empty-state">Açık rapor yok</div>}
              {adminReports.map((r) => (
                <div className="admin-report-row" key={r.id}>
                  <div className="admin-report-info">
                    <strong>{r.reason}</strong>
                    <span>Raporlayan: {r.reporter_name} · Durum: {r.status}</span>
                    <small>{r.created_at}</small>
                  </div>
                  <div className="admin-report-actions">
                    <button onClick={() => apiRequest("admin_update_report", { method: "POST", body: { report_id: r.id, status: "reviewing" } }).then(() => loadAdminData("reports"))}>İncele</button>
                    <button onClick={() => apiRequest("admin_update_report", { method: "POST", body: { report_id: r.id, status: "resolved" } }).then(() => loadAdminData("reports"))}>Çözüldü</button>
                    <button onClick={() => apiRequest("admin_update_report", { method: "POST", body: { report_id: r.id, status: "dismissed" } }).then(() => loadAdminData("reports"))}>Reddet</button>
                  </div>
                </div>
              ))}
            </div>
          )}
          {adminTab === "logs" && (
            <div className="admin-log-list">
              {adminLogs.map((l) => (
                <div className="admin-log-row" key={l.id}>
                  <span className={`log-action log-${l.action}`}>{l.action}</span>
                  <div className="admin-log-info">
                    <strong>{l.entity_type} #{l.entity_id || '—'}</strong>
                    <span>{l.actor_name} · {l.ip_address || '—'}</span>
                    <small>{l.created_at}</small>
                  </div>
                </div>
              ))}
            </div>
          )}
          {adminTab === "announcements" && (
            <div className="admin-announcement-section">
              <button className="btn-primary" onClick={() => setShowAnnouncementModal(true)}>+ Yeni Duyuru</button>
              {adminAnnouncements.map((a) => (
                <div className="admin-announcement-row" key={a.id}>
                  <div className="admin-announcement-info">
                    <strong>{a.title}</strong>
                    <span>{a.body}</span>
                    <small>Öncelik: {a.priority} · {a.created_by_name} · {a.created_at}</small>
                  </div>
                  <button className="btn-danger" onClick={() => apiRequest("admin_delete_announcement", { method: "POST", body: { announcement_id: a.id } }).then(() => loadAdminData("announcements"))}>Sil</button>
                </div>
              ))}
            </div>
          )}
          {adminTab === "settings" && isRoot && (
            <div className="admin-settings-section">
              <div className="setting-row"><label>Site Adı</label><input value={adminSettings.site_name || ""} onChange={(e) => setAdminSettings({ ...adminSettings, site_name: e.target.value })} /><button onClick={() => updateAdminSetting("site_name", adminSettings.site_name)}>Kaydet</button></div>
              <div className="setting-row"><label>Kayıt Aktif</label><button className={adminSettings.registration_enabled === "1" ? "btn-success" : "btn-secondary"} onClick={() => updateAdminSetting("registration_enabled", adminSettings.registration_enabled === "1" ? "0" : "1")}>{adminSettings.registration_enabled === "1" ? "Açık" : "Kapalı"}</button></div>
              <div className="setting-row"><label>Google Giriş</label><button className={adminSettings.google_login_enabled === "1" ? "btn-success" : "btn-secondary"} onClick={() => updateAdminSetting("google_login_enabled", adminSettings.google_login_enabled === "1" ? "0" : "1")}>{adminSettings.google_login_enabled === "1" ? "Açık" : "Kapalı"}</button></div>
              <div className="setting-row"><label>Global Sohbet</label><button className={adminSettings.chat_global_enabled === "1" ? "btn-success" : "btn-secondary"} onClick={() => updateAdminSetting("chat_global_enabled", adminSettings.chat_global_enabled === "1" ? "0" : "1")}>{adminSettings.chat_global_enabled === "1" ? "Açık" : "Kapalı"}</button></div>
              <div className="setting-row"><label>Radyo</label><button className={adminSettings.radio_enabled === "1" ? "btn-success" : "btn-secondary"} onClick={() => updateAdminSetting("radio_enabled", adminSettings.radio_enabled === "1" ? "0" : "1")}>{adminSettings.radio_enabled === "1" ? "Açık" : "Kapalı"}</button></div>
              <div className="setting-row"><label>Sesli Sohbet</label><button className={adminSettings.voice_enabled === "1" ? "btn-success" : "btn-secondary"} onClick={() => updateAdminSetting("voice_enabled", adminSettings.voice_enabled === "1" ? "0" : "1")}>{adminSettings.voice_enabled === "1" ? "Açık" : "Kapalı"}</button></div>
              <div className="setting-row"><label>Maks Upload (MB)</label><input type="number" value={adminSettings.max_upload_mb || "50"} onChange={(e) => setAdminSettings({ ...adminSettings, max_upload_mb: e.target.value })} /><button onClick={() => updateAdminSetting("max_upload_mb", adminSettings.max_upload_mb)}>Kaydet</button></div>
              <div className="setting-row"><label>Bakım Modu</label><button className={adminSettings.maintenance_mode === "1" ? "btn-danger" : "btn-secondary"} onClick={() => updateAdminSetting("maintenance_mode", adminSettings.maintenance_mode === "1" ? "0" : "1")}>{adminSettings.maintenance_mode === "1" ? "AKTİF" : "Pasif"}</button></div>
              <div className="setting-row"><label>Hoş Geldin Mesajı</label><input value={adminSettings.welcome_message || ""} onChange={(e) => setAdminSettings({ ...adminSettings, welcome_message: e.target.value })} /><button onClick={() => updateAdminSetting("welcome_message", adminSettings.welcome_message)}>Kaydet</button></div>
            </div>
          )}
          {adminTab === "ipbans" && isRoot && (
            <div className="admin-ipban-section">
              <button className="btn-primary" onClick={() => { const ip = prompt("IP adresi:"); const reason = prompt("Neden:"); if (ip) apiRequest("admin_add_ip_ban", { method: "POST", body: { ip_address: ip, reason: reason || "" } }).then(() => { notify("IP banlandı"); loadAdminData("ipbans"); }); }}>+ IP Ban Ekle</button>
              {adminIpBans.map((b) => (
                <div className="admin-ipban-row" key={b.id}>
                  <span className="ip-address">{b.ip_address}</span>
                  <span>{b.reason || '—'} · {b.banned_by_name}</span>
                  <button className="btn-danger" onClick={() => apiRequest("admin_remove_ip_ban", { method: "POST", body: { ban_id: b.id } }).then(() => { notify("Ban kaldırıldı"); loadAdminData("ipbans"); })}>Kaldır</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </Modal>
    );
  }

  return (
    <div className="app-shell">
      <aside className={`sidebar ${mobileSidebar ? "sidebar-open" : ""}`}>
        <div className="brand-row">
          <div className="brand-mark"><span /><span /><span /></div>
          <div className="brand-copy"><strong>nova<span>talk</span></strong><small>canlı bağlantılar</small></div>
          <button className="icon-button mobile-close" onClick={() => setMobileSidebar(false)}>I.x(19)</button>
        </div>

        <div className="profile-compact" onClick={() => liveUser ? setShowAccount(true) : setShowAccount(true)}>
          {liveUser ? (
            <>
              <Avatar person={liveUser} size="sm" showStatus />
              <div>
                <strong>{liveUser.display_name}</strong>
                <span><i className="live-dot" /> {liveUser.is_online ? "çevrimiçi" : "çevrimdışı"}</span>
              </div>
              <RoleBadge role={liveUser.role} />
            </>
          ) : (
            <>
              <span className="avatar avatar-sm avatar-gradient">NT</span>
              <div><strong>Giriş Yap</strong><span>Hesabına giriş yap</span></div>
            </>
          )}
          {I.chevronDown(16)}
        </div>

        <nav className="primary-nav">
          <button className={activeTab === "chats" ? "active" : ""} onClick={() => setActiveTab("chats")}>I.messageCircle(18)<span>Sohbetler</span><b className="nav-count">{conversations.length}</b></button>
          <button className={activeTab === "rooms" ? "active" : ""} onClick={() => setActiveTab("rooms")}>I.radio(18)<span>Canlı odalar</span><em className="live-pill">CANLI</em></button>
          <button className={activeTab === "voice" ? "active" : ""} onClick={() => { setActiveTab("voice"); if (selectedRoom) loadVoiceChannels(selectedRoom.id); }}>I.headphones(18)<span>Sesli Sohbet</span></button>
          <button className={activeTab === "radio" ? "active" : ""} onClick={() => { setActiveTab("radio"); loadRadioStations(); }}>I.listMusic(18)<span>Radyo</span></button>
          <button className={activeTab === "bots" ? "active" : ""} onClick={() => { setActiveTab("bots"); loadMyBots(); }}>I.bot(18)<span>Botlarım</span></button>
          <button onClick={() => notify("Keşfet yakında")}>I.flame(18)<span>Keşfet</span></button>
        </nav>

        {activeTab === "chats" && (
          <>
            <div className="list-heading">
              <div><h1>Mesajlar</h1><span>Son sohbetlerin</span></div>
              <button className="icon-button" onClick={() => setShowSearch(true)}>I.search(17)</button>
            </div>
            <div className="conversation-list">
              {conversations.length === 0 && <div className="empty-list">Henüz sohbetin yok. Yeni biriyle başla!</div>}
              {conversations.map((conv) => (
                <button className={`conversation-item ${selected?.id === conv.id ? "selected" : ""}`} key={conv.id} onClick={() => selectConversation(conv.id)}>
                  <Avatar person={conv} showStatus size="md" />
                  <span className="conversation-copy">
                    <span className="conversation-top">
                      <strong style={{ color: getRoleColor(conv.user_role) }}>{conv.display_name}<RoleBadge role={conv.user_role} /></strong>
                      <time>{conv.last_message_at ? new Date(conv.last_message_at).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }) : ''}</time>
                    </span>
                    <span className="conversation-bottom">
                      <span>{conv.last_message || 'Mesaj yok'}</span>
                      {conv.unread_count > 0 && <b className="unread">{conv.unread_count}</b>}
                    </span>
                    {conv.is_closed && <span className="chat-locked-badge">I.lock(10) Kapalı</span>}
                  </span>
                </button>
              ))}
            </div>
          </>
        )}

        {activeTab === "rooms" && (
          <>
            <div className="list-heading">
              <div><h1>Canlı odalar</h1><span>{rooms.length} oda</span></div>
              <button className="icon-button" onClick={() => notify("Oda oluştur")}>I.plus(18)</button>
            </div>
            <div className="room-filters">
              {["Tümü", "Müzik", "Gündelik", "Seyahat", "Oyun"].map((f) => (
                <button key={f} className={roomFilter === f ? "active" : ""} onClick={() => setRoomFilter(f)}>{f}</button>
              ))}
            </div>
            <div className="room-list">
              {rooms.filter((r) => roomFilter === "Tümü" || r.category === roomFilter).map((room) => (
                <button className="room-card" key={room.id} onClick={() => { setSelectedRoom(room); loadVoiceChannels(room.id); notify(`${room.name} odasına katıldın`); }}>
                  <span className="room-icon room-cyan">{room.name[0]}</span>
                  <span className="room-card-copy">
                    <strong>{room.name}</strong>
                    <span>{room.host_name}</span>
                    <small>{room.member_count} üye · {room.category}</small>
                  </span>
                  {room.is_live && <span className="room-live"><i /> CANLI</span>}
                </button>
              ))}
            </div>
          </>
        )}

        {activeTab === "voice" && (
          <>
            <div className="list-heading">
              <div><h1>Sesli Sohbet</h1><span>{selectedRoom ? selectedRoom.name : 'Oda seç'}</span></div>
              {selectedRoom && liveUser && ["admin", "super_admin", "root"].includes(liveUser.role) && (
                <button className="icon-button" onClick={() => setShowVoiceModal(true)}>I.plus(18)</button>
              )}
            </div>
            {!selectedRoom ? (
              <div className="empty-list">Sesli sohbet için bir oda seç.</div>
            ) : voiceChannels.length === 0 ? (
              <div className="empty-list">Bu odada sesli kanal yok.</div>
            ) : (
              <div className="voice-channel-list">
                {voiceChannels.map((ch) => (
                  <div className="voice-channel-card" key={ch.id}>
                    <div className="voice-channel-header">
                      <span className={`voice-type voice-${ch.channel_type}`}>{ch.channel_type === "voice" ? I.mic(14) : I.video(14)}</span>
                      <strong>{ch.name}</strong>
                      <span>{ch.member_count}/{ch.max_users}</span>
                    </div>
                    <button className="voice-join-btn" onClick={() => joinVoiceChannel(ch.id)}>Katıl</button>
                  </div>
                ))}
              </div>
            )}
            {currentVoiceChannel && (
              <div className="voice-active-bar">
                <div className="voice-active-info">I.mic(16)<span>Sesli kanaldasın</span></div>
                <div className="voice-active-actions">
                  <button onClick={() => apiRequest("toggle_mute_voice", { method: "POST" }).then(() => notify("Mikrofon durumu değişti"))}>I.mic(16)</button>
                  <button onClick={() => apiRequest("toggle_deaf_voice", { method: "POST" }).then(() => notify("Hoparlör durumu değişti"))}>I.volumeX(16)</button>
                  <button className="btn-danger" onClick={leaveVoiceChannel}>I.phone(16)</button>
                </div>
              </div>
            )}
          </>
        )}

        {activeTab === "radio" && (
          <>
            <div className="list-heading">
              <div><h1>Radyo</h1><span>Müzik dinle</span></div>
              {liveUser && ["admin", "super_admin", "root"].includes(liveUser.role) && (
                <button className="icon-button" onClick={() => setShowRadioModal(true)}>I.plus(18)</button>
              )}
            </div>
            <div className="radio-station-list">
              {radioStations.length === 0 && <div className="empty-list">Henüz istasyon yok.</div>}
              {radioStations.map((s) => (
                <div className="radio-station-card" key={s.id}>
                  {I.headphones(20)}
                  <div className="radio-station-info">
                    <strong>{s.name}</strong>
                    <span>{s.genre || 'Genel'}</span>
                    <small>Ekleyen: {s.added_by_name}</small>
                  </div>
                  <div className="radio-station-actions">
                    <button onClick={() => apiRequest("vote_radio", { method: "POST", body: { station_id: s.id, vote: 1 } })}>I.arrowUp(14)</button>
                    <span className="vote-count">{s.vote_count}</span>
                    <button onClick={() => apiRequest("vote_radio", { method: "POST", body: { station_id: s.id, vote: -1 } })}>I.arrowDown(14)</button>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {activeTab === "bots" && (
          <>
            <div className="list-heading">
              <div><h1>Botlarım</h1><span>Otomatik cevap botları</span></div>
              <button className="icon-button" onClick={() => setShowBotModal(true)}>I.plus(18)</button>
            </div>
            <div className="bot-list">
              {myBots.length === 0 && <div className="empty-list">Henüz botun yok. Yeni bot oluştur!</div>}
              {myBots.map((b) => (
                <div className="bot-card" key={b.id}>
                  {I.bot(20)}
                  <div className="bot-info">
                    <strong>{b.bot_name}</strong>
                    <span>@{b.username} · {b.is_active ? "Aktif" : "Pasif"}</span>
                    <small>{b.reply_count || 0} otomatik cevap</small>
                  </div>
                  {selectedBot === b.id ? (
                    <div className="auto-reply-form">
                      <input placeholder="Tetikleme kelimesi" value={autoReplyForm.trigger_keyword} onChange={(e) => setAutoReplyForm({ ...autoReplyForm, trigger_keyword: e.target.value })} />
                      <input placeholder="Otomatik cevap" value={autoReplyForm.reply_text} onChange={(e) => setAutoReplyForm({ ...autoReplyForm, reply_text: e.target.value })} />
                      <button onClick={() => addAutoReply(b.id)}>Ekle</button>
                      <button onClick={() => setSelectedBot(null)}>Kapat</button>
                    </div>
                  ) : (
                    <button onClick={() => setSelectedBot(b.id)}>+ Cevap Ekle</button>
                  )}
                </div>
              ))}
            </div>
          </>
        )}

        <div className="sidebar-bottom">
          {liveUser && ["admin", "super_admin", "root", "moderator"].includes(liveUser.role) && (
            <button onClick={openAdminPanel}>I.layout(17) Admin paneli <RoleBadge role={liveUser.role} /></button>
          )}
          <button onClick={() => setShowSettings(true)}>I.settings(17) Ayarlar</button>
          <div className="sidebar-meta">
            <span>Nova Talk v2.0</span>
            <span>I.lock(11) Güvenli bağlantı</span>
          </div>
        </div>
      </aside>

      <main className="chat-workspace">
        <header className="topbar">
          <div className="mobile-menu-row">
            <button className="icon-button mobile-menu" onClick={() => setMobileSidebar(true)}>I.menu(20)</button>
            <span className="mobile-brand">nova<span>talk</span></span>
          </div>
          <div className="topbar-status">
            <span className="status-ring"><i /></span>
            <strong>Canlı</strong>
            <span>{onlineUsers.length} kişi çevrimiçi</span>
          </div>
          <div className="topbar-actions">
            <button className="icon-button" onClick={() => setShowSearch(true)}>I.search(18)</button>
            <button className="icon-button notification-button" onClick={() => { setShowNotifications(true); loadAnnouncements(); }}>I.bell(18)<i /></button>
            <button className="avatar avatar-xs" onClick={() => liveUser ? setShowAccount(true) : setShowAccount(true)}>
              {liveUser?.avatar_url ? <img src={liveUser.avatar_url} alt="" /> : (liveUser?.display_name || 'NT').slice(0, 2).toUpperCase()}
            </button>
          </div>
        </header>

        <div className="workspace-grid">
          <section className="chat-panel">
            {selected ? (
              <>
                <header className="chat-header">
                  <div className="chat-person">
                    <button className="mobile-back" onClick={() => setMobileSidebar(true)}>I.arrowLeft(18)</button>
                    <Avatar person={selected} showStatus size="lg" />
                    <div>
                      <h2 style={{ color: getRoleColor(selected.user_role) }}>{selected.display_name} <RoleBadge role={selected.user_role} /></h2>
                      <p><span className={`status-text ${selected.is_online ? 'status-online' : ''}`}>{selected.is_online ? "şimdi çevrimiçi" : "çevrimdışı"}</span> · @{selected.username}</p>
                    </div>
                  </div>
                  <div className="chat-actions">
                    <button className="icon-button" onClick={() => startCall("voice")} title="Sesli ara">I.phone(18)</button>
                    <button className="icon-button" onClick={() => startCall("video")} title="Görüntülü ara">I.video(19)</button>
                    <button className="icon-button" onClick={() => { if (liveUser && ["admin", "super_admin", "root"].includes(liveUser.role)) { apiRequest("close_chat", { method: "POST", body: { conversation_id: selected.id } }).then(() => { setChatClosed(!chatClosed); notify(chatClosed ? "Sohbet açıldı" : "Sohbet kapatıldı"); }); } else { notify("Yetkin yok"); } }} title="Sohbeti kapat/aç">I.lock(18)</button>
                    <button className="icon-button" onClick={() => notify("Daha fazla")} title="Daha fazla">I.moreH(20)</button>
                  </div>
                </header>
                <div className="chat-wall">
                  <div className="wall-pattern" />
                  <div className="safety-note">I.lock(12) Mesajların uçtan uca korunuyor</div>
                  {chatClosed && <div className="chat-locked-notice">I.lock(16) Bu sohbet yönetici tarafından kapatıldı</div>}
                  <div className="message-stack">
                    {selectedMessages.map((message) => (
                      <div className={`message-row ${message.sender_id === liveUser?.id ? "mine" : ""}`} key={message.id}>
                        {message.sender_id !== liveUser?.id && <Avatar person={{ display_name: message.display_name, avatar_url: message.avatar_url }} size="xs" />}
                        <div className="bubble-wrap">
                          {message.sender_id !== liveUser?.id && <span className="message-sender" style={{ color: message.color || getRoleColor(message.sender_role) }}>{message.display_name}</span>}
                          <div className="message-bubble" style={message.sender_id === liveUser?.id ? { borderColor: (message.color || getRoleColor(liveUser?.role)) + '40', background: (message.color || getRoleColor(liveUser?.role)) + '20' } : {}}>
                            {message.message_type === "gif" ? <img src={message.body} alt="GIF" className="message-gif" /> : message.body}
                          </div>
                          <span className="message-time">{message.created_at ? new Date(message.created_at).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }) : ''} {message.is_pinned && I.pin(11)}</span>
                        </div>
                      </div>
                    ))}
                    <div ref={messagesEndRef} />
                  </div>
                </div>
                <form className="composer" onSubmit={sendMessage}>
                  <button type="button" className="composer-icon" onClick={() => notify("Dosya seçici")}>I.paperclip(20)</button>
                  <button type="button" className="composer-icon desktop-only" onClick={() => notify("Fotoğraf gönder")}>I.image(19)</button>
                  <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={chatClosed ? "Sohbet kapatıldı" : `${selected.display_name} kişisine mesaj yaz...`} disabled={chatClosed} />
                  <button type="button" className="gif-button" onClick={() => setDraft((v) => `${v} GIF `)}>GIF</button>
                  <button type="button" className="composer-icon" onClick={() => setDraft((v) => `${v} 😊`)}>I.smile(20)</button>
                  {draft.trim() ? <button className="send-button" type="submit">I.send(18)</button> : <button className="voice-send" type="button" onClick={() => notify("Ses kaydı")}>I.mic(19)</button>}
                </form>
              </>
            ) : (
              <div className="chat-empty-state">
                I.messageCircle(48)
                <h2>Nova Talk'a Hoş Geldin</h2>
                <p>Sohbet etmeye başlamak için sol panelden bir konuşma seç veya yeni biriyle tanış.</p>
                {announcements.length > 0 && (
                  <div className="announcement-banner">
                    I.bell(16)
                    <strong>{announcements[0].title}</strong>
                    <span>{announcements[0].body}</span>
                  </div>
                )}
              </div>
            )}
          </section>

          <aside className="details-panel">
            {selected ? (
              <>
                <div className="details-heading"><span>Sohbet bilgisi</span></div>
                <div className="profile-hero">
                  <div className="profile-avatar-wrap">
                    <Avatar person={selected} size="xxl" />
                  </div>
                  <h2 style={{ color: getRoleColor(selected.user_role) }}>{selected.display_name}</h2>
                  <RoleBadge role={selected.user_role} />
                  <span className="profile-handle">@{selected.username}</span>
                  <span className={`status-text ${selected.is_online ? 'status-online' : ''}`}>{selected.is_online ? "Çevrimiçi" : "Çevrimdışı"}</span>
                </div>
                <div className="detail-section">
                  <div className="section-label">Hızlı işlemler</div>
                  <button className="quick-row" onClick={() => { setMuted(!muted); notify(muted ? "Bildirimler açıldı" : "Bildirimler sessize alındı"); }}>
                    {muted ? I.bell(17) : I.bellOff(17)} <span>Bildirimleri {muted ? "aç" : "sessize al"}</span>
                  </button>
                  <button className="quick-row" onClick={() => { setBlocked(!blocked); notify(blocked ? "Engel kaldırıldı" : "Kullanıcı engellendi"); }}>
                    I.ban(17) <span>{blocked ? "Engeli kaldır" : "Engelle"}</span>
                  </button>
                  <button className="quick-row" onClick={() => { setFollowed(!followed); notify(followed ? "Takipten çıkıldı" : "Takip ediliyor"); }}>
                    I.userRoundPlus(17) <span>{followed ? "Takipte" : "Takip et"}</span>
                  </button>
                </div>
              </>
            ) : (
              <div className="details-empty">
                I.userRound(32)
                <span>Kullanıcı bilgisi için sohbet seç</span>
              </div>
            )}
          </aside>
        </div>

        <nav className="mobile-nav">
          <button className={activeTab === "chats" ? "active" : ""} onClick={() => { setActiveTab("chats"); setMobileSidebar(true); }}>I.messageCircle(19)<span>Sohbetler</span></button>
          <button className={activeTab === "rooms" ? "active" : ""} onClick={() => { setActiveTab("rooms"); setMobileSidebar(true); }}>I.radio(19)<span>Odalar</span></button>
          <button className={activeTab === "voice" ? "active" : ""} onClick={() => { setActiveTab("voice"); setMobileSidebar(true); }}>I.headphones(19)<span>Sesli</span></button>
          <button className={activeTab === "radio" ? "active" : ""} onClick={() => { setActiveTab("radio"); setMobileSidebar(true); }}>I.listMusic(19)<span>Radyo</span></button>
          <button onClick={() => liveUser ? setShowAccount(true) : setShowAccount(true)}>I.userRound(19)<span>Profil</span></button>
        </nav>
      </main>

      {showSearch && (
        <Modal title="Sohbetlerde ara" onClose={() => setShowSearch(false)}>
          <div className="modal-search">I.search(18)<input autoFocus placeholder="İsim veya kullanıcı adı ara..." value={search} onChange={(e) => setSearch(e.target.value)} /></div>
          <div className="search-result-label">{search ? "Sonuçlar" : "Son aramalar"}</div>
          <div className="modal-results">
            {conversations.filter((c) => !search || `${c.display_name} ${c.username}`.toLowerCase().includes(search.toLowerCase())).slice(0, 5).map((c) => (
              <button key={c.id} onClick={() => { selectConversation(c.id); setShowSearch(false); }}>
                <Avatar person={c} size="sm" /><span><strong>{c.display_name}</strong><small>{c.last_message || ''}</small></span>
              </button>
            ))}
          </div>
        </Modal>
      )}

      {showNotifications && (
        <Modal title="Bildirimler" onClose={() => setShowNotifications(false)}>
          <div className="notification-list">
            {announcements.length === 0 && <div className="empty-list">Bildirim yok</div>}
            {announcements.map((a) => (
              <div className="notification-item" key={a.id}>
                <span className="notification-icon violet">I.bell(16)</span>
                <span><strong>{a.title}</strong><small>{a.body}</small></span>
              </div>
            ))}
          </div>
          <button className="modal-secondary" onClick={() => setShowNotifications(false)}>Tamam</button>
        </Modal>
      )}

      {showAccount && (
        <Modal title="Hesabım" onClose={() => setShowAccount(false)}>
          {liveUser ? (
            <>
              <div className="account-card">
                <Avatar person={liveUser} size="xl" />
                <div>
                  <strong style={{ color: getRoleColor(liveUser.role) }}>{liveUser.display_name}</strong>
                  <span>@{liveUser.username} <RoleBadge role={liveUser.role} /></span>
                  <small><i className="live-dot" /> Çevrimiçi</small>
                </div>
              </div>
              <div className="account-menu">
                <button onClick={() => setShowAvatarUpload(true)}>I.image(17) Avatar değiştir I.chevronDown(15)</button>
                <button onClick={() => notify("Profil düzenleme")}>I.userRound(17) Profilimi düzenle I.chevronDown(15)</button>
                <button onClick={() => setShowSettings(true)}>I.settings(17) Ayarlar I.chevronDown(15)</button>
                <button onClick={async () => { await apiRequest("logout", { method: "POST" }).catch(() => {}); setLiveUser(null); setConversations([]); notify("Oturum kapatıldı"); }}>I.logOut(17) Oturumu kapat</button>
              </div>
            </>
          ) : (
            <form className="auth-form" onSubmit={submitAuth}>
              <div className="auth-intro"><span className="auth-icon">I.lock(18)</span><div><strong>{authMode === "login" ? "Hesabına giriş yap" : "Nova Talk'a katıl"}</strong><span>PHP sunucusunda güvenle saklanır.</span></div></div>
              {authMode === "register" && <><label>Görünen ad<input required value={authForm.display_name} onChange={(e) => setAuthForm({ ...authForm, display_name: e.target.value })} placeholder="Adın" /></label><label>Kullanıcı adı<input required value={authForm.username} onChange={(e) => setAuthForm({ ...authForm, username: e.target.value.toLowerCase() })} placeholder="kullanici_adin" /></label><label>E-posta<input required type="email" value={authForm.email} onChange={(e) => setAuthForm({ ...authForm, email: e.target.value })} placeholder="ornek@mail.com" /></label></>}
              {authMode === "login" ? <label>E-posta veya kullanıcı adı<input required value={authForm.identity} onChange={(e) => setAuthForm({ ...authForm, identity: e.target.value })} placeholder="kullanici_adin" /></label> : null}
              <label>Şifre<input required minLength={8} type="password" value={authForm.password} onChange={(e) => setAuthForm({ ...authForm, password: e.target.value })} placeholder="En az 8 karakter" /></label>
              {authError && <div className="auth-error">{authError}</div>}
              <button className="auth-submit" type="submit">{authMode === "login" ? "Giriş yap" : "Hesap oluştur"} I.arrowLeft(15)</button>
              <button className="auth-switch" type="button" onClick={() => { setAuthMode(authMode === "login" ? "register" : "login"); setAuthError(""); }}>{authMode === "login" ? "Hesabın yok mu? Kayıt ol" : "Zaten hesabın var mı? Giriş yap"}</button>
              <div className="auth-divider"><span>veya</span></div>
              <button className="google-login-btn" type="button" onClick={submitGoogleLogin}>I.globe(16) Google ile Giriş Yap</button>
            </form>
          )}
        </Modal>
      )}

      {showSettings && (
        <Modal title="Ayarlar" onClose={() => setShowSettings(false)}>
          <div className="settings-content">
            <div className="setting-section">
              <h3>Profil</h3>
              <label>Durum Mesajı<input value={liveUser?.status_message || ""} onChange={(e) => setLiveUser({ ...liveUser, status_message: e.target.value })} placeholder="Ne düşünüyorsun?" /></label>
              <label>Kişisel Renk<input type="color" value={liveUser?.custom_color || "#45d6c4"} onChange={(e) => setLiveUser({ ...liveUser, custom_color: e.target.value })} /></label>
              <button className="btn-primary" onClick={() => apiRequest("update_profile", { method: "POST", body: { status_message: liveUser?.status_message, custom_color: liveUser?.custom_color } }).then(() => notify("Profil güncellendi"))}>Kaydet</button>
            </div>
            <div className="setting-section">
              <h3>Bildirimler</h3>
              <div className="setting-toggle"><span>Sesli bildirimler</span><button className={muted ? "btn-secondary" : "btn-success"} onClick={() => setMuted(!muted)}>{muted ? "Kapalı" : "Açık"}</button></div>
            </div>
          </div>
        </Modal>
      )}

      {showAdmin && renderAdminPanel()}

      {showBotModal && (
        <Modal title="Yeni Bot Oluştur" onClose={() => setShowBotModal(false)}>
          <div className="modal-form">
            <label>Bot Adı<input value={botForm.bot_name} onChange={(e) => setBotForm({ ...botForm, bot_name: e.target.value })} placeholder="My Bot" /></label>
            <label>Kullanıcı Adı<input value={botForm.username} onChange={(e) => setBotForm({ ...botForm, username: e.target.value.toLowerCase() })} placeholder="my_bot" /></label>
            <label>Açıklama<textarea value={botForm.description} onChange={(e) => setBotForm({ ...botForm, description: e.target.value })} placeholder="Bot açıklaması" /></label>
            <button className="auth-submit" onClick={createBot}>Oluştur</button>
          </div>
        </Modal>
      )}

      {showRadioModal && (
        <Modal title="Radyo İstasyonu Ekle" onClose={() => setShowRadioModal(false)}>
          <div className="modal-form">
            <label>İstasyon Adı<input value={radioForm.name} onChange={(e) => setRadioForm({ ...radioForm, name: e.target.value })} placeholder="Radyo Adı" /></label>
            <label>Stream URL<input value={radioForm.stream_url} onChange={(e) => setRadioForm({ ...radioForm, stream_url: e.target.value })} placeholder="https://stream.example.com/radio.mp3" /></label>
            <label>Tür<input value={radioForm.genre} onChange={(e) => setRadioForm({ ...radioForm, genre: e.target.value })} placeholder="Pop, Rock, Jazz..." /></label>
            <button className="auth-submit" onClick={addRadioStation}>Ekle</button>
          </div>
        </Modal>
      )}

      {showAnnouncementModal && (
        <Modal title="Duyuru Oluştur" onClose={() => setShowAnnouncementModal(false)}>
          <div className="modal-form">
            <label>Başlık<input value={announcementForm.title} onChange={(e) => setAnnouncementForm({ ...announcementForm, title: e.target.value })} placeholder="Duyuru başlığı" /></label>
            <label>İçerik<textarea value={announcementForm.body} onChange={(e) => setAnnouncementForm({ ...announcementForm, body: e.target.value })} placeholder="Duyuru içeriği" /></label>
            <label>Öncelik<select value={announcementForm.priority} onChange={(e) => setAnnouncementForm({ ...announcementForm, priority: e.target.value })}><option value="low">Düşük</option><option value="normal">Normal</option><option value="high">Yüksek</option><option value="urgent">Acil</option></select></label>
            <button className="auth-submit" onClick={createAnnouncement}>Yayınla</button>
          </div>
        </Modal>
      )}

      {showVoiceModal && (
        <Modal title="Sesli Kanal Oluştur" onClose={() => setShowVoiceModal(false)}>
          <div className="modal-form">
            <label>Kanal Adı<input value={voiceForm.name} onChange={(e) => setVoiceForm({ ...voiceForm, name: e.target.value })} placeholder="Genel Sohbet" /></label>
            <label>Kanal Türü<select value={voiceForm.channel_type} onChange={(e) => setVoiceForm({ ...voiceForm, channel_type: e.target.value })}><option value="voice">Sesli</option><option value="video">Görüntülü</option><option value="stage">Sahne</option></select></label>
            <button className="auth-submit" onClick={createVoiceChannel}>Oluştur</button>
          </div>
        </Modal>
      )}

      {showAvatarUpload && (
        <Modal title="Avatar Değiştir" onClose={() => setShowAvatarUpload(false)}>
          <div className="avatar-upload-area">
            <p>GIF, PNG, JPG, WebP ve SVG dosyaları desteklenir. Boyut sınırı: {adminSettings.max_upload_mb || 50}MB</p>
            <input type="file" accept="image/*" onChange={handleAvatarUpload} />
          </div>
        </Modal>
      )}

      {callType && (
        <div className="call-overlay">
          <div className="call-card">
            <div className="call-glow" />
            <Avatar person={selected || { display_name: "?" }} size="xxl" />
            <span className="call-label">{callType === "voice" ? "Sesli arama" : "Görüntülü arama"}</span>
            <h2>{selected?.display_name || "Bilinmeyen"}</h2>
            <p>Bağlanıyor<span className="ellipsis">...</span></p>
            <div className="call-actions">
              <button className="call-action muted" onClick={() => notify("Mikrofon sessize alındı")}>I.mic(20)</button>
              <button className="call-action end" onClick={() => setCallType(null)}>I.phone(21)</button>
              <button className="call-action muted" onClick={() => notify("Hoparlör")}>I.volume2(20)</button>
            </div>
          </div>
        </div>
      )}

      {toast && <div className="toast">{I.check(16)} {toast}</div>}
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);