import { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  ArrowLeft, Play, Square, Users, Settings, FileVideo, Radio,
  Loader2, Copy, ExternalLink, Lock, Mic, MicOff, UserCheck,
  Shield, Save, UserPlus, X, Share2, Globe, Send,
  FileText, Upload, Trash2,
} from 'lucide-react';
import Modal from '../components/Modal';
import api from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import RecordingList from '../components/RecordingList';
import toast from 'react-hot-toast';

export default function RoomDetail() {
  const { uid } = useParams();
  const navigate = useNavigate();
  const { user } = useAuth();
  const { t } = useLanguage();

  const [room, setRoom] = useState(null);
  const [status, setStatus] = useState({ running: false, participantCount: 0, moderatorCount: 0 });
  const [recordings, setRecordings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(null);
  const [activeTab, setActiveTab] = useState('overview');
  const [editRoom, setEditRoom] = useState(null);
  const [saving, setSaving] = useState(false);
  const [sharedUsers, setSharedUsers] = useState([]);
  const [shareSearch, setShareSearch] = useState('');
  const [shareResults, setShareResults] = useState([]);
  const [shareSearching, setShareSearching] = useState(false);

  // Federation invite state
  const [showFedInvite, setShowFedInvite] = useState(false);
  const [fedAddress, setFedAddress] = useState('');
  const [fedMessage, setFedMessage] = useState('');
  const [fedSending, setFedSending] = useState(false);

  // Presentation state
  const [uploadingPresentation, setUploadingPresentation] = useState(false);
  const [removingPresentation, setRemovingPresentation] = useState(false);
  const presentationInputRef = useRef(null);

  const isOwner = room && user && room.user_id === user.id;
  const isShared = room && !!room.shared;
  const canManage = isOwner || isShared;

  const fetchRoom = async () => {
    try {
      const res = await api.get(`/rooms/${uid}`);
      setRoom(res.data.room);
      setEditRoom(res.data.room);
      if (res.data.sharedUsers) setSharedUsers(res.data.sharedUsers);
    } catch {
      toast.error(t('room.notFound'));
      navigate('/dashboard');
    } finally {
      setLoading(false);
    }
  };

  const fetchStatus = async () => {
    try {
      const res = await api.get(`/rooms/${uid}/status`);
      setStatus(res.data);
    } catch {
      // Ignore
    }
  };

  const fetchRecordings = async () => {
    try {
      const res = await api.get(`/recordings/room/${uid}`);
      setRecordings(res.data.recordings || []);
    } catch {
      // Ignore
    }
  };

  useEffect(() => {
    fetchRoom();
    fetchStatus();
    fetchRecordings();
    const interval = setInterval(fetchStatus, 10000);
    return () => clearInterval(interval);
  }, [uid]);

  const handleStart = async () => {
    setActionLoading('start');
    try {
      const res = await api.post(`/rooms/${uid}/start`);
      if (res.data.joinUrl) {
        window.open(res.data.joinUrl, '_blank');
      }
      setTimeout(fetchStatus, 2000);
      toast.success(t('room.meetingStarted'));
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.meetingStartFailed'));
    } finally {
      setActionLoading(null);
    }
  };

  const handleJoin = async () => {
    setActionLoading('join');
    try {
      const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
      const res = await api.post(`/rooms/${uid}/join`, data);
      if (res.data.joinUrl) {
        window.open(res.data.joinUrl, '_blank');
      }
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.joinFailed'));
    } finally {
      setActionLoading(null);
    }
  };

  const handleEnd = async () => {
    if (!confirm(t('room.endConfirm'))) return;
    setActionLoading('end');
    try {
      await api.post(`/rooms/${uid}/end`);
      toast.success(t('room.meetingEnded'));
      setTimeout(fetchStatus, 2000);
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.meetingEndFailed'));
    } finally {
      setActionLoading(null);
    }
  };

  const handleSaveSettings = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      const res = await api.put(`/rooms/${uid}`, {
        name: editRoom.name,
        welcome_message: editRoom.welcome_message,
        max_participants: editRoom.max_participants,
        access_code: editRoom.access_code,
        mute_on_join: !!editRoom.mute_on_join,
        require_approval: !!editRoom.require_approval,
        anyone_can_start: !!editRoom.anyone_can_start,
        all_join_moderator: !!editRoom.all_join_moderator,
        record_meeting: !!editRoom.record_meeting,
        guest_access: !!editRoom.guest_access,
        moderator_code: editRoom.moderator_code,
      });
      setRoom(res.data.room);
      setEditRoom(res.data.room);
      toast.success(t('room.settingsSaved'));
    } catch (err) {
      toast.error(t('room.settingsSaveFailed'));
    } finally {
      setSaving(false);
    }
  };

  const copyLink = () => {
    navigator.clipboard.writeText(`${window.location.origin}/rooms/${uid}`);
    toast.success(t('room.linkCopied'));
  };

  // Federation invite handler
  const handlePresentationUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const allowedTypes = [
      'application/pdf',
      'application/vnd.ms-powerpoint',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.oasis.opendocument.presentation',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    ];
    if (!allowedTypes.includes(file.type)) {
      toast.error('Unsupported file type. Allowed: PDF, PPT, PPTX, ODP, DOC, DOCX');
      return;
    }
    setUploadingPresentation(true);
    try {
      const arrayBuffer = await file.arrayBuffer();
      const res = await api.post(`/rooms/${uid}/presentation`, arrayBuffer, {
        headers: {
          'Content-Type': file.type,
          'X-Filename': encodeURIComponent(file.name),
        },
      });
      setRoom(res.data.room);
      setEditRoom(res.data.room);
      toast.success(t('room.presentationUploaded'));
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.presentationUploadFailed'));
    } finally {
      setUploadingPresentation(false);
      if (presentationInputRef.current) presentationInputRef.current.value = '';
    }
  };

  const handlePresentationRemove = async () => {
    setRemovingPresentation(true);
    try {
      const res = await api.delete(`/rooms/${uid}/presentation`);
      setRoom(res.data.room);
      setEditRoom(res.data.room);
      toast.success(t('room.presentationRemoved'));
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.presentationRemoveFailed'));
    } finally {
      setRemovingPresentation(false);
    }
  };

  const handleFedInvite = async (e) => {
    e.preventDefault();
    // Accept @user@domain or user@domain — must have a domain part
    const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
    if (!normalized.includes('@') || normalized.endsWith('@')) {
      toast.error(t('federation.addressHint'));
      return;
    }
    setFedSending(true);
    try {
      await api.post('/federation/invite', {
        room_uid: uid,
        to: fedAddress,
        message: fedMessage || undefined,
      });
      toast.success(t('federation.sent'));
      setShowFedInvite(false);
      setFedAddress('');
      setFedMessage('');
    } catch (err) {
      toast.error(err.response?.data?.error || t('federation.sendFailed'));
    } finally {
      setFedSending(false);
    }
  };

  // Share functions
  const searchUsers = async (query) => {
    setShareSearch(query);
    if (query.length < 2) {
      setShareResults([]);
      return;
    }
    setShareSearching(true);
    try {
      const res = await api.get(`/rooms/users/search?q=${encodeURIComponent(query)}`);
      // Filter out already shared users
      const sharedIds = new Set(sharedUsers.map(u => u.id));
      setShareResults(res.data.users.filter(u => !sharedIds.has(u.id)));
    } catch {
      setShareResults([]);
    } finally {
      setShareSearching(false);
    }
  };

  const handleShare = async (userId) => {
    try {
      const res = await api.post(`/rooms/${uid}/shares`, { user_id: userId });
      setSharedUsers(res.data.shares);
      setShareSearch('');
      setShareResults([]);
      toast.success(t('room.shareAdded'));
    } catch (err) {
      toast.error(err.response?.data?.error || t('room.shareFailed'));
    }
  };

  const handleUnshare = async (userId) => {
    try {
      const res = await api.delete(`/rooms/${uid}/shares/${userId}`);
      setSharedUsers(res.data.shares);
      toast.success(t('room.shareRemoved'));
    } catch {
      toast.error(t('room.shareFailed'));
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 size={32} className="animate-spin text-th-accent" />
      </div>
    );
  }

  if (!room) return null;

  const tabs = [
    { id: 'overview', label: t('room.overview'), icon: Play },
    { id: 'recordings', label: t('room.recordings'), icon: FileVideo, count: recordings.length },
    ...(isOwner ? [{ id: 'settings', label: t('room.settings'), icon: Settings }] : []),
  ];

  return (
    <div>
      {/* Back button */}
      <button
        onClick={() => navigate('/dashboard')}
        className="btn-ghost text-sm mb-4"
      >
        <ArrowLeft size={16} />
        {t('room.backToDashboard')}
      </button>

      {/* Room header */}
      <div className="card p-6 mb-6">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-3 mb-1">
              <h1 className="text-2xl font-bold text-th-text">{room.name}</h1>
              {status.running && (
                <span className="flex items-center gap-1.5 px-2.5 py-1 bg-th-success/15 text-th-success rounded-full text-xs font-semibold">
                  <Radio size={12} className="animate-pulse" />
                  {t('common.live')}
                </span>
              )}
            </div>
            <div className="flex items-center gap-4 text-sm text-th-text-s">
              <span className="flex items-center gap-1">
                <Users size={14} />
                {status.running ? t('room.participants', { count: status.participantCount }) : t('common.offline')}
              </span>
              {room.access_code && (
                <span className="flex items-center gap-1">
                  <Lock size={14} />
                  {t('common.protected')}
                </span>
              )}
              <button onClick={copyLink} className="flex items-center gap-1 hover:text-th-accent transition-colors">
                <Copy size={14} />
                {t('room.copyLink')}
              </button>
            </div>
          </div>

          <div className="flex items-center gap-2">
            {canManage && (
              <button
                onClick={() => setShowFedInvite(true)}
                className="btn-ghost text-sm"
                title={t('federation.inviteRemote')}
              >
                <Globe size={16} />
                <span className="hidden sm:inline">{t('federation.inviteRemote')}</span>
              </button>
            )}
            {canManage && !status.running && (
              <button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
                {actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
                {t('room.start')}
              </button>
            )}
            {status.running && (
              <button onClick={handleJoin} disabled={actionLoading === 'join'} className="btn-primary">
                {actionLoading === 'join' ? <Loader2 size={16} className="animate-spin" /> : <ExternalLink size={16} />}
                {t('room.join')}
              </button>
            )}
            {canManage && status.running && (
              <button onClick={handleEnd} disabled={actionLoading === 'end'} className="btn-danger">
                {actionLoading === 'end' ? <Loader2 size={16} className="animate-spin" /> : <Square size={16} />}
                {t('room.end')}
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 mb-6 border-b border-th-border">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === tab.id
              ? 'border-th-accent text-th-accent'
              : 'border-transparent text-th-text-s hover:text-th-text hover:border-th-border'
              }`}
          >
            <tab.icon size={16} />
            {tab.label}
            {tab.count !== undefined && tab.count > 0 && (
              <span className="px-1.5 py-0.5 rounded-full bg-th-accent/15 text-th-accent text-xs">
                {tab.count}
              </span>
            )}
          </button>
        ))}
      </div>

      {/* Tab content */}
      {activeTab === 'overview' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Meeting info */}
          <div className="card p-5">
            <h3 className="text-sm font-semibold text-th-text mb-4">{t('room.meetingDetails')}</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.meetingId')}</span>
                <code className="bg-th-bg-s px-2 py-0.5 rounded text-xs text-th-text font-mono">{room.uid}</code>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.status')}</span>
                <span className={status.running ? 'text-th-success font-medium' : 'text-th-text-s'}>
                  {status.running ? t('common.active') : t('common.inactive')}
                </span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.maxParticipants')}</span>
                <span className="text-th-text">{room.max_participants || t('common.unlimited')}</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.accessCode')}</span>
                <span className="text-th-text">{room.access_code || t('common.none')}</span>
              </div>
            </div>
          </div>

          {/* Room settings overview */}
          <div className="card p-5">
            <h3 className="text-sm font-semibold text-th-text mb-4">{t('room.roomSettings')}</h3>
            <div className="space-y-3">
              <div className="flex items-center gap-3 text-sm">
                {room.mute_on_join ? <MicOff size={16} className="text-th-warning" /> : <Mic size={16} className="text-th-success" />}
                <span className="text-th-text">
                  {room.mute_on_join ? t('room.mutedOnJoin') : t('room.micActiveOnJoin')}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <UserCheck size={16} className={room.require_approval ? 'text-th-warning' : 'text-th-text-s'} />
                <span className="text-th-text">
                  {room.require_approval ? t('room.approvalRequired') : t('room.freeJoin')}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <Shield size={16} className={room.all_join_moderator ? 'text-th-accent' : 'text-th-text-s'} />
                <span className="text-th-text">
                  {room.all_join_moderator ? t('room.allModerators') : t('room.rolesAssigned')}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <FileVideo size={16} className={room.record_meeting ? 'text-th-success' : 'text-th-text-s'} />
                <span className="text-th-text">
                  {room.record_meeting ? t('room.recordingAllowed') : t('room.recordingDisabled')}
                </span>
              </div>
            </div>
          </div>

          {/* Welcome message */}
          <div className="card p-5 md:col-span-2">
            <h3 className="text-sm font-semibold text-th-text mb-2">{t('room.welcomeMsg')}</h3>
            <p className="text-sm text-th-text-s">{room.welcome_message || '—'}</p>
          </div>
        </div>
      )}

      {activeTab === 'recordings' && (
        <RecordingList recordings={recordings} onRefresh={fetchRecordings} />
      )}

      {activeTab === 'settings' && isOwner && editRoom && (
        <form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
          <div>
            <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
            <input
              type="text"
              value={editRoom.name}
              onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
              className="input-field"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
            <textarea
              value={editRoom.welcome_message || ''}
              onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
              className="input-field resize-none"
              rows={3}
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
              <input
                type="number"
                value={editRoom.max_participants}
                onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
                className="input-field"
                min="0"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
              <input
                type="text"
                value={editRoom.access_code || ''}
                onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
                className="input-field"
                placeholder={t('room.emptyNoCode')}
              />
            </div>
          </div>

          <div className="space-y-3 pt-2">
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={!!editRoom.mute_on_join}
                onChange={e => setEditRoom({ ...editRoom, mute_on_join: e.target.checked })}
                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.muteOnJoin')}</span>
            </label>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={!!editRoom.require_approval}
                onChange={e => setEditRoom({ ...editRoom, require_approval: e.target.checked })}
                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.requireApproval')}</span>
            </label>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={!!editRoom.anyone_can_start}
                onChange={e => setEditRoom({ ...editRoom, anyone_can_start: e.target.checked })}
                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.anyoneCanStart')}</span>
            </label>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={!!editRoom.all_join_moderator}
                onChange={e => setEditRoom({ ...editRoom, all_join_moderator: e.target.checked })}
                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.allJoinModerator')}</span>
            </label>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={!!editRoom.record_meeting}
                onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.allowRecording')}</span>
            </label>
          </div>

          {/* Guest access section */}
          <div className="pt-4 border-t border-th-border space-y-4">
            <h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>

            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
              <input
                type="text"
                value={editRoom.moderator_code || ''}
                onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
                className="input-field"
                placeholder={t('room.moderatorCodeHint')}
              />
              <p className="text-xs text-th-text-s mt-1">{t('room.moderatorCodeDesc')}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestLink')}</label>
              <div className="flex items-center gap-2">
                <code className="flex-1 bg-th-bg-s px-3 py-2 rounded-lg text-xs text-th-text font-mono truncate border border-th-border">
                  {window.location.origin}/join/{room.uid}
                </code>
                <button
                  type="button"
                  onClick={() => {
                    navigator.clipboard.writeText(`${window.location.origin}/join/${room.uid}`);
                    toast.success(t('room.linkCopied'));
                  }}
                  className="btn-ghost text-xs py-2 px-3"
                >
                  <Copy size={14} />
                </button>
              </div>
            </div>
          </div>

          {/* Presentation section */}
          <div className="pt-4 border-t border-th-border space-y-4">
            <div>
              <h3 className="text-sm font-semibold text-th-text flex items-center gap-2 mb-1">
                <FileText size={16} />
                {t('room.presentationTitle')}
              </h3>
              <p className="text-xs text-th-text-s">{t('room.presentationDesc')}</p>
            </div>

            {room.presentation_file ? (
              <div className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
                <div className="flex items-center gap-2 min-w-0">
                  <FileText size={16} className="text-th-accent flex-shrink-0" />
                  <div className="min-w-0">
                    <p className="text-xs text-th-text-s">{t('room.presentationCurrent')}</p>
                    <p className="text-sm text-th-text font-medium truncate">
                      {room.presentation_name || `presentation.${room.presentation_file?.split('.').pop()}`}
                    </p>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={handlePresentationRemove}
                  disabled={removingPresentation}
                  className="btn-ghost text-th-error hover:bg-th-error/10 flex-shrink-0 text-xs py-1.5 px-3"
                >
                  {removingPresentation ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
                  {t('room.presentationRemove')}
                </button>
              </div>
            ) : (
              <div className="text-xs text-th-text-s italic">{/* no presentation */}</div>
            )}

            <input
              ref={presentationInputRef}
              type="file"
              accept=".pdf,.ppt,.pptx,.odp,.doc,.docx"
              className="hidden"
              onChange={handlePresentationUpload}
            />
            <button
              type="button"
              onClick={() => presentationInputRef.current?.click()}
              disabled={uploadingPresentation}
              className="btn-secondary text-sm flex items-center gap-2"
            >
              {uploadingPresentation ? <Loader2 size={15} className="animate-spin" /> : <Upload size={15} />}
              {t('room.presentationUpload')}
            </button>
            <p className="text-xs text-th-text-s">{t('room.presentationAllowedTypes')}</p>
          </div>

          {/* Share section */}
          <div className="pt-4 border-t border-th-border space-y-4">
            <h3 className="text-sm font-semibold text-th-text flex items-center gap-2">
              <Share2 size={16} />
              {t('room.shareTitle')}
            </h3>
            <p className="text-xs text-th-text-s">{t('room.shareDescription')}</p>

            {/* User search */}
            <div className="relative">
              <div className="relative">
                <UserPlus size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
                <input
                  type="text"
                  value={shareSearch}
                  onChange={e => searchUsers(e.target.value)}
                  className="input-field pl-11"
                  placeholder={t('room.shareSearchPlaceholder')}
                />
              </div>
              {shareResults.length > 0 && (
                <div className="absolute z-10 w-full mt-1 bg-th-card border border-th-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
                  {shareResults.map(u => (
                    <button
                      key={u.id}
                      type="button"
                      onClick={() => handleShare(u.id)}
                      className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
                    >
                      <div
                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {u.avatar_image ? (
                          <img src={`${api.defaults.baseURL}/auth/avatar/${u.avatar_image}`} alt="" className="w-full h-full object-cover" />
                        ) : (
                          (u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
                        )}
                      </div>
                      <div className="min-w-0">
                        <div className="text-sm font-medium text-th-text truncate">{u.display_name || u.name}</div>
                        <div className="text-xs text-th-text-s truncate">{u.email}</div>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Shared users list */}
            {sharedUsers.length > 0 && (
              <div className="space-y-2">
                {sharedUsers.map(u => (
                  <div key={u.id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
                    <div className="flex items-center gap-3 min-w-0">
                      <div
                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {u.avatar_image ? (
                          <img src={`${api.defaults.baseURL}/auth/avatar/${u.avatar_image}`} alt="" className="w-full h-full object-cover" />
                        ) : (
                          (u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
                        )}
                      </div>
                      <div className="min-w-0">
                        <div className="text-sm font-medium text-th-text truncate">{u.display_name || u.name}</div>
                        <div className="text-xs text-th-text-s truncate">{u.email}</div>
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => handleUnshare(u.id)}
                      className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-error transition-colors flex-shrink-0"
                      title={t('room.shareRemove')}
                    >
                      <X size={16} />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="pt-4 border-t border-th-border">
            <button type="submit" disabled={saving} className="btn-primary">
              {saving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
              {t('common.save')}
            </button>
          </div>
        </form>
      )}

      {/* Federation Invite Modal */}
      {showFedInvite && (
        <Modal title={t('federation.inviteTitle')} onClose={() => setShowFedInvite(false)}>
          <p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
          <form onSubmit={handleFedInvite} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
              <input
                type="text"
                value={fedAddress}
                onChange={e => setFedAddress(e.target.value)}
                className="input-field"
                placeholder={t('federation.addressPlaceholder')}
                required
              />
              <p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
              <textarea
                value={fedMessage}
                onChange={e => setFedMessage(e.target.value)}
                className="input-field resize-none"
                rows={2}
                placeholder={t('federation.messagePlaceholder')}
              />
            </div>
            <div className="flex items-center gap-3 pt-2 border-t border-th-border">
              <button type="button" onClick={() => setShowFedInvite(false)} className="btn-secondary flex-1">
                {t('common.cancel')}
              </button>
              <button type="submit" disabled={fedSending} className="btn-primary flex-1">
                {fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
                {t('federation.send')}
              </button>
            </div>
          </form>
        </Modal>
      )}
    </div>
  );
}