redlight/src/components/RoomCard.jsx

import { Users, Play, Trash2, Radio, Loader2, Share2, Copy, Link } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect, useRef } from 'react';
import api from '../services/api';
import { useLanguage } from '../contexts/LanguageContext';
import toast from 'react-hot-toast';

export default function RoomCard({ room, onDelete }) {
  const navigate = useNavigate();
  const { t } = useLanguage();
  const [status, setStatus] = useState({ running: false, participantCount: 0 });
  const [starting, setStarting] = useState(false);
  const [showCopyMenu, setShowCopyMenu] = useState(false);
  const copyMenuRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (copyMenuRef.current && !copyMenuRef.current.contains(e.target)) {
        setShowCopyMenu(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const copyToClipboard = (url) => {
    navigator.clipboard.writeText(url);
    toast.success(t('room.linkCopied'));
    setShowCopyMenu(false);
  };

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const res = await api.get(`/rooms/${room.uid}/status`);
        setStatus(res.data);
      } catch {
        // Ignore errors
      }
    };
    checkStatus();
    const interval = setInterval(checkStatus, 15000);
    return () => clearInterval(interval);
  }, [room.uid]);

  return (
    <div className="card-hover group p-5 cursor-pointer" onClick={() => navigate(`/rooms/${room.uid}`)}>
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
              {room.name}
            </h3>
            {status.running && (
              <span className="flex items-center gap-1 px-2 py-0.5 bg-th-success/15 text-th-success rounded-full text-xs font-medium">
                <Radio size={10} className="animate-pulse" />
                {t('common.live')}
              </span>
            )}
            {room.shared ? (
              <span className="flex items-center gap-1 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
                <Share2 size={10} />
                {t('room.shared')}
              </span>
            ) : null}
          </div>
          <p className="text-sm text-th-text-s mt-0.5">
            {room.shared ? room.owner_name : `${room.uid.substring(0, 8)}...`}
          </p>
        </div>
      </div>

      {/* Room info */}
      <div className="flex items-center gap-4 mb-4 text-xs 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.max_participants > 0 && (
          <span>Max: {room.max_participants}</span>
        )}
        {room.access_code && (
          <span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded text-[10px] font-medium">
            {t('common.protected')}
          </span>
        )}
      </div>

      {/* Actions */}
      <div className="flex items-center gap-2 pt-3 border-t border-th-border" onClick={(e) => e.stopPropagation()}>
        <button
          onClick={async (e) => {
            e.stopPropagation();
            setStarting(true);
            try {
              if (status.running) {
                const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
                const res = await api.post(`/rooms/${room.uid}/join`, data);
                if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
              } else {
                const res = await api.post(`/rooms/${room.uid}/start`);
                if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
                toast.success(t('room.meetingStarted'));
                setTimeout(() => {
                  api.get(`/rooms/${room.uid}/status`).then(r => setStatus(r.data)).catch(() => {});
                }, 2000);
              }
            } catch (err) {
              toast.error(err.response?.data?.error || t('room.meetingStartFailed'));
            } finally {
              setStarting(false);
            }
          }}
          disabled={starting}
          className="btn-primary text-xs py-1.5 px-3 flex-1"
        >
          {starting ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
          {status.running ? t('room.join') : t('room.startMeeting')}
        </button>
        <div className="relative" ref={copyMenuRef}>
          <button
            onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
            className="btn-ghost text-xs py-1.5 px-2"
            title={t('room.copyLink')}
          >
            <Copy size={14} />
          </button>
          {showCopyMenu && (
            <div className="absolute bottom-full right-0 mb-2 bg-th-surface border border-th-border rounded-lg shadow-lg z-50 min-w-[150px] py-1">
              <button
                onClick={(e) => { e.stopPropagation(); copyToClipboard(`${window.location.origin}/rooms/${room.uid}`); }}
                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-th-text hover:bg-th-accent/10 transition-colors"
              >
                <Link size={12} />
                {t('room.copyRoomLink')}
              </button>
              <button
                onClick={(e) => { e.stopPropagation(); copyToClipboard(`${window.location.origin}/join/${room.uid}`); }}
                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-th-text hover:bg-th-accent/10 transition-colors"
              >
                <Users size={12} />
                {t('room.copyGuestLink')}
              </button>
            </div>
          )}
        </div>
        {onDelete && !room.shared && (
          <button
            onClick={(e) => { e.stopPropagation(); onDelete(room); }}
            className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
            title={t('common.delete')}
          >
            <Trash2 size={14} />
          </button>
        )}
      </div>
    </div>
  );
}