/* @component-map
 * App — Main container, handles view switching and layout
 * Confetti — Animated confetti overlay on chore completion
 * Leaderboard — Family member scores and progress bars
 * AddChoreModal — Modal for adding new chores
 * ChoreBoard — Board view of chores list
 * ChoreWeek — Weekly grouped view of chores
 * StatsFooter — Fixed bottom stats bar
 * @end-component-map */

import { useCollection } from '@deplixo/sdk';
import { FAMILY, CHORE_TEMPLATES, DAYS, SEED_CHORES } from './components/constants.jsx';
import { Confetti } from './components/Confetti.jsx';
import { Leaderboard } from './components/Leaderboard.jsx';
import { AddChoreModal } from './components/AddChoreModal.jsx';
import { ChoreBoard } from './components/ChoreBoard.jsx';
import { ChoreWeek } from './components/ChoreWeek.jsx';
import { useEffect, useState } from 'react';
import { StatsFooter } from './components/StatsFooter.jsx';

function App() {
  const { items: chores, loading, add, update, remove, collection } = useCollection("brennan_chores", { personal: true });
  const [view, setView] = useState("board");
  const [filterPerson, setFilterPerson] = useState(null);
  const [showConfetti, setShowConfetti] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [justCompleted, setJustCompleted] = useState(null);
  const [seeded, setSeeded] = useState(false);

  useEffect(() => {
    if (!collection || seeded) return;
    async function seed() {
      for (const chore of SEED_CHORES) {
        await collection.addIfEmpty(chore);
      }
      setSeeded(true);
    }
    seed();
  }, [collection, seeded]);

  const toggleDone = async (choreId) => {
    const entry = chores.find(c => c.id === choreId);
    if (!entry) return;
    if (!entry.value.done) {
      setShowConfetti(true);
      setJustCompleted(choreId);
      setTimeout(() => { setShowConfetti(false); setJustCompleted(null); }, 2000);
    }
    await update(choreId, { ...entry.value, done: !entry.value.done });
  };

  const addChore = async ({ name, icon, assignee, day, points }) => {
    await add({ name, icon, assignee, day, points, done: false });
  };

  const deleteChore = async (choreId) => {
    await remove(choreId);
  };

  const scores = {};
  FAMILY.forEach(f => { scores[f.id] = 0; });
  chores.filter(c => c.value.done).forEach(c => {
    scores[c.value.assignee] = (scores[c.value.assignee] || 0) + c.value.points;
  });

  const filtered = filterPerson ? chores.filter(c => c.value.assignee === filterPerson) : chores;

  return (
    <div className="app-container">
      <Confetti show={showConfetti} />
      <AddChoreModal show={showModal} onClose={() => setShowModal(false)} onAdd={addChore} />
      <div className="header">
        <div className="header-circle-right" />
        <div className="header-circle-left" />
        <h1 className="header-title">🏠 Brennan Family Chores</h1>
        <p className="header-subtitle">This week's mission board</p>
      </div>
      <Leaderboard scores={scores} filterPerson={filterPerson} setFilterPerson={setFilterPerson} />
      <div className="controls-bar">
        <div className="view-toggle">
          {[{ key: "board", label: "📋 Board" }, { key: "week", label: "📅 Week" }].map(v => (
            <button key={v.key} onClick={() => setView(v.key)} className={`view-btn ${view === v.key ? "view-btn-active" : ""}`}>{v.label}</button>
          ))}
        </div>
        <button onClick={() => setShowModal(true)} className="add-btn">+ Add</button>
      </div>
      {filterPerson && (
        <div className="filter-bar">
          <button onClick={() => setFilterPerson(null)} className="filter-chip" style={{ background: FAMILY.find(f => f.id === filterPerson)?.bg, color: FAMILY.find(f => f.id === filterPerson)?.color }}>
            Showing {FAMILY.find(f => f.id === filterPerson)?.name}'s chores ✕
          </button>
        </div>
      )}
      {view === "board" && <ChoreBoard chores={filtered} toggleDone={toggleDone} deleteChore={deleteChore} justCompleted={justCompleted} />}
      {view === "week" && <ChoreWeek chores={filtered} toggleDone={toggleDone} />}
      <StatsFooter chores={chores} scores={scores} />
    </div>
  );
}

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