// 爱情空间 — 完整情侣互动空间
// 5个Tab：动态（爱情宣言）、相册、纪念日、悄悄话、小目标
// 粉色浪漫温馨主题 + 真实数据存取

const { useState, useEffect, useCallback, useRef, Component } = React;

// ========== 全局兜底 ==========
if (typeof API === 'undefined') {
  window.API = {
    get: function() { return Promise.resolve({ success: false, data: null, message: '服务未就绪' }); },
    post: function() { return Promise.resolve({ success: false, data: null, message: '服务未就绪' }); },
    del: function() { return Promise.resolve({ success: false, message: '服务未就绪' }); },
    uploadFile: function() { return Promise.resolve({ success: false, data: null, message: '服务未就绪' }); },
  };
}

// ========== 颜色常量（粉色浪漫主题） ==========
var L_COLORS = {
  primary: '#FF6B9D',
  primaryLight: '#FF9EC2',
  primaryDark: '#FF4785',
  bgTop: '#fff0f5',
  bgBottom: '#fff5f8',
  cardBg: '#ffffff',
  textPrimary: '#333',
  textSecondary: '#666',
  textTertiary: '#999',
  border: '#ffe4ec',
  gradient1: 'linear-gradient(135deg, #FF9EC2, #FF6B9D)',
  gradient2: 'linear-gradient(135deg, #FFE4EC, #FFB6C1)',
  danger: '#FF4785',
  purple: '#C084FC',
  blue: '#60A5FA',
  orange: '#FB923C',
  green: '#34D399',
};

// ========== 工具函数 ==========
function lFormatTime(dateStr) {
  if (!dateStr) return '';
  try {
    var d = new Date(dateStr.replace(' ', 'T'));
    if (isNaN(d.getTime())) return dateStr;
    var now = new Date();
    var diff = (now - d) / 1000;
    if (diff < 60) return '刚刚';
    if (diff < 3600) return Math.floor(diff / 60) + '分钟前';
    if (diff < 86400) return Math.floor(diff / 3600) + '小时前';
    if (diff < 86400 * 7) return Math.floor(diff / 86400) + '天前';
    return dateStr.slice(5, 10).replace('-', '月') + '日';
  } catch (e) {
    return dateStr || '';
  }
}

function lCalculateDays(startDate) {
  try {
    if (!startDate) return 100;
    var start = new Date(startDate);
    if (isNaN(start.getTime())) return 100;
    var now = new Date();
    var diff = Math.floor((now - start) / (1000 * 60 * 60 * 24));
    return diff + 1;
  } catch (e) {
    return 100;
  }
}

// 计算距离下一次纪念日还有多少天（按每年循环）
function lDaysUntilNext(dateStr) {
  try {
    if (!dateStr) return 0;
    var d = new Date(dateStr);
    if (isNaN(d.getTime())) return 0;
    var now = new Date();
    var thisYear = new Date(now.getFullYear(), d.getMonth(), d.getDate());
    if (thisYear < now) {
      thisYear = new Date(now.getFullYear() + 1, d.getMonth(), d.getDate());
    }
    return Math.ceil((thisYear - now) / (1000 * 60 * 60 * 24));
  } catch (e) {
    return 0;
  }
}

function lFormatDate(dateStr) {
  if (!dateStr) return '';
  return dateStr.slice(0, 10).replace(/-/g, '.');
}

function lTimeOfDay(dateStr) {
  if (!dateStr) return '';
  try {
    var d = new Date(dateStr.replace(' ', 'T'));
    var h = d.getHours();
    var m = d.getMinutes();
    return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
  } catch (e) { return ''; }
}

// ========== 头像组件 ==========
function LoveAvatar(props) {
  var name = props.name || '爱';
  var size = props.size || 40;
  var color = props.color || L_COLORS.primary;
  var style = props.style || {};
  var fontSize = Math.round(size * 0.38);
  return React.createElement('div', {
    style: {
      width: size, height: size, borderRadius: '50%',
      background: 'linear-gradient(135deg, ' + color + 'dd, ' + color + ')',
      color: '#fff', fontSize: fontSize, fontWeight: 600,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, userSelect: 'none',
      boxShadow: '0 2px 8px ' + color + '40',
      ...style,
    }
  }, (name || '爱').charAt(0));
}

// ========== 跳动爱心组件 ==========
function PulsingHeart(props) {
  var size = props.size || 24;
  var delay = props.delay || 0;
  return React.createElement('span', {
    style: {
      fontSize: size,
      display: 'inline-block',
      animation: 'lHeartPulse 1.5s ease-in-out infinite',
      animationDelay: delay + 's',
    }
  }, '💗');
}

