import { useNavigate } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ChevronLeft, Users, TrendingUp, Gift, ChevronRight, Share2 } from 'lucide-react'
import { partnerInfo, partnerProducts } from '@/mock/mineData'

export default function PartnerCenterPage() {
  const navigate = useNavigate()

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white px-4 py-3 flex items-center border-b border-gray-100">
        <button onClick={() => navigate(-1)} className="p-1">
          <ChevronLeft size={24} className="text-gray-600" />
        </button>
        <h1 className="flex-1 text-center font-bold text-gray-800">合伙人中心</h1>
        <div className="w-6" />
      </div>

      <div className="p-4">
        <div className="bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl p-4 text-white mb-4">
          <div className="flex items-center gap-2 mb-4">
            <Users size={20} />
            <span className="font-medium">{partnerInfo.level}</span>
          </div>
          
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <p className="text-2xl font-bold">¥{partnerInfo.commission.toLocaleString()}</p>
              <p className="text-xs text-primary-100">累计佣金</p>
            </div>
            <div>
              <p className="text-2xl font-bold">{partnerInfo.orders}</p>
              <p className="text-xs text-primary-100">推广订单</p>
            </div>
            <div>
              <p className="text-2xl font-bold">{partnerInfo.teamSize}</p>
              <p className="text-xs text-primary-100">团队人数</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4 mb-4">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-gray-800">本月目标</h3>
            <span className="text-sm text-gray-500">
              ¥{partnerInfo.monthlyProgress.toLocaleString()} / ¥{partnerInfo.monthlyTarget.toLocaleString()}
            </span>
          </div>
          <div className="h-3 bg-gray-100 rounded-full overflow-hidden">
            <motion.div
              className="h-full bg-gradient-to-r from-primary-400 to-primary-500 rounded-full"
              initial={{ width: 0 }}
              animate={{ width: `${(partnerInfo.monthlyProgress / partnerInfo.monthlyTarget) * 100}%` }}
              transition={{ duration: 1, ease: 'easeOut' }}
            />
          </div>
          <p className="text-xs text-gray-400 mt-2">
            还差 ¥{(partnerInfo.monthlyTarget - partnerInfo.monthlyProgress).toLocaleString()} 达成本月目标
          </p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4 mb-4">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-gray-800">选品推广</h3>
            <ChevronRight size={20} className="text-gray-400" />
          </div>
          <div className="space-y-3">
            {partnerProducts.map((product) => (
              <motion.div
                key={product.id}
                className="flex gap-3 p-3 bg-gray-50 rounded-xl"
                whileTap={{ scale: 0.98 }}
              >
                <img
                  src={product.image}
                  alt={product.title}
                  className="w-16 h-16 rounded-lg object-cover"
                />
                <div className="flex-1">
                  <h4 className="font-medium text-gray-800 text-sm">{product.title}</h4>
                  <p className="text-xs text-gray-500 mt-1">已售 {product.sales} 件</p>
                  <p className="text-sm text-primary-500 font-medium mt-1">
                    佣金 ¥{product.commission.toLocaleString()}
                  </p>
                </div>
                <motion.button
                  className="self-center p-2 rounded-full bg-primary-50 text-primary-500"
                  whileTap={{ scale: 0.9 }}
                >
                  <Share2 size={18} />
                </motion.button>
              </motion.div>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <motion.div
            className="bg-white rounded-xl shadow-sm p-4 text-center"
            whileTap={{ scale: 0.98 }}
          >
            <TrendingUp size={24} className="mx-auto text-primary-500 mb-2" />
            <p className="text-sm text-gray-600">推广数据</p>
          </motion.div>
          <motion.div
            className="bg-white rounded-xl shadow-sm p-4 text-center"
            whileTap={{ scale: 0.98 }}
          >
            <Gift size={24} className="mx-auto text-primary-500 mb-2" />
            <p className="text-sm text-gray-600">奖励中心</p>
          </motion.div>
        </div>
      </div>
    </div>
  )
}