<view class="container">
  <!-- 用户信息 -->
  <view class="card">
    <view class="section-title">用户信息</view>
    <view class="flex items-center gap-2 justify-between" wx:if="{{loggedIn}}">
      <view class="flex items-center gap-2">
        <image src="{{userInfo.avatar}}" class="avatar" mode="aspectFill" wx:if="{{userInfo.avatar}}"/>
        <view class="avatar avatar-placeholder" wx:else>
          <text>客</text>
        </view>
        <view>
          <text class="text-base font-medium">{{userInfo.nickname || '微信用户'}}</text>
          <text class="text-xs text-muted block">已登录，档案云端同步</text>
        </view>
      </view>
      <view class="btn-ghost text-muted" bindtap="logout">退出</view>
    </view>
    <block wx:else>
      <view class="text-sm text-muted mb-2">登录后可将生辰档案同步到云端，换设备不丢失</view>
      <view class="btn-primary text-center" bindtap="login">{{logging ? '登录中…' : '微信登录'}}</view>
    </block>
  </view>

  <!-- 生辰管理 -->
  <view class="card">
    <view class="section-title flex justify-between items-center">
      <text>生辰管理</text>
      <text class="text-xs text-muted">{{profiles.length}}/{{maxFree}}</text>
    </view>
    <view class="text-xs text-muted mb-2">八字排盘基于生辰信息，每位用户可免费绑定 {{maxFree}} 个出生年月（如本人、家人）。</view>

    <view class="profile-list" wx:if="{{profiles.length > 0}}">
      <view class="profile-item" wx:for="{{profiles}}" wx:key="id">
        <view class="flex justify-between items-center">
          <view>
            <view class="flex items-center gap-1">
              <text class="text-base font-medium">{{item.name}}</text>
              <text class="badge badge-lucky" wx:if="{{item.id === activeProfileId}}">使用中</text>
            </view>
            <text class="text-xs text-muted block">{{item.gender === 'female' ? '女' : '男'}} · {{item.birthday}} {{item.birthTime}}</text>
          </view>
          <view class="btn-ghost text-unlucky" bindtap="removeProfile" data-id="{{item.id}}">删除</view>
        </view>
      </view>
    </view>
    <view class="text-center text-muted p-2" wx:else>
      <text>暂未绑定生辰，请到下方添加</text>
    </view>

    <view class="btn-outline text-center mt-2" bindtap="toggleAddForm" wx:if="{{canAdd}}">
      {{showAddForm ? '收起' : '+ 添加生辰'}}
    </view>
    <view class="text-center text-xs text-muted mt-2" wx:else>
      免费名额已用完，可删除旧档案后添加
    </view>

    <!-- 添加表单 -->
    <block wx:if="{{showAddForm}}">
      <view class="form-item mt-2">
        <text class="form-label">备注名（如：本人、爸爸）</text>
        <input class="form-input" placeholder="未命名" value="{{formName}}" bindinput="onFormName"/>
      </view>
      <view class="form-item">
        <text class="form-label">性别</text>
        <view class="flex gap-2">
          <view class="btn-outline {{formGender === 'male' ? 'active' : ''}}" bindtap="setFormGender" data-g="male">男</view>
          <view class="btn-outline {{formGender === 'female' ? 'active' : ''}}" bindtap="setFormGender" data-g="female">女</view>
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">出生日期（公历）</text>
        <picker mode="date" value="{{formDate}}" start="1900-01-01" end="2100-12-31" bindchange="onFormDate">
          <view class="picker-input">{{formDate}}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="form-label">出生时间</text>
        <picker mode="time" value="{{formTime}}" bindchange="onFormTime">
          <view class="picker-input">{{formTime}}</view>
        </picker>
      </view>
      <view class="btn-primary text-center" bindtap="submitProfile">保存生辰</view>
    </block>
  </view>

  <!-- 偏好设置 -->
  <view class="card">
    <view class="section-title">偏好设置</view>
    
    <view class="setting-item">
      <text class="setting-label">周起始日</text>
      <view class="flex gap-2">
        <view class="btn-outline {{weekStartDay === 0 ? 'active' : ''}}" bindtap="setWeekStart" data-v="0">周日</view>
        <view class="btn-outline {{weekStartDay === 1 ? 'active' : ''}}" bindtap="setWeekStart" data-v="1">周一</view>
      </view>
    </view>

    <view class="setting-item">
      <text class="setting-label">子时流派</text>
      <view class="flex gap-2">
        <view class="btn-outline {{ziHourSect === 'lateZiNextDay' ? 'active' : ''}}" bindtap="setZiSect" data-v="lateZiNextDay">晚子时算次日</view>
        <view class="btn-outline {{ziHourSect === 'lateZiSameDay' ? 'active' : ''}}" bindtap="setZiSect" data-v="lateZiSameDay">晚子时算当日</view>
      </view>
    </view>

    <view class="setting-item">
      <text class="setting-label">真太阳时校正</text>
      <switch checked="{{solarTime}}" bindchange="onSolarTimeChange" color="#C41E3A"/>
    </view>

    <view class="setting-item">
      <text class="setting-label">显示佛历提醒</text>
      <switch checked="{{showBuddhist}}" bindchange="onBuddhistChange" color="#C41E3A"/>
    </view>

    <view class="setting-item">
      <text class="setting-label">初一十五高亮</text>
      <switch checked="{{highlightLunar}}" bindchange="onHighlightLunarChange" color="#C41E3A"/>
    </view>
  </view>

  <!-- 收藏管理 -->
  <view class="card">
    <view class="section-title">我的收藏</view>
    <view class="bookmark-list" wx:if="{{bookmarks.length > 0}}">
      <view class="bookmark-item" wx:for="{{bookmarks}}" wx:key="date">
        <view class="flex justify-between items-center">
          <view>
            <text class="text-base font-medium">{{item.date}}</text>
            <text class="text-xs text-muted block">{{item.lunarDate}}</text>
          </view>
          <view class="btn-ghost text-unlucky" bindtap="removeBookmark" data-date="{{item.date}}">删除</view>
        </view>
      </view>
    </view>
    <view class="text-center text-muted" wx:else>
      <text>暂无收藏</text>
    </view>
  </view>

  <!-- 功能入口 -->
  <view class="card">
    <view class="section-title">功能</view>
    <view class="menu-item" bindtap="navTo" data-url="/pages/fortune/fortune">
      <text class="menu-label">每日运势</text>
      <text class="menu-arrow">›</text>
    </view>
    <view class="menu-item" bindtap="navTo" data-url="/pages/divination/divination">
      <text class="menu-label">占卜</text>
      <text class="menu-arrow">›</text>
    </view>
    <view class="menu-item" bindtap="navTo" data-url="/pages/solar-terms/solar-terms">
      <text class="menu-label">二十四节气</text>
      <text class="menu-arrow">›</text>
    </view>
    <view class="menu-item" bindtap="navTo" data-url="/pages/calendar/calendar">
      <text class="menu-label">月历视图</text>
      <text class="menu-arrow">›</text>
    </view>
  </view>

  <!-- 关于 -->
  <view class="card">
    <view class="section-title">关于</view>
    <view class="text-sm text-muted">
      <text>老黄历小程序 v{{version}}</text>
      <text class="block mt-1" wx:if="{{buildNumber !== '0'}}">构建 #{{buildNumber}} ({{commitSha}})</text>
      <text class="block mt-1">提供农历、黄历、八字、许愿等功能</text>
    </view>
  </view>
</view>