// ========== 主页面 ==========
function LovePage(props) {
  var activeTab = props.activeTab;
  var setActiveTab = props.setActiveTab;

  // useApp 钩子
  var navigate = function() {};
  var showToast = function(msg) { console.log('[love toast]', msg); };
  var requireLogin = function(cb) { console.log('需要登录'); return false; };
  var currentUser = null;

  try {
    if (typeof useApp === 'function') {
      var app = useApp();
      if (app) {
        if (typeof app.navigate === 'function') navigate = app.navigate;
        if (typeof app.showToast === 'function') showToast = app.showToast;
        if (typeof app.requireLogin === 'function') requireLogin = app.requireLogin;
        currentUser = app.currentUser || null;
      }
    }
  } catch (e) {
    console.warn('[LovePage] useApp 不可用', e);
  }

  var isLoggedIn = !!(currentUser && currentUser.id);
  var currentTab = activeTab || 'dynamic';

  // ===== 状态 =====
  var declarationsState = useState([]);
  var declarations = declarationsState[0];
  var setDeclarations = declarationsState[1];

  var photosState = useState([]);
  var photos = photosState[0];
  var setPhotos = photosState[1];

  var anniversariesState = useState([]);
  var anniversaries = anniversariesState[0];
  var setAnniversaries = anniversariesState[1];

  var messagesState = useState([]);
  var messages = messagesState[0];
  var setMessages = messagesState[1];

  var unreadState = useState(0);
  var unreadCount = unreadState[0];
  var setUnreadCount = unreadState[1];

  var goalsState = useState([]);
  var goals = goalsState[0];
  var setGoals = goalsState[1];

  var coupleState = useState(null);
  var couple = coupleState[0];
  var setCouple = coupleState[1];

  var loadingState = useState(true);
  var loading = loadingState[0];
  var setLoading = loadingState[1];

  // 弹窗状态
  var showPublishState = useState(false);
  var showPublish = showPublishState[0];
  var setShowPublish = showPublishState[1];

  var publishContentState = useState('');
  var publishContent = publishContentState[0];
  var setPublishContent = publishContentState[1];

  var showPhotoUploadState = useState(false);
  var showPhotoUpload = showPhotoUploadState[0];
  var setShowPhotoUpload = showPhotoUploadState[1];

  var photoCaptionState = useState('');
  var photoCaption = photoCaptionState[0];
  var setPhotoCaption = photoCaptionState[1];

  var showAnnivFormState = useState(false);
  var showAnnivForm = showAnnivFormState[0];
  var setShowAnnivForm = showAnnivFormState[1];

  var annivTitleState = useState('');
  var annivTitle = annivTitleState[0];
  var setAnnivTitle = annivTitleState[1];

  var annivDateState = useState('');
  var annivDate = annivDateState[0];
  var setAnnivDate = annivDateState[1];

  var showGoalFormState = useState(false);
  var showGoalForm = showGoalFormState[0];
  var setShowGoalForm = showGoalFormState[1];

  var goalTitleState = useState('');
  var goalTitle = goalTitleState[0];
  var setGoalTitle = goalTitleState[1];

  var msgInputState = useState('');
  var msgInput = msgInputState[0];
  var setMsgInput = msgInputState[1];

  var submittingState = useState(false);
  var submitting = submittingState[0];
  var setSubmitting = submittingState[1];

  var msgListRef = useRef(null);

  // ===== 加载情侣信息 =====
  var loadCouple = useCallback(function() {
    if (!isLoggedIn) { setCouple(null); return Promise.resolve(); }
    return API.get('/love/couple').then(function(res) {
      if (res && res.success) {
        setCouple(res.data || null);
      }
    }).catch(function(e) { console.error('loadCouple error:', e); });
  }, [isLoggedIn]);

  // ===== 加载宣言 =====
  var loadDeclarations = useCallback(function() {
    if (!isLoggedIn) return Promise.resolve();
    return API.get('/love/declarations').then(function(res) {
      if (res && res.success) {
        setDeclarations(res.data || []);
      }
    }).catch(function(e) { console.error('loadDec error:', e); });
  }, [isLoggedIn]);

  // ===== 加载相册 =====
  var loadPhotos = useCallback(function() {
    if (!isLoggedIn) return Promise.resolve();
    return API.get('/love/photos').then(function(res) {
      if (res && res.success) {
        setPhotos(res.data || []);
      }
    }).catch(function(e) { console.error('loadPhotos error:', e); });
  }, [isLoggedIn]);

  // ===== 加载纪念日 =====
  var loadAnniversaries = useCallback(function() {
    if (!isLoggedIn) return Promise.resolve();
    return API.get('/love/anniversaries').then(function(res) {
      if (res && res.success) {
        setAnniversaries(res.data || []);
      }
    }).catch(function(e) { console.error('loadAnniv error:', e); });
  }, [isLoggedIn]);

  // ===== 加载悄悄话 =====
  var loadMessages = useCallback(function() {
    if (!isLoggedIn) return Promise.resolve();
    return API.get('/love/messages').then(function(res) {
      if (res && res.success) {
        setMessages(res.data || []);
      }
    }).catch(function(e) { console.error('loadMsg error:', e); });
  }, [isLoggedIn]);

  var loadUnread = useCallback(function() {
    if (!isLoggedIn) return;
    API.get('/love/messages/unread-count').then(function(res) {
      if (res && res.success && res.data) {
        setUnreadCount(res.data.count || 0);
      }
    }).catch(function() {});
  }, [isLoggedIn]);

  // ===== 加载小目标 =====
  var loadGoals = useCallback(function() {
    if (!isLoggedIn) return Promise.resolve();
    return API.get('/love/goals').then(function(res) {
      if (res && res.success) {
        setGoals(res.data || []);
      }
    }).catch(function(e) { console.error('loadGoals error:', e); });
  }, [isLoggedIn]);

  // 初次加载
  useEffect(function() {
    if (!isLoggedIn) {
      setLoading(false);
      return;
    }
    setLoading(true);
    Promise.all([
      loadCouple(),
      loadDeclarations(),
      loadPhotos(),
      loadAnniversaries(),
      loadMessages(),
      loadUnread(),
      loadGoals(),
    ]).then(function() { setLoading(false); });
  }, [isLoggedIn, loadCouple, loadDeclarations, loadPhotos, loadAnniversaries, loadMessages, loadUnread, loadGoals]);

  // Tab 切换时刷新对应数据
  useEffect(function() {
    if (!isLoggedIn) return;
    if (currentTab === 'dynamic') loadDeclarations();
    else if (currentTab === 'album') loadPhotos();
    else if (currentTab === 'anniversary') loadAnniversaries();
    else if (currentTab === 'message') { loadMessages(); loadUnread(); }
    else if (currentTab === 'goal') loadGoals();
  }, [currentTab, isLoggedIn, loadDeclarations, loadPhotos, loadAnniversaries, loadMessages, loadUnread, loadGoals]);

  // 滚到底部（悄悄话）
  useEffect(function() {
    if (msgListRef.current && currentTab === 'message') {
      msgListRef.current.scrollTop = msgListRef.current.scrollHeight;
    }
  }, [messages, currentTab]);

  // ===== 安全登录检查 =====
  function safeLogin(cb) {
    if (isLoggedIn) { cb(); return true; }
    if (typeof requireLogin === 'function') {
      return requireLogin(cb);
    }
    showToast('请先登录');
    return false;
  }

  // ===== 发布宣言 =====
  function handlePublish() {
    if (!publishContent.trim()) { showToast('说点什么吧～'); return; }
    if (submitting) return;
    setSubmitting(true);
    API.post('/love/declarations', { content: publishContent.trim(), images: [] }).then(function(res) {
      if (res && res.success) {
        showToast('发布成功 💕');
        setPublishContent('');
        setShowPublish(false);
        loadDeclarations();
      } else {
        showToast((res && res.message) || '发布失败');
      }
    }).catch(function() { showToast('发布失败'); })
    .finally(function() { setSubmitting(false); });
  }

  // ===== 点赞 =====
  function handleLike(item) {
    // 乐观更新
    setDeclarations(declarations.map(function(d) {
      if (d.id === item.id) {
        var liked = !d.is_liked;
        return {
          ...d,
          is_liked: liked,
          likes_count: liked ? (d.likes_count || 0) + 1 : Math.max(0, (d.likes_count || 0) - 1),
        };
      }
      return d;
    }));
    API.post('/love/declarations/' + item.id + '/like').catch(function() {});
  }

  // ===== 上传照片 =====
  var photoInputRef = useRef(null);
  function handlePhotoUploadClick() {
    safeLogin(function() {
      if (photoInputRef.current) photoInputRef.current.click();
    });
  }
  function handlePhotoFileChange(e) {
    var file = e.target.files && e.target.files[0];
    if (!file) return;
    API.uploadFile('image', file).then(function(res) {
      if (res && res.success && res.data && res.data.url) {
        // 弹出 caption 输入
        setPhotoCaption('');
        // 先上传再写 caption 模式：直接带 caption 提交
        var caption = window.prompt('给这张照片写句话吧～（可选）', '') || '';
        API.post('/love/photos', { url: res.data.url, caption: caption.trim() }).then(function(r) {
          if (r && r.success) {
            showToast('上传成功 📸');
            loadPhotos();
          } else {
            showToast((r && r.message) || '上传失败');
          }
        });
      } else {
        showToast('上传失败');
      }
    });
    e.target.value = '';
  }

  // ===== 删除照片 =====
  function handleDeletePhoto(id) {
    if (!window.confirm('确定删除这张照片吗？')) return;
    API.del('/love/photos/' + id).then(function(res) {
      if (res && res.success) {
        showToast('已删除');
        loadPhotos();
      } else {
        showToast((res && res.message) || '删除失败');
      }
    }).catch(function() { showToast('删除失败'); });
  }

  // ===== 纪念日 =====
  function handleAddAnniv() {
    if (!annivTitle.trim()) { showToast('请输入标题'); return; }
    if (!annivDate) { showToast('请选择日期'); return; }
    setSubmitting(true);
    API.post('/love/anniversaries', { title: annivTitle.trim(), date: annivDate, type: 'memorial' }).then(function(res) {
      if (res && res.success) {
        showToast('已添加 🎀');
        setAnnivTitle('');
        setAnnivDate('');
        setShowAnnivForm(false);
        loadAnniversaries();
      } else {
        showToast((res && res.message) || '添加失败');
      }
    }).finally(function() { setSubmitting(false); });
  }

  function handleDeleteAnniv(id) {
    if (!window.confirm('确定删除这个纪念日吗？')) return;
    API.del('/love/anniversaries/' + id).then(function(res) {
      if (res && res.success) {
        showToast('已删除');
        loadAnniversaries();
      } else {
        showToast((res && res.message) || '删除失败');
      }
    }).catch(function() { showToast('删除失败'); });
  }

  // ===== 悄悄话 =====
  function handleSendMsg() {
    if (!msgInput.trim()) return;
    var content = msgInput.trim();
    setMsgInput('');
    // 乐观添加
    var temp = [...messages, {
      id: 'temp_' + Date.now(),
      sender_id: currentUser ? currentUser.id : 1,
      nickname: currentUser ? currentUser.nickname : '我',
      avatar: '',
      content: content,
      is_read: 1,
      created_at: new Date().toISOString(),
    }];
    setMessages(temp);
    API.post('/love/messages', { content: content }).then(function(res) {
      if (res && res.success) {
        loadMessages();
      } else {
        showToast((res && res.message) || '发送失败');
      }
    }).catch(function() { showToast('发送失败'); });
  }

  // ===== 小目标 =====
  function handleAddGoal() {
    if (!goalTitle.trim()) { showToast('请输入目标内容'); return; }
    setSubmitting(true);
    API.post('/love/goals', { title: goalTitle.trim(), icon: '🎯' }).then(function(res) {
      if (res && res.success) {
        showToast('已添加 ✨');
        setGoalTitle('');
        setShowGoalForm(false);
        loadGoals();
      } else {
        showToast((res && res.message) || '添加失败');
      }
    }).finally(function() { setSubmitting(false); });
  }

  function handleToggleGoal(goal) {
    // 乐观更新
    setGoals(goals.map(function(g) {
      if (g.id === goal.id) { return { ...g, completed: g.completed ? 0 : 1 }; }
      return g;
    }));
    API.post('/love/goals/' + goal.id + '/toggle').catch(function() {});
  }

  function handleDeleteGoal(id) {
    if (!window.confirm('确定删除这个目标吗？')) return;
    API.del('/love/goals/' + id).then(function(res) {
      if (res && res.success) {
        showToast('已删除');
        loadGoals();
      } else {
        showToast((res && res.message) || '删除失败');
      }
    }).catch(function() { showToast('删除失败'); });
  }

  // ===== 在一起天数 =====
  var startDate = (couple && couple.start_date) || '2026-06-12';
  var togetherDays = lCalculateDays(startDate);

  // ===== 底部 Tab 定义 =====
  var tabs = [
    { key: 'dynamic', label: '动态', icon: '💌' },
    { key: 'album', label: '相册', icon: '📸' },
    { key: 'anniversary', label: '纪念日', icon: '🎀' },
    { key: 'message', label: '悄悄话', icon: '💬', badge: unreadCount },
    { key: 'goal', label: '小目标', icon: '🎯' },
  ];

  function switchTab(key) {
    if (typeof setActiveTab === 'function') setActiveTab(key);
  }

  // ===== 未登录态 =====
  if (!isLoggedIn) {
    return renderLoginWall(navigate, showToast, requireLogin);
  }

  // ===== 主渲染 =====
  return (
    React.createElement('div', {
      style: {
        minHeight: '100vh',
        background: 'linear-gradient(180deg, ' + L_COLORS.bgTop + ' 0%, ' + L_COLORS.bgBottom + ' 100%)',
        paddingBottom: 70,
      }
    },
      // 顶部导航
      renderTopNav(navigate),

      // 情侣头图（每个 Tab 上方都显示）
      renderCoupleHeader(togetherDays, couple, currentUser),

      // 内容区
      renderContent({
        currentTab: currentTab,
        loading: loading,
        declarations: declarations,
        photos: photos,
        anniversaries: anniversaries,
        messages: messages,
        goals: goals,
        currentUser: currentUser,
        couple: couple,
        togetherDays: togetherDays,
        setShowPublish: setShowPublish,
        handleLike: handleLike,
        showToast: showToast,
        loadPhotos: loadPhotos,
        handlePhotoUploadClick: handlePhotoUploadClick,
        handleDeletePhoto: handleDeletePhoto,
        photoInputRef: photoInputRef,
        handlePhotoFileChange: handlePhotoFileChange,
        setShowAnnivForm: setShowAnnivForm,
        handleDeleteAnniv: handleDeleteAnniv,
        msgListRef: msgListRef,
        msgInput: msgInput,
        setMsgInput: setMsgInput,
        handleSendMsg: handleSendMsg,
        setShowGoalForm: setShowGoalForm,
        handleToggleGoal: handleToggleGoal,
        handleDeleteGoal: handleDeleteGoal,
        safeLogin: safeLogin,
      }),

      // 底部 Tab
      renderBottomTabs(tabs, currentTab, switchTab),

      // 发布宣言弹窗
      showPublish ? renderPublishModal({
        publishContent: publishContent,
        setPublishContent: setPublishContent,
        handlePublish: handlePublish,
        onClose: function() { setShowPublish(false); },
        submitting: submitting,
      }) : null,

      // 纪念日表单弹窗
      showAnnivForm ? renderAnnivModal({
        annivTitle: annivTitle,
        setAnnivTitle: setAnnivTitle,
        annivDate: annivDate,
        setAnnivDate: setAnnivDate,
        handleAdd: handleAddAnniv,
        onClose: function() { setShowAnnivForm(false); },
        submitting: submitting,
      }) : null,

      // 小目标表单弹窗
      showGoalForm ? renderGoalModal({
        goalTitle: goalTitle,
        setGoalTitle: setGoalTitle,
        handleAdd: handleAddGoal,
        onClose: function() { setShowGoalForm(false); },
        submitting: submitting,
      }) : null,

      // 动画样式
      React.createElement('style', null, `
        @keyframes lHeartPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.2); }
        }
        @keyframes lFloatUp {
          0% { opacity: 0; transform: translateY(20px) scale(0.5); }
          50% { opacity: 1; }
          100% { opacity: 0; transform: translateY(-80px) scale(1); }
        }
        @keyframes lFadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .l-fade-in {
          animation: lFadeIn 0.3s ease-out;
        }
      `)
    )
  );
}

