// app.jsx — Main App container for MamaFlow

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "bien",
  "dark": false,
  "density": "comfy",
  "homeVariant": "classic",
  "palette": "rosa",
  "customColor": "#C9626B",
  "caregiverMode": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const theme = makeTheme(t.palette, t.dark, t.customColor);
  const caregiver = !!t.caregiverMode;
  // Effective "me" id depending on caregiver mode
  const meId = caregiver ? 'papa' : 'me';

  // Onboarding: show on first visit
  const [showOnboarding, setShowOnboarding] = React.useState(() => {
    try { return !localStorage.getItem('mamaflow.onboarded'); } catch { return true; }
  });

  // User profile (persisted)
  const [profile, setProfile] = React.useState(() => {
    try {
      const raw = localStorage.getItem('mamaflow.profile');
      if (raw) return JSON.parse(raw);
    } catch {}
    return { name: 'Valeria', emoji: '🌸', email: 'valeria@ejemplo.com' };
  });
  const updateProfile = (patch) => setProfile(p => {
    const next = { ...p, ...patch };
    try { localStorage.setItem('mamaflow.profile', JSON.stringify(next)); } catch {}
    return next;
  });

  // Notification prefs (persisted)
  const [notif, setNotif] = React.useState(() => {
    try {
      const raw = localStorage.getItem('mamaflow.notif');
      if (raw) return JSON.parse(raw);
    } catch {}
    return { reminders: true, mood: true, weekly: true, partner: true, quietStart: '22:00', quietEnd: '07:00' };
  });
  const updateNotif = (patch) => setNotif(n => {
    const next = { ...n, ...patch };
    try { localStorage.setItem('mamaflow.notif', JSON.stringify(next)); } catch {}
    return next;
  });

  // App state
  const [tab, setTab]             = React.useState('tasks'); // 'tasks' | 'calendar'
  const [tasks, setTasks]         = React.useState(SEED_TASKS);
  const [family, setFamily]       = React.useState(SEED_FAMILY);
  const [visiblePillars, setVP]   = React.useState(Object.keys(PILLARS));
  const [pillarFilter, setPF]     = React.useState('all');

  // Modal state — sheets son mutuamente excluyentes
  const [sheet, _setSheet] = React.useState(null);
  const [editing, _setEditing] = React.useState(null);
  const [activity, setActivity] = React.useState(null);
  const [viewMemberId, _setViewMemberId] = React.useState(null);
  // Wrappers: abrir cualquier sheet cierra las demás
  const setSheet = (s) => { _setSheet(s); if (s) { _setEditing(null); _setViewMemberId(null); } };
  const setEditing = (t) => { _setEditing(t); if (t) { _setSheet(null); _setViewMemberId(null); } };
  const setViewMemberId = (id) => { _setViewMemberId(id); if (id) { _setSheet(null); _setEditing(null); } };

  const toggleTask = (id) => {
    setTasks(arr => {
      const target = arr.find(t => t.id === id);
      if (!target) return arr;
      // If completing a recurring task, spawn the next instance.
      let extra = [];
      if (!target.done && target.repeat) {
        const nextDate = nextInstance(target.repeat, target.date);
        if (nextDate) {
          const alreadyHas = arr.some(t => t.title === target.title && t.date === nextDate && t.who === target.who);
          if (!alreadyHas) extra = [{ ...target, id: 'r' + Date.now(), date: nextDate, done: false }];
        }
      }
      return [...arr.map(t => t.id === id ? { ...t, done: !t.done } : t), ...extra];
    });
  };
  const postponeTask = (id) => {
    setTasks(arr => arr.map(t => {
      if (t.id !== id) return t;
      const d = new Date(t.date + 'T12:00:00'); d.setDate(d.getDate() + 1);
      return { ...t, date: d.toISOString().slice(0, 10) };
    }));
  };
  const saveTask = (next) => setTasks(arr => arr.map(t => t.id === next.id ? next : t));
  const deleteTask = (id) => setTasks(arr => arr.filter(t => t.id !== id));

  // Simulated family activity — fires once after 6s
  React.useEffect(() => {
    const id = setTimeout(() => {
      const member = family.find(m => m.id === 'papa');
      if (member) setActivity({ member, title: 'Comprar leche y pañales' });
    }, 6500);
    return () => clearTimeout(id);
  }, []);
  const createTask = (t) => setTasks(arr => [t, ...arr]);
  const addFamilyMember = (name) => {
    const used = new Set(family.map(f => f.color));
    const color = FAMILY_COLORS.find(c => !used.has(c)) || FAMILY_COLORS[Math.floor(Math.random() * FAMILY_COLORS.length)];
    setFamily(arr => [...arr, {
      id: 'p' + Date.now(),
      name, short: name.charAt(0).toUpperCase(),
      color, whatsapp: true,
    }]);
  };
  const removeFamilyMember = (id) => {
    setFamily(arr => arr.filter(f => f.id !== id));
    setTasks(arr => arr.map(t => t.who === id ? { ...t, who: 'me' } : t));
  };
  const togglePillar = (pid) => {
    setVP(arr => arr.includes(pid) ? arr.filter(x => x !== pid) : [...arr, pid]);
  };
  const reset = () => {
    setTasks(SEED_TASKS); setFamily(SEED_FAMILY);
    setVP(Object.keys(PILLARS)); setPF('all');
  };

  // Filter tasks by visible pillars
  const visibleTasks = tasks.filter(x => visiblePillars.includes(x.pillar));

  return (
    <div style={{
      width: '100%', height: '100%',
      background: theme.bg, color: theme.text,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      fontFamily: '"DM Sans", -apple-system, system-ui, sans-serif',
      WebkitFontSmoothing: 'antialiased',
    }}>
      {/* Scrolling content */}
      <div style={{ flex: 1, overflow: 'auto', position: 'relative' }}>
        {tab === 'tasks' ? (
          <Home
            variant={t.homeVariant}
            tasks={visibleTasks} family={family}
            profile={profile}
            theme={theme} density={t.density}
            mood={t.mood} setMood={(m) => setTweak('mood', m)}
            pillarFilter={pillarFilter} setPillarFilter={setPF}
            tab={tab} setTab={setTab}
            onToggle={toggleTask}
            onPostpone={postponeTask}
            onTaskClick={(t) => setEditing(t)}
            onEditPillars={() => setSheet('pillars')}
            onSettings={() => setSheet('settings')}
            onQuickCreate={createTask}
            onAssigneeClick={(id) => { if (id !== meId) setViewMemberId(id); }}
          />
        ) : tab === 'calendar' ? (
          <Calendar
            tasks={visibleTasks} family={family}
            theme={theme} density={t.density}
            tab={tab} setTab={setTab}
            onToggle={toggleTask}
            onTaskClick={(t) => setEditing(t)}
          />
        ) : (
          <TuScreen
            tasks={visibleTasks} family={family}
            theme={theme} density={t.density}
            tab={tab} setTab={setTab}
            onEditPillars={() => setSheet('pillars')}
            onSettings={() => setSheet('settings')}
          />
        )}
      </div>

      {/* FAB */}
      <FAB onClick={() => setSheet('new')} theme={theme} />

      {/* Sheets */}
      <NewTaskSheet
        open={sheet === 'new'}
        onClose={() => setSheet(null)}
        family={family} theme={theme}
        onCreate={createTask}
      />
      <FamilySheet
        open={sheet === 'family'}
        onClose={() => setSheet(null)}
        family={family} theme={theme}
        onAdd={addFamilyMember}
        onRemove={removeFamilyMember}
      />
      <PillarsSheet
        open={sheet === 'pillars'}
        onClose={() => setSheet(null)}
        theme={theme}
        visible={visiblePillars}
        onToggle={togglePillar}
      />
      <SettingsSheet
        open={sheet === 'settings'}
        onClose={() => setSheet(null)}
        theme={theme}
        profile={profile} onUpdateProfile={updateProfile}
        notif={notif} onUpdateNotif={updateNotif}
        dark={t.dark} onToggleDark={(v) => setTweak('dark', v)}
        density={t.density} onChangeDensity={(v) => setTweak('density', v)}
        palette={t.palette} onChangePalette={(v) => setTweak('palette', v)}
        customColor={t.customColor} onChangeCustomColor={(v) => setTweak({ palette: 'custom', customColor: v })}
        caregiverMode={caregiver} onToggleCaregiver={(v) => setTweak('caregiverMode', v)}
        onOpenFamily={() => setSheet('family')}
        onOpenPillars={() => setSheet('pillars')}
        onRedoOnboarding={() => {
          try { localStorage.removeItem('mamaflow.onboarded'); } catch {}
          setShowOnboarding(true);
        }}
        onReset={reset}
      />
      <PartnerSyncSheet
        memberId={viewMemberId}
        onClose={() => setViewMemberId(null)}
        theme={theme} family={family} tasks={tasks}
        onToggle={toggleTask}
        onShareToPartner={(id) => {
          if (!viewMemberId) return;
          setTasks(arr => arr.map(t => t.id === id ? { ...t, who: viewMemberId } : t));
        }}
      />
      <TaskDetailSheet
        task={editing}
        family={family} theme={theme}
        onClose={() => setEditing(null)}
        onSave={saveTask}
        onDelete={deleteTask}
        onPostpone={postponeTask}
        onToggle={toggleTask}
      />
      <ActivityToast event={activity} theme={theme} onDismiss={() => setActivity(null)} />

      {showOnboarding && (
        <Onboarding
          theme={theme}
          family={family}
          onAddFamily={addFamilyMember}
          onDone={({ mood, pillars }) => {
            setTweak('mood', mood);
            setVP(pillars && pillars.length ? pillars : Object.keys(PILLARS));
            setShowOnboarding(false);
          }}
        />
      )}

      {/* Tweaks panel */}
      <TweaksPanel>
        <TweakSection label="Mood actual" />
        <TweakRadio label="Mood" value={t.mood}
          options={[
            { value: 'pesado',  label: '😮‍💨' },
            { value: 'bien',    label: '😊' },
            { value: 'al100',   label: '🔥' },
            { value: 'fluyendo',label: '✨' },
          ]}
          onChange={(v) => setTweak('mood', v)} />

        <TweakSection label="Apariencia" />
        <TweakToggle label="Modo oscuro" value={t.dark}
          onChange={(v) => setTweak('dark', v)} />
        <TweakRadio label="Densidad" value={t.density}
          options={['compact', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakRadio label="Paleta" value={t.palette}
          options={[
            { value: 'rosa',   label: 'Rosa' },
            { value: 'morado', label: 'Morado' },
            { value: 'verde',  label: 'Verde' },
          ]}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Modo de uso" />
        <TweakToggle label="Vista papá / cuidador" value={caregiver}
          onChange={(v) => setTweak('caregiverMode', v)} />

        <TweakSection label="Layout del Home" />
        <TweakRadio label="Variante" value={t.homeVariant}
          options={[
            { value: 'classic', label: 'Lista' },
            { value: 'focus',   label: 'Foco' },
            { value: 'time',    label: 'Horario' },
          ]}
          onChange={(v) => setTweak('homeVariant', v)} />
      </TweaksPanel>
    </div>
  );
}

// Tab navigation lives inside each screen (Home/Calendar/Tu)
// como ViewSwitcher segmentado, en lugar de una barra fija.

Object.assign(window, { App });