/* @component-map
 * App — Main container, role selection, tab navigation [app.jsx]
 * TeacherView — Teacher's dashboard with class setup and supply management [components/TeacherView.jsx]
 * ParentView — Parent's view to browse needs and claim items [components/ParentView.jsx]
 * SupplyList — Shared supply list component [components/SupplyList.jsx]
 * @end-component-map */

import { useState } from 'react';
import { useIdentity, useCollection } from '@deplixo/sdk';
import { TeacherView } from './components/TeacherView.jsx';
import { ParentView } from './components/ParentView.jsx';

function App() {
  const { user, loading: userLoading } = useIdentity();
  const { items: roleItems, add: addRole, loading: roleLoading } = useCollection("roles");
  const [role, setRole] = useState(null);
  const [forceShowClassSetup, setForceShowClassSetup] = useState(false);

  if (userLoading || roleLoading) {
    return <div className="loading-screen"><div className="spinner"></div><p>Loading classroom...</p></div>;
  }

  const myRole = roleItems.find(r => r.author?.id === user?.id);
  const activeRole = role || (myRole ? myRole.value.role : null);

  const handleRoleSelect = async (selectedRole) => {
    if (myRole) return;
    await addRole({ role: selectedRole });
    setRole(selectedRole);
  };

  const handleBackToRoleSelect = () => {
    setRole(null);
  };

  const handleOpenClassSetup = () => {
    setForceShowClassSetup(true);
  };

  const handleClassSetupClosed = () => {
    setForceShowClassSetup(false);
  };

  if (!activeRole) {
    return (
      <div className="role-screen">
        <div className="role-card">
          <div className="role-icon-main">🏫</div>
          <h1>Classroom Needs</h1>
          <p className="role-subtitle">Welcome, {user?.name}! How would you like to participate?</p>
          <div className="role-buttons">
            <button className="role-btn teacher-btn" onClick={() => handleRoleSelect('teacher')}>
              <span className="role-emoji">📚</span>
              <span className="role-label">I'm a Teacher</span>
              <span className="role-desc">Set up your class & request supplies</span>
            </button>
            <button className="role-btn parent-btn" onClick={() => handleRoleSelect('parent')}>
              <span className="role-emoji">🤝</span>
              <span className="role-label">I'm a Parent</span>
              <span className="role-desc">Browse needs & volunteer supplies</span>
            </button>
          </div>
        </div>
      </div>
    );
  }

  return activeRole === 'teacher'
    ? <TeacherView
        user={user}
        onBack={!myRole ? handleBackToRoleSelect : undefined}
        forceShowClassSetup={forceShowClassSetup}
        onRequestClassSetup={handleOpenClassSetup}
        onClassSetupClosed={handleClassSetupClosed}
      />
    : <ParentView user={user} />;
}

// PROGRESS:sc_001:complete:Setting up role selection and app shell
ReactDOM.createRoot(document.getElementById("root")).render(<App />);