// ========== 未登录引导 ==========
function renderLoginWall(navigate, showToast, requireLogin) {
  return React.createElement('div', {
    style: {
      minHeight: '100vh',
      background: 'linear-gradient(180deg, ' + L_COLORS.bgTop + ', ' + L_COLORS.bgBottom + ')',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: '0 24px',
    }
  },
    React.createElement('div', {
      onClick: function() { navigate('apps'); },
      style: {
        position: 'absolute', top: 14, left: 16,
        fontSize: 20, color: L_COLORS.primary, cursor: 'pointer',
      }
    }, '←'),
    React.createElement('div', { style: { fontSize: 64, marginBottom: 20, animation: 'lHeartPulse 1.5s ease-in-out infinite' } }, '💗'),
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center' } },
      React.createElement('div', { style: { fontSize: 22, fontWeight: 700, color: L_COLORS.primaryDark } }, '爱情空间'),
      React.createElement('span', {
        style: {
          display: 'inline-block', padding: '2px 8px',
          fontSize: 10, fontWeight: 600,
          background: '#FFE4EC', color: '#EC4899',
          borderRadius: 10, letterSpacing: 0.5,
        }
      }, 'v2五Tab版')
    ),
    React.createElement('div', { style: { fontSize: 13, color: L_COLORS.textTertiary, marginBottom: 28, textAlign: 'center', lineHeight: 1.6 } },
      '登录后即可开启专属二人世界',
      React.createElement('br'),
      '所有甜蜜记忆，只属于你们两个人'
    ),
    React.createElement('button', {
      onClick: function() { if (typeof requireLogin === 'function') requireLogin(function() {}); },
      style: {
        padding: '12px 48px', borderRadius: 24,
        background: L_COLORS.gradient1,
        color: '#fff', fontSize: 15, fontWeight: 600,
        border: 'none', cursor: 'pointer',
        boxShadow: '0 4px 16px rgba(255,107,157,0.4)',
      }
    }, '立即登录'),
    React.createElement('div', {
      onClick: function() { navigate('apps'); },
      style: { marginTop: 16, fontSize: 12, color: L_COLORS.textTertiary, cursor: 'pointer' }
    }, '返回应用中心')
  );
}

