// main.jsx — entry point. Assembles every screen into the design-canvas gallery and renders.
// Pages define + export their screen components to window; this file only arranges them.
const W = 390, H = 844;

// ---- a richer pre-loaded chat demo (shows upload → insight + CTA) ----
function ChatDemo({ go = () => {} }) {
  return A(Phone, null,
    A(ChatScreen, {
      sessionName: '出差找保姆',
      initial: [
        { from: 'ai', first: true, text: '嗨！我是寵答 🐱 需要什麼都可以直接跟我說～' },
        { from: 'me', text: '我下週三到週五要出差，想找個到府保姆，順便附上最近的血檢報告' },
        { type: 'image', from: 'me', icon: 'doc', label: '血檢報告.jpg' },
        { from: 'ai', text: '收到～我先看了血檢，腎指數都在正常範圍，可以放心出門 👍 已經幫你存進活檔案了。' },
        { type: 'insight', cat: '小橘', item: '血檢結果', note: 'BUN / CREA 正常 · 6/1 上傳' },
        { from: 'ai', text: '出差那三天我找了幾位附近、評價好又有空的到府保姆，幫你預填好日期了：' },
        { type: 'cta', icon: 'calendar', title: '幫你找保姆', desc: '6/4（三）–6/6（五）· 到府餵食', action: '看可預約的保姆', target: 'providers' },
      ],
      script: [
        [{ from: 'ai', text: '好的，幫你把「住宿托管」也列進去比較。預算大概抓多少呢？' },
         { type: 'cta', icon: 'paw', title: '看住宿托管保姆', desc: '已切換＝住宿 · 3 晚', action: '挑選保姆', target: 'providers' }],
      ],
      quick: ['想要住宿托管', '幫我直接約林依婷', '怕生，要特別注意'],
      go,
    }));
}

