// Tirelire.ch — main app (web)

function App() {
  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "screen": "login",
    "dark": false
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  const [screen, setScreenState] = React.useState('login');
  const setScreen = (s) => { setScreenState(s); setTweak('screen', s); };

  const dark = !!tweaks.dark;
  React.useEffect(() => {
    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
  }, [dark]);

  // Auth state
  const [user, setUser] = React.useState(null);
  const [authLoading, setAuthLoading] = React.useState(true);
  const [authError, setAuthError] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);

  // App state
  const [income, setIncome] = React.useState(0);
  const [investmentGoal, setInvestmentGoal] = React.useState(0);
  const [transactions, setTransactions] = React.useState([]);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [monthOffset, setMonthOffset] = React.useState(0);

  // ── Helpers ──────────────────────────────────────────────
  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 2400);
  };

  const toAppTx = (tx) => ({
    id: tx.id,
    categoryId: tx.category,
    amount: tx.type === 'income' ? Math.abs(tx.amount) : -Math.abs(tx.amount),
    description: tx.description || tx.category,
    date: tx.date,
    dateLabel: new Date(tx.date + 'T12:00:00').toLocaleDateString('fr-CH', {
      day: 'numeric', month: 'short',
    }),
  });

  // ── Supabase data loading ─────────────────────────────────
  const loadProfile = async (userId) => {
    const { data } = await window.db
      .from('profiles')
      .select('monthly_income, investment_goal')
      .eq('id', userId)
      .single();
    if (data?.monthly_income) setIncome(Number(data.monthly_income));
    if (data?.investment_goal != null) setInvestmentGoal(Number(data.investment_goal));
  };

  const loadTransactions = async (userId) => {
    const { data } = await window.db
      .from('transactions')
      .select('*')
      .eq('user_id', userId)
      .order('date', { ascending: false });
    if (data) setTransactions(data.map(toAppTx));
  };

  // ── Session init on mount ─────────────────────────────────
  React.useEffect(() => {
    window.db.auth.getSession().then(async ({ data: { session } }) => {
      if (session?.user) {
        setUser(session.user);
        const { data: profile } = await window.db
          .from('profiles').select('id').eq('id', session.user.id).maybeSingle();
        if (profile) {
          setScreen('dashboard');
          loadProfile(session.user.id);
          loadTransactions(session.user.id);
        } else {
          setScreen('onboarding');
        }
      }
      setAuthLoading(false);
    });

    const { data: { subscription } } = window.db.auth.onAuthStateChange((event, session) => {
      if (event === 'SIGNED_OUT') {
        setUser(null);
        setTransactions([]);
        setIncome(0);
      }
    });
    return () => subscription.unsubscribe();
  }, []);

  // ── Auth handlers ─────────────────────────────────────────
  const handleLogin = async ({ email, password }) => {
    setAuthError(null);
    setSubmitting(true);
    const { error } = await window.db.auth.signInWithPassword({ email, password });
    setSubmitting(false);
    if (error) {
      setAuthError(
        error.message.includes('Invalid login credentials')
          ? 'Email ou mot de passe incorrect.'
          : error.message
      );
      return;
    }
    const { data: { user: u } } = await window.db.auth.getUser();
    setUser(u);
    await loadProfile(u.id);
    await loadTransactions(u.id);
    setScreen('dashboard');
  };

  const handleSignup = async ({ email, password }) => {
    setAuthError(null);
    setSubmitting(true);
    const { data, error } = await window.db.auth.signUp({ email, password });
    setSubmitting(false);
    if (error) {
      setAuthError(error.message);
      return;
    }
    if (!data.session) {
      setScreen('confirm-email');
      return;
    }
    const { data: { user: u } } = await window.db.auth.getUser();
    if (u) setUser(u);
    setScreen('onboarding');
  };

  const handleSignOut = async () => {
    await window.db.auth.signOut();
    setScreen('login');
  };

  // ── Onboarding ────────────────────────────────────────────
  const handleOnboardingComplete = async ({ income: v, investmentGoal: g }) => {
    setIncome(v);
    if (g) setInvestmentGoal(g);
    const { data: { user: u } } = await window.db.auth.getUser();
    if (u) await window.db.from('profiles').upsert({ id: u.id, monthly_income: v, investment_goal: g || 0 });
    setScreen('dashboard');
    showToast('Compte créé · bienvenue !');
  };

  const handleInvestmentGoalChange = async (v) => {
    setInvestmentGoal(v);
    if (user) await window.db.from('profiles').upsert({ id: user.id, investment_goal: v });
    showToast('Objectif mis à jour');
  };

  // ── Transactions ──────────────────────────────────────────
  const handleAddTx = async (data) => {
    const cat = CATEGORIES.find(c => c.id === data.categoryId);
    if (!user) return;

    const payload = {
      user_id: user.id,
      amount: Math.abs(data.amount),
      type: data.type,
      category: data.categoryId,
      description: data.description || cat.label,
      date: data.date,
    };

    const { data: saved, error } = await window.db
      .from('transactions')
      .insert(payload)
      .select()
      .single();

    if (!error && saved) {
      setTransactions(prev => [toAppTx(saved), ...prev]);
    }
    setModalOpen(false);
    showToast('Transaction ajoutée');
  };

  const handleDeleteTx = async (id) => {
    if (!user) return;
    const { error } = await window.db.from('transactions').delete().eq('id', id).eq('user_id', user.id);
    if (!error) {
      setTransactions(prev => prev.filter(tx => tx.id !== id));
      showToast('Transaction supprimée');
    }
  };

  const handleIncomeChange = async (v) => {
    setIncome(v);
    if (user) await window.db.from('profiles').upsert({ id: user.id, monthly_income: v });
    showToast('Revenu mis à jour');
  };

  // ── Month nav (dynamique, basé sur la date réelle) ────────
  const now = new Date();
  const selectedDate = new Date(now.getFullYear(), now.getMonth() + monthOffset);
  const selectedMonthStr = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}`;
  const monthLabel = selectedDate.toLocaleDateString('fr-CH', { month: 'long', year: 'numeric' });
  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
  const defaultModalDate = monthOffset === 0 ? todayStr : `${selectedMonthStr}-01`;

  // Filtrer les transactions par mois sélectionné
  const monthlyTransactions = transactions.filter(tx => tx.date && tx.date.startsWith(selectedMonthStr));

  const state = { income, transactions: monthlyTransactions, monthLabel };

  const isAuthed = ['dashboard', 'transactions', 'settings', 'annuel', 'assurances'].includes(screen);

  const pageInfo = {
    dashboard:    { title: monthLabel, sub: 'Budget' },
    transactions: { title: 'Toutes les transactions', sub: 'Historique' },
    settings:     { title: 'Paramètres', sub: 'Compte' },
    annuel:       { title: String(selectedDate.getFullYear()), sub: 'Analyse annuelle' },
    assurances:   { title: 'Mes assurances', sub: 'Suivi' },
  }[screen] || {};

  if (authLoading) {
    return (
      <div style={{
        height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--bg)',
      }}>
        <div className="skeleton" style={{ width: 120, height: 16, borderRadius: 8 }} />
      </div>
    );
  }

  return (
    <div className="app-root" data-screen-label={`Tirelire.ch — ${screen}`}>
      {screen === 'login' && (
        <AuthScreen mode="login" dark={dark} onToggleDark={() => setTweak('dark', !dark)}
          onSubmit={handleLogin}
          onSwitch={() => { setAuthError(null); setScreen('signup'); }}
          authError={authError} loading={submitting} />
      )}
      {screen === 'signup' && (
        <AuthScreen mode="signup" dark={dark} onToggleDark={() => setTweak('dark', !dark)}
          onSubmit={handleSignup}
          onSwitch={() => { setAuthError(null); setScreen('login'); }}
          authError={authError} loading={submitting} />
      )}
      {screen === 'onboarding' && (
        <OnboardingScreen dark={dark} onToggleDark={() => setTweak('dark', !dark)}
          onComplete={handleOnboardingComplete} />
      )}
      {screen === 'confirm-email' && <ConfirmEmailScreen />}

      {isAuthed && (
        <AppShell
          current={screen}
          onNav={setScreen}
          onAddTx={() => setModalOpen(true)}
          onSignOut={handleSignOut}
          dark={dark}
          onToggleDark={() => setTweak('dark', !dark)}
          income={income}
          monthLabel={monthLabel}
          onPrev={() => setMonthOffset(o => o - 1)}
          onNext={() => setMonthOffset(o => Math.min(0, o + 1))}
          canGoNext={monthOffset < 0}
          showMonth={screen === 'dashboard'}
          pageTitle={pageInfo.title}
          pageSub={pageInfo.sub}
          user={user}
        >
          {screen === 'dashboard' && (
            <DashboardScreen state={state}
              onAddTx={() => setModalOpen(true)}
              onOpenAll={() => setScreen('transactions')}
              onDelete={handleDeleteTx}
              investmentGoal={investmentGoal} />
          )}
          {screen === 'transactions' && (
            <TransactionsScreen state={{ ...state, transactions: monthlyTransactions }}
              onDelete={handleDeleteTx} />
          )}
          {screen === 'settings' && (
            <SettingsScreen state={state}
              onIncomeChange={handleIncomeChange}
              onSignOut={handleSignOut}
              dark={dark} onToggleDark={() => setTweak('dark', !dark)}
              investmentGoal={investmentGoal}
              onInvestmentGoalChange={handleInvestmentGoalChange}
              user={user} />
          )}
          {screen === 'annuel' && (
            <AnnualScreen allTransactions={transactions} income={income}
              selectedYear={selectedDate.getFullYear()} />
          )}
          {screen === 'assurances' && (
            <InsurancesScreen />
          )}
        </AppShell>
      )}

      <AddTransactionModal open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSave={handleAddTx}
        defaultIncome={income}
        defaultDate={defaultModalDate}
        todayStr={todayStr} />

      {toast && <div className="toast">{Icon.check(15)} {toast}</div>}

      <Tweaks tweaks={tweaks} setTweak={setTweak} setScreen={setScreen} />
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Tweaks panel
// ────────────────────────────────────────────────────────────
function Tweaks({ tweaks, setTweak, setScreen }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Écran">
        <TweakSelect value={tweaks.screen} onChange={(v) => setScreen(v)}
          options={[
            { value: 'login',        label: 'Login' },
            { value: 'signup',       label: 'Signup' },
            { value: 'onboarding',   label: 'Onboarding' },
            { value: 'dashboard',    label: 'Dashboard' },
            { value: 'transactions', label: 'Transactions' },
            { value: 'annuel',       label: 'Analyse annuelle' },
            { value: 'assurances',   label: 'Assurances' },
            { value: 'settings',     label: 'Paramètres' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Apparence">
        <TweakToggle label="Mode sombre" value={tweaks.dark}
          onChange={(v) => setTweak('dark', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

window.App = App;