// ========== 顶部导航 ==========
function renderTopNav(navigate) {
  return React.createElement('div', {
    style: {
      padding: '14px 16px 10px',
      background: 'transparent',
    }
  },
    React.createElement('div', {
      style: { display: 'flex', alignItems: 'center', gap: 8 }
    },
      React.createElement('div', {
        onClick: function() { navigate('apps'); },
        style: { fontSize: 20, cursor: 'pointer', color: L_COLORS.primary, width: 28 }
      }, '←'),
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
          React.createElement('div', { style: { fontSize: 18, fontWeight: 700, color: L_COLORS.textPrimary } }, '爱情空间'),
          React.createElement('span', {
            style: {
              display: 'inline-block', padding: '2px 8px',
              fontSize: 10, fontWeight: 600,
              background: '#FFE4EC', color: '#EC4899',
              borderRadius: 10, letterSpacing: 0.5,
            }
          }, 'v2五Tab版')
        ),
        React.createElement('div', { style: { fontSize: 11, color: L_COLORS.primary, marginTop: 2 } }, '甜蜜记忆 · 永久珍藏')
      )
    )
  );
}

// ========== 情侣头图 ==========
function renderCoupleHeader(days, couple, currentUser) {
  var myName = (currentUser && currentUser.nickname) || '我';
  var partnerName = 'TA';
  if (couple) {
    if (couple.user1_id === (currentUser && currentUser.id)) {
      partnerName = couple.user2_name || 'TA';
    } else if (couple.user2_id === (currentUser && currentUser.id)) {
      partnerName = couple.user1_name || 'TA';
    } else if (couple.user2_name) {
      partnerName = couple.user2_name;
    }
  }
  return React.createElement('div', {
    style: {
      padding: '10px 20px 20px',
      textAlign: 'center',
    }
  },
    React.createElement('div', {
      style: {
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 10,
      }
    },
      React.createElement(LoveAvatar, { name: myName, size: 56, color: L_COLORS.primary }),
      React.createElement('div', { style: { position: 'relative' } },
        React.createElement('span', {
          style: { fontSize: 28, animation: 'lHeartPulse 1.5s ease-in-out infinite', display: 'inline-block' }
        }, '💗'),
        React.createElement('span', {
          style: {
            position: 'absolute', top: -6, left: -4, fontSize: 14,
            animation: 'lHeartPulse 1.5s ease-in-out infinite',
            animationDelay: '0.3s', opacity: 0.6,
          }
        }, '💕')
      ),
      React.createElement(LoveAvatar, { name: partnerName, size: 56, color: L_COLORS.blue })
    ),
    React.createElement('div', {
      style: { fontSize: 36, fontWeight: 800, color: L_COLORS.primary, letterSpacing: 1, lineHeight: 1.1 }
    }, days),
    React.createElement('div', { style: { fontSize: 12, color: L_COLORS.primaryLight, marginTop: 4 } }, '我们在一起已经'),
    React.createElement('div', { style: { fontSize: 11, color: L_COLORS.textTertiary, marginTop: 6 } }, 'DAYS TOGETHER')
  );
}

// ========== 底部 Tab ==========
function renderBottomTabs(tabs, currentTab, onSwitch) {
  return React.createElement('div', {
    style: {
      position: 'fixed', bottom: 0, left: 0, right: 0,
      background: '#fff',
      borderTop: '1px solid ' + L_COLORS.border,
      display: 'flex',
      paddingBottom: 'env(safe-area-inset-bottom, 0)',
      zIndex: 100,
      boxShadow: '0 -2px 10px rgba(255,107,157,0.06)',
    }
  },
    tabs.map(function(tab) {
      var active = currentTab === tab.key;
      return React.createElement('div', {
        key: tab.key,
        onClick: function() { onSwitch(tab.key); },
        style: {
          flex: 1, textAlign: 'center', padding: '8px 0 6px',
          cursor: 'pointer', position: 'relative',
        }
      },
        React.createElement('div', { style: { fontSize: 22, position: 'relative', display: 'inline-block' } },
          tab.icon,
          tab.badge > 0 ? React.createElement('span', {
            style: {
              position: 'absolute', top: -4, right: -10,
              minWidth: 16, height: 16, padding: '0 4px',
              borderRadius: 8, background: '#FF4757', color: '#fff',
              fontSize: 10, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxSizing: 'border-box',
            }
          }, tab.badge > 99 ? '99+' : tab.badge) : null
        ),
        React.createElement('div', {
          style: {
            fontSize: 10, marginTop: 2,
            color: active ? L_COLORS.primary : L_COLORS.textTertiary,
            fontWeight: active ? 600 : 400,
          }
        }, tab.label)
      );
    })
  );
}

