import { useCollection, useIdentity } from '@deplixo/sdk';
import ProfileView from './components/ProfileView.jsx';
import StatsView from './components/StatsView.jsx';
import TrainingView from './components/TrainingView.jsx';
import CoachView from './components/CoachView.jsx';
import ChallengesView from './components/ChallengesView.jsx';
import BlogView from './components/BlogView.jsx';
import FriendsView from './components/FriendsView.jsx';
import PremiumView from './components/PremiumView.jsx';
import { IconUser, IconChart, IconDumbbell, IconSpark, IconBall, IconTrophy, IconBook, IconUsers } from './components/icons.jsx';

// Tabs restricted to Premium accounts (free accounts see an upsell)
const PREMIUM_TABS = new Set(['coach', 'blog', 'friends']);

function PremiumLock({ tab, onGoPremium }) {
  const labels = {
    coach: 'Coach IA',
    blog: 'Blog & conseils',
    friends: 'Amis & classements',
  };
  return (
    <div className="view">
      <div className="coach-hero">
        <h2>🔒 {labels[tab] || 'Fonctionnalité'} — Premium</h2>
        <p>Cette section est réservée aux membres FootRise Premium (4,99 €/mois).</p>
      </div>
      <button className="btn-primary" onClick={onGoPremium} data-testid="goto-premium-from-lock">
        Découvrir Premium
      </button>
    </div>
  );
}

function SignupGate({ signIn }) {
  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <div className="brand-icon"><IconBall size={20} /></div>
          FootRise
        </div>
        <div className="header-sub">Crée ton compte gratuit</div>
      </header>
      <main>
        <div className="view">
          <div className="coach-hero">
            <h2>⚽ Bienvenue sur FootRise</h2>
            <p>Crée un compte gratuit pour suivre tes matchs, tes entraînements et progresser.</p>
          </div>
          <div className="card">
            <div className="card-title">Compte gratuit</div>
            <ul style={{ paddingLeft: 20, fontSize: '0.9rem', lineHeight: 1.6, margin: '6px 0 12px' }}>
              <li>Profil de joueur & statistiques de base</li>
              <li>Journal d’entraînement</li>
              <li>Défis simples</li>
            </ul>
            <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: 12 }}>
              Coach IA, Blog et Amis sont réservés à Premium (4,99 €/mois).
            </div>
            <button className="btn-primary" onClick={signIn} data-testid="signup-free-button">
              Créer mon compte gratuit
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}

