import { useViewData } from '@byted-doubao-apps/framework';
import { loadShoppingPlan, type ShoppingPlanData } from '../../shared/shopping-plan';
import { formatShoppingPlanSummary } from '../../shared/shopping-plan-summary';
import './index.scss';

export default function HomePage() {
  const viewData = useViewData<ShoppingPlanData>();
  const plan = viewData?.plan_id ? viewData : loadShoppingPlan();

  return (
    <view className="home-page-shell">
      <navigation-bar title="购物方案" back={false} />
      <scroll-view className="home-page" scroll-orientation="vertical" enable-scroll={true}>
        <view className="home-page__header">
          <text className="home-page__eyebrow">购物方案</text>
          <text className="home-page__title">{plan?.title || '还没有生成购物方案'}</text>
          <text className="home-page__description">
            {plan ? formatShoppingPlanSummary(plan) : '在对话中告诉豆包购物场景、人数和预算，即可生成方案。'}
          </text>
        </view>

        <view className="home-page__section">
          <text className="home-page__section-title">商品分组</text>
          <view className="home-page__list">
            {plan?.groups?.length ? (
              plan.groups.map((group) => (
                <view className="home-page__item" key={group.name}>
                  <text className="home-page__item-name">{group.name || '其他'}</text>
                  <text className="home-page__item-meta">
                    {`${group.item_count || 0} 件 · ¥${group.subtotal || 0}`}
                  </text>
                </view>
              ))
            ) : (
              <text className="home-page__empty">方案生成后，可从卡片进入这里查看详情。</text>
            )}
          </view>
        </view>
      </scroll-view>
    </view>
  );
}