// ========== 内容渲染 ==========
function renderContent(props) {
  var tab = props.currentTab;
  if (tab === 'dynamic') return renderDynamicTab(props);
  if (tab === 'album') return renderAlbumTab(props);
  if (tab === 'anniversary') return renderAnniversaryTab(props);
  if (tab === 'message') return renderMessageTab(props);
  if (tab === 'goal') return renderGoalTab(props);
  return null;
}

// ========== 动态 Tab ==========
function renderDynamicTab(props) {
  var declarations = props.declarations;
  var loading = props.loading;
  var handleLike = props.handleLike;
  var setShowPublish = props.setShowPublish;
  var safeLogin = props.safeLogin;

  return React.createElement('div', { style: { padding: '0 16px 20px' } },
    // 发布按钮
    React.createElement('button', {
      onClick: function() { safeLogin(function() { setShowPublish(true); }); },
      style: {
        width: '100%', padding: '12px 0',
        borderRadius: 12, border: 'none',
        background: L_COLORS.gradient1,
        color: '#fff', fontSize: 14, fontWeight: 500,
        cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(255,107,157,0.3)',
        marginBottom: 14,
      }
    }, '💌 发布爱情宣言'),

    // 列表
    loading ? (
      React.createElement('div', {
        style: { padding: '30px 0', textAlign: 'center', color: L_COLORS.primaryLight, fontSize: 13 }
      }, '加载中...')
    ) : declarations.length === 0 ? (
      React.createElement('div', {
        style: {
          background: '#fff', borderRadius: 12, padding: '40px 20px',
          textAlign: 'center', color: L_COLORS.primaryLight,
          boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
        }
      },
        React.createElement('div', { style: { fontSize: 32, marginBottom: 12 } }, '💝'),
        React.createElement('div', { style: { fontSize: 14, color: L_COLORS.textSecondary, marginBottom: 4 } }, '还没有宣言'),
        React.createElement('div', { style: { fontSize: 12, color: L_COLORS.textTertiary } }, '快来发布第一条吧～')
      )
    ) : (
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
        declarations.map(function(d) {
          return React.createElement(DecCard, {
            key: d.id, item: d, onLike: handleLike, showToast: props.showToast
          });
        })
      )
    )
  );
}

