/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * ModuleBrowser — Browse and take learning modules [components/ModuleBrowser.jsx]
 * ModuleCreator — Create new learning modules [components/ModuleCreator.jsx]
 * ModulePlayer — Take a module lesson + quiz [components/ModulePlayer.jsx]
 * ProgressDashboard — Track scores, badges, completions [components/ProgressDashboard.jsx]
 * SalesChart — Reusable bar chart component powered by Deplixo SDK rendering.
 * @end-component-map */

import { useMemo, useState } from 'react';
import { useAuth, renderChart } from '@deplixo/sdk';
import { ModuleBrowser } from './components/ModuleBrowser.jsx';
import { ModuleCreator } from './components/ModuleCreator.jsx';
import { ProgressDashboard } from './components/ProgressDashboard.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [tab, setTab] = useState('browse');

  const tabs = [
    { id: 'browse', label: '📚 Modules', icon: '📚' },
    { id: 'create', label: '✏️ Create', icon: '✏️' },
    { id: 'progress', label: '🏆 Progress', icon: '🏆' },
  ];

  const displayName = useMemo(() => user?.name || user?.email || 'Learner', [user]);

  if (loading) {
    return (
      <div className="app-shell auth-shell">
        <div className="auth-card">
          <div className="auth-spinner" aria-hidden="true" />
          <h2>Signing you in...</h2>
          <p>Connecting your learner profile and loading your workspace.</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <div className="header-inner">
            <h1 className="app-title">
              <span className="title-icon">🧠</span>
              LearnBit
            </h1>
            <p className="app-subtitle">Bite-sized learning, lasting knowledge</p>
          </div>
        </header>

        <main className="auth-card">
          <div className="auth-hero">📚</div>
          <h2>Sign in to continue</h2>
          <p>
            Use Google OAuth to access your saved modules, track progress, and earn badges.
          </p>
          <button className="btn btn-primary btn-large auth-signin-btn" onClick={() => login('google')}>
            Continue with Google
          </button>
          <p className="auth-note">Learner accounts are protected by Deplixo authentication.</p>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <div className="user-bar">
            <div className="user-chip">
              {user.avatar ? <img className="user-avatar" src={user.avatar} alt={displayName} /> : <span className="user-avatar-fallback">{displayName.charAt(0).toUpperCase()}</span>}
              <div className="user-meta">
                <span className="user-greeting">Welcome, {displayName}</span>
                <span className="user-submeta">Learner account</span>
              </div>
            </div>
            <button className="btn btn-ghost btn-small" onClick={logout}>
              Sign Out
            </button>
          </div>
          <h1 className="app-title">
            <span className="title-icon">🧠</span>
            LearnBit
          </h1>
          <p className="app-subtitle">Bite-sized learning, lasting knowledge</p>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(t => (
          <button
            key={t.id}
            className={`tab-btn ${tab === t.id ? 'active' : ''}`}
            onClick={() => setTab(t.id)}
          >
            <span className="tab-icon">{t.icon}</span>
            <span className="tab-label">{t.label.split(' ').slice(1).join(' ')}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {tab === 'browse' && <ModuleBrowser />}
        {tab === 'create' && <ModuleCreator />}
        {tab === 'progress' && <ProgressDashboard />}
      </main>
    </div>
  );
}

export default App;

function SalesChart({ data }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current && data.length > 0) {
      renderChart(canvasRef.current, {
        type: "bar",
        data: {
          labels: data.map(d => d.label),
          datasets: [{ label: "Sales", data: data.map(d => d.value) }]
        }
      });
    }
  }, [data]);

  return <canvas ref={canvasRef} />;
}

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