function App() {
  const noop = () => {};
  // owner artboard helper (brand accent); pro uses sage accent
  const AB = (id, label, node, accent) => A(DCArtboard, { id, label, width: W, height: H, key: id }, A(Phone, { accent }, node));

  return A(DesignCanvas, { initialFocus: 'hero/home' },

    // ===== 核心：首頁＝對話 =====
    A(DCSection, { id: 'hero', title: '飼主端 · 核心', subtitle: '首頁即對話 — 一開 app 就在跟寵答聊，直接輸入或點 chip 跑劇本' },
      A(DCArtboard, { id: 'home', label: 'owner-home.jsx · 首頁＝對話本體 · 點 chip 或輸入送出 ★', width: W, height: H },
        A(Phone, null, A(OwnerHome, { variant: 'notch', onNav: noop, go: noop }))),
      A(DCArtboard, { id: 'chat', label: 'chat-ai.jsx · 對話進行中 · CTA + 洞察卡', width: W, height: H },
        A(ChatDemo, { go: noop }))),

    // ===== 飼主端：探索與媒合 =====
    A(DCSection, { id: 'discover', title: '飼主端 · 探索與媒合', subtitle: '探索（篩選找人）→ 服務者詳情 → 評價列表' },
      AB('explore', 'discover.jsx · 探索', A(Explore, {})),
      AB('pdetail', 'provider-detail.jsx · 服務者詳情', A(ProviderDetail, {})),
      AB('previews', 'provider-reviews.jsx · 飼主評價列表', A(ProviderReviews, {}))),

    // ===== 飼主端：統一訊息 =====
    A(DCSection, { id: 'inbox', title: '飼主端 · 統一訊息', subtitle: 'AI sessions 與人對人混合收件匣' },
      AB('inbox', 'inbox.jsx · 訊息收件匣 · 兩分頁（與人對話／寵答 AI）', A(Inbox, {})),
      AB('pchat', 'chat-human.jsx · 人對人聊天室', A(PersonChat, {}))),

    // ===== 飼主端：預約管理與服務進行中 =====
    A(DCSection, { id: 'service', title: '飼主端 · 預約管理與服務進行中', subtitle: '狀態時間軸 · 唯讀進度 Todo · 回報 Feed' },
      AB('mybk', 'my-bookings.jsx · 我的預約', A(MyBookings, {})),
      AB('writereview', 'write-review.jsx · 撰寫評價 · 完成後留評價 ★', A(WriteReview, {})),
      AB('bkdetail', 'booking-detail.jsx · 預約詳情 · 服務進行中', A(BookingDetail, {}))),

    // ===== 飼主端：活檔案與帳號 =====
    A(DCSection, { id: 'profile', title: '飼主端 · 我的與活檔案', subtitle: '我的（導覽頁）→ 貓咪活檔案 · AI 洞察時間軸 · 角色切換' },
      AB('me', 'me.jsx · 我的（導覽頁）· 角色切換', A(MeScreen, {})),
      AB('profileedit', 'profile.jsx · 個人資料編輯', A(ProfileEdit, {})),
      AB('addrbook', 'address-book.jsx · 地址簿 · 從我的進入', A(AddressBook, {})),
      AB('addrdetail', 'address-detail.jsx · 地址詳情', A(AddressDetail, {})),
      AB('payment', 'payment.jsx · 付款方式 · 從我的進入', A(Payment, {})),
      AB('paymentAdd', 'payment.jsx · 新增付款方式表單', A(AddPayment, {})),
      AB('support', 'customer-service.jsx · 聯絡客服 · 標題＋內容', A(CustomerService, {})),
      AB('mycats', 'my-cats.jsx · 我的貓咪', A(MyCats, {})),
      AB('addcat', 'add-cat.jsx · 新增貓咪表單', A(AddCat, {})),
      AB('catdetail', 'cat-detail.jsx · 貓咪詳情＝活檔案', A(CatDetail, {}))),

    // ===== 飼主端：登入與訂閱（AI 需付費） =====
    A(DCSection, { id: 'auth', title: '飼主端 · 登入與訂閱', subtitle: '① 要求登入 → ② AI 對話首頁 → ③ 免費額度內可對話 → ④ 超過額度才需訂閱' },
      AB('login', 'auth.jsx · ① 要求登入 · Apple、Google ▶', A(AuthFlow, { start: 'landing' })),
      AB('register', 'auth.jsx · 首次註冊 · 只設暱稱', A(AuthFlow, { start: 'register' })),
      A(DCArtboard, { id: 'quota', label: 'owner-home.jsx · ③ 免費額度內對話（剩 1）★', width: W, height: H },
        A(Phone, null, A(OwnerHome, { variant: 'notch', initialUsed: 2, onNav: noop, go: noop }))),
      A(DCArtboard, { id: 'paywall', label: 'owner-home.jsx · ④ 超過額度 → 訂閱 ★', width: W, height: H },
        A(Phone, null, A(OwnerHome, { variant: 'notch', initialSheet: { type: 'subscribe' }, onNav: noop, go: noop })))),

    // ===== 飼主端：預約流程（保留於 booking-flow.jsx 的 section） =====
    typeof BookingScreens !== 'undefined' && BookingScreens.section && BookingScreens.section(),

    // ===== 貓人力端：工作模式（鼠尾草綠） =====
    A(DCSection, { id: 'pro', title: '貓人力端 · 工作模式（鼠尾草綠）', subtitle: '同一套設計 DNA，僅換重點色 — 工作台 · 接案 · 服務執行' },
      AB('dash', 'pro-dashboard.jsx · 工作台 · 接受/拒絕可操作 ▶', A(ProDash, {}), 'sage'),
      AB('orderlist', 'pro-order-manager.jsx · 預約單管理 · 待接/已接/完成/取消 ▶', A(ProOrderManager, {}), 'sage'),
      AB('job', 'pro-order-detail.jsx · 預約單詳情', A(ProJob, {}), 'sage'),
      AB('exec', 'pro-report.jsx · 服務執行 · 自訂 Todo 可勾 ▶', A(ProExec, {}), 'sage')),

    A(DCSection, { id: 'pro2', title: '貓人力端 · 排班與帳號', subtitle: '行事曆排班 · 訊息 · 角色切換回飼主' },
      AB('cal', 'pro-calendar.jsx · 行事曆 · 開放時段可切 ▶', A(ProCalendar, {}), 'sage'),
      AB('pmsg', 'inbox.jsx · 訊息（貓人力＝與飼主）', A(Inbox, { role: 'pro' }), 'sage'),
      AB('pme', 'pro-me.jsx · 我的（貓人力）· 切回飼主', A(ProProfile, {}), 'sage'),
      AB('pmeedit', 'profile.jsx · 個人資料編輯（貓人力＝role:pro）', A(ProfileEdit, { role: 'pro' }), 'sage'),
      AB('pskills', 'pro-skills.jsx · 專長與價目設定', A(ProSkills, {}), 'sage')),
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(A(App));