// ========== 宣言卡片 ==========
function DecCard(props) {
  var item = props.item;
  var onLike = props.onLike;
  var expandedState = useState(false);
  var expanded = expandedState[0];
  var setExpanded = expandedState[1];

  var content = item.content || '';
  var isLong = content.length > 80;
  var displayContent = expanded || !isLong ? content : content.slice(0, 80) + '...';

  return React.createElement('div', {
    className: 'card',
    style: {
      background: '#fff', borderRadius: 12, padding: '12px 0',
      boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
    }
  },
    // 头部
    React.createElement('div', {
      style: { display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px' }
    },
      React.createElement(LoveAvatar, {
        name: item.nickname || '匿名',
        size: 40,
        color: item.avatar_color || L_COLORS.primary
      }),
      React.createElement('div', { style: { flex: 1, minWidth: 0 } },
        React.createElement('div', { style: { fontSize: 14, fontWeight: 500, color: L_COLORS.textPrimary } },
          item.nickname || '匿名用户'
        ),
        React.createElement('div', { style: { fontSize: 11, color: L_COLORS.textTertiary, marginTop: 2 } },
          lFormatTime(item.created_at)
        )
      )
    ),

    // 正文
    React.createElement('div', { style: { padding: '10px 14px 12px' } },
      React.createElement('div', {
        style: {
          fontSize: 14, lineHeight: 1.6, color: L_COLORS.textPrimary,
          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
        }
      }, displayContent),
      isLong ? React.createElement('div', {
        onClick: function() { setExpanded(!expanded); },
        style: { fontSize: 12, fontWeight: 500, color: L_COLORS.primary, marginTop: 6, cursor: 'pointer' }
      }, expanded ? '收起' : '展开全文') : null
    ),

    // 图片
    item.images && item.images.length > 0 ? React.createElement('div', {
      style: { padding: '0 14px 12px', display: 'flex', flexWrap: 'wrap', gap: 6 }
    },
      item.images.map(function(img, idx) {
        var isSingle = item.images.length === 1;
        var bgStyle = img.url
          ? { backgroundImage: 'url(' + img.url + ')', backgroundSize: 'cover', backgroundPosition: 'center' }
          : { background: img.color || L_COLORS.primaryLight };
        return React.createElement('div', {
          key: idx,
          style: {
            width: isSingle ? '100%' : item.images.length === 2 ? 'calc(50% - 3px)' : 'calc(33.33% - 4px)',
            paddingBottom: isSingle ? '60%' : item.images.length === 2 ? 'calc(50% - 3px)' : 'calc(33.33% - 4px)',
            position: 'relative', borderRadius: 8, overflow: 'hidden',
            ...bgStyle,
          }
        });
      })
    ) : null,

    // 底部操作栏
    React.createElement('div', {
      style: {
        borderTop: '1px solid ' + L_COLORS.border,
        padding: '8px 14px 0',
        display: 'flex', gap: 16,
      }
    },
      React.createElement('div', {
        onClick: function() { onLike(item); },
        style: {
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
          padding: '6px 0', fontSize: 13, cursor: 'pointer',
          color: item.is_liked ? L_COLORS.primary : L_COLORS.textTertiary,
        }
      },
        React.createElement('span', { style: { fontSize: 16 } }, item.is_liked ? '💗' : '🤍'),
        item.likes_count || 0
      ),
      React.createElement('div', {
        style: {
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
          padding: '6px 0', fontSize: 13, color: L_COLORS.textTertiary,
        }
      },
        React.createElement('span', { style: { fontSize: 15 } }, '💬'),
        item.comments_count || 0
      )
    )
  );
}

// ========== 相册 Tab ==========
function renderAlbumTab(props) {
  var photos = props.photos;
  var handlePhotoUploadClick = props.handlePhotoUploadClick;
  var handleDeletePhoto = props.handleDeletePhoto;
  var photoInputRef = props.photoInputRef;
  var handlePhotoFileChange = props.handlePhotoFileChange;
  var safeLogin = props.safeLogin;

  // 按日期分组
  var groups = {};
  photos.forEach(function(p) {
    var date = (p.created_at || '').slice(0, 10);
    if (!groups[date]) groups[date] = [];
    groups[date].push(p);
  });
  var dates = Object.keys(groups).sort(function(a, b) { return b.localeCompare(a); });

  return React.createElement('div', { style: { padding: '0 16px 20px' } },
    // 上传按钮
    React.createElement('button', {
      onClick: function() { safeLogin(function() { handlePhotoUploadClick(); }); },
      style: {
        width: '100%', padding: '12px 0',
        borderRadius: 12, border: 'none',
        background: L_COLORS.gradient1,
        color: '#fff', fontSize: 14, fontWeight: 500,
        cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(255,107,157,0.3)',
        marginBottom: 14,
      }
    }, '📸 上传照片'),
    React.createElement('input', {
      ref: photoInputRef,
      type: 'file',
      accept: 'image/*',
      style: { display: 'none' },
      onChange: handlePhotoFileChange,
    }),

    photos.length === 0 ? (
      React.createElement('div', {
        style: {
          background: '#fff', borderRadius: 12, padding: '50px 20px',
          textAlign: 'center',
          boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
        }
      },
        React.createElement('div', { style: { fontSize: 36, marginBottom: 12 } }, '🖼️'),
        React.createElement('div', { style: { fontSize: 14, color: L_COLORS.textSecondary, marginBottom: 4 } }, '还没有照片'),
        React.createElement('div', { style: { fontSize: 12, color: L_COLORS.textTertiary } }, '记录美好瞬间，从第一张开始～')
      )
    ) : (
      dates.map(function(date) {
        return React.createElement('div', { key: date, style: { marginBottom: 16 } },
          React.createElement('div', {
            style: {
              fontSize: 12, color: L_COLORS.textTertiary, marginBottom: 8,
              paddingLeft: 4, display: 'flex', alignItems: 'center', gap: 6,
            }
          }, '📅 ', lFormatDate(date), ' · ', groups[date].length, '张'),
          React.createElement('div', {
            style: {
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 4,
            }
          },
            groups[date].map(function(p) {
              return React.createElement('div', {
                key: p.id,
                style: {
                  position: 'relative',
                  aspectRatio: '1 / 1',
                  borderRadius: 8,
                  overflow: 'hidden',
                  background: p.url
                    ? '#ffe4ec'
                    : L_COLORS.primaryLight,
                  backgroundImage: p.url ? 'url(' + p.url + ')' : 'none',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  cursor: 'pointer',
                },
                onDoubleClick: function() { handleDeletePhoto(p.id); },
                title: '双击删除'
              },
                p.url ? null : React.createElement('div', {
                  style: {
                    width: '100%', height: '100%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 28,
                  }
                }, '💗')
              );
            })
          )
        );
      })
    ),

    photos.length > 0 ? React.createElement('div', {
      style: { textAlign: 'center', marginTop: 8, fontSize: 12, color: L_COLORS.textTertiary }
    }, '共 ' + photos.length + ' 张照片 · 双击照片可删除') : null
  );
}

// ========== 纪念日 Tab ==========
function renderAnniversaryTab(props) {
  var anniversaries = props.anniversaries;
  var setShowAnnivForm = props.setShowAnnivForm;
  var handleDeleteAnniv = props.handleDeleteAnniv;
  var safeLogin = props.safeLogin;

  return React.createElement('div', { style: { padding: '0 16px 20px' } },
    React.createElement('button', {
      onClick: function() { safeLogin(function() { setShowAnnivForm(true); }); },
      style: {
        width: '100%', padding: '12px 0',
        borderRadius: 12, border: 'none',
        background: L_COLORS.gradient1,
        color: '#fff', fontSize: 14, fontWeight: 500,
        cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(255,107,157,0.3)',
        marginBottom: 14,
      }
    }, '🎀 添加纪念日'),

    anniversaries.length === 0 ? (
      React.createElement('div', {
        style: {
          background: '#fff', borderRadius: 12, padding: '50px 20px',
          textAlign: 'center',
          boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
        }
      },
        React.createElement('div', { style: { fontSize: 36, marginBottom: 12 } }, '🎀'),
        React.createElement('div', { style: { fontSize: 14, color: L_COLORS.textSecondary, marginBottom: 4 } }, '还没有纪念日'),
        React.createElement('div', { style: { fontSize: 12, color: L_COLORS.textTertiary } }, '添加值得纪念的日子吧～')
      )
    ) : (
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
        anniversaries.map(function(a) {
          var daysUntil = lDaysUntilNext(a.date);
          var totalDays = lCalculateDays(a.date);
          return React.createElement('div', {
            key: a.id,
            style: {
              background: '#fff', borderRadius: 12, padding: '14px 16px',
              boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
              display: 'flex', alignItems: 'center', gap: 12,
            }
          },
            React.createElement('div', {
              style: {
                width: 48, height: 48, borderRadius: 12,
                background: 'linear-gradient(135deg, #FFE4EC, #FFB6C1)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22, flexShrink: 0,
              }
            }, a.type === 'birthday' ? '🎂' : '💝'),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement('div', {
                style: { fontSize: 15, fontWeight: 600, color: L_COLORS.textPrimary, marginBottom: 4 }
              }, a.title),
              React.createElement('div', {
                style: { fontSize: 12, color: L_COLORS.textTertiary }
              }, '📅 ', lFormatDate(a.date), ' · 已过 ', totalDays, ' 天')
            ),
            React.createElement('div', { style: { textAlign: 'right', flexShrink: 0 } },
              React.createElement('div', {
                style: {
                  fontSize: 20, fontWeight: 700, color: L_COLORS.primary,
                  lineHeight: 1.1,
                }
              }, daysUntil === 0 ? 'Today!' : daysUntil),
              React.createElement('div', { style: { fontSize: 10, color: L_COLORS.textTertiary, marginTop: 2 } },
                daysUntil === 0 ? '就是今天' : '天后'
              )
            ),
            React.createElement('div', {
              onClick: function() { handleDeleteAnniv(a.id); },
              style: { fontSize: 12, color: L_COLORS.danger, cursor: 'pointer', marginLeft: 4 }
            }, '🗑️')
          );
        })
      )
    )
  );
}

