// Marketing OS — Main App
function App() {
  const [currentUser, setCurrentUser] = React.useState(window.USERS.find(u => u.role === 'owner'));
  const [view, setView] = React.useState('dashboard');
  const [entries, setEntries] = React.useState(window.ENTRIES);
  const [expenses, setExpenses] = React.useState(window.EXPENSES);
  const [toasts, setToasts] = React.useState([]);
  const [editingEntry, setEditingEntry] = React.useState(null);
  const [editingExpense, setEditingExpense] = React.useState(null);
  const [importOpen, setImportOpen] = React.useState(false);

  const visibleEntries  = useMemo(() => window.visibleEntriesFor(currentUser, entries),    [currentUser, entries]);
  const visibleExpenses = useMemo(() => window.visibleExpensesFor(currentUser, expenses),  [currentUser, expenses]);
  const visibleUsers    = useMemo(() => window.visibleUsersFor(currentUser),               [currentUser]);

  const pushToast = (msg, type = 'success') => {
    const id = Date.now() + Math.random();
    setToasts(t => [...t, { id, msg, type }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3500);
  };

  async function saveToApi(path, method, body) {
    const res = await fetch(path, {
      method,
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(body),
    });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return res.json();
  }

  const handleSubmit = async (entry) => {
    const name = entry.userName.replace(/^คุณ/, '');
    try {
      const saved = editingEntry
        ? await saveToApi(`/api/entries/${editingEntry.id}`, 'PATCH', entry)
        : await saveToApi('/api/entries', 'POST', entry);
      if (editingEntry) {
        setEntries(arr => arr.map(e => e.id === editingEntry.id ? saved : e));
        pushToast(`แก้ไขรายการของ ${name} สำเร็จ`);
        setEditingEntry(null);
      } else {
        setEntries(arr => [saved, ...arr]);
        pushToast(`บันทึกรายการของ ${name} สำเร็จ`);
      }
    } catch (err) {
      // Offline / mock mode — keep working in local state
      if (editingEntry) {
        setEntries(arr => arr.map(e => e.id === editingEntry.id ? entry : e));
        setEditingEntry(null);
      } else {
        setEntries(arr => [entry, ...arr]);
      }
      pushToast(`บันทึกในเครื่อง (ออฟไลน์) — ${name}`, 'success');
    }
    setView('records');
  };

  const handleSubmitExpense = async (exp) => {
    try {
      const saved = editingExpense
        ? await saveToApi(`/api/expenses/${editingExpense.id}`, 'PATCH', exp)
        : await saveToApi('/api/expenses', 'POST', exp);
      if (editingExpense) {
        setExpenses(arr => arr.map(e => e.id === editingExpense.id ? saved : e));
        pushToast(`แก้ไขค่าใช้จ่าย "${saved.item}" สำเร็จ`);
        setEditingExpense(null);
      } else {
        setExpenses(arr => [saved, ...arr]);
        pushToast(`บันทึกค่าใช้จ่าย "${saved.item}" สำเร็จ`);
      }
    } catch (err) {
      if (editingExpense) {
        setExpenses(arr => arr.map(e => e.id === editingExpense.id ? exp : e));
        setEditingExpense(null);
      } else {
        setExpenses(arr => [exp, ...arr]);
      }
      pushToast(`บันทึกในเครื่อง (ออฟไลน์) — "${exp.item}"`, 'success');
    }
    setView('expenses');
  };

  const handleEdit = (entry) => { setEditingEntry(entry); setView('entry'); };
  const handleCreate = () => { setEditingEntry(null); setView('entry'); };
  const handleCreateExpense = () => { setEditingExpense(null); setView('expense_entry'); };

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && (view === 'entry' || view === 'expense_entry')) {
        const submitBtn = document.querySelector('form button[type="submit"]');
        if (submitBtn) submitBtn.click();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [view]);

  return (
    <div className="app">
      <Sidebar view={view} setView={setView} currentUser={currentUser}/>
      <div className="main">
        <Topbar view={view} currentUser={currentUser} setCurrentUser={setCurrentUser} allUsers={window.USERS} onCreate={handleCreate}/>

        <div className="content" data-screen-label={view}>
          {view === 'dashboard' && (
            <Dashboard currentUser={currentUser} entries={visibleEntries} expenses={visibleExpenses} visibleUsers={visibleUsers}/>
          )}

          {view === 'entry' && (
            <div>
              <div className="page-head">
                <div className="page-title-block">
                  <div className="page-title">{editingEntry ? 'แก้ไขรายการ' : 'กรอกข้อมูลใหม่'}</div>
                  <div className="page-desc">บันทึกผลงานประจำวัน · ระบบจะคำนวณยอดรวมและ % ให้อัตโนมัติ</div>
                </div>
                <div className="page-actions">
                  <span className="perm-chip"><Icon name="user" size={11}/> ในนาม {currentUser.name.replace(/^คุณ/,'')}</span>
                </div>
              </div>
              <DataEntryForm
                currentUser={currentUser}
                allUsers={window.USERS}
                onSubmit={handleSubmit}
                onCancel={() => { setEditingEntry(null); setView('dashboard'); }}
                prefill={editingEntry}
              />
            </div>
          )}

          {view === 'expense_entry' && (
            <div>
              <div className="page-head">
                <div className="page-title-block">
                  <div className="page-title">{editingExpense ? 'แก้ไขค่าใช้จ่าย' : 'กรอกค่าใช้จ่ายใหม่'}</div>
                  <div className="page-desc">บันทึกค่าใช้จ่ายอื่นๆ ที่ไม่ใช่ค่าแอด · เลือก Import เพื่อดึงจากชีต/บอท</div>
                </div>
                <div className="page-actions">
                  <span className="perm-chip"><Icon name="user" size={11}/> ในนาม {currentUser.name.replace(/^คุณ/,'')}</span>
                </div>
              </div>
              <ExpenseForm
                currentUser={currentUser}
                onSubmit={handleSubmitExpense}
                onCancel={() => { setEditingExpense(null); setView('expenses'); }}
                prefill={editingExpense}
              />
            </div>
          )}

          {view === 'expenses' && (
            <ExpensesView
              currentUser={currentUser}
              expenses={visibleExpenses}
              onCreate={handleCreateExpense}
              onImport={() => setImportOpen(true)}
            />
          )}

          {view === 'records' && (
            <RecordsView currentUser={currentUser} entries={visibleEntries} visibleUsers={visibleUsers} onEdit={handleEdit}/>
          )}

          {view === 'team' && (
            <TeamView currentUser={currentUser} allUsers={visibleUsers} entries={visibleEntries}/>
          )}

          {view === 'permissions' && <PermissionsView currentUser={currentUser}/>}
          {view === 'settings' && <SettingsView/>}
        </div>
      </div>

      {importOpen && (
        <ImportExpenseModal
          onClose={() => setImportOpen(false)}
          onImport={(src) => pushToast(`เริ่ม import จาก ${src === 'sheet' ? 'Google Sheets' : src === 'csv' ? 'CSV' : 'Database'} (mock)`, 'success')}
        />
      )}

      <div className="toast-stack">
        {toasts.map(t => (
          <div key={t.id} className={`toast ${t.type}`}>
            <span className="toast-icon">
              <Icon name={t.type === 'error' ? 'alert' : 'check'} size={14}/>
            </span>
            {t.msg}
          </div>
        ))}
      </div>
    </div>
  );
}

// Load live data from the D1 API (falls back to mock data offline), then render.
(window.loadInitialData ? window.loadInitialData() : Promise.resolve())
  .then(() => {
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
  });