/* @component-map
 * App — Main container, handles layout, stats header, tab switching, and FAB
 * ChoreList — Displays active/completed chores with filtering
 * ChoreCard — Individual chore card with toggle, edit, delete
 * ChoreModal — Modal form for creating/editing chores
 * HistoryView — Shows history of chore actions
 * @end-component-map */

import { useCollection, useIdentity } from '@deplixo/sdk';
import { ChoreList } from './components/ChoreList.jsx';
import { ChoreModal } from './components/ChoreModal.jsx';
import { HistoryView } from './components/HistoryView.jsx';
import { useMemo, useState } from 'react';
import { CATEGORIES } from './components/constants.jsx';

function App() {
  const { user } = useIdentity();
  const { items: chores } = useCollection('chores', { personal: true });
  const [currentTab, setCurrentTab] = useState('active');
  const [modalOpen, setModalOpen] = useState(false);
  const [editingId, setEditingId] = useState(null);

  const today = new Date().toISOString().split('T')[0];
  const active = useMemo(() => chores.filter(c => !c.value.done), [chores]);
  const completed = useMemo(() => chores.filter(c => c.value.done), [chores]);
  const overdue = useMemo(() => active.filter(c => c.value.due && c.value.due < today), [active, today]);

  const openEdit = (id) => { setEditingId(id); setModalOpen(true); };
  const openNew = () => { setEditingId(null); setModalOpen(true); };

  return (
    <div>
      <div className="header">
        <div className="header-top">
          <div className="logo">ChoreHub <span>🏠</span></div>
          <div className="user-badge">👤 {user?.name || 'Me'}</div>
        </div>
        <div className="stats-row">
          <div className="stat-card"><div className="stat-num">{active.length}</div><div className="stat-label">To Do</div></div>
          <div className="stat-card"><div className="stat-num">{completed.length}</div><div className="stat-label">Done</div></div>
          <div className="stat-card"><div className="stat-num">{overdue.length}</div><div className="stat-label">Overdue</div></div>
        </div>
      </div>
      <div className="main">
        <div className="tabs">
          {['active', 'completed', 'history'].map(tab => (
            <button key={tab} className={`tab ${currentTab === tab ? 'active' : ''}`} onClick={() => setCurrentTab(tab)}>
              {tab === 'active' ? <>Active <span className="count">{active.length}</span></> :
               tab === 'completed' ? <>Completed <span className="count">{completed.length}</span></> : 'History'}
            </button>
          ))}
        </div>
        {currentTab === 'active' && <ChoreList chores={active} done={false} onEdit={openEdit} />}
        {currentTab === 'completed' && <ChoreList chores={completed} done={true} onEdit={openEdit} />}
        {currentTab === 'history' && <HistoryView />}
      </div>
      <button className="fab" onClick={openNew}>+</button>
      {modalOpen && <ChoreModal editingId={editingId} onClose={() => setModalOpen(false)} />}
    </div>
  );
}

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