// ========== 悄悄话 Tab ==========
function renderMessageTab(props) {
  var messages = props.messages;
  var currentUser = props.currentUser;
  var msgInput = props.msgInput;
  var setMsgInput = props.setMsgInput;
  var handleSendMsg = props.handleSendMsg;
  var msgListRef = props.msgListRef;
  var safeLogin = props.safeLogin;

  var myId = currentUser ? currentUser.id : 1;

  return React.createElement('div', {
    style: {
      display: 'flex', flexDirection: 'column',
      height: 'calc(100vh - 340px)',
      minHeight: 400,
    }
  },
    // 消息列表
    React.createElement('div', {
      ref: msgListRef,
      style: {
        flex: 1, overflowY: 'auto',
        padding: '12px 16px',
        display: 'flex', flexDirection: 'column', gap: 10,
      }
    },
      messages.length === 0 ? (
        React.createElement('div', {
          style: {
            textAlign: 'center', padding: '40px 20px',
            color: L_COLORS.primaryLight,
          }
        },
          React.createElement('div', { style: { fontSize: 32, marginBottom: 12 } }, '💌'),
          React.createElement('div', { style: { fontSize: 13 } }, '给TA写句悄悄话吧～'),
          React.createElement('div', { style: { fontSize: 11, opacity: 0.7, marginTop: 4 } }, '只有你们两个人能看到')
        )
      ) : (
        messages.map(function(m) {
          var isMine = m.sender_id === myId;
          return React.createElement('div', {
            key: m.id,
            style: {
              display: 'flex',
              flexDirection: isMine ? 'row-reverse' : 'row',
              gap: 8,
              alignItems: 'flex-end',
            }
          },
            React.createElement(LoveAvatar, {
              name: m.nickname || (isMine ? '我' : 'TA'),
              size: 32,
              color: isMine ? L_COLORS.primary : L_COLORS.blue,
            }),
            React.createElement('div', {
              style: {
                maxWidth: '70%',
                padding: '8px 12px',
                borderRadius: 16,
                background: isMine
                  ? L_COLORS.gradient1
                  : '#fff',
                color: isMine ? '#fff' : L_COLORS.textPrimary,
                fontSize: 14,
                lineHeight: 1.5,
                wordBreak: 'break-word',
                boxShadow: isMine
                  ? '0 2px 8px rgba(255,107,157,0.3)'
                  : '0 2px 8px rgba(255,107,157,0.08)',
                borderBottomRightRadius: isMine ? 4 : 16,
                borderBottomLeftRadius: isMine ? 16 : 4,
              }
            },
              React.createElement('div', { style: { whiteSpace: 'pre-wrap' } }, m.content),
              React.createElement('div', {
                style: {
                  fontSize: 9,
                  marginTop: 4,
                  opacity: 0.6,
                  textAlign: isMine ? 'right' : 'left',
                }
              }, lTimeOfDay(m.created_at))
            )
          );
        })
      )
    ),

    // 输入框
    React.createElement('div', {
      style: {
        padding: '10px 12px',
        background: '#fff',
        borderTop: '1px solid ' + L_COLORS.border,
        display: 'flex', alignItems: 'center', gap: 8,
      }
    },
      React.createElement('input', {
        type: 'text',
        value: msgInput,
        onChange: function(e) { setMsgInput(e.target.value); },
        onKeyPress: function(e) { if (e.key === 'Enter') { safeLogin(function() { handleSendMsg(); }); } },
        placeholder: '说点悄悄话...',
        style: {
          flex: 1, padding: '8px 14px',
          borderRadius: 20,
          border: '1px solid ' + L_COLORS.border,
          fontSize: 14, outline: 'none',
          background: L_COLORS.bgBottom,
        }
      }),
      React.createElement('button', {
        onClick: function() { safeLogin(function() { handleSendMsg(); }); },
        style: {
          padding: '8px 16px',
          borderRadius: 20,
          border: 'none',
          background: L_COLORS.gradient1,
          color: '#fff',
          fontSize: 13,
          fontWeight: 500,
          cursor: 'pointer',
        }
      }, '发送')
    )
  );
}

// ========== 小目标 Tab ==========
function renderGoalTab(props) {
  var goals = props.goals;
  var setShowGoalForm = props.setShowGoalForm;
  var handleToggleGoal = props.handleToggleGoal;
  var handleDeleteGoal = props.handleDeleteGoal;
  var safeLogin = props.safeLogin;

  var completedCount = goals.filter(function(g) { return g.completed; }).length;
  var totalCount = goals.length;
  var progress = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;

  return React.createElement('div', { style: { padding: '0 16px 20px' } },
    // 进度卡片
    React.createElement('div', {
      style: {
        background: '#fff', borderRadius: 12, padding: '16px',
        marginBottom: 14,
        boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
      }
    },
      React.createElement('div', {
        style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }
      },
        React.createElement('div', { style: { fontSize: 14, fontWeight: 600, color: L_COLORS.textPrimary } },
          '🎯 情侣小目标'
        ),
        React.createElement('div', { style: { fontSize: 12, color: L_COLORS.primary, fontWeight: 500 } },
          completedCount, ' / ', totalCount, ' 完成'
        )
      ),
      React.createElement('div', {
        style: {
          height: 8, borderRadius: 4,
          background: L_COLORS.border,
          overflow: 'hidden',
        }
      },
        React.createElement('div', {
          style: {
            height: '100%',
            width: progress + '%',
            background: L_COLORS.gradient1,
            borderRadius: 4,
            transition: 'width 0.3s',
          }
        })
      ),
      React.createElement('div', { style: { fontSize: 11, color: L_COLORS.textTertiary, marginTop: 6, textAlign: 'right' } },
        '完成率 ', progress, '%'
      )
    ),

    // 添加按钮
    React.createElement('button', {
      onClick: function() { safeLogin(function() { setShowGoalForm(true); }); },
      style: {
        width: '100%', padding: '12px 0',
        borderRadius: 12, border: 'none',
        background: L_COLORS.gradient1,
        color: '#fff', fontSize: 14, fontWeight: 500,
        cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(255,107,157,0.3)',
        marginBottom: 14,
      }
    }, '✨ 添加新目标'),

    // 目标列表
    goals.length === 0 ? (
      React.createElement('div', {
        style: {
          background: '#fff', borderRadius: 12, padding: '50px 20px',
          textAlign: 'center',
          boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
        }
      },
        React.createElement('div', { style: { fontSize: 36, marginBottom: 12 } }, '🎯'),
        React.createElement('div', { style: { fontSize: 14, color: L_COLORS.textSecondary, marginBottom: 4 } }, '还没有小目标'),
        React.createElement('div', { style: { fontSize: 12, color: L_COLORS.textTertiary } }, '立下flag，一起去完成吧～')
      )
    ) : (
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
        goals.map(function(g) {
          return React.createElement('div', {
            key: g.id,
            style: {
              background: '#fff', borderRadius: 10, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: '0 2px 8px rgba(255,107,157,0.08)',
              opacity: g.completed ? 0.6 : 1,
            }
          },
            React.createElement('div', {
              onClick: function() { handleToggleGoal(g); },
              style: {
                width: 22, height: 22,
                borderRadius: '50%',
                border: '2px solid ' + (g.completed ? L_COLORS.green : L_COLORS.border),
                background: g.completed ? L_COLORS.green : 'transparent',
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13,
                cursor: 'pointer',
                flexShrink: 0,
              }
            }, g.completed ? '✓' : ''),
            React.createElement('div', { style: { fontSize: 16, marginRight: 2 } }, g.icon || '🎯'),
            React.createElement('div', {
              style: {
                flex: 1, fontSize: 14,
                color: g.completed ? L_COLORS.textTertiary : L_COLORS.textPrimary,
                textDecoration: g.completed ? 'line-through' : 'none',
              }
            }, g.title),
            g.completed && g.completed_at ? React.createElement('div', {
              style: { fontSize: 10, color: L_COLORS.green, flexShrink: 0 }
            }, '✓ ' + lFormatTime(g.completed_at)) : null,
            React.createElement('div', {
              onClick: function() { handleDeleteGoal(g.id); },
              style: { fontSize: 12, color: L_COLORS.danger, cursor: 'pointer', padding: '0 4px' }
            }, '🗑️')
          );
        })
      )
    )
  );
}

