import { useCollection, useIdentity, share } from '@deplixo/sdk';
import SetupPanel from './components/SetupPanel.jsx';
import AuctionPanel from './components/AuctionPanel.jsx';
import ResultsPanel from './components/ResultsPanel.jsx';

function App() {
  const { user, loading: idLoading } = useIdentity();
  const participants = useCollection('participants');
  const captains = useCollection('captains');
  const bids = useCollection('bids');
  const auction = useCollection('auction_state');

  const [tab, setTab] = useState('auction');
  const [shareMsg, setShareMsg] = useState('');

  if (idLoading || participants.loading || captains.loading || bids.loading || auction.loading) {
    return (
      <div className="loading-screen">
        <div className="spinner" />
        <p>경매장 불러오는 중...</p>
      </div>
    );
  }

  const handleShare = async () => {
    try {
      await share({
        title: '친구 팀 편성 경매장',
        text: '친구들과 함께 팀을 편성해봐요!',
        url: window.location.href,
      });
      setShareMsg('공유 링크가 열렸어요!');
    } catch (e) {
      try {
        await navigator.clipboard.writeText(window.location.href);
        setShareMsg('링크가 복사되었어요!');
      } catch {
        setShareMsg('링크: ' + window.location.href);
      }
    }
    setTimeout(() => setShareMsg(''), 3000);
  };

  const tabs = [
    { id: 'auction', label: '경매장' },
    { id: 'setup', label: '명단 설정' },
    { id: 'results', label: '팀 결과' },
  ];

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <div className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2l2.4 5 5.6.8-4 3.9.9 5.6L12 14.8 7.1 17.3 8 11.7 4 7.8 9.6 7z" />
            </svg>
          </div>
          <div>
            <h1>친구 팀 편성 경매장</h1>
            <p className="brand-sub">
              {user ? <>안녕하세요, <strong>{user.name}</strong>님</> : '친구들과 함께 팀을 짜보세요'}
            </p>
          </div>
        </div>
        <div className="header-actions">
          <button
            type="button"
            className="btn btn-ghost"
            onClick={handleShare}
            data-testid="share-button"
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="18" cy="5" r="3" />
              <circle cx="6" cy="12" r="3" />
              <circle cx="18" cy="19" r="3" />
              <line x1="8.6" y1="13.5" x2="15.4" y2="17.5" />
              <line x1="15.4" y1="6.5" x2="8.6" y2="10.5" />
            </svg>
            친구에게 공유
          </button>
        </div>
      </header>

      {shareMsg && (
        <div className="toast" role="status" aria-live="polite">{shareMsg}</div>
      )}

      <nav className="tabs" role="tablist" aria-label="경매장 보기">
        {tabs.map((t) => (
          <button
            key={t.id}
            type="button"
            role="tab"
            aria-selected={tab === t.id}
            className={`tab ${tab === t.id ? 'tab-active' : ''}`}
            onClick={() => setTab(t.id)}
            data-testid={`tab-${t.id}`}
          >
            {t.label}
          </button>
        ))}
      </nav>

      <main className="main">
        {tab === 'auction' && (
          <AuctionPanel
            user={user}
            participants={participants}
            captains={captains}
            bids={bids}
            auction={auction}
          />
        )}
        {tab === 'setup' && (
          <SetupPanel
            user={user}
            participants={participants}
            captains={captains}
            bids={bids}
            auction={auction}
          />
        )}
        {tab === 'results' && (
          <ResultsPanel
            participants={participants.items || []}
            captains={captains.items || []}
            bids={bids.items || []}
          />
        )}
      </main>

      <footer className="app-footer">
        <small>모든 친구의 화면에 실시간으로 반영돼요 · 입찰은 되돌릴 수 없으니 신중하게!</small>
      </footer>
    </div>
  );
}

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