/* @component-map
 * App — Main container, handles tab switching and auth
 * StandingsPanel — Leaderboard for singles and doubles, add player form
 * SchedulePanel — Upcoming matches list and schedule form
 * MyStatsPanel — Personal stats, head-to-head, recent matches
 * LogPanel — Log match result form
 * @end-component-map */

import { useAuth, useCollection } from '@deplixo/sdk';
import { StandingsPanel } from './components/StandingsPanel.jsx';
import { SchedulePanel } from './components/SchedulePanel.jsx';
import { MyStatsPanel } from './components/MyStatsPanel.jsx';
import { useEffect, useState } from 'react';
import { LogPanel } from './components/LogPanel.jsx';

const PICKLE_IMG = 'https://cdn.deplixo.com/i/rosemanmom/Pichleball_512_x_512_pixels_.png';
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const AV_CLS = ['av-1','av-2','av-3','av-4','av-5','av-6','av-7'];

function shortName(full) {
  if (!full) return '';
  const parts = full.trim().split(/\s+/);
  if (parts.length === 1) return parts[0];
  return parts[0] + ' ' + parts[parts.length - 1][0] + '.';
}
function getAv(n) { let h = 0; for (const c of (n || '')) h = (h * 31 + c.charCodeAt(0)) & 0xffff; return AV_CLS[h % AV_CLS.length]; }
function ini(n) { const p = (n || '').split(' ').filter(Boolean); return p.length >= 2 ? (p[0][0] + p[p.length - 1][0]).toUpperCase() : (n || '?').slice(0, 2).toUpperCase(); }
function pct(w, l) { return Math.round(w / ((w + l) || 1) * 100); }
function fillCls(p) { return p >= 60 ? 'wfill-hi' : p >= 45 ? 'wfill-mid' : 'wfill-lo'; }
function medal(i) { return i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : null; }

function App() {
  const { user, loading: authLoading } = useAuth();
  const [activeTab, setActiveTab] = useState('standings');
  const [toastMsg, setToastMsg] = useState('');
  const [toastVisible, setToastVisible] = useState(false);

  const displayName = user ? shortName(user.name) : '';

  const showToast = (msg) => {
    setToastMsg(msg);
    setToastVisible(true);
    setTimeout(() => setToastVisible(false), 3000);
  };

  const switchTab = (name) => setActiveTab(name);

  const helpers = { shortName, getAv, ini, pct, fillCls, medal, PICKLE_IMG, MONTHS, showToast, switchTab };

  if (authLoading) return null;

  if (!user) {
    return (
      <div className="content">
        <div style={{textAlign: 'center', padding: '2rem'}}>
          <p>Please log in to continue.</p>
        </div>
      </div>
    );
  }

  const tabs = [
    { key: 'standings', label: '🏆 Standings' },
    { key: 'schedule', label: '📅 Schedule' },
    { key: 'mystats', label: '🎯 My Stats' },
    { key: 'log', label: '✏️ Log' },
  ];

  return (
    <>
      <div className="header">
        <div className="header-inner">
          <div className="header-top">
            <div className="brand">
              <div className="brand-icon-wrap">
                <img src={PICKLE_IMG} className="brand-icon" alt="Pickleball" />
              </div>
              <div className="brand-text">Pickleball <span>Tracker</span></div>
            </div>
            <div className="user-pill"><div className="user-dot"></div><span>{displayName}</span></div>
          </div>
          <div className="tabs">
            {tabs.map(t => (
              <div key={t.key} className={`tab${activeTab === t.key ? ' active' : ''}`} onClick={() => switchTab(t.key)}>{t.label}</div>
            ))}
          </div>
        </div>
      </div>
      <div className="content">
        {activeTab === 'standings' && <StandingsPanel user={user} displayName={displayName} helpers={helpers} />}
        {activeTab === 'schedule' && <SchedulePanel user={user} displayName={displayName} helpers={helpers} />}
        {activeTab === 'mystats' && <MyStatsPanel user={user} displayName={displayName} helpers={helpers} />}
        {activeTab === 'log' && <LogPanel user={user} displayName={displayName} helpers={helpers} />}
      </div>
      <div className={`toast${toastVisible ? ' show' : ''}`}>🥒 <span>{toastMsg}</span></div>
    </>
  );
}

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