// ========== 发布宣言弹窗 ==========
function renderPublishModal(props) {
  return React.createElement('div', {
    onClick: props.onClose,
    style: {
      position: 'fixed', inset: 0,
      background: 'rgba(0,0,0,0.5)',
      zIndex: 200,
      display: 'flex', alignItems: 'flex-end',
    }
  },
    React.createElement('div', {
      onClick: function(e) { e.stopPropagation(); },
      style: {
        width: '100%', background: '#fff',
        borderRadius: '16px 16px 0 0',
        maxHeight: '80vh', overflowY: 'auto',
      }
    },
      React.createElement('div', {
        style: {
          display: 'flex', alignItems: 'center',
          padding: '14px 16px',
          borderBottom: '1px solid ' + L_COLORS.border,
        }
      },
        React.createElement('div', {
          onClick: props.onClose,
          style: { fontSize: 14, color: L_COLORS.textSecondary, cursor: 'pointer', width: 40 }
        }, '取消'),
        React.createElement('div', {
          style: { flex: 1, textAlign: 'center', fontSize: 15, fontWeight: 600, color: L_COLORS.textPrimary }
        }, '发布爱情宣言'),
        React.createElement('div', {
          onClick: props.handlePublish,
          style: {
            fontSize: 14,
            color: props.submitting ? '#aaa' : L_COLORS.primary,
            fontWeight: 500, cursor: props.submitting ? 'not-allowed' : 'pointer',
            width: 40, textAlign: 'right',
          }
        }, props.submitting ? '...' : '发布')
      ),
      React.createElement('div', { style: { padding: '16px' } },
        React.createElement('textarea', {
          value: props.publishContent,
          onChange: function(e) { props.setPublishContent(e.target.value); },
          placeholder: '想对TA说些什么...',
          rows: 6,
          style: {
            width: '100%', padding: '12px',
            borderRadius: 10,
            border: '1px solid ' + L_COLORS.border,
            fontSize: 15, lineHeight: 1.6,
            outline: 'none',
            resize: 'vertical', minHeight: 120,
            boxSizing: 'border-box',
            fontFamily: 'inherit',
          }
        }),
        React.createElement('div', {
          style: { marginTop: 8, fontSize: 12, color: L_COLORS.textTertiary, textAlign: 'right' }
        }, props.publishContent.length, ' 字')
      )
    )
  );
}

// ========== 纪念日弹窗 ==========
function renderAnnivModal(props) {
  return React.createElement('div', {
    onClick: props.onClose,
    style: {
      position: 'fixed', inset: 0,
      background: 'rgba(0,0,0,0.5)',
      zIndex: 200,
      display: 'flex', alignItems: 'flex-end',
    }
  },
    React.createElement('div', {
      onClick: function(e) { e.stopPropagation(); },
      style: {
        width: '100%', background: '#fff',
        borderRadius: '16px 16px 0 0',
        maxHeight: '70vh', overflowY: 'auto',
      }
    },
      React.createElement('div', {
        style: {
          display: 'flex', alignItems: 'center',
          padding: '14px 16px',
          borderBottom: '1px solid ' + L_COLORS.border,
        }
      },
        React.createElement('div', {
          onClick: props.onClose,
          style: { fontSize: 14, color: L_COLORS.textSecondary, cursor: 'pointer', width: 40 }
        }, '取消'),
        React.createElement('div', {
          style: { flex: 1, textAlign: 'center', fontSize: 15, fontWeight: 600, color: L_COLORS.textPrimary }
        }, '添加纪念日'),
        React.createElement('div', {
          onClick: props.handleAdd,
          style: {
            fontSize: 14,
            color: props.submitting ? '#aaa' : L_COLORS.primary,
            fontWeight: 500, cursor: props.submitting ? 'not-allowed' : 'pointer',
            width: 40, textAlign: 'right',
          }
        }, props.submitting ? '...' : '保存')
      ),
      React.createElement('div', { style: { padding: '16px' } },
        React.createElement('div', { style: { marginBottom: 14 } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6, color: L_COLORS.textPrimary } }, '标题 *'),
          React.createElement('input', {
            type: 'text', value: props.annivTitle,
            onChange: function(e) { props.setAnnivTitle(e.target.value); },
            placeholder: '如：在一起的日子 / 对方生日',
            style: {
              width: '100%', padding: '10px 12px',
              borderRadius: 8,
              border: '1px solid ' + L_COLORS.border,
              fontSize: 14, outline: 'none', boxSizing: 'border-box',
            }
          })
        ),
        React.createElement('div', { style: { marginBottom: 8 } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6, color: L_COLORS.textPrimary } }, '日期 *'),
          React.createElement('input', {
            type: 'date', value: props.annivDate,
            onChange: function(e) { props.setAnnivDate(e.target.value); },
            style: {
              width: '100%', padding: '10px 12px',
              borderRadius: 8,
              border: '1px solid ' + L_COLORS.border,
              fontSize: 14, outline: 'none', boxSizing: 'border-box',
              fontFamily: 'inherit',
            }
          })
        ),
        React.createElement('div', { style: { fontSize: 11, color: L_COLORS.textTertiary, marginTop: 8 } },
          '💡 每年都会自动循环计算倒计时哦～'
        )
      )
    )
  );
}

// ========== 小目标弹窗 ==========
function renderGoalModal(props) {
  return React.createElement('div', {
    onClick: props.onClose,
    style: {
      position: 'fixed', inset: 0,
      background: 'rgba(0,0,0,0.5)',
      zIndex: 200,
      display: 'flex', alignItems: 'flex-end',
    }
  },
    React.createElement('div', {
      onClick: function(e) { e.stopPropagation(); },
      style: {
        width: '100%', background: '#fff',
        borderRadius: '16px 16px 0 0',
        maxHeight: '60vh', overflowY: 'auto',
      }
    },
      React.createElement('div', {
        style: {
          display: 'flex', alignItems: 'center',
          padding: '14px 16px',
          borderBottom: '1px solid ' + L_COLORS.border,
        }
      },
        React.createElement('div', {
          onClick: props.onClose,
          style: { fontSize: 14, color: L_COLORS.textSecondary, cursor: 'pointer', width: 40 }
        }, '取消'),
        React.createElement('div', {
          style: { flex: 1, textAlign: 'center', fontSize: 15, fontWeight: 600, color: L_COLORS.textPrimary }
        }, '添加小目标'),
        React.createElement('div', {
          onClick: props.handleAdd,
          style: {
            fontSize: 14,
            color: props.submitting ? '#aaa' : L_COLORS.primary,
            fontWeight: 500, cursor: props.submitting ? 'not-allowed' : 'pointer',
            width: 40, textAlign: 'right',
          }
        }, props.submitting ? '...' : '保存')
      ),
      React.createElement('div', { style: { padding: '16px' } },
        React.createElement('div', { style: { marginBottom: 8 } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6, color: L_COLORS.textPrimary } }, '目标内容 *'),
          React.createElement('input', {
            type: 'text', value: props.goalTitle,
            onChange: function(e) { props.setGoalTitle(e.target.value); },
            placeholder: '如：一起看一场电影 / 一起旅行',
            style: {
              width: '100%', padding: '10px 12px',
              borderRadius: 8,
              border: '1px solid ' + L_COLORS.border,
              fontSize: 14, outline: 'none', boxSizing: 'border-box',
            }
          })
        ),
        React.createElement('div', {
          style: { marginTop: 10, fontSize: 11, color: L_COLORS.textTertiary, lineHeight: 1.5 }
        }, '💡 完成后点击左侧圆圈打卡，一起实现每一个小目标～')
      )
    )
  );
}

window.LovePage = LovePage;