import React from 'react';
import { motion } from 'framer-motion';
import { CheckCircle, DollarSign } from 'lucide-react';

export type PaymentTheme = 'emerald' | 'rose' | 'amber' | 'violet';

interface PaymentCardProps {
  id: string;
  planCode: string;
  quantity: number;
  pricePerMeter: number;
  amount: number;
  theme?: PaymentTheme;
  confirming?: boolean;
  onConfirm: (id: string) => void;
  index?: number;
}

const themeConfig = {
  emerald: {
    amountColor: 'text-emerald-600',
    buttonBg: 'bg-green-500 hover:bg-green-600'
  },
  rose: {
    amountColor: 'text-rose-600',
    buttonBg: 'bg-green-500 hover:bg-green-600'
  },
  amber: {
    amountColor: 'text-amber-600',
    buttonBg: 'bg-amber-500 hover:bg-amber-600'
  },
  violet: {
    amountColor: 'text-violet-600',
    buttonBg: 'bg-violet-500 hover:bg-violet-600'
  }
};

export function PaymentCard({
  id,
  planCode,
  quantity,
  pricePerMeter,
  amount,
  theme = 'emerald',
  confirming = false,
  onConfirm,
  index = 0
}: PaymentCardProps) {
  const config = themeConfig[theme];

  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        delay: Math.min(index * 0.03, 0.2),
        duration: 0.25,
        ease: [0.25, 0.46, 0.45, 0.94]
      }}
      className="bg-white rounded-xl shadow-sm p-4 sm:p-5 border border-gray-200"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-[10px] sm:text-xs text-gray-400">{planCode || '-'}</span>
          </div>
          <p className="text-xs sm:text-sm text-gray-500">
            已完成: {quantity}米 × ¥{pricePerMeter}/米
          </p>
        </div>
        <div className="text-right flex-shrink-0">
          <p className={`text-lg sm:text-xl md:text-2xl font-bold ${config.amountColor}`}>
            ¥{amount.toLocaleString()}
          </p>
        </div>
      </div>
      <div className="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-gray-100 flex justify-end">
        <motion.button
          whileTap={{ scale: 0.97 }}
          onClick={() => onConfirm(id)}
          disabled={confirming}
          className={`flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 ${config.buttonBg} text-white rounded-lg transition-colors disabled:opacity-50 text-xs sm:text-sm will-change-transform`}
        >
          <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
          {confirming ? '确认中...' : '确认结款'}
        </motion.button>
      </div>
    </motion.div>
  );
}

/**
 * 待结款总额摘要卡片
 */
interface PaymentSummaryCardProps {
  totalAmount: number;
  theme?: PaymentTheme;
}

const summaryThemeConfig = {
  emerald: {
    gradient: 'from-emerald-500 to-green-600',
    textColor: 'text-emerald-100'
  },
  rose: {
    gradient: 'from-rose-500 to-pink-500',
    textColor: 'text-rose-100'
  },
  amber: {
    gradient: 'from-amber-500 to-orange-500',
    textColor: 'text-amber-100'
  },
  violet: {
    gradient: 'from-violet-400 to-fuchsia-400',
    textColor: 'text-violet-100'
  }
};

export function PaymentSummaryCard({ totalAmount, theme = 'emerald' }: PaymentSummaryCardProps) {
  const config = summaryThemeConfig[theme];

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`bg-gradient-to-r ${config.gradient} rounded-xl p-4 sm:p-5 md:p-6 text-white mb-4 sm:mb-5 md:mb-6`}
    >
      <div className="flex items-center gap-2 sm:gap-3">
        <DollarSign className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
        <div>
          <p className={`${config.textColor} text-xs sm:text-sm`}>待结款总额</p>
          <p className="text-2xl sm:text-3xl md:text-4xl font-bold">¥{totalAmount.toLocaleString()}</p>
        </div>
      </div>
    </motion.div>
  );
}
