import React from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { useAuthStore } from '../../stores/auth';
import { usePointsStore } from '../../stores/points';
import './index.scss';

const MENU_ITEMS = [
  { label: '积分商城', icon: '🎁', bg: '#FDEAEA' },
  { label: '我的订单', icon: '📦', bg: '#E8F0F8' },
  { label: '就诊人管理', icon: '👨‍👩‍👧', bg: '#F0DDD4' },
  { label: '我的报告', icon: '📄', bg: '#E8F0E8' },
  { label: '健康记录', icon: '📝', bg: '#E8F0F8' },
  { label: '诊断记录', icon: '📋', bg: '#E8F0E8' },
  { label: '我的随访', icon: '🏥', bg: '#F3E8F8' },
  { label: '用药提醒', icon: '💊', bg: '#FFF3E0' },
  { label: '透析记录', icon: '💉', bg: '#E8F0F8' },
  { label: '透析处方', icon: '💊', bg: '#E8F0E8' },
  { label: '知情同意', icon: '📋', bg: '#F3E8F8' },
  { label: '积分明细', icon: '📊', bg: '#F0DDD4' },
  { label: '我的预约', icon: '📅', bg: '#E8F0F8' },
  { label: '在线咨询', icon: '💬', bg: '#E8F0E8' },
  { label: '设置', icon: '⚙️', bg: '#f0f0f0' },
];

const MENU_PATHS: Record<string, string> = {
  '积分商城': '/pages/mall/index',
  '我的订单': '/pages/pkg-mall/orders/index',
  '积分明细': '/pages/pkg-mall/detail/index',
  '就诊人管理': '/pages/pkg-profile/family/index',
  '我的报告': '/pages/pkg-profile/reports/index',
  '健康记录': '/pages/pkg-profile/health-records/index',
  '诊断记录': '/pages/pkg-profile/diagnoses/index',
  '我的随访': '/pages/pkg-profile/followups/index',
  '用药提醒': '/pages/pkg-profile/medication/index',
  '透析记录': '/pages/pkg-profile/dialysis-records/index',
  '透析处方': '/pages/pkg-profile/dialysis-prescriptions/index',
  '知情同意': '/pages/pkg-profile/consents/index',
  '我的预约': '/pages/pkg-appointment/index',
  '在线咨询': '/pages/consultation/index',
  '设置': '/pages/pkg-profile/settings/index',
};

export default function Profile() {
  const { user, logout } = useAuthStore();
  const { account: pointsAccount, checkinStatus: checkinInfo, refresh: refreshPoints } = usePointsStore();

  useDidShow(() => {
    refreshPoints();
  });

  const handleMenuClick = (label: string) => {
    const path = MENU_PATHS[label];
    if (path) Taro.navigateTo({ url: path });
  };

  const handleLogout = () => {
    Taro.showModal({
      title: '退出登录',
      content: '确定要退出登录吗？',
    }).then((res) => {
      if (res.confirm) {
        logout();
      }
    });
  };

  return (
    <View className='profile-page'>
      {/* 用户信息卡片 */}
      <View className='profile-user-card'>
        <View className='profile-avatar'>
          <Text className='profile-avatar-icon'>👤</Text>
        </View>
        <View className='profile-user-info'>
          <Text className='profile-name'>{user?.display_name || '未登录'}</Text>
          <Text className='profile-phone'>{user?.phone || ''}</Text>
        </View>
      </View>

      {/* 积分 + 打卡 — 两个独立卡片并排 */}
      <View className='profile-stats-row'>
        <View className='stat-card'>
          <Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
          <Text className='stat-label'>健康积分</Text>
        </View>
        <View className='stat-card'>
          <Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}天</Text>
          <Text className='stat-label'>连续打卡</Text>
        </View>
      </View>

      {/* 菜单 */}
      <View className='profile-menu'>
        {MENU_ITEMS.map((item) => (
          <View
            className='menu-item'
            key={item.label}
            onClick={() => handleMenuClick(item.label)}
          >
            <View className='menu-icon' style={`background:${item.bg};`}>
              <Text className='menu-icon-text'>{item.icon}</Text>
            </View>
            <Text className='menu-label'>{item.label}</Text>
            <Text className='menu-arrow'>›</Text>
          </View>
        ))}
      </View>

      {/* 退出登录 */}
      <View className='profile-logout' onClick={handleLogout}>
        <Text className='logout-text'>退出登录</Text>
      </View>
    </View>
  );
}