/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect, Login, Onboarding, Chat, Booking, aiAnswer */
const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "chatStyle": "flat",
  "showSuggestions": true,
  "startScreen": "login"
}/*EDITMODE-END*/;

const CONVOS = [
  { id: 'c1', title: 'Thuế khoán hộ kinh doanh' },
  { id: 'c2', title: 'Xuất hóa đơn cho khách' },
  { id: 'c3', title: 'Hạn nộp thuế quý 2' },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useAppState('login');     // login | onboarding | app
  const [profile, setProfile] = useAppState({ type: '', name: '', industry: '', revenue: '', method: '' });
  const [messages, setMessages] = useAppState([]);
  const [pending, setPending] = useAppState(false);
  const [booking, setBooking] = useAppState(null);       // null | service id
  const [activeConvo, setActiveConvo] = useAppState('new');

  // Tweak-driven demo navigation
  useAppEffect(() => {
    if (t.startScreen === 'login') setScreen('login');
    else if (t.startScreen === 'onboarding') setScreen('onboarding');
    else if (t.startScreen === 'chat') {
      setScreen('app');
      setProfile((p) => p.type ? p : { type: 'registered', name: 'Quán Cà Phê Nhà Mình', industry: 'Dịch vụ ăn uống (F&B)', revenue: '1b-3b', method: '' });
    }
  }, [t.startScreen]);

  const sendMessage = (text) => {
    setMessages((m) => [...m, { role: 'user', text }]);
    setPending(true);
    setTimeout(() => {
      const ans = aiAnswer(text);
      setMessages((m) => [...m, { role: 'assistant', blocks: ans.blocks, escalate: ans.escalate, service: ans.service }]);
      setPending(false);
    }, 950);
  };

  const newChat = () => { setMessages([]); setActiveConvo('new'); };

  const confirmBooking = (details) => {
    setBooking(null);
    setMessages((m) => [...m, { role: 'system', expert: details.expert, day: details.day, slot: details.slot, code: details.code }]);
  };

  return (
    <div style={{ height: '100%', position: 'relative' }}>
      {screen === 'login' && <Login onLogin={() => setScreen('onboarding')} />}
      {screen === 'onboarding' && <Onboarding onComplete={(p) => { setProfile(p); setScreen('app'); }} />}
      {screen === 'app' && (
        <Chat
          messages={messages} pending={pending} profile={profile} tweaks={t}
          onSend={sendMessage} onBook={(svc) => setBooking(svc)} onNewChat={newChat}
          convos={CONVOS} activeConvo={activeConvo} setActiveConvo={setActiveConvo}
        />
      )}
      {booking && <Booking initialService={booking} onClose={() => setBooking(null)} onConfirm={confirmBooking} />}

      <TweaksPanel>
        <TweakSection label="Trình bày chat" />
        <TweakRadio label="Kiểu tin nhắn" value={t.chatStyle}
          options={[{ value: 'flat', label: 'Phẳng' }, { value: 'bubble', label: 'Bong bóng' }, { value: 'compact', label: 'Gọn' }]}
          onChange={(v) => setTweak('chatStyle', v)} />
        <TweakToggle label="Hiện câu hỏi gợi ý" value={t.showSuggestions} onChange={(v) => setTweak('showSuggestions', v)} />
        <TweakSection label="Demo" />
        <TweakSelect label="Bắt đầu từ" value={t.startScreen}
          options={[{ value: 'login', label: 'Đăng nhập' }, { value: 'onboarding', label: 'Onboarding' }, { value: 'chat', label: 'Trò chuyện' }]}
          onChange={(v) => setTweak('startScreen', v)} />
      </TweaksPanel>
    </div>
  );
}

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