import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  X,
  Camera,
  Edit3,
  Check,
  Loader2,
  UserPlus,
  Trash2,
  Search,
  Crown,
  Users,
  ImageIcon,
  FileText,
  Link as LinkIcon,
  Play,
  Download,
  ExternalLink,
  Video
} from 'lucide-react';
import Cropper from 'react-easy-crop';
import { ChatApi } from '../../infrastructure/chatApi';
import { UserApi } from '../../../users/infrastructure/userApi';
import { useAuthStore } from '../../../auth/application/authStore';
import { useChatStore } from '../../application/chatStore';
import { useLang } from '../../../../core/infrastructure/i18n';
import { Chat, UserPresence, Message } from '../../../../core/domain/types';
import Avatar from '../../../../core/presentation/components/ui/Avatar';
import ConfirmModal from '../../../../core/presentation/components/ui/ConfirmModal';
import ImageLightbox from '../../../../core/presentation/components/ui/ImageLightbox';
import { getMediaUrl } from '../../../../core/utils/utils';
import { getCroppedImg } from '../../../../core/infrastructure/imageCrop';

interface GroupSettingsProps {
  chat: Chat;
  onClose: () => void;
  onGoToMessage?: (messageId: string, sequenceId?: number) => void;
}

export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSettingsProps) {
  const { user } = useAuthStore();
  const { updateChat } = useChatStore();
  const { t, lang } = useLang();

  const currentMember = chat.members.find((m) => m.user.id === user?.id);
  const [removeTargetId, setRemoveTargetId] = useState<string | null>(null);
  const isAdmin = ['admin', 'owner', 'Admin', 'Owner'].includes(currentMember?.role || '');

  const [isEditingName, setIsEditingName] = useState(false);
  const [isEditingDesc, setIsEditingDesc] = useState(false);
  const [groupName, setGroupName] = useState(chat.name || '');
  const [groupDesc, setGroupDesc] = useState(chat.description || '');
  const [isSaving, setIsSaving] = useState(false);
  const [avatarUploading, setAvatarUploading] = useState(false);
  const [showAddMember, setShowAddMember] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<UserPresence[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [activeTab, setActiveTab] = useState<'members' | 'gifs' | 'media' | 'files' | 'links'>('members');
  const [tabLoading, setTabLoading] = useState(false);
  const [sharedMedia, setSharedMedia] = useState<Message[]>([]);
  const [sharedGifs, setSharedGifs] = useState<Message[]>([]);
  const [sharedFiles, setSharedFiles] = useState<Message[]>([]);
  const [sharedLinks, setSharedLinks] = useState<Array<Message & { links?: string[] }>>([]);
  const [loadedTabs, setLoadedTabs] = useState<Set<string>>(new Set());
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  // Cropping states
  const [isCropping, setIsCropping] = useState(false);
  const [cropImage, setCropImage] = useState<string | null>(null);
  const [cropFile, setCropFile] = useState<File | null>(null);
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null);

  const fileInputRef = useRef<HTMLInputElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);

  // Keep local state in sync with chat prop
  useEffect(() => {
    setGroupName(chat.name || '');
    setGroupDesc(chat.description || '');
  }, [chat.name, chat.description]);

  // Search users to add
  useEffect(() => {
    if (!searchQuery.trim()) {
      setSearchResults([]);
      return;
    }
    const timer = setTimeout(async () => {
      try {
        setIsSearching(true);
        const results = await UserApi.searchUsers(searchQuery);
        // Filter out users already in the group
        const memberIds = new Set(chat.members.map((m) => m.user.id));
        setSearchResults(results.filter((u) => !memberIds.has(u.id)));
      } catch (e) {
        console.error(e);
      } finally {
        setIsSearching(false);
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery, chat.members]);

  const handleSaveName = async () => {
    if (!groupName.trim()) return;
    try {
      setIsSaving(true);
      const updatedChat = await ChatApi.updateGroup(chat.id, { name: groupName.trim() });
      updateChat(updatedChat);
      setIsEditingName(false);
    } catch (e) {
      console.error(e);
    } finally {
      setIsSaving(false);
    }
  };

  const handleSaveDesc = async () => {
    try {
      setIsSaving(true);
      const updatedChat = await ChatApi.updateGroup(chat.id, { description: groupDesc.trim() });
      updateChat(updatedChat);
      setIsEditingDesc(false);
    } catch (e) {
      console.error(e);
    } finally {
      setIsSaving(false);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        setCropImage(reader.result as string);
        setCropFile(file);
        setIsCropping(true);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleCropSave = async () => {
    if (!cropImage || !croppedAreaPixels) return;
    setAvatarUploading(true);
    try {
      const croppedFile = await getCroppedImg(cropImage, croppedAreaPixels);
      if (!croppedFile) throw new Error("Could not crop image");

      const updatedChat = await ChatApi.uploadGroupAvatar(chat.id, croppedFile);

      useChatStore.getState().updateChat({ ...chat, avatar: updatedChat.avatar });
      setIsCropping(false);
      setCropImage(null);
      setCropFile(null);
    } catch (err) {
      console.error('Failed to crop group avatar:', err);
      alert(t('error'));
    } finally {
      setAvatarUploading(false);
    }
  };

  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    try {
      setAvatarUploading(true);
      const updatedChat = await ChatApi.uploadGroupAvatar(chat.id, file);
      updateChat(updatedChat);
    } catch (e) {
      console.error(e);
    } finally {
      setAvatarUploading(false);
      e.target.value = '';
    }
  };

  const handleRemoveAvatar = async () => {
    try {
      setAvatarUploading(true);
      const updatedChat = await ChatApi.removeGroupAvatar(chat.id);
      updateChat(updatedChat);
    } catch (e) {
      console.error(e);
    } finally {
      setAvatarUploading(false);
    }
  };

  const handleAddMember = async (userId: string) => {
    try {
      const updatedChat = await ChatApi.addGroupMembers(chat.id, [userId]);
      updateChat(updatedChat);
      setSearchQuery('');
      setSearchResults([]);
    } catch (e) {
      console.error(e);
    }
  };

  const handleRemoveMember = async (userId: string) => {
    setRemoveTargetId(userId);
  };

  const confirmRemoveMember = async () => {
    if (!removeTargetId) return;
    try {
      const updatedChat = await ChatApi.removeGroupMember(chat.id, removeTargetId);
      updateChat(updatedChat);
    } catch (e) {
      console.error(e);
    }
    setRemoveTargetId(null);
  };

  const initials = (chat.name || 'G')
    .split(' ')
    .map((w: string) => w[0])
    .join('')
    .slice(0, 2)
    .toUpperCase();

  const loadTabData = async (tab: 'gifs' | 'media' | 'files' | 'links') => {
    if (loadedTabs.has(tab)) return;
    setTabLoading(true);
    try {
      const data = await ChatApi.getSharedMedia(chat.id, tab);
      if (tab === 'media') setSharedMedia(data);
      else if (tab === 'gifs') setSharedGifs(data);
      else if (tab === 'files') setSharedFiles(data);
      else setSharedLinks(data);
      setLoadedTabs(prev => new Set(prev).add(tab));
    } catch (e) {
      console.error('Failed to load shared', tab, e);
    } finally {
      setTabLoading(false);
    }
  };

  useEffect(() => {
    loadTabData('gifs');
    loadTabData('media');
    loadTabData('files');
    loadTabData('links');
  }, [chat.id]);

  const API_URL = import.meta.env.VITE_API_URL || '';
  const allMedia = sharedMedia.flatMap(msg => (msg.media || []).map(m => ({
    ...m,
    url: getMediaUrl(m.url),
    thumbnail: m.thumbnail ? getMediaUrl(m.thumbnail) : undefined,
    messageId: msg.id,
    createdAt: msg.createdAt,
    sequenceId: msg.sequenceId
  })));

  const allGifs = sharedGifs.flatMap(msg => (msg.media || []).map(m => ({
    ...m,
    url: getMediaUrl(m.url),
    thumbnail: m.thumbnail ? getMediaUrl(m.thumbnail) : undefined,
    messageId: msg.id,
    createdAt: msg.createdAt,
    sequenceId: msg.sequenceId
  })));

  const sortedMedia = [...allMedia].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
  const sortedGifs = [...allGifs].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
  const sortedFiles = [...sharedFiles].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
  const sortedLinks = [...sharedLinks].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());

  const renderGrouped = <T extends { createdAt: string }>(
    sortedItems: T[],
    renderItem: (item: T, originalIndex: number) => React.ReactNode,
    gridClass?: string
  ) => {
    let currentGroup: { dateStr: string; items: {item: T, idx: number}[] } | null = null;
    const groups: { dateStr: string; items: {item: T, idx: number}[] }[] = [];
    
    sortedItems.forEach((item, idx) => {
      const date = new Date(item.createdAt);
      const dateStr = date.toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { day: 'numeric', month: 'long', year: 'numeric' });
      if (currentGroup?.dateStr !== dateStr) {
        currentGroup = { dateStr, items: [] };
        groups.push(currentGroup);
      }
      currentGroup.items.push({item, idx});
    });

    return (
      <div className="flex flex-col gap-4 pb-4 px-1">
        {groups.map((g, i) => (
          <div key={i}>
            <div className="sticky top-0 z-10 bg-black/60 backdrop-blur-md px-3 py-1.5 mb-1.5 shadow-sm border-y border-white/5">
              <span className="text-[10px] font-bold text-knot-300 uppercase tracking-widest">{g.dateStr}</span>
            </div>
            <div className={gridClass || "flex flex-col gap-0.5"}>
              {g.items.map(({item, idx}) => renderItem(item, idx))}
            </div>
          </div>
        ))}
      </div>
    );
  };

  const tabsConfig = [
    { key: 'members' as const, label: t('membersCount') || 'Участники', icon: Users, count: chat.members.length },
    { key: 'gifs' as const, label: 'GIF', icon: Play, count: sortedGifs.length },
    { key: 'media' as const, label: t('mediaTab') || 'Медиа', icon: ImageIcon, count: sortedMedia.length },
    { key: 'files' as const, label: t('filesTab') || 'Файлы', icon: FileText, count: sortedFiles.flatMap(msg => msg.media || []).length },
    { key: 'links' as const, label: t('linksTab') || 'Ссылки', icon: LinkIcon, count: sortedLinks.flatMap(msg => msg.links || []).length },
  ];

  const availableTabs = tabsConfig.filter(tab => tab.key === 'members' || !loadedTabs.has(tab.key) || tab.count > 0);

  useEffect(() => {
    if (loadedTabs.size === 4 && availableTabs.length > 0 && !availableTabs.find(t => t.key === activeTab)) {
      setActiveTab(availableTabs[0].key);
    }
  }, [loadedTabs, activeTab]); // availableTabs removed from dependencies to avoid infinite loops since its reference runs on every render

  return (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/60 z-50"
        onClick={onClose}
      />
      <motion.div
        initial={{ opacity: 0, x: 50, scale: 0.95 }}
        animate={{ opacity: 1, x: 0, scale: 1 }}
        exit={{ opacity: 0, x: 50, scale: 0.95 }}
        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
        className="fixed inset-0 lg:inset-auto lg:right-3 lg:top-3 lg:bottom-3 w-full lg:w-[900px] lg:max-w-[calc(100%-24px)] bg-surface-secondary/90 backdrop-blur-3xl shadow-2xl shadow-black/80 border-none lg:border lg:border-white/5 lg:rounded-[2rem] z-50 flex flex-col overflow-hidden ring-1 ring-white/10"
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border/40">
          <h2 className="text-lg font-semibold text-white">{t('groupSettings')}</h2>
          <button
            onClick={onClose}
            className="p-1.5 rounded-xl text-zinc-400 hover:text-white hover:bg-surface-hover transition-colors"
          >
            <X size={18} />
          </button>
        </div>

        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Avatar */}
          <div className="flex-shrink-0 flex flex-col items-center py-6 px-6 overflow-y-auto max-h-[50%] custom-scrollbar">
            <div className="relative group">
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-knot-500/20 rounded-[3rem] blur-[40px] pointer-events-none" />
              <div className="relative z-10 p-1.5 rounded-[2.5rem] bg-gradient-to-br from-white/10 to-transparent backdrop-blur-md border border-white/10 shadow-2xl">
                <Avatar
                  src={chat.avatar ? getMediaUrl(chat.avatar) : null}
                  name={chat.name || '?'}
                  size="2xl"
                  className="shadow-inner"
                />
              </div>

              {isAdmin && (
                <>
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    disabled={avatarUploading}
                    className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity"
                  >
                    {avatarUploading ? (
                      <Loader2 size={32} className="text-white animate-spin" />
                    ) : (
                      <Camera size={32} className="text-white" />
                    )}
                  </button>
                  {chat.avatar && !avatarUploading && (
                    <button
                      onClick={async (e) => {
                        e.stopPropagation();
                        try {
                          const updatedChat = await ChatApi.removeGroupAvatar(chat.id);
                          updateChat(updatedChat);
                        } catch (e) {
                          console.error('Failed to remove avatar', e);
                        }
                      }}
                      className="absolute bottom-0 right-0 p-2 rounded-full bg-red-500/90 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
                    >
                      <Trash2 size={16} />
                    </button>
                  )}
                </>
              )}
            </div>

            <div className="mt-4 flex flex-col items-center gap-2">
              {isEditingName ? (
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    value={groupName}
                    onChange={(e) => setGroupName(e.target.value)}
                    className="bg-surface-tertiary border border-accent/30 rounded-xl px-4 py-2 text-lg font-bold text-white text-center focus:outline-none focus:border-accent"
                    autoFocus
                  />
                  <button
                    onClick={handleSaveName}
                    disabled={isSaving}
                    className="p-2 rounded-lg bg-accent text-white hover:bg-accent-light transition-colors"
                  >
                    {isSaving ? <Loader2 size={16} className="animate-spin" /> : <Check size={16} />}
                  </button>
                  <button
                    onClick={() => { setIsEditingName(false); setGroupName(chat.name || ''); }}
                    className="p-2 rounded-lg bg-surface-tertiary text-zinc-400 hover:text-white transition-colors"
                  >
                    <X size={16} />
                  </button>
                </div>
              ) : (
                <div 
                  className="group/name flex items-center gap-2 cursor-pointer"
                  onClick={() => isAdmin && setIsEditingName(true)}
                >
                  <h3 className="text-2xl font-bold text-white tracking-tight">
                    {chat.name || t('group')}
                  </h3>
                  {isAdmin && (
                    <Edit3 size={16} className="text-knot-400 opacity-0 group-hover/name:opacity-100 transition-opacity" />
                  )}
                </div>
              )}
              <p className="text-zinc-500 text-sm">
                {chat.members.length} {t('members')}
              </p>
            </div>

            {/* Description */}
            <div className="mt-6 w-full space-y-2">
              <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-1">
                {t('groupDescription')}
              </label>
                {isEditingDesc ? (
                  <div className="flex items-center gap-2">
                    <textarea
                      value={groupDesc}
                      onChange={(e) => setGroupDesc(e.target.value)}
                      className="flex-1 bg-surface-tertiary border border-accent/30 rounded-xl px-3 py-2 text-sm text-white focus:outline-none min-h-[80px]"
                      autoFocus
                    />
                    <div className="flex flex-col gap-2">
                      <button
                        onClick={handleSaveDesc}
                        disabled={isSaving}
                        className="p-2 rounded-lg bg-accent text-white hover:bg-accent-light transition-colors"
                      >
                        {isSaving ? <Loader2 size={16} className="animate-spin" /> : <Check size={16} />}
                      </button>
                      <button
                        onClick={() => { setIsEditingDesc(false); setGroupDesc(chat.description || ''); }}
                        className="p-2 rounded-lg bg-surface-tertiary text-zinc-400 hover:text-white transition-colors"
                      >
                        <X size={16} />
                      </button>
                    </div>
                  </div>
                ) : (
                  <div 
                    onClick={() => isAdmin && setIsEditingDesc(true)}
                    className={`group/desc relative p-3 rounded-xl border border-white/5 bg-white/5 transition-all ${isAdmin ? 'cursor-pointer hover:bg-white/10 hover:border-white/10' : ''}`}
                  >
                    <p className={`text-sm ${groupDesc ? 'text-zinc-300' : 'text-zinc-600 italic'}`}>
                      {groupDesc || t('noDescription')}
                    </p>
                    {isAdmin && (
                      <div className="absolute top-3 right-3 opacity-0 group-hover/desc:opacity-100 transition-opacity">
                        <Edit3 size={14} className="text-knot-400" />
                      </div>
                    )}
                  </div>
                )}
              </div>


          </div>


          {/* Media / Files / Links Tabs */}
          {availableTabs.length > 0 ? (
            <div className="mx-4 mb-6 border border-white/5 bg-black/20 rounded-2xl overflow-hidden backdrop-blur-xl flex flex-col flex-1 min-h-0">
              <div className="flex border-b border-white/5">
                {availableTabs.map((tab) => (
                  <button
                    key={tab.key}
                    onClick={() => setActiveTab(tab.key)}
                    className={`flex-1 flex flex-col items-center justify-center gap-2 py-4 text-[10px] font-black uppercase tracking-wider transition-all ${
                      activeTab === tab.key
                        ? 'bg-white/10 text-knot-400 shadow-[inset_0_-2px_0_0_#A855F7]'
                        : 'text-zinc-500 hover:text-zinc-400'
                    }`}
                  >
                    <div className="flex items-center gap-1.5 mb-0.5">
                      <tab.icon size={16} />
                      {(loadedTabs.has(tab.key) || tab.key === 'members') && <span className="text-xs bg-black/40 px-1.5 rounded-full">{tab.count}</span>}
                    </div>
                    <span className="truncate w-full px-1">{tab.label as string}</span>
                  </button>
                ))}
              </div>

              <div className="flex-1 overflow-y-auto custom-scrollbar">
              {tabLoading ? (
                <div className="flex items-center justify-center py-10">
                  <Loader2 size={24} className="text-zinc-500 animate-spin" />
                </div>
              ) : activeTab === 'members' ? (
          <div className="px-4 py-4 pt-2">
            <div className="flex items-center justify-between mb-3">
              <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">
                {t('membersCount')}
              </h4>
              {isAdmin && (
                <button
                  onClick={() => {
                    setShowAddMember(!showAddMember);
                    if (!showAddMember) {
                      setTimeout(() => searchInputRef.current?.focus(), 100);
                    }
                  }}
                  className="flex items-center gap-1 text-xs text-knot-400 hover:text-knot-300 transition-colors"
                >
                  <UserPlus size={14} />
                  {t('addMember')}
                </button>
              )}
            </div>

            {/* Add member search */}
            <AnimatePresence>
              {showAddMember && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: 'auto', opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="overflow-hidden mb-3"
                >
                  <div className="relative mb-2">
                    <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
                    <input
                      ref={searchInputRef}
                      type="text"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder={t('findUser')}
                      className="w-full pl-8 pr-3 py-2 rounded-xl bg-surface-tertiary text-sm text-white placeholder-zinc-500 border border-border focus:border-accent transition-colors"
                    />
                  </div>
                  {isSearching && (
                    <div className="flex justify-center py-2">
                      <Loader2 size={16} className="text-zinc-500 animate-spin" />
                    </div>
                  )}
                  {searchResults.map((u) => (
                    <button
                      key={u.id}
                      onClick={() => handleAddMember(u.id)}
                      className="flex items-center gap-3 w-full px-3 py-2 rounded-xl hover:bg-surface-hover transition-colors"
                    >
                      <Avatar 
                        src={u.avatar ? getMediaUrl(u.avatar) : null} 
                        name={u.displayName || u.username || '?'} 
                        size="sm" 
                        online={u.isOnline}
                      />
                      <div className="flex-1 text-left min-w-0">
                        <p className="text-sm text-white truncate">{u.displayName || u.username}</p>
                        <p className="text-xs text-zinc-500">@{u.username}</p>
                      </div>
                      <UserPlus size={14} className="text-knot-400 flex-shrink-0" />
                    </button>
                  ))}
                  {searchQuery.trim() && !isSearching && searchResults.length === 0 && (
                    <p className="text-xs text-zinc-500 text-center py-2">{t('usersNotFound')}</p>
                  )}
                </motion.div>
              )}
            </AnimatePresence>

            {/* Member list */}
            <div className="space-y-1">
              {[...chat.members]
                .sort((a, b) => {
                  if (a.user.id === user?.id) return -1;
                  if (b.user.id === user?.id) return 1;
                  const aIsAdmin = ['admin', 'owner', 'Admin', 'Owner'].includes(a.role || '');
                  const bIsAdmin = ['admin', 'owner', 'Admin', 'Owner'].includes(b.role || '');
                  if (aIsAdmin && !bIsAdmin) return -1;
                  if (bIsAdmin && !aIsAdmin) return 1;
                  return 0;
                })
                .map((member) => (
                  <div
                    key={member.user.id}
                    className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-surface-hover/50 transition-colors group"
                  >
                    <div className="relative flex-shrink-0">
                      <Avatar 
                        src={member.user.avatar ? getMediaUrl(member.user.avatar) : null} 
                        name={member.user.displayName || member.user.username || '?'} 
                        size="sm" 
                        online={member.user.isOnline}
                      />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <p className="text-sm font-medium text-white truncate">
                          {member.user.displayName || member.user.username}
                          {member.user.id === user?.id && (
                            <span className="text-zinc-500 ml-1 text-xs">({t('you') || 'вы'})</span>
                          )}
                        </p>
                        {['admin', 'owner', 'Admin', 'Owner'].includes(member.role || '') && (
                          <span className="flex items-center gap-0.5 px-1.5 py-0.5 rounded-md bg-amber-500/10 text-amber-400 text-[10px] font-medium flex-shrink-0">
                            <Crown size={10} />
                            {t('adminBadge') || 'Админ'}
                          </span>
                        )}
                      </div>
                      <p className="text-xs text-zinc-500">@{member.user.username}</p>
                    </div>
                    {isAdmin && member.user.id !== user?.id && !['admin', 'owner', 'Admin', 'Owner'].includes(member.role || '') && (
                      <button
                        onClick={() => handleRemoveMember(member.user.id)}
                        className="p-1.5 rounded-lg text-zinc-500 hover:text-red-400 hover:bg-red-500/10 opacity-0 group-hover:opacity-100 transition-all flex-shrink-0"
                        title={t('removeMember')}
                      >
                        <Trash2 size={14} />
                      </button>
                    )}
                  </div>
                ))}
            </div>
          </div>
              ) : activeTab === 'gifs' ? (
                sortedGifs.length > 0 ? (
                  renderGrouped(sortedGifs, (m, idx) => (
                      <div
                        key={m.id}
                        onClick={() => setLightboxIndex(idx)}
                        className="relative aspect-square bg-zinc-900 overflow-hidden cursor-pointer group"
                      >
                       {(m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
                         <img
                           src={getMediaUrl(m.url)}
                           alt=""
                           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                         />
                       ) : (
                         <video
                           src={getMediaUrl(m.url)}
                           autoPlay
                           loop
                           muted
                           playsInline
                           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                         />
                       )}
                        <button
                          onClick={(e) => { e.stopPropagation(); onGoToMessage?.(m.messageId, m.sequenceId); }}
                          className="absolute bottom-2 right-2 px-2 py-1 rounded-md bg-black/60 backdrop-blur-sm flex items-center justify-center text-white text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80 shadow-md"
                        >
                          {t('showInChat')}
                        </button>
                      </div>
                    ), "grid grid-cols-3 gap-0.5 px-1")
                ) : (
                  <div className="flex items-center justify-center py-10 px-4 text-center">
                    <p className="text-xs text-zinc-500 italic">Нет GIF файлов</p>
                  </div>
                )
              ) : activeTab === 'media' ? (
                sortedMedia.length > 0 ? (
                  renderGrouped(sortedMedia, (m, idx) => (
                      <div
                        key={m.id}
                        onClick={() => setLightboxIndex(idx)}
                        className="relative aspect-square bg-zinc-900 overflow-hidden cursor-pointer group"
                      >
                          {m.type === 'video' ? (
                            <>
                              <div 
                                className="w-full h-full bg-zinc-800 flex items-center justify-center relative group-hover:scale-105 transition-transform duration-200"
                                onClick={() => setLightboxIndex(idx)}
                              >
                                {m.thumbnail ? (
                                  <img src={getMediaUrl(m.thumbnail)} alt="" className="w-full h-full object-cover" />
                                ) : (
                                  <video src={getMediaUrl(m.url)} preload="metadata" className="w-full h-full object-cover bg-zinc-900" />
                                )}
                                <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/40 transition-colors">
                                  <Play size={24} className="text-white fill-white" />
                                </div>
                              </div>
                            </>
                          ) : (
                          <img
                            src={getMediaUrl(m.url)}
                            alt=""
                            onClick={() => setLightboxIndex(idx)}
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                          />
                        )}
                        <button
                          onClick={(e) => { e.stopPropagation(); onGoToMessage?.(m.messageId, m.sequenceId); }}
                          className="absolute bottom-2 right-2 px-2 py-1 rounded-md bg-black/60 backdrop-blur-sm flex items-center justify-center text-white text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80 shadow-md"
                        >
                          {t('showInChat')}
                        </button>
                      </div>
                    ), "grid grid-cols-3 gap-0.5 px-1")
                ) : (
                  <div className="flex items-center justify-center py-10 px-4 text-center">
                    <p className="text-xs text-zinc-500 italic">{t('sharedPhotos')}</p>
                  </div>
                )
              ) : activeTab === 'files' ? (
                sortedFiles.length > 0 ? (
                  renderGrouped(sortedFiles, (msg, idx) => (
                    <div key={msg.id} className="divide-y divide-border border-b border-border">
                      {(msg.media || []).map((m) => (
                        <div key={m.id} className="relative group/file">
                          <a
                            href={getMediaUrl(m.url)}
                            download={m.filename || 'file'}
                            className="flex items-center gap-3 px-4 py-3 hover:bg-white/5 transition-colors"
                          >
                          <div className="w-8 h-8 rounded-lg bg-knot-500/10 flex items-center justify-center flex-shrink-0 text-knot-400">
                            <FileText size={16} />
                          </div>


                          <div className="flex-1 min-w-0">
                            <p className="text-[13px] text-zinc-200 truncate">{m.filename || 'File'}</p>
                            <p className="text-[10px] text-zinc-500">{m.size ? `${(m.size / 1024).toFixed(1)} KB` : ''}</p>
                          </div>
                          <Download size={14} className="text-zinc-600" />
                        </a>
                        <button
                           onClick={() => onGoToMessage?.(msg.id, msg.sequenceId)}
                           className="absolute right-10 top-1/2 -translate-y-1/2 px-3 py-1.5 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-300 text-[11px] font-medium opacity-0 group-hover/file:opacity-100 transition-opacity"
                        >
                           {t('showInChat')}
                        </button>
                      </div>
                    ))}
                    </div>
                  ))
                ) : (
                  <div className="flex items-center justify-center py-10 px-4 text-center">
                    <p className="text-xs text-zinc-500 italic">{t('sharedFiles')}</p>
                  </div>
                )
              ) : (
                sortedLinks.length > 0 ? (
                  renderGrouped(sortedLinks, (msg, idx) => (
                      <div key={msg.id} className="p-4 hover:bg-white/5 transition-colors border-b border-white/5 relative group">
                        {msg.links?.map((link, i) => (
                          <a
                            key={i}
                            href={link}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center gap-2 text-[13px] text-knot-400 hover:underline truncate mb-1"
                          >
                            <ExternalLink size={12} className="flex-shrink-0" />
                            {link}
                          </a>
                        ))}
                        {msg.content && <p className="text-[11px] text-zinc-500 line-clamp-1">{msg.content}</p>}
                        <button
                           onClick={() => onGoToMessage?.(msg.id, msg.sequenceId)}
                           className="absolute right-4 top-1/2 -translate-y-1/2 px-3 py-1.5 rounded-lg bg-black/40 hover:bg-knot-500/20 text-zinc-300 hover:text-white text-[11px] font-medium opacity-0 group-hover:opacity-100 transition-all shadow-md z-10"
                        >
                           {t('showInChat')}
                        </button>
                      </div>
                    ))
                ) : (
                  <div className="flex items-center justify-center py-10 px-4 text-center">
                    <p className="text-xs text-zinc-500 italic">{t('sharedLinks')}</p>
                  </div>
                )
              )}
              </div>
            </div>
          ) : loadedTabs.size === 4 ? (
            <div className="mx-4 mb-6 flex flex-col items-center justify-center py-10 px-4 text-center border border-white/5 bg-black/20 rounded-2xl backdrop-blur-xl">
              <ImageIcon size={32} className="text-zinc-600 mb-3" />
              <p className="text-sm text-zinc-500">{(t('sharedPhotos' as any) || 'Нет вложений') as string}</p>
            </div>
          ) : (
             <div className="mx-4 mb-6 flex items-center justify-center py-10 border border-white/5 bg-black/20 rounded-2xl backdrop-blur-xl">
               <Loader2 size={24} className="text-zinc-500 animate-spin" />
             </div>
          )}

        </div>
      </motion.div>

      <ConfirmModal
        open={!!removeTargetId}
        message={t('confirmRemoveMember')}
        onConfirm={confirmRemoveMember}
        onCancel={() => setRemoveTargetId(null)}
      />

      <AnimatePresence>
        {lightboxIndex !== null && (
          <ImageLightbox
            images={(activeTab === 'gifs' ? sortedGifs : sortedMedia).map((m) => ({ 
              url: m.url, // Already contains getMediaUrl in calculated allGifs/allMedia
              type: activeTab === 'gifs' ? 'gif' : m.type 
            }))}
            initialIndex={lightboxIndex}
            onClose={() => setLightboxIndex(null)}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isCropping && cropImage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-xl flex flex-col items-center justify-center p-6"
          >
            <div className="w-full max-w-[400px] bg-surface-secondary rounded-[2rem] border border-white/10 overflow-hidden shadow-2xl">
              <div className="p-6 border-b border-white/5 flex items-center justify-between">
                <h3 className="text-xl font-bold text-white">{t('changePhoto')}</h3>
                <button onClick={() => setIsCropping(false)} className="text-zinc-400 hover:text-white transition-colors">
                  <X size={20} />
                </button>
              </div>

              <div className="relative w-full h-80 bg-black">
                <Cropper
                  image={cropImage}
                  crop={crop}
                  zoom={zoom}
                  aspect={1}
                  cropShape="round"
                  showGrid={false}
                  onCropChange={setCrop}
                  onZoomChange={setZoom}
                  onCropComplete={(_, pixels) => setCroppedAreaPixels(pixels)}
                />
              </div>
              
              <div className="p-6">
                <div className="flex items-center gap-4 mb-6">
                   <span className="text-zinc-500 text-xs font-medium uppercase">Zoom</span>
                   <input
                     type="range"
                     value={zoom}
                     min={1}
                     max={3}
                     step={0.1}
                     onChange={(e) => setZoom(Number(e.target.value))}
                     className="flex-1 accent-knot-500"
                   />
                </div>

                <div className="flex gap-3 w-full">
                  <button
                    onClick={() => setIsCropping(false)}
                    className="flex-1 py-3 px-4 rounded-xl bg-white/5 hover:bg-white/10 text-white font-semibold transition-all"
                  >
                    {t('cancel')}
                  </button>
                  <button
                    onClick={handleCropSave}
                    disabled={avatarUploading}
                    className="flex-1 py-3 px-4 rounded-xl bg-accent hover:bg-accent-light text-white font-bold transition-all shadow-lg shadow-accent/20 flex items-center justify-center gap-2"
                  >
                    {avatarUploading ? <Loader2 size={18} className="animate-spin" /> : <Check size={18} />}
                    {t('save')}
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={handleFileChange}
      />
    </>
  );
}