function App() {
  const { user, signIn } = useIdentity();
  const [tab, setTab] = useState('profile');

  // Per-user collections (filter by author.id)
  const { items: allProfiles, add: addProfile, update: updateProfile } = useCollection('profiles');
  const { items: allMatches, add: addMatchRaw, remove: removeMatch } = useCollection('matches');
  const { items: allTrainings, add: addTrainingRaw, remove: removeTraining } = useCollection('trainings');
  const { items: allFriends, add: addFriend, remove: removeFriend } = useCollection('friends');
  const { items: allSubs } = useCollection('subscriptions');

  if (!user) {
    return <SignupGate signIn={typeof signIn === 'function' ? signIn : () => {}} />;
  }

  const mySub = (allSubs || []).find(s => s.author?.id === user?.id)?.value;
  const isPremium = !!(mySub && mySub.status === 'active' && mySub.renewsAt && new Date(mySub.renewsAt).getTime() > Date.now());

  const myProfileItem = (allProfiles || []).find(p => p.author?.id === user?.id);
  const profile = myProfileItem?.value;

  const matches = (allMatches || [])
    .filter(m => m.author?.id === user?.id)
    .map(m => ({ id: m.id, ...m.value }))
    .sort((a, b) => new Date(b.date) - new Date(a.date));

  const trainings = (allTrainings || [])
    .filter(t => t.author?.id === user?.id)
    .map(t => ({ id: t.id, ...t.value }))
    .sort((a, b) => new Date(b.date) - new Date(a.date));

  const stats = {
    matches: matches.length,
    goals: matches.reduce((s, m) => s + (m.goals || 0), 0),
    assists: matches.reduce((s, m) => s + (m.assists || 0), 0),
    trainings: trainings.length,
    wins: matches.filter(m => m.result === 'V').length,
    avgRating: matches.length
      ? (matches.reduce((s, m) => s + (m.rating || 0), 0) / matches.length)
      : 0,
  };

  const saveProfile = (data) => {
    if (myProfileItem) updateProfile(myProfileItem.id, data);
    else addProfile(data);
  };

  const addMatch = (data) => addMatchRaw(data);
  const addTraining = (data) => addTrainingRaw(data);

  const locked = PREMIUM_TABS.has(tab) && !isPremium;

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <div className="brand-icon"><IconBall size={20} /></div>
          FootRise
          {isPremium && <span className="badge accent" style={{ marginLeft: 8 }}>Premium</span>}
        </div>
        <div className="header-sub">
          {tab === 'profile' && 'Ton profil de joueur'}
          {tab === 'stats' && 'Tes statistiques de match'}
          {tab === 'training' && 'Tes entraînements'}
          {tab === 'challenges' && 'Tes défis à relever'}
          {tab === 'coach' && 'Tes conseils personnalisés'}
          {tab === 'blog' && 'Articles & conseils football'}
          {tab === 'friends' && 'Compare-toi à tes amis'}
          {tab === 'premium' && 'Débloque tout le potentiel'}
        </div>
      </header>

      <main>
        {locked && <PremiumLock tab={tab} onGoPremium={() => setTab('premium')} />}
        {!locked && tab === 'profile' && (
          <ProfileView profile={profile} saveProfile={saveProfile} user={user} stats={stats} />
        )}
        {!locked && tab === 'stats' && (
          <StatsView matches={matches} addMatch={addMatch} removeMatch={removeMatch} stats={stats} />
        )}
        {!locked && tab === 'training' && (
          <TrainingView trainings={trainings} addTraining={addTraining} removeTraining={removeTraining} />
        )}
        {!locked && tab === 'challenges' && (
          <ChallengesView stats={stats} />
        )}
        {!locked && tab === 'coach' && (
          <CoachView profile={profile} stats={stats} />
        )}
        {!locked && tab === 'blog' && (
          <BlogView />
        )}
        {!locked && tab === 'friends' && (
          <FriendsView
            user={user}
            allProfiles={allProfiles}
            allMatches={allMatches}
            allTrainings={allTrainings}
            friends={allFriends}
            addFriend={addFriend}
            removeFriend={removeFriend}
            myStats={stats}
          />
        )}
        {tab === 'premium' && (
          <PremiumView />
        )}
      </main>

      <nav className="bottom-nav" aria-label="Navigation principale">
        <button
          className={`nav-btn ${tab === 'profile' ? 'active' : ''}`}
          onClick={() => setTab('profile')}
          aria-current={tab === 'profile' ? 'page' : undefined}
          data-testid="nav-profile"
        >
          <IconUser /> Profil
        </button>
        <button
          className={`nav-btn ${tab === 'stats' ? 'active' : ''}`}
          onClick={() => setTab('stats')}
          aria-current={tab === 'stats' ? 'page' : undefined}
          data-testid="nav-stats"
        >
          <IconChart /> Stats
        </button>
        <button
          className={`nav-btn ${tab === 'training' ? 'active' : ''}`}
          onClick={() => setTab('training')}
          aria-current={tab === 'training' ? 'page' : undefined}
          data-testid="nav-training"
        >
          <IconDumbbell /> Training
        </button>
        <button
          className={`nav-btn ${tab === 'friends' ? 'active' : ''}`}
          onClick={() => setTab('friends')}
          aria-current={tab === 'friends' ? 'page' : undefined}
          data-testid="nav-friends"
        >
          <IconUsers /> Amis {!isPremium && '🔒'}
        </button>
        <button
          className={`nav-btn ${tab === 'challenges' ? 'active' : ''}`}
          onClick={() => setTab('challenges')}
          aria-current={tab === 'challenges' ? 'page' : undefined}
          data-testid="nav-challenges"
        >
          <IconTrophy /> Défis
        </button>
        <button
          className={`nav-btn ${tab === 'coach' ? 'active' : ''}`}
          onClick={() => setTab('coach')}
          aria-current={tab === 'coach' ? 'page' : undefined}
          data-testid="nav-coach"
        >
          <IconSpark /> Coach {!isPremium && '🔒'}
        </button>
        <button
          className={`nav-btn ${tab === 'blog' ? 'active' : ''}`}
          onClick={() => setTab('blog')}
          aria-current={tab === 'blog' ? 'page' : undefined}
          data-testid="nav-blog"
        >
          <IconBook /> Blog {!isPremium && '🔒'}
        </button>
        <button
          className={`nav-btn ${tab === 'premium' ? 'active' : ''}`}
          onClick={() => setTab('premium')}
          aria-current={tab === 'premium' ? 'page' : undefined}
          data-testid="nav-premium"
        >
          <IconSpark /> Premium
        </button>
      </nav>
    </div>
  );
}

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