/**
 * 客户信息展示组件
 * 作者: 阿瑞
 * 功能: 提供客户详细信息展示
 * 版本: 1.0.0
 */

'use client';

import React from 'react';
import { Customer } from '@/models/team/types/old/customer';
import { MdPerson, MdPhone, MdCake, MdCalendarToday, MdAccountBalanceWallet } from 'react-icons/md';
import { FaWeixin } from 'react-icons/fa';
import { useThemeMode } from '@/store/settingStore';
import { ThemeMode } from '@/types/enum';
import { formatDate } from '@/utils';

interface CustomerSelectorInfoProps {
  customer: Customer | null;
}

/**
 * 格式化数值
 */
const formatNumber = (value: number | undefined | null): string => {
  if (value === undefined || value === null) return '0.00';
  // 确保value是数字类型
  const numValue = Number(value);
  // 检查是否为有效数字
  if (isNaN(numValue)) return '0.00';
  return numValue.toFixed(2);
};

/**
 * 客户详细信息展示组件
 */
const CustomerSelectorInfo: React.FC<CustomerSelectorInfoProps> = ({ customer }) => {
  // 主题模式
  const themeMode = useThemeMode();
  const isDarkMode = themeMode === ThemeMode.Dark;

  if (!customer) {
    return null;
  }

  return (
    <div className={`
      p-3 rounded-lg border
      ${isDarkMode ? 'bg-blue-900/10 border-blue-800/30' : 'bg-blue-50 border-blue-100'}
    `}>
      <div className="flex items-start">
        <div className={`
          flex items-center justify-center w-10 h-10 rounded-full mr-3 shrink-0
          ${isDarkMode ? 'bg-blue-600/30' : 'bg-blue-100'}
          text-blue-600 dark:text-blue-400
        `}>
          <MdPerson size={24} />
        </div>
        
        <div className="flex-1">
          {/* 客户名称和性别 */}
          <div className="flex items-center mb-1">
            <h3 className="text-base font-medium text-gray-800 dark:text-white">
              {customer.name}
            </h3>
            {customer.gender && (
              <span className={`
                ml-2 text-xs px-1.5 py-0.5 rounded-full 
                ${customer.gender === '男'
                  ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300'
                  : 'bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300'
                }
              `}>
                {customer.gender}
              </span>
            )}
          </div>
          
          {/* 客户信息栏目 */}
          <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
            {/* 电话 */}
            {customer.phone && (
              <div className="flex items-center text-gray-600 dark:text-gray-300">
                <MdPhone className="mr-1 text-gray-500 dark:text-gray-400" size={14} />
                <span>{customer.phone}</span>
              </div>
            )}
            
            {/* 微信 */}
            {customer.wechat && (
              <div className="flex items-center text-gray-600 dark:text-gray-300">
                <FaWeixin className="mr-1 text-gray-500 dark:text-gray-400" size={14} />
                <span>{customer.wechat}</span>
              </div>
            )}
            
            {/* 生日 */}
            {customer.birthday && (
              <div className="flex items-center text-gray-600 dark:text-gray-300">
                <MdCake className="mr-1 text-gray-500 dark:text-gray-400" size={14} />
                <span>生日: {formatDate(customer.birthday, 'MM-DD')}</span>
              </div>
            )}
            
            {/* 加粉日期 */}
            {customer.followDate && (
              <div className="flex items-center text-gray-600 dark:text-gray-300">
                <MdCalendarToday className="mr-1 text-gray-500 dark:text-gray-400" size={14} />
                <span>加粉: {formatDate(customer.followDate, 'YYYY-MM-DD')}</span>
              </div>
            )}
          </div>
          
          {/* 余额信息 */}
          <div className="mt-2 pt-2 border-t border-blue-200/30 dark:border-blue-700/30 flex justify-between items-center">
            <div className="flex items-center text-gray-600 dark:text-gray-300">
              <MdAccountBalanceWallet className="mr-1 text-gray-500 dark:text-gray-400" size={14} />
              <span className="text-sm">账户余额:</span>
            </div>
            <span className={`
              text-sm font-medium 
              ${customer.balance > 0 
                ? 'text-green-600 dark:text-green-400' 
                : 'text-gray-600 dark:text-gray-400'}
            `}>
              ¥{formatNumber(customer.balance)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CustomerSelectorInfo;
