// ========== Login Screen ==========
function LoginScreen({ onLogin }) {
  const [selected, setSelected] = React.useState(null);
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    if (!selected || !password) return;
    setLoading(true);
    setError('');
    fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: selected, password }),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { setError(data.error); setLoading(false); }
        else onLogin(data);
      })
      .catch(() => { setError('Erro de conexão'); setLoading(false); });
  }

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
      <div style={{ width: 320, padding: 32, background: 'var(--surface)', borderRadius: 16, boxShadow: '0 4px 24px rgba(0,0,0,.08)' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div className="brand-mark" style={{ margin: '0 auto 8px', width: 40, height: 40, fontSize: 18 }}>f</div>
          <div className="brand-name" style={{ fontSize: 20 }}>finanças</div>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>Usuário</label>
            <div className="chip-select" style={{ width: '100%' }}>
              {['Bruno', 'Hellen'].map(u => (
                <button key={u} type="button" className={selected === u ? 'active' : ''} style={{ flex: 1 }}
                  onClick={() => setSelected(u)}>{u}</button>
              ))}
            </div>
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>Senha</label>
            <input className="input" type="password" placeholder="••••••••"
              value={password} onChange={e => setPassword(e.target.value)}
              autoComplete="current-password"/>
          </div>
          {error && <div style={{ color: 'var(--danger,#e55)', fontSize: 13, marginBottom: 12 }}>{error}</div>}
          <button className="btn btn-primary" type="submit" style={{ width: '100%' }}
            disabled={!selected || !password || loading}>
            {loading ? 'Entrando...' : 'Entrar'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ========== App shell ==========
const { Avatar, Icon } = window.FinUtils;

function App() {
  const seed = window.SEED;

  const [state, setState] = React.useState(() => ({
    user:             null,
    view:             'dashboard',
    showAdd:          false,
    loaded:           false,
    authChecked:      false,
    users:            seed.USERS,
    tags:             seed.TAGS,
    txs:              seed.TRANSACTIONS,
    history:          seed.MONTHLY_HISTORY,
    subs:             seed.SUBSCRIPTIONS,
    assets:           seed.ASSETS,
    goals:            seed.GOALS,
    savingsTarget:    seed.MONTHLY_SAVINGS_TARGET,
    investmentTarget: 0.25,
    dailyBudgets:     {},
  }));

  // Verifica sessão ativa ao carregar
  React.useEffect(() => {
    fetch('/api/auth/me')
      .then(r => r.ok ? r.json() : null)
      .then(user => setState(s => ({ ...s, user: user || null, authChecked: true })))
      .catch(() => setState(s => ({ ...s, authChecked: true })));
  }, []);

  // Carrega dados da API quando o usuário é definido
  React.useEffect(() => {
    if (state.user && !state.loaded) {
      fetch('/api/data')
        .then(r => {
          if (r.status === 401) { setState(s => ({ ...s, user: null })); return null; }
          return r.json();
        })
        .then(data => data && setState(s => ({ ...s, ...data, loaded: true })))
        .catch(() => setState(s => ({ ...s, loaded: true })));
    }
  }, [state.user]);

  const [density, setDensity] = React.useState('comfortable');
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [showTagsMgr, setShowTagsMgr] = React.useState(false);
  const [budgetAmount,    setBudgetAmount]    = React.useState('');
  const [budgetStartDate, setBudgetStartDate] = React.useState('');
  const [budgetSaving,    setBudgetSaving]    = React.useState(false);

  React.useEffect(() => {
    if (tweaksOpen && state.user) {
      const b = (state.dailyBudgets || {})[String(state.user.id)];
      if (b) {
        setBudgetAmount(b.amount ? (b.amount / 100).toFixed(2).replace('.', ',') : '');
        setBudgetStartDate(b.startDate || '');
      }
    }
  }, [tweaksOpen]);
  React.useEffect(() => { document.documentElement.dataset.density = density; }, [density]);
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode')   setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  function handleLogout() {
    fetch('/api/auth/logout', { method: 'POST' })
      .finally(() => setState(s => ({ ...s, user: null, loaded: false })));
  }

  if (!state.authChecked) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
        <div style={{ color: 'var(--text-mute)', textAlign: 'center' }}>
          <div style={{ fontSize: 32, marginBottom: 12 }}>💸</div>
          <div style={{ fontWeight: 500 }}>Carregando...</div>
        </div>
      </div>
    );
  }

  if (!state.user) {
    return <LoginScreen onLogin={user => setState(s => ({ ...s, user, loaded: false }))} />;
  }

  const nav = [
    { id: 'dashboard', label: 'Painel',       icon: 'home'   },
    { id: 'flow',      label: 'Fluxo Diário', icon: 'list'   },
    { id: 'monthly',   label: 'Mensal',       icon: 'chart'  },
    { id: 'subs',      label: 'Assinaturas',  icon: 'repeat' },
    { id: 'assets',    label: 'Patrimônio',   icon: 'wallet' },
    { id: 'goals',     label: 'Metas',        icon: 'target' },
  ];

  const view = state.view;

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="brand-mark">f</div>
          <span className="brand-name">finanças</span>
        </div>

        <button className="user-switcher" onClick={handleLogout}>
          <Avatar user={state.user}/>
          <div className="user-info">
            <div className="name">{state.user.name}</div>
            <div className="role">sair</div>
          </div>
          <Icon name="settings" size={14}/>
        </button>

        <nav className="nav">
          {nav.map(n => (
            <button key={n.id} className={`nav-item ${view === n.id ? 'active' : ''}`}
                    onClick={() => setState(s => ({ ...s, view: n.id }))}>
              <Icon name={n.icon} size={18}/>
              {n.label}
            </button>
          ))}
        </nav>

        <div className="sidebar-footer">
          <button className="nav-item" onClick={() => setTweaksOpen(!tweaksOpen)}>
            <Icon name="settings" size={18}/>
            Ajustes
          </button>
        </div>
      </aside>

      <div>
        {/* Mobile header */}
        <div className="mobile-head">
          <div className="hstack">
            <div className="brand-mark" style={{ width: 28, height: 28, fontSize: 12 }}>f</div>
            <span className="brand-name" style={{ fontSize: 18 }}>finanças</span>
          </div>
          <button onClick={handleLogout}><Avatar user={state.user}/></button>
        </div>

        <main className="main">
          {!state.loaded && (
            <div style={{ textAlign: 'center', padding: '80px 0', color: 'var(--text-mute)' }}>
              <div style={{ fontSize: 32, marginBottom: 12 }}>💸</div>
              <div style={{ fontWeight: 500 }}>Carregando...</div>
            </div>
          )}
          {state.loaded && view === 'dashboard' && <window.Dashboard state={state} setState={setState}/>}
          {state.loaded && view === 'flow'      && <window.Flow      state={state} setState={setState}/>}
          {state.loaded && view === 'monthly'   && <window.Monthly   state={state}/>}
          {state.loaded && view === 'subs'      && <window.Subs      state={state} setState={setState}/>}
          {state.loaded && view === 'assets'    && <window.Assets    state={state} setState={setState}/>}
          {state.loaded && view === 'goals'     && <window.Goals     state={state} setState={setState}/>}
        </main>
      </div>

      {/* Mobile bottom nav */}
      <nav className="mobile-nav">
        <button className={`mobile-nav-item ${view === 'dashboard' ? 'active' : ''}`} onClick={() => setState(s => ({ ...s, view: 'dashboard' }))}>
          <Icon name="home" size={20}/> Painel
        </button>
        <button className={`mobile-nav-item ${view === 'flow' ? 'active' : ''}`} onClick={() => setState(s => ({ ...s, view: 'flow' }))}>
          <Icon name="list" size={20}/> Fluxo
        </button>
        <button className="mobile-nav-item fab" onClick={() => setState(s => ({ ...s, showAdd: true }))}>
          <Icon name="plus" size={22}/>
        </button>
        <button className={`mobile-nav-item ${view === 'goals' ? 'active' : ''}`} onClick={() => setState(s => ({ ...s, view: 'goals' }))}>
          <Icon name="target" size={20}/> Metas
        </button>
        <button className={`mobile-nav-item ${view === 'assets' ? 'active' : ''}`} onClick={() => setState(s => ({ ...s, view: 'assets' }))}>
          <Icon name="wallet" size={20}/> Patrim.
        </button>
      </nav>

      {state.showAdd && <window.AddModal state={state} setState={setState} onClose={() => setState(s => ({ ...s, showAdd: false }))}/>}
      {showTagsMgr && <window.TagsManagerModal state={state} setState={setState} onClose={() => setShowTagsMgr(false)}/>}

      {tweaksOpen && (
        <div className="tweak-panel">
          <div className="hstack" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontSize: 13, fontWeight: 600 }}>Ajustes</h3>
            <button onClick={() => setTweaksOpen(false)} style={{ color: 'var(--text-mute)' }}><Icon name="x" size={14}/></button>
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>Densidade</label>
            <div className="chip-select" style={{ width: '100%' }}>
              <button className={density === 'comfortable' ? 'active' : ''} onClick={() => setDensity('comfortable')} style={{ flex: 1 }}>Confortável</button>
              <button className={density === 'compact'     ? 'active' : ''} onClick={() => setDensity('compact')}     style={{ flex: 1 }}>Compacto</button>
            </div>
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>Visão do usuário</label>
            <div className="chip-select" style={{ width: '100%' }}>
              {state.users.map(u => (
                <button key={u.id} className={state.user.id === u.id ? 'active' : ''}
                        onClick={() => setState(s => ({ ...s, user: u, loaded: false }))}
                        style={{ flex: 1 }}>
                  {u.name}
                </button>
              ))}
            </div>
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>Orçamento mensal (dia a dia)</label>
            <div className="hstack" style={{ alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ color: 'var(--text-mute)', fontSize: 12 }}>R$</span>
              <input className="input" type="text" inputMode="decimal" placeholder="Ex: 2000,00"
                     value={budgetAmount} onChange={e => setBudgetAmount(e.target.value)} style={{ flex: 1 }}/>
            </div>
            <input className="input" type="date" value={budgetStartDate}
                   onChange={e => setBudgetStartDate(e.target.value)} style={{ marginBottom: 8 }}/>
            <button className="btn btn-primary" style={{ width: '100%' }}
                    disabled={budgetSaving || !budgetAmount || !budgetStartDate}
                    onClick={() => {
                      const amount = Math.round(parseFloat((budgetAmount || '').replace(/\./g, '').replace(',', '.')) * 100);
                      if (!amount || !budgetStartDate) return;
                      setBudgetSaving(true);
                      fetch('/api/budget', {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ userId: state.user.id, amount, startDate: budgetStartDate }),
                      })
                        .then(r => r.json())
                        .then(saved => {
                          setState(s => ({ ...s, dailyBudgets: { ...s.dailyBudgets, [String(state.user.id)]: saved } }));
                          setBudgetSaving(false);
                        })
                        .catch(() => setBudgetSaving(false));
                    }}>
              <Icon name="check" size={13}/> {budgetSaving ? 'Salvando...' : 'Salvar orçamento'}
            </button>
          </div>
          <div className="field" style={{ marginBottom: 0 }}>
            <button className="btn" style={{ width: '100%' }} onClick={() => setShowTagsMgr(true)}>
              Gerenciar categorias
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

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