/* @component-map
 * App — Main container, handles view switching and layout
 * Header — Sticky header with stats and user badge
 * AddChoreForm — Form to add new chores with priority, category, due date
 * ChoreFilters — Category filter buttons
 * ChoreList — Displays active and completed chores
 * ChoreCard — Individual chore card with toggle, edit, delete
 * EditModal — Modal for editing a chore
 * NameModal — Modal prompting for user's display name
 * @end-component-map */

import { Header } from './components/Header.jsx';
import { AddChoreForm } from './components/AddChoreForm.jsx';
import { ChoreFilters } from './components/ChoreFilters.jsx';
import { ChoreList } from './components/ChoreList.jsx';
import { EditModal } from './components/EditModal.jsx';
import { NameModal } from './components/NameModal.jsx';

function App() {
  const [activeFilter, setActiveFilter] = React.useState('all');
  const [editingId, setEditingId] = React.useState(null);
  const { items: settings, loading: settingsLoading, add: addSetting, update: updateSetting } = useCollection('chore_settings', { personal: true });
  const { items: chores, loading: choresLoading, add: addChore, update: updateChore, remove: removeChore } = useCollection('chores', { personal: true });

  const userSetting = settings.find(s => s.value && s.value.key === 'user_name');
  const userName = userSetting ? userSetting.value.name : '';

  const saveName = async (name) => {
    if (userSetting) {
      await updateSetting(userSetting.id, { key: 'user_name', name });
    } else {
      await addSetting({ key: 'user_name', name });
    }
  };

  if (settingsLoading) {
    return <div className="loading-screen"><div className="emoji">🏠</div><p>Loading...</p></div>;
  }

  if (!userName) {
    return <NameModal onSave={saveName} />;
  }

  const editingChore = editingId ? chores.find(c => c.id === editingId) : null;

  return (
    <div>
      <Header userName={userName} chores={chores} onChangeName={saveName} />
      <div className="container">
        <AddChoreForm userName={userName} addChore={addChore} />
        <ChoreFilters activeFilter={activeFilter} setActiveFilter={setActiveFilter} />
        <ChoreList
          chores={chores}
          loading={choresLoading}
          activeFilter={activeFilter}
          userName={userName}
          updateChore={updateChore}
          removeChore={removeChore}
          onEdit={setEditingId}
        />
      </div>
      {editingId && editingChore && (
        <EditModal
          chore={editingChore}
          onSave={async (data) => { await updateChore(editingId, data); setEditingId(null); }}
          onClose={() => setEditingId(null)}
        />
      )}
    </div>
  );
}

import { useCollection } from '@deplixo/sdk';
ReactDOM.createRoot(document.getElementById("root")).render(<App />);