/* @component-map
 * App — Main container, handles layout and view composition
 * StatsBar — Displays remaining, high priority, and completed task counts
 * AddTaskForm — Form for adding new farm tasks
 * FilterBar — Area filter buttons
 * TaskList — Renders to-do and completed task sections
 * TaskItem — Individual task row with check, details, and delete
 * SyncBar — Real-time sync status indicator
 * @end-component-map */

import { useCollection, useAuth } from '@deplixo/sdk';
import { StatsBar } from './components/StatsBar.jsx';
import { AddTaskForm } from './components/AddTaskForm.jsx';
import { FilterBar } from './components/FilterBar.jsx';
import { TaskList } from './components/TaskList.jsx';
import { SyncBar } from './components/SyncBar.jsx';

function App() {
  const { user, login, logout, loading: authLoading } = useAuth();
  const { items, loading, add, update, remove } = useCollection('tasks');
  const [filterArea, setFilterArea] = React.useState('all');

  const sorted = React.useMemo(() =>
    [...items].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)),
    [items]
  );

  const filtered = React.useMemo(() =>
    filterArea === 'all' ? sorted : sorted.filter(t => t.area === filterArea),
    [sorted, filterArea]
  );

  const todo = React.useMemo(() => filtered.filter(t => !t.done), [filtered]);
  const done = React.useMemo(() => filtered.filter(t => t.done), [filtered]);

  const totalRemaining = React.useMemo(() => sorted.filter(t => !t.done).length, [sorted]);
  const totalHigh = React.useMemo(() => sorted.filter(t => !t.done && t.priority === 'high').length, [sorted]);
  const totalDone = React.useMemo(() => sorted.filter(t => t.done).length, [sorted]);

  const handleAdd = async (task) => {
    await add({ ...task, done: false, createdAt: Date.now() });
  };

  const handleToggle = async (task) => {
    await update(task.id, { done: !task.done });
  };

  const handleDelete = async (task) => {
    await remove(task.id);
  };

  if (authLoading) {
    return (
      <div className="app">
        <div className="header">
          <div className="header-title">🌾 Farm Tasks</div>
          <div className="header-sub">Loading...</div>
        </div>
        <div className="loading">Checking authentication...</div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app">
        <div className="header">
          <div className="header-title">🌾 Farm Tasks</div>
          <div className="header-sub">Please log in to continue</div>
        </div>
        <div className="loading">
          <button className="login-btn" onClick={login}>Login</button>
        </div>
      </div>
    );
  }

  return (
    <div className="app">
      <div className="header">
        <div className="header-row">
          <div>
            <div className="header-title">🌾 Farm Tasks</div>
            <div className="header-sub">Your personal farm work manager</div>
          </div>
          <div className="user-info">
            <span className="user-name">{user.name || user.email || 'Farmer'}</span>
            <button className="logout-btn" onClick={logout}>Logout</button>
          </div>
        </div>
      </div>
      <StatsBar remaining={totalRemaining} high={totalHigh} completed={totalDone} />
      <AddTaskForm onAdd={handleAdd} />
      <FilterBar active={filterArea} onChange={setFilterArea} />
      {loading ? (
        <div className="loading">Loading your tasks...</div>
      ) : (
        <TaskList todo={todo} done={done} onToggle={handleToggle} onDelete={handleDelete} />
      )}
      <SyncBar connected={!loading} />
    </div>
  );
}

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