/* ============================================================================
 * Wildy — Real Chat List (사용자의 실제 채팅방 목록)
 * ----------------------------------------------------------------------------
 *   spec: Part C — 채팅 시스템
 *
 *   기능:
 *     - 본인이 멤버인 chat_rooms 조회 (chat_room_members 조인)
 *     - 각 방의 마지막 메시지 미리보기
 *     - DM은 상대 사용자명 + 아바타
 *     - 그룹은 Wild 이모지 + room.name
 *     - 정렬: last_message_at desc
 *     - 클릭 → RealChatScreen 진입
 *
 *   사용:
 *     <window.WildyComponents.RealChatList
 *        supabaseClient={...}
 *        user={authedUser}
 *        onOpen={(room) => ...}    // room = { id, name, emoji, type, ... }
 *        refreshKey={tick}         // 외부에서 갱신 트리거
 *     />
 *
 *   글로벌 노출:
 *     window.WildyComponents.RealChatList
 * ========================================================================= */
(function (global) {
  'use strict';

  if (typeof React === 'undefined') {
    console.error('[real-chat-list.jsx] React not loaded');
    return;
  }
  const { useState, useEffect, useCallback } = React;

  function timeAgo(ts) {
    if (!ts) return '';
    const d = new Date(ts);
    const diff = (Date.now() - d.getTime()) / 1000;
    if (diff < 60) return '방금';
    if (diff < 3600) return `${Math.floor(diff / 60)}분 전`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}시간 전`;
    if (diff < 604800) return `${Math.floor(diff / 86400)}일 전`;
    return d.toLocaleDateString('ko-KR', { month: 'numeric', day: 'numeric' });
  }

  function withTimeout(promise, ms, fallback) {
    return Promise.race([
      promise,
      new Promise(resolve => setTimeout(() => resolve(fallback), ms)),
    ]);
  }

  function RealChatList({ supabaseClient, user, onOpen, refreshKey = 0 }) {
    const [rooms, setRooms] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');

    const load = useCallback(async () => {
      if (!supabaseClient || !user?.id) { setRooms([]); setLoading(false); return; }
      setLoading(true);
      setError('');
      try {
        // RPC: 본인 채팅방 + DM 파트너 + Wild 정보 한 번에
        const { data, error: rpcErr } = await withTimeout(
          supabaseClient.rpc('get_my_chat_rooms'),
          7000,
          { data: [], error: new Error('chat_rooms_timeout') }
        );
        if (rpcErr) throw rpcErr;
        const list = Array.isArray(data) ? data : [];
        // 파트너 / 와일드 매핑 표준화
        setRooms(list.map(r => ({
          ...r,
          _partner: r.partner,
          wild: r.wild,
        })));
      } catch (e) {
        console.error('[RealChatList] load failed', e);
        setError(`채팅 목록을 불러오지 못했어요: ${e.message || e}`);
        setRooms([]);
      } finally {
        setLoading(false);
      }
    }, [supabaseClient, user?.id]);

    useEffect(() => {
      load();
    }, [load, refreshKey]);

    // 실시간 last_message_at 갱신 구독 (chat_rooms UPDATE)
    useEffect(() => {
      if (!supabaseClient || !user?.id) return;
      const channel = supabaseClient
        .channel('chat-list-updates')
        .on('postgres_changes', {
          event: 'UPDATE',
          schema: 'public',
          table: 'chat_rooms',
        }, (payload) => {
          const updated = payload?.new;
          if (!updated) return;
          setRooms(prev => {
            const idx = prev.findIndex(r => r.id === updated.id);
            if (idx < 0) return prev;
            const next = [...prev];
            next[idx] = { ...prev[idx], last_message_at: updated.last_message_at, member_count: updated.member_count };
            // 재정렬
            next.sort((a, b) => {
              const ta = a.last_message_at ? new Date(a.last_message_at).getTime() : 0;
              const tb = b.last_message_at ? new Date(b.last_message_at).getTime() : 0;
              return tb - ta;
            });
            return next;
          });
        })
        .subscribe();
      return () => {
        try { supabaseClient.removeChannel(channel); } catch {}
      };
    }, [supabaseClient, user?.id]);

    const renderRoom = (r) => {
      const isDM = r.type === 'direct';
      const partner = r._partner;
      const w = r.wild;
      const name = isDM
        ? (partner?.display_name || partner?.username || 'Wilder')
        : (r.name || (w?.short_name || w?.name) || '채팅방');
      const emoji = isDM ? '👤' : (w?.emoji || (r.room_type === 'free' ? '💬' : '👥'));
      const sub = isDM
        ? (partner?.username ? `@${partner.username}` : 'DM')
        : (w?.short_name || w?.name || (r.room_type || ''));

      const displayName = name;
      const displayEmoji = emoji;

      return (
        <button
          key={r.id}
          onClick={() => onOpen && onOpen({
            id: r.id,
            name: displayName,
            emoji: displayEmoji,
            type: r.type,
            roomType: r.room_type,
            isPrivate: r.is_private,
            wild: w,
            partner,
          })}
          className="flex w-full items-center gap-3 rounded-2xl px-3 py-3 text-left hover:bg-slate-50 transition"
        >
          <div className="w-12 h-12 rounded-2xl bg-slate-100 flex-shrink-0 flex items-center justify-center text-2xl overflow-hidden">
            {(() => {
              const av = isDM ? partner?.avatar : null;
              if (av && typeof av === 'object' && av.type === 'image' && av.url) {
                return <img src={av.url} alt="" className="w-full h-full object-cover" onError={(e) => { e.target.style.display = 'none'; }} />;
              }
              return <span>{displayEmoji}</span>;
            })()}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between gap-2 mb-0.5">
              <span className="font-bold text-sm truncate flex items-center gap-1">
                {r.is_private && <span className="text-amber-600" title="비공개">🔒</span>}
                {displayName}
              </span>
              <span className="text-[11px] text-slate-400 flex-shrink-0">{timeAgo(r.last_message_at)}</span>
            </div>
            <div className="text-xs text-slate-500 truncate">
              {sub} {!isDM && r.member_count ? `· ${r.member_count}명` : ''}
            </div>
          </div>
        </button>
      );
    };

    if (loading) {
      return <div className="py-12 text-center text-sm text-slate-400">채팅 목록 로딩 중...</div>;
    }
    if (error) {
      return <div className="my-3 rounded-2xl bg-rose-50 px-4 py-3 text-sm text-rose-600 mx-3">{error}</div>;
    }
    if (rooms.length === 0) {
      return (
        <div className="py-16 text-center text-sm text-slate-400 px-6" style={{ wordBreak: 'keep-all' }}>
          <div className="text-5xl mb-4">💬</div>
          <p className="font-bold text-base text-slate-700 mb-2">아직 채팅방이 없어요</p>
          <p>Wild를 팔로우하면 메인 채팅에 자동 입장돼요.<br/>혹은 친구 프로필에서 DM을 시작해보세요!</p>
        </div>
      );
    }

    return (
      <div className="space-y-1 p-2">
        {rooms.map(renderRoom)}
      </div>
    );
  }

  global.WildyComponents = global.WildyComponents || {};
  global.WildyComponents.RealChatList = RealChatList;
})(typeof window !== 'undefined' ? window : globalThis);